GeekVader Portfolio

TL;DR

• Challenge: Build a portfolio that shows how I actually work — and proves I can design and ship without a development team
• Scope: Full portfolio site from design system to CMS integration to deployment
• Approach: Designed in Figma, built with Astro and Claude Code, edited via Tina CMS
• Outcome: You’re looking at it. Live at geekvader.com

The brief I gave myself

Most designer portfolios look the same. Password-protected Figma links, three case studies in a 12-column grid, a hero that says “I turn complex problems into elegant solutions.” Designed to pass a screening, not to say anything real.

I wanted something that showed how I actually work. Research-first. Systems-oriented. Willing to get into the details. And since AI-assisted building is now genuinely part of my workflow — not as a buzzword but as a daily practice — I wanted the portfolio itself to be proof of that.

The constraint I set: build it myself, using Claude Code. No hiring a developer. No Webflow template. Code I could understand and maintain. Something I’d feel confident editing on a Tuesday afternoon without needing to remember what I was doing six months ago.

The design decisions

B612 Mono. A monospace font designed by ESA (the European Space Agency) for use on spacecraft instrument panels — readable at small sizes under difficult conditions. It’s also deeply geeky in a way that felt true to the brand without being try-hard. Every font decision on a portfolio is a personality decision. This one says something.

Design tokens first. Before writing a single component, I defined the full design system in a Figma tokens file — colors, spacing, typography scales, everything. The CSS pulls from custom properties throughout. var(--space-l), var(--text-h2-size), var(--color-primary-200). This meant redesigning the dark mode palette was a token edit, not a stylesheet hunt.

Dark mode as a first-class experience. Not a color-inverted afterthought. The dark mode has atmospheric gradient backgrounds, soft colored flares in the corners, a different visual weight. It’s meant to feel like a different environment — same content, different mood. The technical detail: themed images use opacity transitions instead of display: none to prevent layout jumps on toggle.

Tina CMS. I wanted to edit content without opening a code editor. Tina CMS gives me a React-based editor that sits on top of the filesystem — content is JSON and MDX files, no database, no backend infrastructure. The admin at /admin/index.html lets me edit everything from hero headlines to client logos to case study copy. Adding a new project means creating an MDX file in the CMS, not touching Astro pages.

Emoji stickers. The emojis positioned as physical stickers on the text — rotated, slightly overlapping — came from wanting personality on every page without making it feel designed-to-within-an-inch-of-its-life. Restraint is a design decision. So is a well-placed 🤓.

How I built it

Same workflow as MSF Counter Craft: I designed it, Claude Code built it with me.

The difference was clarity of brief. Building my own portfolio meant I had the clearest possible specification — I knew exactly what every section should feel like. That clarity made the collaboration faster. I wasn’t discovering requirements mid-build. I was translating decisions I’d already made into working code.

The CMS integration was the most technically complex part. Tina CMS requires a precise schema that matches the content files exactly, and getting the rich-text fields to map correctly — bold text becoming primary-color highlights, line breaks becoming paragraph breaks — took several iterations. Worth every one of them. I now edit homepage copy in a browser like it’s a Google Doc.

What this project added to my confidence: CSS architecture. The component structure in Astro, scoped styles, :global() selectors for dynamically-rendered RichText content — I understand how this site is built well enough to maintain it. I’ve been editing it continuously since launch, and the codebase hasn’t turned into a mess. That’s the real test.

The stack

Astro 5.0 — Static site generator with excellent MDX support. The component model maps well to how I think about UI: isolated, composable, scoped styles by default. Outputs clean HTML with minimal JavaScript unless you specifically need it. Fast builds, fast deploys, no surprises.

Tina CMS — Git-backed headless CMS with a visual editor. Content lives in the repo as JSON and MDX. Vercel’s environment variables handle the cloud credentials. No separate CMS infrastructure to manage, no monthly CMS bill.

CSS Custom Properties — No utility framework. The design tokens translate directly to CSS variables. The vocabulary of the design system is the vocabulary of the stylesheet. When something looks wrong, the fix is always clear.

Vercel — Push to main, site deploys. Analytics and Speed Insights included. The simplest deployment setup I’ve encountered and I haven’t needed to think about it once since launch.