Introducing The New MarshallHahn.com

I spent the last few weeks doing an audit of my personal website. I came up with a plan on how to make it better starting by understanding where the current site was falling short, documenting what was working well, and defining goals for the site moving forward.

Goals

I had one primary goal and a few secondary goals for this project. The primary goal was to upgrade my site so I could use it as a marketing tool for my personal brand. I wanted a better place to showcase my thoughts/writings, my work and projects, and improve the call to actions across the site. My secondary goals were to 1) Migrate frontend frameworks, 2) Enable easier/faster iteration of content and pages, 3) Improve monitoring and visibility into my top pages, and 4) Improve SEO overall.

Marketing

Contact + Call to Actions

The main call to action that I want to optimize for on the new site is booking an intro call or 1:1 meeting. In the navigation, I changed "Contact" to "Let's Connect", and instead of directing visitors to a contact form, they are taken to my Calendly link to put time on my calendar directly.

Instead of one "View my work" call to action on the home page, I now have a primary and secondary call to action. The secondary action invites users to learn more about me, and the primary call to action is "Book 1:1 meeting" similar to what is in the navigation.

Overall, I also updated the primary and secondary call to action buttons stylistically to reflect their relative importance.

Copy

I also wanted to communicate more clearly who I am, what I offer, and how I work across the site. Instead of leading with my name on the home page, similar to what I previously had on my about page, I used the copy "Software Engineer with a love for startups" to highlight what I do and for whom.

Branding

Not much changed here. I did pick a new set of fonts for my personal brand, updated my colors a bit, updated the iconography, and chose a new style for social card/open graph images.

Colors

My site before had the ability for the visitor to update the site theme, to one of three themes: Light (White/Red), Dark (Black/Red), and a theme called Midnight (which was similar to Dark, but with indigo as the accent color). For this site, I wanted to keep things simple and just have a Light/Dark theme, with the default being the visitor's system theme. I may end up changing the colors again in the future, but figured this was a good place to cut scope and keep it simple for now.

Fonts

I didn't really have a brand font before, but I do now! The font for my logo is Milkbar and my heading font across the site is Lennon. Both are from the talented independent creative, Taylor Penton. Definitely check them out if you ever need some beautifully designed fonts!

Iconography

I wanted to be able to use icons across the site and so I implemented the Lucide icon library. There are over 1500+ icons and they are simple, consistent, lightweight. They are also easily customizable in size, stroke width, and color.

I wanted to make sure all links on my site looked uniform when they are shared across social sites, so I created a template to use for open graph images.

SEO

I didn't have an easy way before to update for each page, blog post, and set overrides if needed. See the CMS section below for more details about this, but Sanity CMS offers an extremely easy way to set this up.

I also took the opportunity to have my new site generate a detailed sitemap on each new build. The sitemap is located at /sitemap.xml and I've added that link to Google Search Console.

Technical Considerations

Links on my old site generally mapped 1 to 1, but there are some pages that I intentionally did not re-create. To prevent users from landing on a 404 page if they visit a link that no longer exists, I created a Bulk Redirect rule in Cloudflare to forward traffic from the old page to the new page. If you really want to check out the old page you can – just use the v1 subdomain by adding v1.* to the front of the URL. I may decide to forward to those v1 pages in the future, but I'm still not sure what I want to do there yet. I will make a decision based on how much traffic I see to those Cloudflare redirects.

Migration

Overview

I chose to migrate a few pieces of this site's tech stack in this project. It's something I've been meaning to do for a while, but haven't gotten around to it until this year. I migrated which frontend framework I am using for my site, where I am hosting the site, and the CMS that I am using for my site's content:

Frontend Framework: Gatsby to Next.js
Hosting: Netlify to Vercel
CMS: Contentful to Sanity

Framework and Hosting

Over the last few years, I've noticed the Gatsby framework has slowly been losing steam. Meanwhile, the Next.js framework has picked up significant momentum. I also noticed the team working on Next.js over at Vercel also have some cross-pollination with the React core team. That's kind of hard to ignore at this point. While not having consensus by any means, the community seems to be coalescing around Next.js and Vercel. I've built websites using Next.js and Vercel for other projects in the past, and so I figured it was time to make the jump here for my personal site.

CMS

Another part of my website that was long overdue for an upgrade was the content management system. For my previous site, I had been using Contentful. It was okay and I thought it was a good solution. With this being said, I really wanted additional functionality of a presentation view. I wanted to be able to drag-and-drop elements on the page, similar to how Squarespace works, without sacrificing the control I have with writing my own code. It looks like Contentful offers something like this but you have to contact their sales team.

I didn't want to lose what I had in Contentful, and what a headless CMS generally provides with the ease of drafting/publishing content separate from the code. After exploring a few options, including Payload, Sanity, and Prismic, I ended up going with Sanity for my CMS.

Additions

I wanted to take some time to add a few new tools as well.

I am a fan of PostHog and so I took some time to integrate that on my site.

What's Coming

What can you expect from me and the release of this new site? My hope is that I am able to more clearly communicate what I do, who my target audience is for the site, and how I work. I hope to share my thoughts and writing more consistently here, across social media, and other digital channels.

Growth

Finally, I want to run some Growth experiments, and use my personal site as a place to learn new tools and concepts. I hope to implement Statsig on my site so I can enable such growth experiments.

Thank You

Thanks for reading, and I hope you enjoy your time here on the new MarshallHahn.com!