Why Redesign?
Welp, it’s that time again. It’s been about 6 years (🤯 holy shit time flies) since I last re-designed my portfolio site. The last time I even had enough time to work on my portfolio site was during, you guessed it, Covid lock down. My old portfolio was built with Gatsby with React and Sanity CMS. And it was fine. To be honest, I rarely even touch the site. As you can see, I only have 3 blog articles on it as well 😂 I have ambitions to write more and post more articles, but as you can imagine, life gets in the way and there is always something or some project with higher priority. Even more so now with 2 kids.
But, now in the age of AI, I can build a website 10x faster than before! And with Gatsby feeling a bit dated these days and my interest in building apps in Svelte rather than React, I thought it was the perfect time to redesign my site. Not to mention I have advanced in my career quite a bit in the past 6 years. It was time for a positioning and content update as well 😊So how did I go about building this new site? And how long did it take?! Let’s get into it.
The New Stack
What’s my beef with NextJS?
So why would I move away from React and Gatsby and build with Svelte? Let’s start off with why not React. Well, as I mentioned, Gatsby is just feeling dated a bit these days. I’ve been working with NextJS for the past 6 years or so. Usually I would have just migrated it to NextJS because I used to love NextJS! But over the past couple of years ever since the NextJS App Router came into existence, I have felt NextJS go down hill. With one of my clients, we migrated a rather large NextJS app from the Pages to App Router and ever since we have just encountered issues. Mainly around caching. But also because the app is self hosted in Kubernetes and with multiple pods. Turns out Vercel likes to make your life hard when you’re not hosting NextJS apps in Vercel. Not all of NextJS’s features work out of the box and it takes extra configuration. Mainly around Caching and Streaming.
So after my uphill battle with NextJS in those experiences I just decided any new greenfield project I work on will be in Svelte.
Why Svelte?
Over the years I’ve kept a pulse on Svelte and I just like a lot of the things about the framework and ecosystem.
Here are some of the things I like about Svelte:
- I feel like Svelte does a way better job of prioritizing DX and simplicity. Staying close to web standards.
- The compiler approach instead of runtime. Because of this core difference and Svelte being compiled, it’s much faster, simpler, much lighter, you don’t have to worry about the virtual dom … it’s all just compiled down into vanilla JS.
- Simplicity - the API is easier to understand. Reactivity is easier to manage and understand.
- Built in transitions and animations
- Easier to deploy across platforms.
- The creator, Rich Harris is awesome and I just dig his ethos behind Svelte.
The list goes on. And honestly, I’ve built very little with Svelte because I’m rarely starting new greenfield projects. But I’m looking forward to more opportunities to use it. Ironically, Vercel hired Rich Harris and provided financial backing to support the ecosystem and progression of Svelte. Very suspect if you ask me, but hopefully that works out for Rich and the team.
Besides Svelte, I am keeping Sanity CMS (because it’s the best CMS and I love it). Shout out to Sanity’s MCP and agent, it makes updating content and building schemas a very pleasant developer experience. No Tailwind on this site, just regular old CSS because styles are scoped to components in Svelte and I’m loving the simplicity. Less dependencies the better. For logging and analytics, I decided to give PostHog a go. I only hear good things, and it’s mostly free. I find the UX and UI of Google Analytics pretty bad. The onboarding experience to PostHog with their MCP was actually delightful. I was impressed and I’m stoked to be using it.
The Agentic Engineering Workflow
Agentic SDLC
No, this new site was not just vibe coded! I’m fortunate enough to work at an enterprise organization, Carvana, who has been an early adopter of AI and taken an “AI first” approach to building software over the past couple of years.I feel like we’ve been on the bleeding edge of this AI technology. Our teams have built internal tools, agents, workflows, and frameworks for working and building with AI. It’s pretty freaking awesome! Like many experienced engineers these days, I am also using a popularized workflow for agentic engineering and prompting. Research, Plan, Execute, and Validate. For this project, I used the popular framework from Obra, Superpowers. There’s a ton of similar frameworks out there now and days for agentic engineering. So I just reached for a popular one that follows the same core principles of the workflow. I am big fan of TDD and spec driven development with agentic engineering because it allows you to be a little more hands off and have a more autonomous validation step.
The Model
Even though I dabble with a variety of different AI models for various use cases, for coding, I stick to Claude Code. Ever since Opus 4.5 dropped, I’ve felt like I have super powers. It’s insane the amount of output I can produce in a sprint now and days. I love it!
MCPs and Skills
I used a variety of different skills and MCPs for this project.
- Svelte Code writer and best practices skills to keep my Svelte code looking supreme (I’m still relatively new to using Svelte)
- Sanity MCP - I absolutely love working with the Sanity MCP, it makes adding/updating content, writing schema, configuring Sanity a breeze.
- PostHog MCP for installation, onboarding, and code implementation. I feel like I barely lifted a finger for this, it was amazing.
- SuperPowers - Of course as mentioned above, SuperPower for my agentic engineering workflow and spec driven development.
UI Design
Even though I really liked my old design, I hadn’t changed it since I launched v1 back in 2012. Even when I rebuilt my portfolio during Covid, it was all tech stack updates… I left the UI design in tact. Primarily because I had always gotten such positive feedback on that design. Back in the day when your portfolio site actually had more impact, I had multiple recruiters reach out to me because they said my portfolio site stood out. I accepted multiple job offers from that. However, design trends change and so do you. It was time for a face lift. Something more professional and mature, but also more personal at the same time. I didn’t want my personal site to be ONLY a portfolio site about work. I thought it would be more fun to include some more content about my personal life as well. Hence the timeline on my “life” page, fun clips from my hobbies, personal youtube videos, etc.
And when you have an AI agent doing all the heavy lifting, of course you gotta throw in light AND dark mode. Dark by default of course ;)
What's Next
Hopefully I’ll find the time and start prioritizing writing more blog articles on this site.
With AI, I should totally be able to find the time and whip out articles left and right, RIGHT?
While I do stay really busy with my existing clients, I am looking to take on another side project or two. So if you have a website or app in mind that you want built, perhaps your own personal website that you just don’t have the the time for, hit me up. Let’s chat.
