A New Site and a New Home - danott.dev
Published: 2023-08-02 18:27:35

---
title: A New Site and a New Home - danott.dev
published: true
date: 2023-07-31 00:00:00 UTC
tags: 
canonical_url: https://danott.dev/thoughts/new-site-danott-dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nwkly0qkmqzxp18enr8.png
---

It's been [10 years since I've redesigned my site](https://danott.dev/thoughts/new-site-design-2013-07-15), so I thought it was about time for a new one.

I'm also saying goodbye to [dtott.com](https://dtott.com), and hello to [danott.dev](https://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 <abbr title="Top-Level Domain">TLD</abbr>, 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](https://tailwindui.com/templates/spotlight), 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](https://danott.dev/thoughts/nextjs-app-router-talk)). 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](https://github.com/danieltott/danott.dev/tree/main/src/content), and [imported in to Next.js pages](<https://github.com/danieltott/danott.dev/blob/a625721a2b70911ab5e7d60f0e291ba74a52eb12/src/app/(site)/thoughts/%5Bslug%5D/page.tsx#L46-L52>) 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](https://en.wikipedia.org/wiki/The_Monster_at_the_End_of_This_Book:_Starring_Lovable,_Furry_Old_Grover), written by Jon Stone and illustrated by Michael Smollin.
    
    ![Photo of a page featuring Grover yelling surrounded by stars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90hjj2jqpkzwprjuwdbt.jpg)
- The title font is a font called [Free Lunch](https://simplebits.shop/products/free-lunch) by [Dan Cederholm of SimpleBits](https://simplebits.shop/). Dan was kind enough to provide me with an early-release version - **thank you Dan**!
    [![Font specimen of Free Lunch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5el7oym81iyr2rt303m.png)](https://simplebits.shop/products/free-lunch)
- The stars are generated using [`<svg>` with random styles applied to them](https://github.com/danieltott/danott.dev/blob/main/src/app/stars.svg/route.ts), positioned via [Bezier JS](https://pomax.github.io/bezierjs/). 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 <code>ImageResponse</code>](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx)
    [![Social image for the home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyfj6qg0c9yj3z38a0t9.png)](https://danott.dev)

----

Thanks for reading, [check out the site](https://danott.dev), and let me know what you think!