Building the Site
The meta-project — designing, building, and shipping andrewvoirol.com. Micro-interactions, a three-tier content pipeline, and the infrastructure that generates these very pages.
Next.js 15 · MDX · Vercel · 210+ log entries
Homepage editorial layout — typography, responsive grid, and live content metrics.
This site is its own project. Not a template, not a CMS — a hand-built Next.js workshop where every page is generated from atomic MDX content, every micro-interaction is intentional, and the infrastructure that powers it is as much proof-of-work as the projects it displays.
What makes it different
| Layer | Implementation |
|---|---|
| Content model | Three-tier atomic hierarchy: Log Entries → Threads → Projects |
| Pipeline | MDX frontmatter with build-time validation — broken links fail the build |
| Rendering | next-mdx-remote with custom components: <Video>, <Gallery>, <ScoreBadge> |
| Interactions | Jelly-physics dark mode toggle, spring animations, responsive editorial layout |
| Deployment | Vercel auto-deploy on push, Cloudflare DNS, Google Analytics 4 |
The content pipeline
Every piece of content starts as a log entry — 3 to 8 sentences written the same day the work happened. When log entries accumulate around a theme, they become a thread with an overview and accordion timeline. Threads that represent significant effort get promoted to projects with synthesized case studies.
The validation script runs at build time, catching broken cross-references, missing images, orphaned files, and inline styles that next-mdx-remote would silently strip. Warnings are tolerated; errors halt the deploy.
Always evolving
This project doesn't have a "shipped" state. The content model, the visual design, the interaction patterns, and the pipeline automation all change as the portfolio grows. This thread tracks the ongoing decisions, experiments, and infrastructure work.
