Projects

Five assignments, in the order I built them. Each one was a chance to practice one new thing on top of everything before it — so instead of a flat grid, this is a timeline.

  1. Skill: HTML & CSS fundamentals

    Homework 1 — First Portfolio Page

    My first real page: a single-file introduction built to practice the box model and basic layout, with a profile photo and a short bio, before any framework or build tooling entered the picture.

    HTML CSS
    View code: Homework 1 →
  2. Skill: JavaScript & the DOM

    Homework 7 — Trailhead: Interactive DOM Project

    A bird- and trail-watching themed page. Clicking "Show another tip" cycles through trail tips, typing a species name fills a live "margin meter" bar that changes color as you type, and an "Add to log" button builds a running sightings list you can add to and remove from — all through addEventListener, createElement, and appendChild, no libraries.

    JavaScript DOM manipulation CSS
    View live site: Trailhead → View code: Trailhead →
  3. Skill: Form validation & a public API

    Homework 8 — Accessible Contact Form with Validation & API

    A contact form that validates name, email, age, and message on the client, and shows errors inline in a way a screen reader can follow. Once the form is valid, it fetches a short piece of advice from the public Advice Slip API — and still shows the success message if that request fails, so the form never depends on a third party to work.

    JavaScript Fetch API Accessibility
    View live site: Accessible Contact Form + API → View code: Accessible Contact Form + API →
  4. Skill: Multi-page architecture & accessibility

    Homework 2 — Developer Portfolio (v1)

    A first pass at a multi-page portfolio — home, projects, and about/contact — built around a dark, high-contrast design system. I ran WAVE against each page and fixed what it found: missing current-page indicators in the nav, links that opened new tabs without rel="noopener noreferrer", and an accessible fieldset/legend structure for the contact form's radio group.

    HTML CSS Accessibility
    View code: Homework 2 Developer Portfolio →
  5. Skill: Accessibility auditing at depth

    Milestone Project — Developer Portfolio (v2)

    A revised version of the same portfolio, taken through a full WAVE and axe-core pass across all three pages — 0 errors, 0 contrast errors, 0 alerts, with an AIM score of 10/10 on each. I documented every text/background pair against the WebAIM contrast checker, tested the contact form keyboard-only, and applied Gestalt principles — proximity, similarity, and common region — deliberately rather than by accident.

    HTML CSS WCAG AA axe-core
    View code: Milestone Project →

This site is the next one: a single capstone draft that pulls a real project description from each of the five above, checked for zero WAVE errors, for peer review.