A New Site and a New Home - danott.dev

It's been 10 years since I've redesigned my site, so I thought it was about time for a new one.

I'm also saying goodbye to dtott.com, and hello to danott.dev!

danott.dev

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.

New Design

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.

For one thing, Spotlight is built using Next.js's Page Router, but I very much wanted to use the App Router (naturally). Spotlight is also written in Javascript, and I'm much more comfortable in Typescript these days, so I rewrote the whole thing in Typescript.
The content is stored in MDX, and imported in to Next.js pages via React Server Components. I was able to pretty easily import my old content to the new platform, so that was good.

Design Elements

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 title font is a font called Free Lunch by Dan Cederholm of SimpleBits. Dan was kind enough to provide me with an early-release version - thank you Dan!
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 ImageResponse