Personal website project

#webDevelopment #UXUI

Project background

I decided to rebuild my personal website from scratch, moving away from WordPress to create a faster, more maintainable, and personally crafted web presence that better reflects my work and personality.

Tools used

Figma
Nova

Problem

While WordPress had served me well for years, I found myself increasingly frustrated with its complexity and overhead for what I needed - a simple, fast, and elegant personal website. The old WordPress site was becoming slow to load, difficult to maintain, and didn't reflect my current design sensibilities. I wanted something more minimalist that would put the focus on my work and writing, while also serving as a practical demonstration of my UXUI and web development skills.

This was the basic structure of my old website powered by WordPress.

Design Process & Implementation

I approached this project with a "back to basics" mindset, choosing to work with pure HTML and CSS rather than relying on complex frameworks or content management systems.

I wanted complete control over every aspect of the website's performance and appearance. Working directly with HTML and CSS meant I could ensure fast load times and eliminate unnecessary code bloat.

The design process started in Figma, where I created wireframes focusing on typography, spacing, and content hierarchy. I wanted the website to feel clean and professional while maintaining a personal touch. This led to the choice of a minimal color palette and plenty of whitespace to let the content breathe. The main concept I came up with was that the website should feel like the digital version of the physical notebooks I use everyday to organize my thoughts.

An early mockup of the portfolio section I created in Figma featuring the notebook idea.

For the development phase, I chose Nova as my IDE, appreciating its clean interface and powerful features for web development. I structured the project with maintainability in mind, organizing my CSS with a logical system that would make future updates straightforward.

My coding setup: Panic's Nova IDE on my M1-MacBook Pro.

One of my main goals was to create a responsive design that would work flawlessly across all devices. I implemented a mobile-first approach, carefully considering how content would adapt to different screen sizes. This meant testing extensively on various devices and screen sizes to ensure a consistent experience.

I wanted the website to look good on any screen and created the design with that in mind.

A key improvement over my previous WordPress site was the implementation of proper semantic HTML5 elements and ensuring excellent accessibility. I wanted the site to be usable by everyone, regardless of how they access the web.

Results

In the end I think that almost every owner of a personal website goes through these stages where they feel like their current website just does not represent or serve them anymore. I guess it's almost cliche at this point to go back to the basics but that doesn't make it any less true. It was a really fun process to get back into writing plain HTML and CSS again and I am actually very happy with the result.

The new website loads significantly faster than its WordPress predecessor, scoring high on performance metrics and accessibility tests. The simplified architecture makes it much easier to maintain and update, while the clean design better represents my current work and aesthetic preferences.

Most importantly, the website now serves as both a portfolio piece itself and a flexible platform for showcasing my other work. The process of building it helped me rediscover the joy of crafting websites from scratch, and reminded me why I fell in love with web development in the first place.


<-- Back to my projects