Why rewrite your own site multiple times?

jeez web development is funny • November 23, 2023


Welcome back everyone

This is probably my 3-4th iteration of my personal site, which now uses VitePress with a custom theme.

This article will serve an history lesson and why it was justified to do so, and free filler on site!!.

Also none of these are available today.


History

First version

This wasn't really a public thing, but it was in HTML and CSS, absolutely 0 JavaScript. Not that I have JavaScript or I horseride the static website evangelism, but I really wanted a simple and fine site so yeah.

Second version

This was basically my playground for things I was learning along the way, also not a public thing. This was in Create React App (Vite wasn't a thing yet) with same design as above. Actually all of the versions mentioned here used mostly the same color pallete until this one which uses radix-ui/colors.

Third version(s?)

There were multiple versions in Astro that I had been making, but they never saw the day of light in the world. It was again for learning experience and that infact helped me learn the framework more, so win win I guess.

The very first one was me following Astro's starter guide and docs, that one looked simple but it felt hard to change things up. This was also in Astro v1.x.something.

Then came multiple try-hard attempt versions which were in Astro v2, which brought Content Collections. Second one was again the starter guide version because I decided to learn Astro again after months. Others I don't really remember anymore but these were just me goofing around and trying templates, etc. One such template was the littlesticks blog template.

The final one was more of a serious version, and was public! It was written in base Astro with UnoCSS, MDX (because I had plans to write some MDX) but the design didn't pan out as I thought it would. I used the official Astro blog template with my own customizations and I mean it worked totally fine but maybe not the best one, or I'm just tasteless I guess.

Fourth version (current)

This is the version you're currently in, written with VitePress, TailwindCSS (though I want to swap it out for UnoCSS), SCSS for styling, and Radix Colors, yes, just this much.

Though this may look boring, I think it looks the most simplistic design out of the other versions, and I also get to leverage VitePress' integrations as it uses Vite and Markdown-It.

I chose Radix Colors because it had more options and the colors looked pretty. So far, all the previous versions used the same pallete:

css
:root {
  --bg: #16181d;
  --alt: #1a1b26;
  --accent: #f7768e;
  --text-accent: #c0caf5;
  --text-hover: #a8dadc;
}
:root {
  --bg: #16181d;
  --alt: #1a1b26;
  --accent: #f7768e;
  --text-accent: #c0caf5;
  --text-hover: #a8dadc;
}

It looked fine and pretty, and I will still use this pallete for small sites when I need to sprinkle some styling, but otherwise not suited for this current version.

I also can write Vue now, since I have been ❤️ing Vue more than React. It even works inside Markdown!

Though you may say that I can use Vue in Astro too, and sure I can, but that's not the sentiment I want to go with. I wanted something simpler and used that. I have more experience with writing Vue now, VitePress brings the best of SSGs to the table with its excellent DX thanks to Vite, and I don't have to mess with Astro anymore, so overall this setup whets my appetite well.


Still though? Why? Are you Stupid?

No, I am not stupid. I am just a perfectionist, I love finding flaws in my code then proceed to run the dreaded command: pnpx create <framework-name-here> and get on with my day.