How I built this site
I wanted a challenge. When I discovered that Claude Code could create designs by placing individual pixels, I saw the perfect opportunity to build something entirely my own, quite literally pixel by pixel. My goal was a portfolio that would be not only memorable but genuinely interactive: a space where visitors engage with information through play and exploration rather than simply reading it. That goal reflects a principle at the heart of my work in testing and instructional design: the most lasting learning comes through experience. We retain what we explore and discover far better than what we passively read.
I ran this portfolio like a test project. I set the requirements, directed an AI assistant (Claude) to build it in JavaScript and React, and tested every version before it went live on Base44, using functional, regression, cross-browser, usability and user acceptance testing.
Start with my testing approach below, then follow the path: each big stone is a milestone in the order it happened, and the seasons change as you go.
My approach
Every change on every page went through the same test cycle, often several times, until it met its acceptance criteria:
…then back to step 1 for the next change.
At a glance
The milestones, in the order they happened
Milestone 1 · Before the first page · Requirements and compatibility
Before building, I set the requirements: a site that is interactive, user-first and runs smoothly for every visitor. The first idea was an animated image for the Home page, but it couldn't respond to visitors.
We eventually landed on JavaScript and React as the languages necessary for running as smoothly as possible on Base44: React components install directly into Base44, and JavaScript draws the pixel art live, so every scene can respond to the person using it.
Milestone 2 · Home page · Functional and regression testing
Manual testing shaped this site from the first version. I set the requirements for an interactive, user-first Home page, then manually tested every interaction against its expected behavior, thinking first about what a visitor would try and whether it would be obvious to them.
As the page grew, I ran regression testing after each change to confirm that everything that already worked still did. When the whole house was replaced with a new design, every existing interaction was retested before release. Readability testing also led to the greeting's font being reworked three times.
Milestone 3 · Projects page · Exploratory, visual and installation testing
The Projects page was built through exploratory and visual testing. I compared several directions, a night village and a meadow, before choosing a daytime forest that continues the Home page and keeps the project cards easy to read.
Testing the published page found defects that previews had missed, such as a missing chicken coop and animals layered in front of trees. Each was logged, fixed and verified on the live site.
Installation testing found that Base44's builder couldn't install a file this large, so the code was split into a scene file and an art file, compressed, and installed through the Code tab.
Milestone 4 · About Me page · Functional testing
About Me became a room where each part of my story lives on an object, so functional testing covered every object: does each one open the right section, show the right label and close cleanly?
As the room gained new behavior (a character who moves around it, day and night, a door to the Projects page and glow-in-the-dark contact details), each addition was tested on its own and then regression tested with everything else.
Milestone 5 · All pages · Usability and accessibility testing
Usability testing showed that a playful site needs to tell people what they can do. Every clickable object now shows a short label saying what a click will do, in the same style on every page.
Accessibility checks added a Key pop-up listing every interaction, buttons for keyboard users and support for the reduced-motion setting. The labels were also tested at the screen edges, after clicks and on touchscreens.
Milestone 6 · Projects pages · Documentation
Finally I rewrote every project as a short case study (Problem, My Role, Process and Outcome), the same clear, structured writing I use for test documentation, so a hiring manager can see what I personally did. All the original links and pictures stayed, and this project joined the list.
Milestone 7 · All pages · UAT and cross-browser testing
I conducted user acceptance testing (UAT). I asked testers for feedback and asked them to run the site on a variety of browsers and try out every feature.
I implemented their feedback, which ultimately made the site run much smoother.
Results · Quality assurance
Real defects I found through manual testing of previews and the live site, and how each one was fixed and verified:
| Defect | Found during | Fix | Status |
|---|---|---|---|
| The chicken coop was missing from the final Projects scene on the live site. | Live-site testing | Moved the coop in front of the tree layer, then retested on the live site. | Fixed |
| Animals appeared in front of trees they should have been behind. | Visual testing | Put the animals on a layer behind the trees, so they walk behind the trunks. | Fixed |
| A large gap appeared between the Home and Projects sections, and the scene didn't fit the screen from left to right. | Layout testing on the live site | Made the scene fill its section edge to edge on every screen size. | Fixed |
| Base44's builder couldn't install the Projects file (about 359 KB). | Installation testing | Split it into a scene file and an art file, compressed both, and installed them by pasting into the Code tab. | Fixed |
| The chat preview couldn't find the separate art file. | Preview testing | Made single-file preview versions just for reviewing. | Fixed |
| The greeting text ran into the new cottage's roof. | Regression testing after the house was replaced | Re-centred and resized the text so it lines up with the top window. | Fixed |
| At night a star sat right above the "a" in "Lauren" and looked like an accent mark. | Visual testing in night mode | Kept stars out from behind the greeting. | Fixed |
| The preview showed "returnReact is not defined" from compressed code. | Preview testing | Previewed from the readable version instead (the live site was not affected). | Fixed |
Design exploration · Exploratory and visual testing
Each page started as a mockup that I tested against its requirements before committing to it. Every mockup below is written up the same way:
What I tested→What I found→What I decided
Reflection
