charlieramus.comv2
Project Overview
- Role
- Solo — design + build
- Timeline
- May 2026 — Present
- Stack
- Status
- In progress
What I worked on
A clean-slate rebuild of my portfolio in Next.js, TypeScript, and Tailwind. Nearly everything editable collapses into one file, site.config.ts — the content model that drives every page. Writing lives as MDX, the photography is a masonry grid backed by a fullscreen lightbox, and a decorative flower system runs across the surfaces, motion-safe under prefers-reduced-motion.
The Challenge
Collapsing every editable value into a single config file — so the copy can be changed without touching JSX — while keeping the design-system character intact and the masonry grid and lightbox correct across sizes.
The process
Design system from the mockup
Ported the palette, type, and radii into Tailwind v4 @theme tokens.
Content model in site.config.ts
Folded every editable value into one typed file, no JSX to chase.
Inner pages
About, writing, design, gear, web projects — each reading its copy from config.
Photography pipeline
Masonry grid backed by a fullscreen lightbox, fed by the synced gallery.
Case-study pages
The screenshot-forward /web-projects/[slug] template, authored per project.
Polish
The decorative flower system and the motion-safe finishing pass.
This site is its own case study. It's a clean-slate rebuild in Next.js, TypeScript, and Tailwind, meant to fully replace the old charlieramus.com — and the organizing idea was to make it editable by a person, not a codebase. Almost every string, list, and image path lives in one file, site.config.ts, behind // CUSTOMIZE markers, so the copy can change without anyone opening a component.
A portfolio is not proof of what you built. It is proof you noticed.
The writing runs on MDX, so an essay is just a file. The photography is a masonry grid backed by a fullscreen lightbox, and a decorative flower system threads through the surfaces — all of it motion-safe, removed or frozen under prefers-reduced-motion. The constraint I kept returning to was character: one config file is easy; one config file that still feels designed is the actual work.
The case-study pages you're reading are part of that same system — every section is data in site.config.ts, rendered by one template. Swap a placeholder, edit a paragraph, run the build, and it's live.