2024 passed quickly and my lust for overengineering returned. I was getting bored with my old website design which designed 2 years ago by myself. Back then, i build my website with NextJS with Contentlayer as my content SDK. One year after that, my office introduce me with Go which i loved it. The simplicity, more type safety and the speed of Go make me wanna to learn more about this langugage. And so, i tempted to create something with Go; Naturally, the first thing that came to mind was, “Let’s rewrite the website in Go!” (Because who doesn’t love a good rewrite, right?). After two months of “development” (read: playing games), I finally rewrote the site using my very limited knowledge of Go.
Then, in 2024, I tried Astro, which is a competitor to NextJS, and wow—this thing is pure magic. It seriously boosted my workflow, and I knew I had to rewrite my website in Astro too. But this time, I didn’t just want to rewrite it; I wanted to refresh the design as well.
Here’s what i wanted from my new website designs :
- Minimal: Easy to maintain and easy to create
- Bold: Make the website more stands out with big font (or whatever it is)
- BROWN: This is the breaking changes from previous version of my website which only black and white (booooring) With that in mind, i began for adventure to searching inspiration
What Inspired Me
I’m spent time to research some of inspirations on the websites like Godly. Here some of the websites that used for my inspirations :
Putting it Together
After adventuring from one website to another, i cherry-picked some components and mixed them together. i settled on Anton and Satoshi(fr) as the main fonts and went all in on brown as the primary color. I add some animation for revealing heading text for my website so it can feel more life for the users.
Tech Stacks
I choosed these stacks because i love the simplicity and scalability
- Framework: Astro
- UI Library: React JS
- Animation Library: Framer Motion
- Runtime: Bun
- Hosting: Vercel
How It’s Build
It took many days to build this website because i have to work on some projects at my office that make me highly focused to those project and “abandoning” this website.
- Initialize Project: I starting this website refresh development on September by initialize the project with installing some essentials libraries and decide which library/tools should be used
- Layouting: After initialize the project, i began to create layout, i wanna to make this website simple so i dont want to add unnecessary element for the layout and annoying my visitor. So, i breakdown it to header, main content and the footer.
- Header Layout: First thing first i create header without interesting contents, only logo (just letter A.) and the main site navigation. On my first iteration, i decided to make it sticky but i think it can be annoying when you scrolling down and see big element covering content so i revert it and make it static instead (just a good-hearted header :D)
- Home Page: This is the most time-consuming part on this development; Most of the time i spend my time by researching and some “trial and error” to build most suitable interface by mix and match my inpirations before. I just create 4 sections on my home page which is hero (just basic reveal text transition), latest works (i need to organize all of my projects fr), tech stacks and the latest articles (showing latest 10 articles on this website).
- Footer: Nothing special here just same content with header and one text transition with my name (i found this from my X timeline).
- Single Page: After finished on home page, i moving on to the single page design, it used for article and page detail or other markdown data. Just install
@tailwindcss/typographyand leave it to them to style my single page (with a few custom tweaks here and there).
Thats it
I open-sourced the code, so feel free to fork it, play around with it, or maybe even contribute. Who knows? xD