Portfolio Site
Building a portfolio that proves the portfolio
The Problem
Portfolio templates are fine if you're trying to blend in. They prove you can click "deploy" on Squarespace. I needed something that actually demonstrated the skills I claim to have:
- Generic templates don't showcase technical ability—they hide it
- Multiple content types needed: case studies, visual explainers, long-form essays
- Personality matters—XKCD-inspired wit without sacrificing professionalism
- Dark mode, accessibility, mobile-first, print styles—the full checklist
- Performance that doesn't embarrass me when recruiters run Lighthouse
If I'm claiming I can build things, the portfolio should be proof.
Solution Architecture
Eleventy SSG
Zero client-side JavaScript by default. Nunjucks templating for clean separation of content and layout. Data-driven architecture with everything in site.json.
CSS Custom Properties
Theme system without Sass or PostCSS. Twenty lines for dark mode. Variables cascade naturally—no build step required.
Content Types
Dedicated layouts for case studies (technical), doodles (visual explainers), and essays (editorial). Each with its own typography and interaction patterns.
SVG Illustrations
Hand-drawn aesthetic with inline SVGs that inherit theme colors. Stick figures, seahorses, flow diagrams—all currentColor for automatic dark mode.
Build Pipeline
Content Architecture
CSS Theming System
Key Features
Data-Driven Content
All site content lives in a single site.json file. Experience, skills, projects—everything. Templates just render what's there. Adding a new project means editing JSON, not touching HTML. The separation means content updates deploy in seconds.
Typography Systems
The main site uses Anton for display and Inter for body—clean, technical, personality. Essays switch to Playfair Display and Source Serif for an editorial feel. Self-hosted fonts avoid the Google Fonts GDPR conversation.
Intersection Observer Animations
Doodles animate elements as they scroll into view. The implementation respects prefers-reduced-motion, properly cleans up intervals on tab changes, and removes observers when elements unmount. No animation libraries—just vanilla JS doing the right thing.
Print Stylesheet
Navigation, footer, theme toggles—gone when you hit Ctrl+P. What remains is clean, readable content. Because sometimes people still print things.
Results
| Metric | Template Sites | This Build |
|---|---|---|
| Performance (Lighthouse) | 70-85 | 99 |
| Accessibility (Lighthouse) | 80-95 | 100 |
| Build Time | 5-30s | <1s |
| JavaScript Payload | 200-500KB | <10KB |
| Customization | Theme options | Everything |
Technologies
Lessons Learned
skip the framework
Vanilla JS handles 95% of portfolio needs. The other 5% isn't worth the bundle size.
data drives content
One JSON file beats scattered frontmatter. Updates are quick, structure is obvious.
theme with variables
CSS custom properties make dark mode a 20-line addition, not a rewrite.
invest in diagrams
Hand-drawn SVGs explain architecture better than paragraphs of prose.