I built this site with plain HTML, CSS and JavaScript — no frameworks, no build tools, no npm. Just files in a folder. That was a deliberate choice, and I think it was the right one.

Why not React, or Next, or…

The honest answer is that for a personal portfolio, the overhead isn't worth it. A React app for a site with six sections and a contact form is like using a sledgehammer to hang a picture. Vanilla HTML is fast, readable, and deploys to GitHub Pages in one push.

The slightly less honest answer is that I find raw DOM manipulation more satisfying. When something works, you know exactly why it works.

The particle canvas

The thing most people ask about is the particle image in the hero section. The idea is simple — sample pixel colours from a source image, spawn a particle at each dark pixel, and animate them back to their base positions when the mouse moves away.

// Sample pixels from source image ctx.drawImage(image, 0, 0, canvas.width, canvas.height); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (let y = 0; y < canvas.height; y += 4) { for (let x = 0; x < canvas.width; x += 4) { const i = (y * canvas.width + x) * 4; const brightness = (data[i] + data[i+1] + data[i+2]) / 3; if (brightness < 210) particles.push(new Particle(x, y, ...)); } }

The repulsion on hover is just: find distance to mouse, if inside a radius apply a force pushing the particle away, otherwise ease it back to its base position at 6% per frame.

The games

Each game — Connect 4, Noughts & Crosses, Hangman, Battleships — is a self-contained HTML file with its own CSS and JavaScript. The Connect 4 and Noughts & Crosses AIs use minimax with alpha-beta pruning, which sounds impressive but is really just exhaustive search with early termination when a branch can't improve the best known outcome.

Battleships uses a checkerboard shot pattern for the search phase (more efficient than random because ships are at least 2 cells long) and switches to targeted adjacent-cell hunting after a hit.

What I'd do differently

The source is on GitHub if you want to poke around.