The Over-Achiever Strikes Again
November 2023: I decided that rebuilding my portfolio twice wasn’t enough. I needed to do it a third time, but this time with a completely different tech stack. Not because the Jekyll site was broken – it worked great. But because I wanted to learn, build something faster, and have more control over the interactive experiences.
So I picked Astro, threw in TailwindCSS for styling, added Solid.JS for components that actually feel snappy, and built a content system so interconnected it makes my CV generator and portfolio website talk to each other like they’re reading from the same script.
Yes, I probably could have used an existing solution. But where’s the fun in that?
The Architecture: Content as the Foundation
Here’s the thing about this rebuild – everything starts with content structure. I didn’t just want a portfolio site; I wanted a system. A single source of truth that could power:
- The portfolio website you’re reading right now
- A dynamic CV generator
- Interconnected content that knows about itself
This meant building a comprehensive content collection system with 15+ collection types, each with TypeScript schemas for validation. Portfolio entries know about releases. Placements know about tags. Projects reference everything. It’s obsessive, but it works.
The Components That Matter
WaveformPlayer
Divide and Confer
That custom audio player showing waveforms? Built from scratch. Because I wanted it to look and feel a specific way. The component handles audio playback with visual feedback, and it integrates seamlessly with the release information system. Play a track, see the waveform, get all the metadata. Done.
Relational Data Linking
Here’s where the “over-achiever” part really shows: portfolio-details entries automatically display ReleaseInfo if there’s a corresponding release_id in the releases collection. You add a release, update your portfolio entry with the release ID, and boom – the site figures out the rest. No manual content duplication. No getting out of sync.
PlacementHeap Cards
Custom card component for showcasing placements in a structured, visually organized way. All powered by the placement collection schema.
ProjectList with Filterable Tags
Pill-based tag system that lets you filter projects in real-time. Dynamic, responsive, and easily extensible when you add new projects or tags to the collection.
The Tech Stack Decision
Astro was the obvious choice once I knew what I wanted: a static site generator that’s genuinely fast, with first-class support for multiple UI frameworks. I could use Solid.JS for the interactive bits without bloating the JavaScript bundle – it ships the minimal amount of JS needed for interactivity, and the rest is pre-rendered static HTML.
TailwindCSS was the natural companion. Utility-first CSS that plays incredibly well with component-driven architecture. No more wrestling with CSS specificity or maintaining massive stylesheets. Just compose classes.
TypeScript throughout – because at this scale, type safety isn’t optional. Every content collection has a schema, every component is properly typed. Mistakes get caught before they become bugs.
MDX for content authoring – Markdown with JSX embedded. You get the flexibility to write prose and include interactive components inline.
Image Optimization: Because Bandwidth Matters
You’re running this on your own infrastructure, which means bandwidth and performance actually matter. So I’m using Astro’s built-in Image and Picture components for automatic optimization. Responsive images, multiple formats, lazy loading – all handled transparently. No hardcoded URLs, no manual optimization guessing.
Single Source of Truth in Action
The real innovation here is the interconnected collection system. Add a new release? The portfolio-details entries that reference it automatically pull the metadata. Update a project’s tags? The filter system immediately reflects it. Add a new talk? The talks collection updates, and if your CV generator pulls from this, it’s automatically current.
This is the foundation for the next phase: a CMS that would let you manage all this content without touching files. Because while I love working with code, sometimes you just want to update the web interface and have everything sync.
The Learning Journey
This whole project was about learning. Astro’s got a great developer experience, the component model is solid, and Solid.JS’s reactivity model is genuinely elegant. I learned how to structure content at scale, how to build interconnected systems, and how to think about single-source-of-truth architecture.
Could I have used existing tools? Sure. But would I have learned as much? Would I have a system that works exactly how I want it to? Probably not.
November 2025: Ship It
After… WAIT, TWO YEARS??? of tinkering, tweaking, and occasionally completely rewriting sections, it launched. You are literally reading this on it right now. The site is actively maintained, regularly updated with new content, and serves as the foundation for the CV generator and everything else I’ve got planned.
Is it over-engineered? Absolutely. Is it fun to work with? Also absolutely. Do I already have plans to build a custom CMS on top of it? You know it.