Personal Website — Static Portfolio

Static personal portfolio site showcasing projects, experience, education, and contact. Deployed to GitHub Pages with automatic CI/CD. Vanilla HTML, CSS, and JavaScript — no framework.

Live Demo GitHub Repo

Demo

Preview

Personal portfolio site — home page with hero and featured projects — This site: hero with CTA links, Featured Projects, Narrative Timeline marquee, and sections for skills, experience, education, and contact. Static HTML/CSS/JS with GitHub Pages deployment.

Problem & Context

A personal portfolio site needs to present projects, experience, education, and contact information in a clear, accessible way. The goal was to build a static site that loads fast, works without JavaScript where possible, and deploys reliably. Choosing vanilla HTML/CSS/JS keeps the stack simple and avoids framework overhead while still allowing interactive features like timeline marquees, scroll reveals, and form handling.

What It Does

Hero and intro section with tagline, CTA links (Resume, GitHub, LinkedIn), and profile photo
Featured Projects — cards linking to project detail pages with demo/report labels and tech tags
Narrative Timeline — horizontal marquee showcasing career path (Gallery → SFU → Synkron → Projects → Next)
Skills & Tech Stack — languages, ML/data tools, web & tools grouped in chips
Experience — job entries with company logos, roles, dates, bullets, and skill tags
Education — degree entries with institution logos and metadata
Volunteering — mentorship and other volunteer roles
Posts — cards linking to LinkedIn write-ups (e.g., ML Hackathon, TelusGuardAI, GymWhisper)
Contact form (Formspree) plus email, LinkedIn, GitHub links
Sticky navigation, scroll reveals, type-on-scroll effects
Responsive layout for mobile and desktop

Tech Stack

HTML CSS JavaScript GitHub Pages GitHub Actions Formspree

Architecture / How It Works

The site is a static multi-page HTML site. Pages live under src/pages/ (index, projects, project detail pages, narrative pages). Styles are in src/styles/main.css; scripts handle timeline marquee, type-on-scroll, scroll arrow, and contact form submission. The contact form posts to Formspree for email delivery. Deployment uses GitHub Actions: on push to main, a prepare script runs and outputs to dist/, which is uploaded and deployed to GitHub Pages. Local development: open src/pages/index.html or serve the src/ directory; paths assume pages are under src/pages/.

Key Takeaways

Building a portfolio in vanilla HTML/CSS/JS demonstrates that you can ship a polished, fast site without a framework. The narrative timeline marquee and scroll reveals add personality and interactivity while keeping the core content accessible. GitHub Actions + Pages provides reliable, zero-cost hosting with automatic deployments on every push.

← Back to Projects