Responsive multi-page portfolio site, hand-coded and deployed on GitHub Pages.
Role
Designer & developer
Stack
HTML · CSS · JavaScript
Hosting
GitHub Pages
Status
Live
Highlights
Hand-coded multi-page static site with no framework or site builder.
Shared stylesheet and script across all pages for consistency and maintainability.
Named image slots that load automatically and hide when empty on the live site.
Project filtering, lightbox image viewer, and responsive layout.
Overview
This portfolio documents my engineering projects in depth, covering design decisions, specifications, and
results. I designed and coded it in HTML, CSS, and JavaScript and deployed it on GitHub Pages.
Fig 1 — Home page.
Design system
A defined set of design tokens (color, typography, spacing) shared across every page: a violet accent,
Fraunces for headings, and Spline Sans for body text.
Fig 2 — Early wireframe.
Implementation
One shared style.css and main.js across all pages.
Named image slots: images placed in images/ load automatically (.jpg, .png, .jpeg, .webp); empty slots are hidden on the live site.
Project filtering by discipline (hardware, PCB, embedded, software).
Lightbox viewer for full-screen images.
Responsive layout with CSS Grid and a mobile navigation menu.
Skills applied
Multi-page static site architecture with shared assets.
Responsive design with CSS Grid and Flexbox.
Deployment and version control with Git and GitHub Pages.