Skip to content
Side project

davemaynard.dev

This portfolio site, rebuilt in 2026 as a printed monograph where every hero image is a generated, animated schematic.

2026
  • TypeScript
  • React JS
  • Next.js
  • Tailwind CSS
  • MDX
  • SVG Animation
  • Design Systems
  • Generative Art
  • Web
  • Responsive
Design systems explored
3
Generated hero plates
16
Animation dependencies
0

This site started in 2022 as a place to show my work and experiment with new front-end tech. In July 2026, I rebuilt its entire visual identity, and the rebuild turned into the strongest portfolio piece on it.

The stack is Next.js 16 with the App Router, statically exported, with React 19, Tailwind CSS v4, and MDX for content. I considered migrating to Astro and decided against it, because the React component system is the artifact this site sells, so it should stay React. Instead, I kept the bundle lean within Next by dropping react-spring and skipping Three.js, which landed the homepage around 172KB gzipped.

I ran the redesign as a bake-off. I built three complete design systems in parallel git worktrees (editorial, engineered, and gallery), each a full restyle running on its own dev server so I could compare them side by side. Editorial won and became Cyanotype Folio: the site behaves like a printed monograph, with paper and ink surfaces, a single cyanotype-blue accent, Newsreader for prose, Fragment Mono for captions and specs, and exactly two motion beats.

For the imagery, I tried stock photos first and hated the result. Chrome blobs and neon desks made the site feel like a templated portfolio, and I learned the hard way that Unsplash's search quietly interleaves premium results that require a paid license. So I scrapped photography entirely. A cyanotype is literally a blueprint, and these projects are architecture stories, so each hero image became a Living Cyanotype Schematic: an animated SVG plate that draws that project's actual architecture, produced by a deterministic Python generator I wrote. There are 16 plates, all byte-reproducible, emitted straight into a TypeScript module.

The plates draw themselves in on viewport entry using pathLength and an IntersectionObserver, and hovering one develops it to Prussian blue, the way a real cyanotype exposes under light. Accent dots trace each plate's most meaningful line on a loop, and the paintings.py plate keeps painting itself with strokes that fade out first in, first out. All of it is CSS. I considered Three.js, anime.js, and Lottie for the animation and rejected each one, so the site ships with zero animation dependencies.

More side projects

More side projects
Contact

Let’s build something

Have a project, a role, or a problem worth solving? I’d love to hear about it.

Get in touch

or email davemaynard24@gmail.com