← all devlogs
•portfolio

Building This Portfolio

#astro#portfolio#meta#design

Every developer ends up building their own portfolio at some point. Mine had two requirements: it had to be text-first and it had to let me embed architecture diagrams directly in my writing. No image exports, no Figma links — just code blocks that render as diagrams in the browser.

This site is built with Astro and styled with a handwritten black-and-gold design system. Dev logs (like this one) are plain Markdown files.

Why Astro?

Astro ships zero JavaScript by default. For a portfolio that’s mostly text and diagrams, that’s ideal. Content collections give me type-safe frontmatter, and MDX lets me drop components into Markdown when I need them. The dev server is fast and the build output is static HTML — easy to deploy anywhere.

Architecture

Here’s how the main pieces connect:

flowchart TD
    MD["Markdown / MDX\n(src/content/devlogs/)"] --> CC["Astro Content Collections"]
    CC --> DL["Devlog List\n(/devlogs)"]
    CC --> DP["Devlog Post\n(/devlogs/slug)"]
    DP --> Layout["DevlogPost.astro\nlayout"]
    Layout --> MJ["MermaidScript.astro\n(client-side CDN)"]
    MJ --> SVG["Rendered SVG diagrams\nin the browser"]
    PD["src/data/projects.ts\n(static array)"] --> PP["Projects Page\n(/projects)"]
    PP --> PC["ProjectCard.astro"]

The diagram above is a live Mermaid diagram — not an image. It’s written as a fenced code block in this .md file and rendered client-side by Mermaid.js with a custom gold-and-dark theme.

Design System

The color palette is intentionally minimal:

Token Value Role
--bg-main #09090b Page background
--bg-card #121215 Cards and panels
--gold-primary #d4af37 Accents, links, highlights
--gold-light #f3d068 Hover states
--text-body #d4d4d8 Body copy
--text-muted #a1a1aa Dates, meta, labels

The font is Atkinson Hyperlegible, loaded locally. Monospace touches (the > in the nav logo, the blinking cursor, the tag pills) add a terminal aesthetic without going full cyberpunk.

Mermaid Setup

The Mermaid integration is client-side — no build-time rendering needed. A MermaidScript.astro component is included in the DevlogPost.astro layout. It:

  1. Loads Mermaid.js from a CDN (pinned version)
  2. Finds all pre code.language-mermaid blocks in the rendered HTML
  3. Replaces them with .mermaid-container divs holding the diagram definition
  4. Calls mermaid.run() to render SVGs in-place

The theme variables are injected to match the gold-and-dark palette exactly.

Next Steps

  • Add real project entries to src/data/projects.ts
  • Write devlogs for active projects
  • Set up deployment (probably Cloudflare Pages or Vercel)
  • Update astro.config.mjs with the real site URL once deployed

That’s it. Simple by design.