
It's exciting to start something new. It gives us the opportunity to clear out the cache in our heads and put a new thing out into the world. No tech debt, no stretching along the poor ideas of our previous selves. For me, I wanted to switch it up and make something new that reflected where I'm at _today_, my skill sets, interests, etc. A place where I can show what I care about [now](/now). Often these sites tend to grow stale.

## How it started

This is the third version of my personal site. Well, it's kind of v3.5, actually. I nearly finished the last iteration a few months ago.

<ImageContainer caption='This is one of the screenshots of the details page before the redesign.'>
  <Image
    src='/images/writings/website-redesign-2022/portfolio-v3-v1-project-detail.jpg'
    alt='Screenshot of the details page for my first iteration of this portfolio site'
    layout='responsive'
    blurDataURL='/images/writings/website-redesign-2022/portfolio-v3-v1-project-detail.jpg'
    placeholder='blur'
    width={1440}
    height={1084}
    quality={95}
  />
</ImageContainer>

<ImageContainer caption='This is after the redesign.'>
  <Image
    src='/images/writings/website-redesign-2022/portfolio-v3-v2-project-detail.png'
    alt='Screenshot of the details page for my first iteration of this portfolio site'
    layout='responsive'
    blurDataURL='/images/writings/website-redesign-2022/portfolio-v3-v2-project-detail.png'
    placeholder='blur'
    width={1440}
    height={1289}
    quality={95}
  />
</ImageContainer>

Nearly 80% of it was fully designed and implemented until I decided to scrap it all, leaving only the tech stack choices behind. It's always that last bit. It wasn't giving me the feel I wanted. I noticed that I was making the _exact_ same mistakes that I did with previous iterations. I'd end up getting lost in the design details that don't have any meaning. They don't actually get you to finishing the goal you set out to complete in the first place.

I couldn't _already_ be sick of this thing. That ended up being enough of a signal that I needed to suck it up and start over.

I didn't want to overthink it. Simplicity, consistency, maintainability were my top priorities—especially [maintainability](https://brianlovin.com/writing/reasons-you-arent-updating-your-personal-site#too-hard-to-add-and-edit-content). I didn't need to reinvent the wheel, and it most definitely should not feel like a chore to update and edit or add new content. We all know where that leads _sigh_...back to Figma.

## How it's going

This is what I came up with after a few weeks of nights and weekends. The design stands on the many shoulders of those I admire and look up to in my field of UI development. These people inspired me to ditch all of the noise and reject the traps found in over-designing. Instead, favoring an approach of simplicity, which strips away all the excuses one could make, and actually showcase what really matters—the content. If you see a design idea you like, go ahead and [steal it](https://austinkleon.com/steal/)!

Shout-out to [Paco Coursey](https://paco.me/), [Carl Barenbrug](https://cmhb.de/), [Rauno Freiberg](https://rauno.me/), [Pedro Duarte](https://ped.ro/), [Lee Robinson](https://leerob.io/), [Tim Chang](https://timcchang.com/), [Jenna Smith](https://jjenzz.com/), and others—there's a lot of them—for all of the inspiration.

Now that I'm _"done"_, I'm hoping I can start the new year off strong and share more about myself, my process, things I'm interested in. I've been on the receiving end of so many generous people taking the time to write insightful and useful posts about technology that I'm learning about. Hopefully I can give back a bit where I can.

## Tech stack for nerds

Ah, the most important part, the tech stack:

- [TypeScript](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
  - We use this framework heavily at my [job](https://www.elegantseagulls.com/) and I'm extremely bullish about it's future. The team consistently raises that bar with each release.
- [Stitches](https://stitches.dev/)
  - One the of the, if the _the_ best styling solution you can use in React today. [Vanilla Extract](https://vanilla-extract.style/) is a close second. The two are openly heavily inspired by one another.
- [Radix](https://www.radix-ui.com/)
  - Un-styled utility components for building accessible UIs.
- [MDX](https://mdxjs.com/)
  - How I'm able to write this blog.
- [Shiki Twoslash](https://shikijs.github.io/twoslash/)
  - Beautiful code syntax highlighting and vscode-like intellisense for markdown code blocks, from one of the TypeScript core maintainers, [Orta Therox](https://orta.io/).
- [Framer Motion](https://www.framer.com/motion/)
  - Declarative animations for React.

The site is [open source on GitHub](https://github.com/h-jennings/portfolio-v3), feel free to check it out and reach out if you have any questions about it. My DMs [are open](https://twitter.com/jennings_hunter).


Writing

Featured

All Writing

2022