All projects

Web development

This Portfolio Website

A portfolio I designed and built from scratch with Astro, Tailwind CSS and GSAP, a completely new stack for me, structured like the plugins I build.

The portfolio project open in VS Code, with its folders and README beside a live preview of the About page
Client
Personal project
Services

Front-end development

Design system

Animation

Deployment

Date
Ongoing

01

Overview

This site is a personal project, separate from my day-to-day work in WordPress, WooCommerce and Microsoft 365. I first planned to edit a WordPress template, but chose to build it from scratch with a modern framework instead. It's faster, cleaner, and avoids paid plugins, constant updates and slow pages. It was also a chance to step outside my usual stack and prove I can learn something new and deliver it properly.

02

The problem

I needed a portfolio I could keep growing for years without depending on a theme, paying for plugins or fighting a page builder. It had to be fast, work properly on phones and look professional. I also had to learn the tools to build it: Astro, Tailwind, GSAP, and a Git-to-Vercel deployment workflow, none of which I'd used before.

03

What I built

I used the same structure I follow for WooCommerce plugin development: reusable components, a separate data layer, and shared styles and scripts kept apart. Each part has one job, so the site is easy to change and extend.

  • Reusable components for the header, footer, project cards and tools strip
  • A projects data file, so adding a case study means adding one entry
  • A colour system with light and dark mode, set in one place
  • GSAP animations: text reveals, smooth scrolling and an interactive logo strip
  • Responsive layouts tested on iPhone, Android and desktop
  • Automatic deployment: every push to GitHub publishes the site through Vercel

04

How I worked

I built it in VS Code with a live preview beside the code. I worked in small steps: change, preview on desktop and phone, then commit. Before big redesigns, I created a restore point and a separate Git branch so I could experiment safely. I kept an AGENTS.md file that documents the project's structure and rules, so the AI tools I used followed my setup instead of guessing. AI sped me up, but I made sure I understood every change before keeping it.

The portfolio homepage shown at desktop width
Every change is previewed at desktop width before it's committed.
The portfolio homepage shown in a phone view
The same change checked in a phone view, so the layout works on small screens.
GitHub commit history for the portfolio repository
Work broken into small, clearly named commits on GitHub.
Vercel deployments list showing production builds marked Ready
Each push to GitHub builds and publishes the site through Vercel.

05

Tech used

AstroTailwind CSSTypeScriptGSAPGitGitHubVercel

06

Result

A fast, responsive portfolio that I fully own and understand. It shows I can pick up an unfamiliar framework, apply the same structure and discipline I use at work, and ship something complete.

07

What's next

The site keeps growing with my work. Next, I plan to add new case studies, improve performance and accessibility, and go deeper with TypeScript and Astro.