There’s a bit of an unspoken adage in software development that goes a little something like this…
If you’re not embarrassed by code you wrote 6 months ago, you aren’t growing.
And I’ve never found this to be more true than when I take another look at my personal website. You see of all my projects, my personal site is the one that I’m forced to come back to time and time again. That’s because it’s my own little corner of the internet. It represents my style, my ideas and my projects. It’s mine.
So you can understand how a personal website is something that needs to be capable of growing with it’s creator, and that’s why I’m writing this article. I’m writing it because my site is about to evolve into a much better iteration of itself and I want to document that journey.
Why Build A New Website?
I’ve thought about this question a lot. Ideally, I wouldn’t be building a new site at all. Ideally I’d just work off the current site and slowly add more features onto it, but I’ll tell you why this is hard and why I need to redesign it right here:
- I was a much newer developer when I designed this site.
My current website is built in React. That’s it. No server-side rendering, no backend, just a client-side react app that gets its data from JSON files served with the project. Now this is okay, but it doesn’t lend itself well to the type of content I want to put on it in the future.
2. My use-case has changed because I started blogging.
I’ve started posting new blog posts every Sunday. I like posting these on medium, but there’s a lot of articles I write that I think would make more sense on my own site. This post would be a great example of that. It’s something that’s not necessarily targeted towards helping others, but it’s still something I want to write. Therefore part of my goal is to build my new website with blogging at the forefront.
3. The “goals” of my site have changed.
Previously my site was more of a “online resume” that described my skills, my experience, my projects, etc. That’s fine, but I think it puts too much emphasis on the site being a place for me to push ideas out. These days, I don’t want the site to act as my “online resume”, but more like my “online mailbox”. I’d like the site to function as a place to have inbound inquiries and opinions pushed in as-well. I want it to be a place where I can have discussions and get suggestions and 2-way communication going with others interested in the same things I am.
Okay. Now cut to the chase. What’s the tech stack?
Okay, so here’s my plan for my new website.
- React — Core of the website. I love react.
- Next.js — for SSR (and in the future possibly static site generation). I haven’t used Next.js before, but I’ve researched it and am excited to use it, so learning this technology is a big motivation for me to redo my site.
- TypeScript — I Love TypeScript. Even for a relatively small project like this it’ll make things so much more explicit, and my development style caters to that a lot.
- Styled Components — I’ve started using CSS-in-JS in other projects and love it. The idea of colocating the styling with the JSX is a super clean solution to me, and I don’t think I’d ever volunteer to switch back.
- Unstated-Next — For global state management through containers. I love this design pattern for small-medium-sized projects.
- TailwindCSS — Never used it before but I’ve been dying to. I like tailwind because I agree with their philosophy that UI component libraries “help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design”, so I’m hoping this can be something I use long-term and integrate into other projects as-well.
- React-Hook-Form v.6 — My go-to form management library these days.
- Styled Icons — I’m already using styled components, so I think this library will be a pretty nice way to manage the icons.
- Yup — Form validation. Probably won’t need much form validation, but I want to switch other projects from Joi to Yup so I want to test it out here.
- React-Spring — Animation hooks library for making interactive animation elements
- Ghost — For hosting, drafting and publishing my blog posts (ideally to multiple other platforms like medium and dev.to as-well).
- Vercel — For hosting and creating an automated github CI/CD pipeline for deployment.
So that’s the stack! I think this stack will be really nice and should carry me through the next couple years without needing a redesign. I’m super hyped to start work on it.