"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", br: "br", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "When I set out to rebuild my personal portfolio, I wanted something that would showcase both my technical skills and personality. After considering various frameworks, I settled on Next.js 15 with a custom architecture that balances performance, maintainability, and visual appeal. Here's how I approached the key architectural decisions and what I learned along the way." }), "\n", _jsx(_components.h2, { children: "Project Structure: Keeping It Clean" }), "\n", _jsx(_components.p, { children: "The foundation of any good project is its structure. I opted for Next.js's App Router with a clear separation of concerns:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "code-highlight", children: [_jsx(_components.span, { className: "code-line line-number", line: "1", children: "src/\n" }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "├── app/\n" }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "│ ├── components/ # Reusable UI components\n" }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "│ ├── lib/ # Utility functions and data fetching\n" }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "│ ├── blog/[slug]/ # Dynamic blog post routing\n" }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "│ ├── layout.tsx # Root layout with providers\n" }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "│ └── page.tsx # Homepage composition\n" }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "├── globals.css # Global styles and CSS variables\n" }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "└── public/ # Static assets\n" })] }) }), "\n", _jsxs(_components.p, { children: ["This structure keeps components focused and makes the codebase easy to navigate. The ", _jsx(_components.code, { children: "lib" }), " folder contains utilities like my posts fetcher, while components remain purely presentational."] }), "\n", _jsx(_components.h2, { children: "Typography and Design System" }), "\n", _jsx(_components.p, { children: "One of my first decisions was establishing a cohesive design system. I chose two complementary fonts that reflect my technical background:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " chakra ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "Chakra_Petch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" subsets", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'latin'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" weight", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'400'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'700'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" variable", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'--font-chakra-petch'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'swap'" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ibm ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "IBM_Plex_Mono" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" subsets", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'latin'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" weight", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'400'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'700'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" variable", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'--font-ibm'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" display", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'swap'" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Chakra Petch for headings gives a modern, tech-forward feel, while IBM Plex Mono for body text reinforces the coding aesthetic. Using CSS custom properties via the \"variable\" option allows me to reference these fonts throughout my Tailwind configuration." }), "\n", _jsx(_components.p, { children: "Back in school for my graphic design classes I really enjoyed my typography classes, and this also used some of my old videography skillset. I used to love deciding on a font for a video project that would match the tone and feel I was aiming for in a piece." }), "\n", _jsx(_components.h2, { children: "Dark Mode: More Than Just a Toggle" }), "\n", _jsxs(_components.p, { children: ["Rather than implementing a basic dark mode, I wanted something that felt intentional. I used ", _jsx(_components.code, { children: "next-themes" }), " for seamless theme switching:"] }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "DarkModeToggle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "," }), " resolvedTheme ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "mounted", _jsx(_components.span, { className: "token punctuation", children: "," }), " setMounted", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setMounted" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "mounted", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " newTheme ", _jsx(_components.span, { className: "token operator", children: "=" }), " theme ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'dark'" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token string", children: "'light'" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'dark'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "newTheme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"p-2 rounded-full bg-[#121318] hover:bg-[#1c1e24] transition\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "theme ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'dark'" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Sun size", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "18" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " color", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"white\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Moon size", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token number", children: "18" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " color", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"white\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["The key insight here is preventing ", _jsx(_components.a, { href: "https://nextjs.org/docs/messages/react-hydration-error", children: "hydration mismatches" }), " by only rendering after the component mounts. This ensures the theme state is consistent between server and client. I am one of those people who basically always uses dark mode unless I'm on my laptop outside and need the extra contrast.", _jsx(_components.br, {}), "\n", "Making things still look decent in both modes posed a big challenge for me, and I'm still not totally happy with some parts like the codeblock coloring on the lighter background, and the toggle seems to act differently in different browsers which I couldn't figure out."] }), "\n", _jsx(_components.h2, { children: "Content Management: Git Submodules for Blog Posts" }), "\n", _jsx(_components.p, { children: "One of my more unconventional choices was using Git submodules for blog content management. Instead of a headless CMS, I store my blog posts in a separate repository and include them as a submodule:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " postsDirectory ", _jsx(_components.span, { className: "token operator", children: "=" }), " path", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "join" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "process", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "cwd" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'../posts/posts'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "getPosts" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "filterTag", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " PostMeta", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filenames ", _jsx(_components.span, { className: "token operator", children: "=" }), " fs", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "readdirSync" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "postsDirectory", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "f ", _jsx(_components.span, { className: "token operator", children: "=>" }), " f", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "endsWith" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'.mdx'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " posts ", _jsx(_components.span, { className: "token operator", children: "=" }), " filenames", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "filename ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " filePath ", _jsx(_components.span, { className: "token operator", children: "=" }), " path", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "join" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "postsDirectory", _jsx(_components.span, { className: "token punctuation", children: "," }), " filename", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fileContents ", _jsx(_components.span, { className: "token operator", children: "=" }), " fs", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "readFileSync" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "filePath", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'utf8'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " data ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "matter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fileContents", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" slug", _jsx(_components.span, { className: "token operator", children: ":" }), " filename", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "replace" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: [_jsx(_components.span, { className: "token special-escape escape", children: "\\." }), "mdx", _jsx(_components.span, { className: "token anchor function", children: "$" })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" title", _jsx(_components.span, { className: "token operator", children: ":" }), " data", _jsx(_components.span, { className: "token punctuation", children: "." }), "title ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" date", _jsx(_components.span, { className: "token operator", children: ":" }), " data", _jsx(_components.span, { className: "token punctuation", children: "." }), "date ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" excerpt", _jsx(_components.span, { className: "token operator", children: ":" }), " data", _jsx(_components.span, { className: "token punctuation", children: "." }), "excerpt ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" tags", _jsx(_components.span, { className: "token operator", children: ":" }), " data", _jsx(_components.span, { className: "token punctuation", children: "." }), "tags ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "18", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " posts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "sort" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "a", _jsx(_components.span, { className: "token punctuation", children: "," }), " b", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "b", _jsx(_components.span, { className: "token punctuation", children: "." }), "date", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getTime" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Date" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "a", _jsx(_components.span, { className: "token punctuation", children: "." }), "date", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getTime" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "This approach gives me several advantages:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Version control" }), " for content changes"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Separation of concerns" }), " between site code and content"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Flexibility" }), " to reuse content across different projects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "No vendor lock-in" }), " or CMS dependencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Ease of Use" }), " for making quick edits or writing up new posts on the go"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "MDX Processing: Custom Rehype Plugins" }), "\n", _jsx(_components.p, { children: "For blog posts, I wanted syntax highlighting with line numbers. Rather than relying on client-side highlighting, I process everything at build time:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "addLineNumbersClassToPre" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "tree", _jsx(_components.span, { className: "token operator", children: ":" }), " Element", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token function", children: "visit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'element'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "node", _jsx(_components.span, { className: "token operator", children: ":" }), " Element", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "node", _jsx(_components.span, { className: "token punctuation", children: "." }), "tagName ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'pre'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "node", _jsx(_components.span, { className: "token punctuation", children: "." }), "properties", _jsx(_components.span, { className: "token punctuation", children: ")" }), " node", _jsx(_components.span, { className: "token punctuation", children: "." }), "properties ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "let" }), " classNames", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token builtin", children: "Array" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "isArray" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "node", _jsx(_components.span, { className: "token punctuation", children: "." }), "properties", _jsx(_components.span, { className: "token punctuation", children: "." }), "className", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" classNames ", _jsx(_components.span, { className: "token operator", children: "=" }), " node", _jsx(_components.span, { className: "token punctuation", children: "." }), "properties", _jsx(_components.span, { className: "token punctuation", children: "." }), "className", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "String", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "11", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " hasLanguageClass ", _jsx(_components.span, { className: "token operator", children: "=" }), " classNames", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "some" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "cn ", _jsx(_components.span, { className: "token operator", children: "=>" }), " cn", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "startsWith" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'language-'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "13", children: " \n" }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "hasLanguageClass ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "classNames", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "includes" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'line-numbers'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" classNames", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'line-numbers'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" node", _jsx(_components.span, { className: "token punctuation", children: "." }), "properties", _jsx(_components.span, { className: "token punctuation", children: "." }), "className ", _jsx(_components.span, { className: "token operator", children: "=" }), " classNames", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "21", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["This custom rehype plugin automatically adds line numbers to code blocks, improving readability without client-side JavaScript overhead. I know what you're saying, \"But your code blocks don't have line numbers!\" yeah...", _jsx(_components.br, {}), "\n", "We all know how it feels to put a bunch of time and effort into something just to ditch it, and eventually when I wanted to rework how code blocks were dieplayed I decided on a cleaner minimalist look that seamlessly blends into the rest of the article. The line numbers didn't really match that aesthetic, so I ended up ditching them. I anted to keep this section in regardless to showcase one of the trickier problems I had to solve in this project."] }), "\n", _jsx(_components.h2, { children: "Component Architecture: Composition Over Inheritance" }), "\n", _jsx(_components.p, { children: "My homepage demonstrates a composition-based approach:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "Page" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Hero ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "About ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Projects ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "BlogList ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Resume ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Contact ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Each section is a self-contained component with a single responsibility. This makes the codebase easier to maintain and allows for easy reordering or removal of sections. I first fell in love with this design pattern through my work at Apryse on the Windward Hub project, when realizing how self-contained each component was and how easy it had been to move and change these big blocks like big puzzle pieces, I knew I'd try to reuse this pattern every chance I get." }), "\n", _jsxs(_components.p, { children: ["The Hero component showcases an interesting pattern using ", _jsx(_components.code, { children: "react-powerglitch" }), " for visual effects:"] }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " glitch ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useGlitch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" playMode", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'manual'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" createContainers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" glitchTimeSpan", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " start", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " end", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" shake", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " velocity", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " amplitudeX", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.8" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " amplitudeY", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1.2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" slice", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " count", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "50" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " velocity", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "40" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " hueRotate", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " id ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "setInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token function", children: "setCurrent" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "i", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "i ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "%" }), " messages", _jsx(_components.span, { className: "token punctuation", children: "." }), "length", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" glitch", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "startGlitch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " glitch", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "stopGlitch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "1800" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "4000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "clearInterval" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "glitch", _jsx(_components.span, { className: "token punctuation", children: "," }), " messages", _jsx(_components.span, { className: "token punctuation", children: "." }), "length", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "This creates a subtle effect that I think does a lot to personalize my site and breathe some life into the otherwise static page. I had ambitions to add more moving and living touches, but those will remain in the backlog for now." }), "\n", _jsx(_components.h2, { children: "Performance Considerations" }), "\n", _jsx(_components.p, { children: "Several architectural decisions were made with performance in mind:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Font optimization" }), " using Next.js font loading with ", _jsx(_components.code, { children: "display: 'swap'" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Image optimization" }), " with Next.js Image component and proper sizing"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Build-time content processing" }), " instead of runtime MDX compilation"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "CSS-in-JS avoidance" }), " in favor of Tailwind's compile-time approach"] }), "\n"] }), "\n", _jsx(_components.p, { children: "The site isn't particularly intensive to begin with so I didn't feel like creating a numbers evaluation to see how effective these considerations ended up being was worth my time, but I think designing around them still helped to keep my project from being bloated or unresponsive which would have been big dealbreakers for me." }), "\n", _jsx(_components.h2, { children: "Deployment: Custom Build Pipeline" }), "\n", _jsx(_components.p, { children: "For deployment, I created a custom build script that handles the Git submodules:" }), "\n", _jsx(_components.pre, { className: "language-bash line-numbers", children: _jsxs(_components.code, { className: "language-bash code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "# Initialize and update submodules" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token function", children: "git" }), " submodule init\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token function", children: "git" }), " submodule update ", _jsx(_components.span, { className: "token parameter variable", children: "--recursive" }), " ", _jsx(_components.span, { className: "token parameter variable", children: "--remote" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token comment", children: "# Verify submodule content" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " ", _jsx(_components.span, { className: "token parameter variable", children: "-d" }), " ", _jsx(_components.span, { className: "token string", children: "\"posts\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token keyword", children: "then" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token builtin class-name", children: "echo" }), " ", _jsx(_components.span, { className: "token string", children: "\"Posts directory exists\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "else" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token builtin class-name", children: "echo" }), " ", _jsx(_components.span, { className: "token string", children: "\"ERROR: Posts directory not found\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token builtin class-name", children: "exit" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token keyword", children: "fi" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "12", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token comment", children: "# Install dependencies and build" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [_jsx(_components.span, { className: "token function", children: "npm" }), " ci\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [_jsx(_components.span, { className: "token function", children: "npm" }), " run build\n"] })] }) }), "\n", _jsx(_components.p, { children: "This ensures that content is always up-to-date during deployment while maintaining the separation between code and content repositories. It was really easy to get things up and running on Vercel and establish some pipelines to effectively force CI/CD practices." }), "\n", _jsx(_components.h2, { children: "Lessons Learned" }), "\n", _jsx(_components.p, { children: "Building this portfolio taught me several valuable lessons:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Simplicity scales" }), ": Starting with a simple architecture and gradually adding complexity as needed prevents over-engineering."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Content strategy matters" }), ": Deciding how to manage content early saves refactoring later. Git submodules work well for my use case but might not suit everyone. I knew going in this was going to be an easy thing to do wrong, so taking some extra time to do some research and come up with a plan really paid off here."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Performance is a feature" }), ": Users notice fast sites. Optimizing fonts, images, and build processes creates a better experience. The last thing you want is to present a flashy cutting edge portfolio site but then the load times and responsiveness end up feeling dated. Keeping performance in an acceptable range is key."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Personal branding through code" }), ": Technical choices can reinforce your personal brand. I purposely designed the site aesthetics to reinforce my technical skills and ensure that the site gives a message of professionalism and attention to detail."] }), "\n"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "What's Next?" }), "\n", _jsx(_components.p, { children: "The architecture I've built provides a solid foundation for future enhancements. I'm considering adding:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Search functionality for blog posts - Once I can populate my bloglist with more content and get on a more frequent writing schedule." }), "\n", _jsx(_components.li, { children: "Interactive project showcases - Something to make the projects section a more entertaining experience." }), "\n", _jsx(_components.li, { children: "More aesthetic bells and whistles - to continue to push my personal brand and learn to utilize the NextJs tech stack to the fullest" }), "\n"] }), "\n", _jsx(_components.p, { children: "The modular architecture makes these additions straightforward without major refactoring." }), "\n", _jsx(_components.h2, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "Building a portfolio site is as much about the journey as the destination. The technical decisions I made reflect my values as a developer: clean code, performance optimization, and thoughtful user experience. While the specific technologies might change, these principles remain constant." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Building a Modern Portfolio Site with Next.js: Architecture Decisions