Development 2025

This Website

120+ hours of hand-coded HTML, CSS, and JavaScript. No templates. No page builders. Just code, intention, and too many late nights.

Overview

You are looking at it. This portfolio is not a template download or a Squarespace site with a custom font. It is 120+ hours of hand-written HTML, CSS, and JavaScript, built from an empty folder.

Why build from scratch? Because I wanted full control over every pixel, every animation, every line of code. And because I needed a project that would prove I could actually ship something real.

Why From Scratch

I could have used a template. It would have taken a weekend. But templates teach you how to configure someone else's code; they do not teach you how to build.

I wanted to understand responsive design at the CSS level, not the drag-and-drop level
I wanted to learn GSAP animations by implementing them, not copying snippets
I wanted to build a PWA from scratch so I actually know how service workers function
I wanted a portfolio that doubles as proof of technical capability

The result: I now understand every line of code on this site. That matters.

What I Built

1. Static HTML, Tailwind CSS, Vanilla JavaScript

No React. No Next.js. No build step dependencies that break in six months. Just files that work in any browser, forever.

2. GSAP Animations with ScrollTrigger

Every fade-in, every slide-up, every scroll-triggered animation is hand-configured. The animations serve the content; they do not distract from it.

3. PWA with Offline Support

Service worker, manifest.json, installable on mobile. Works without internet after the first visit.

4. WCAG 2.1 Accessibility

Semantic HTML, ARIA labels, keyboard navigation, screen reader tested, dark mode toggle with system preference detection.

5. AI Chat Integration

Savonie chat widget lets visitors ask questions about my work directly on the site.

The Numbers

120+

Hours of development time

95+

PageSpeed score on mobile and desktop

Templates or page builders used

100%

Hand-written code I understand

Tech Stack

Structure: Semantic HTML5
Styling: Tailwind CSS with custom theme
Interactivity: Vanilla JavaScript (ES6+)
Animations: GSAP 3.12.2 with ScrollTrigger
PWA: Service worker, manifest.json, offline caching
Accessibility: WCAG 2.1 AA, ARIA, keyboard navigation
Analytics: Microsoft Clarity, Google Analytics 4
AI: Savonie chat widget integration

What I Learned

CSS is deep: Flexbox, Grid, custom properties, responsive design patterns; there is always more to learn
Performance is a feature: Every kilobyte matters on mobile; lazy loading and compression are not optional
Accessibility forces good design: Building for screen readers improves the experience for everyone
Simple beats clever: Static HTML will outlive any JavaScript framework

How I Use AI on This Site

AI tools helped build this site, but not by generating finished code. Here is how I use them:

Drafting and iteration: I use Claude and ChatGPT to explore ideas, get feedback on structure, and refine my writing. The final words are mine.
Learning accelerator: When I hit a CSS problem or JavaScript bug, AI explains concepts faster than documentation alone. I still need to understand and implement.
Code review partner: AI catches mistakes I miss and suggests improvements. But I review every suggestion and only keep what makes sense.
Not autopilot: AI does not write my content or make design decisions. It helps me move faster on tasks I already understand conceptually.

The goal is augmentation, not replacement. Every line of code is something I can explain and maintain.