this website


this website
01.
Overview

Personal Portfolio: The DIY Manifesto Hand-crafting my digital presence from scratch.

Why?

Well, because I need a page to document and track all of the cool stuff I make, both professional and hobby related. Also, hopefully having a paper trail of significant projects will motivate me more to not only start but also finish them.

What?

A while ago, one of the most driven developers I've ever met, Chris, was raving about how he found this cool technology to generate static pages. At first, he helped me set one up as a "news" website for an RPG I occasionally ran. Many moons later, I decided to actually use the same tech to throw together something to display my work. All the not-so-exciting (read: backend) stuff has been done based on this article, while I chose to write the front end from scratch, making my own CSS library.

02.
Details

Design Goals

I wanted to go for a minimal, bold, almost brutalist futuristic feeling, creating clean lines mixed with gothic typography. My aim was to build something truly unique, explore different types of interafacesI love simplicity, minimalism, and understanding the process behind how everything works. Sure, I could have used one of those visual website builders (that's where I actually started and absolutely hated it) or built it in Figma and thrown it into an AI solution such as Bolt to turn it into a functional website. But I wanted this to be truly a reflection of me without any middleware, wrappers, or tech I don't understand. (I did have some help with the backend Astro setup, but since that doesn't interest me as much, I allowed myself to cheat there.), without compromising UX.

Main Inspirations

I love simplicity, minimalism, and understanding the process behind how everything works. Sure, I could have used one of those visual website builders (that's where I actually started and absolutely hated it) or build it in Figma and thrown it into an AI solution such as Bolt to turn it into a functional website. But I wanted this to be truly a reflection of me without any middleware, wrappers, or tech I don't understand. (I did have some help with the backend Astro setup, but since that doesn't interest me as much, I allowed myself to cheat there.)

I want to know why something is breaking rather than be ignorant of why it's working. This approach wasn't without challenges: Astro by default expects users to use either TypeScript or React to build the project, and since I wanted to do it all in just basic HTML and CSS, there were some hurdles to overcome.

Tech stack:

  • HTML5 - Structure and content

  • CSS3 - Custom styles and animations

  • jQuery + JS - For all interactions, filtering, and dynamic elements

  • Contentful - Content management system

  • Vercel - Hosting and continuous deployments

  • Astro - Static site generation

Design process

I started with a blank canvas and sketched out the core structure on paper before moving to code. I didn't use any design software, as I wanted the site to be mostly code-first and evolve organically as I built it. I deliberately avoided frameworks like Bootstrap or Tailwind, instead creating my own lightweight CSS approach that gives me complete control over every element.

Challenges and solutions

The biggest challenge was maintaining the minimalist aesthetic while ensuring the site remained functional and accessible. I also wanted to lean towards more uncommon design patterns while keeping the site accessible. A good example of that would be the mobile navigation — burger menus are the norm, but having something a bit more distinct such as a call-to-action sticky button at the bottom that opens a nav built around mobile users was a unique opportunity. Since I don't have other stakeholders to satisfy, I could experiment freely.

Working with Astro's expectations when using vanilla HTML/CSS required some workarounds, but ultimately gave me the flexibility I needed while still benefiting from static site generation.

What I learned

Building everything from scratch reinforced my belief that understanding the fundamentals leads to better products. While it might have taken longer than using pre-built solutions, the knowledge gained and the satisfaction of creating something truly my own was worth the extra effort.

I also learned that I don't know how to write up content (yet here we are anyway).

This site will continue to evolve as I add more projects and refine the experience, but the foundation built on my somewhat understandable code will make that process much more enjoyable.