← All projects

Web Engineering · Accessibility

Portfolio Website

A fast, responsive static site designed to present technical work clearly without a frontend framework or runtime dependency.

  • StatusComplete
  • DeliveryGitHub Pages
  • PagesHomepage + projects
  • DependenciesNone
View GitHub RepositoryView Homepage

01

Overview

The website treats project evidence, readable content and accessible navigation as the core product.

It is built with semantic HTML, a shared responsive CSS design system and a small JavaScript enhancement for theme and mobile navigation. Relative links preserve compatibility with the repository's GitHub Pages subpath, while the site remains usable with JavaScript unavailable.

02

Technologies

  • HTML5
  • CSS
  • JavaScript
  • Git
  • GitHub Pages
  • Responsive design
  • Accessibility

03

Key Results

0

Frontend dependencies

No framework, package manager or client-side library is required.

2 themes

Colour modes

Light and dark palettes preserve the same content hierarchy.

6 projects

Case-study routes

Consistent pages connect technical detail with clear navigation.

04

Architecture

A small shared surface keeps maintenance straightforward: content lives in semantic pages, presentation in one stylesheet and progressive behaviour in one script.

Semantic HTML
Shared CSS tokens
Progressive JavaScript
Static assets
GitHub Pages

05

Visuals

<main>
  <section aria-labelledby="projects-heading">
    Evidence-led project presentation
  </section>
</main>

06

Challenges

Content consistency

Six different projects need one hierarchy without erasing their differences.

Responsive density

Project evidence and controls must remain readable on small screens.

Theme parity

Both palettes need sufficient contrast and equivalent visual emphasis.

Honest presentation

Unavailable links and incomplete results must remain explicit rather than implied.

07

What I Learned

  • How a token-based CSS system reduces inconsistency across a multi-page static site.
  • Why semantic structure and visible focus states are core interface requirements.
  • How progressive enhancement keeps essential navigation independent of JavaScript.
  • Why concise evidence and explicit limitations improve technical credibility.