It's been 10 years since I've redesigned my site, so I thought it was about time for a new one.
I've had the dtott.com domain for a really long time and it's served me well. But, I stopped referring to myself as "Daniel T Ott" in most scenarios a while ago, so it was always sort of hard to explain the "t" in "dtott."
danott.dev is a lot easier to remember and to say out loud, and I'm also a big fan of the .dev TLD, so I'm happy to have a domain with that extension.
I've been working on this new design for a while now, and I'm really happy with how it turned out.
Next.js, Typescript, Tailwind CSS, and MDX
I based the design and initial structure off of Tailwind UI Spotlight template, but obviously made some major changes to it.
The design of the site is inspired by one of my all-time favorite children's books, The Monster at the End of the Book, written by Jon Stone and illustrated by Michael Smollin.
The stars are generated using
<svg>with random styles applied to them, positioned via Bezier JS. I went through several iterations of this - starting with outputting a ton of inline React SVGs (way too slow and too many DOM elements), then using
<canvas>by hand (wonky, hard, slow), then using
konva-react(nice, but sluggish and huge bundle size), then finally using one single SVG route and including it via an
<img>tag. I'm pretty happy with how it turned out.
Social Images are generated using Next.js's