Merge pull request #19 from amphineko/gh/amphineko/0/base

feat: replace with more generic(?) background

.devcontainer/devcontainer.json

@@ -20,5 +20,8 @@
                 }
             }
         }
-    }
+    },
+    "forwardPorts": [
+        5173
+    ]
 }

src/components/display/accounts.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import { Dimmed, Redacted } from '../typography'
 import { Capsule } from './capsule'
+import { BORDER_RADIUS } from '../../lib/css'
 
 const Account = ({
     children,
@@ -41,7 +42,7 @@ const Category = ({ children, title }: PropsWithChildren<{ title: string }>) =>
             }
 
             .title {
-                color: #eee;
+                color: #333;
                 font-size: 1rem;
             }
 
@@ -61,15 +62,26 @@ const Category = ({ children, title }: PropsWithChildren<{ title: string }>) =>
     </div>
 )
 
-const Container = ({ children }: PropsWithChildren) => (
+const Container = ({
+    background,
+    children,
+}: PropsWithChildren<{
+    background?: string
+}>) => (
     <div className="container">
         {children}
         <style jsx>{`
             .container {
+                ${background ? `background: url(${background});` : ''}
+                background-attachment: fixed;
+                background-color: #f5f5f5;
+                border-radius: ${BORDER_RADIUS};
+                box-shadow: 0 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
                 gap: 1rem;
+                padding: 1rem;
             }
         `}</style>
     </div>

src/components/display/footer.tsx

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react'
 import { IconType } from 'react-icons'
 import { TbExternalLink } from 'react-icons/tb'
+import { BORDER_RADIUS } from '../../lib/css'
+import Background from '../../assets/images/blueprint-footer.svg'
 
 export const FooterParagraph = ({
     backgroundColor,
@@ -64,6 +66,9 @@ export const Footer = ({ children }: PropsWithChildren) => (
         <footer className="footer">{children}</footer>
         <style jsx>{`
             .footer {
+                background: url(${Background});
+                background-attachment: fixed;
+                border-radius: ${BORDER_RADIUS};
                 margin-top: 1rem;
             }
         `}</style>

src/components/display/header.tsx

@@ -190,10 +190,12 @@ const ProfilePicture = ({ avif, jpeg, png, webp }: ProfilePictureSources) => (
 )
 
 export const Header = ({
+    background,
     children,
     profileName,
     profilePicture,
 }: PropsWithChildren<{
+    background?: string
     profileName: ReactNode
     profilePicture: ProfilePictureSources
 }>) => (
@@ -239,7 +241,9 @@ export const Header = ({
             }
 
             .column-names {
-                background: #f5f5f5;
+                ${background ? `background: url(${background});` : ''}
+                background-attachment: fixed;
+                background-color: #f5f5f5;
                 border-radius: ${BORDER_RADIUS};
                 box-shadow: 0 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
                 flex-basis: 65%;

src/components/layout/index.tsx

@@ -18,12 +18,22 @@ export const Column = ({ children, width }: PropsWithChildren<{ width?: string }
     </>
 )
 
-export const Row = ({ children, style }: PropsWithChildren<{ breakpoint?: string; style?: ReactNode }>) => (
+export const Row = ({
+    background,
+    children,
+    style,
+}: PropsWithChildren<{
+    background?: string
+    breakpoint?: string
+    style?: ReactNode
+}>) => (
     <>
         <section className="block">{children}</section>
         <style jsx>{`
             .block {
-                background: #ffffffee;
+                ${background ? `background: url(${background});` : ''}
+                background-attachment: fixed;
+                background-color: #ffffffee;
                 border-radius: ${BORDER_RADIUS};
                 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.25);
 

src/components/typography/index.tsx

@@ -4,12 +4,19 @@ import { classnames } from '../../lib/classnames'
 import RedactedOtf from '../../assets/fonts/redacted/otf/RedactedScript-Bold.otf'
 import RedactedTtf from '../../assets/fonts/redacted/ttf/RedactedScript-Bold.ttf'
 import RedactedWoff2 from '../../assets/fonts/redacted/woff/RedactedScript-Bold.woff2'
+import { TbExternalLink } from 'react-icons/tb'
 
-export const Description = ({ children }: PropsWithChildren) => (
+export const Description = ({
+    background,
+    children,
+}: PropsWithChildren<{
+    background?: string
+}>) => (
     <>
         <div className="description">{children}</div>
         <style jsx>{`
             .description {
+                ${background ? `background: url(${background});` : ''}
                 display: block;
                 padding: 1em;
             }
@@ -60,6 +67,28 @@ export const Dimmed = ({ children }: PropsWithChildren) => (
     </>
 )
 
+export const ExternalLink = ({ children, href }: PropsWithChildren<{ href: string }>) => (
+    <>
+        <a className="ext-link" href={href} rel="noopener noreferrer" target="_blank">
+            {children}
+            <span className="external-link-icon">
+                <TbExternalLink />
+            </span>
+        </a>
+        <style jsx>{`
+            .ext-link {
+                color: inherit;
+            }
+
+            .external-link-icon {
+                font-size: 0.75em;
+                margin-left: 0.5em;
+                vertical-align: 0.25em;
+            }
+        `}</style>
+    </>
+)
+
 export const Paragraph = ({ children }: PropsWithChildren) => (
     <>
         <p className="paragraph">{children}</p>

src/config.tsx

@@ -14,7 +14,15 @@ import ProfilePictureJpeg from './assets/images/amphineko.png?format=jpeg'
 import ProfilePicturePng from './assets/images/amphineko.png?format=png'
 import ProfilePictureWebp from './assets/images/amphineko.png?format=webp'
 import { ProfileNameStandout, ProfilePictureSources } from './components/display/header'
-import { Description, DescriptionTitle, Paragraph, Redacted } from './components/typography'
+import { Description, DescriptionTitle, ExternalLink, Paragraph } from './components/typography'
+import PanelBackground from './assets/images/blueprint-panels.svg'
+import FooterBackground from './assets/images/blueprint-footer.svg'
+import PageBackground from './assets/images/blueprint-bg.svg'
+import { Row } from './components/layout'
+
+export const PANEL_BACKGROUND = PanelBackground
+export const FOOTER_BACKGROUND = FooterBackground
+export const PAGE_BACKGROUND = PageBackground
 
 export const PROFILE_PICTURE: ProfilePictureSources = {
     src: ProfilePictureOriginal,
@@ -157,27 +165,26 @@ export const ACCOUNTS: Accounts[] = [
 ]
 
 export const DESCRIPTION_PARAGRAPHS = (
-    <>
+    <Row background={PANEL_BACKGROUND}>
         <Description>
             <DescriptionTitle smallCaps>what am i doing?</DescriptionTitle>
-            <Paragraph>
-                Network Enginner at Meta Platforms (<Redacted hoverToShow>Facebook</Redacted>) since 2022.
-            </Paragraph>
-            <Paragraph>Passionate full-stack software developer and open-source contributor.</Paragraph>
-            <Paragraph>
-                <del>Amautar</del> network engineer operating own Internet autonomous systems.
-            </Paragraph>
+            <Paragraph>FAANG network enginner since 2022.</Paragraph>
+            <Paragraph>passionate full-stack software developer and open-source contributor.</Paragraph>
+            <Paragraph>amateur network engineer operating own Internet autonomous systems.</Paragraph>
         </Description>
         <Description>
             <DescriptionTitle smallCaps>what do i love?</DescriptionTitle>
-            <Paragraph>Ardently love of FPS, simulation and AVG.</Paragraph>
-            <Paragraph>Rhythm game is LIFE!</Paragraph>
-            <Paragraph>Retired and mission collection only Ingress agent.</Paragraph>
+            <Paragraph>ardently love of FPS, simulation and AVG.</Paragraph>
+            <Paragraph>rhythm game is LIFE!</Paragraph>
+            <Paragraph>
+                retired and mission-collection only{' '}
+                <ExternalLink href="https://en.wikipedia.org/wiki/Ingress_(video_game)">Ingress</ExternalLink> agent.
+            </Paragraph>
             <Paragraph>
-                <del className="deleted">Dreamed to be a civil aviation pilot.</del>
+                <del className="deleted">dreamed to be a civil aviation pilot.</del>
             </Paragraph>
         </Description>
-    </>
+    </Row>
 )
 
 export const COPYRIGHT = 'Copyright © 2015-2024 amphineko. Illustrations have their own licenses.'