Personal Portfolio (Placeholder)

Personal Portfolio

My previous portfolio was a rigid single-page build that made adding experiments painful. This iteration puts extensibility first: every piece of content lives in an MDX file, every component inherits from a shared design system, and the whole thing generates statically at build time.

Design system

The site is dark-only, built on the Rose Pine palette. Committing to a single mode eliminates the conditional branching that makes theming tedious and lets the colour choices be deliberately atmospheric rather than merely accessible.

Colour palette

Typography

Three fonts, three roles:

1. Space Grotesk — display headings, brand mark.
2. Readex Pro — body text, paragraphs.
3. Roboto Mono — code, ASCII art, monospace contexts.

All loaded via next/font/google with variable mode for font-family CSS custom property injection.

Stack

Content pipeline

The Zod schema is the single source of truth for what frontmatter is valid. Missing required fields throw at startup — no silent failures rendering half-empty pages.

MDX component map

Every MDX file has access to the full set of custom components:

• <Image> / <Gallery> — responsive media with blur placeholders.
• <Video> / <AudioPlayer> — hosted asset embeds with consistent framing.
• <Embed> — YouTube and arbitrary iframe embeds.
• <LinkButton> — gradient CTAs to repos, demos, or contact.
• <RelatedContent> — cross-links to other entries by slug and type.
• <Callout>, <Quote>, <Code>, <Markdown> — narrative building blocks.

Animation layer

The site uses three distinct animation systems:

1. Framer Motion — entry animations (fadeUp), carousel transitions, staggered card reveals.
2. CSS keyframes — pulse-glow on CTA buttons, the ambient body::after radial gradients.
3. Canvas / rAF — matrix rain effect (c-matrix-layer.tsx), gear rotation overlay (gear-layer.tsx), skills marquee.

The canvas layers sit at z-0 behind a z-10 content wrapper, keeping decoration fully separate from interactive elements.

OG image generation

Each project and extra gets a dynamic OG image generated at the Edge:

/api/og/projects/[slug]  →  800×400 branded card
/api/og                  →  default fallback

The ambient background tone I listen to while building thisListen

Deployment

The site deploys to Vercel. Static generation means the hosting bill is essentially zero — Edge functions only fire for OG image requests.

A portfolio is never finished. It's a living record of who you are right now, and an invitation to become someone different.

---