Jeremiah Hass

How I Built My Portfolio Website from Scratch

Published June 2025

Creating my personal portfolio website was both a rewarding and educational experience. I built it using just HTML, CSS, and a little JavaScript, hosted it on GitHub Pages, and designed it to showcase my projects, skills, and articles in a clean and accessible layout.

🧱 Project Structure

/portfolio/
├── index.html
├── articles.html
├── skills.html
├── style.css
└── /images/

The homepage includes a hero section, an about summary, featured projects, and a contact form. Longer content (like articles and skills) was moved to standalone pages for clarity.

🎨 Styling with CSS

I used CSS custom properties (variables) for color theming, enabling both light and dark modes. Responsive design was achieved with flexbox, grid, and media queries.

🌗 Light/Dark Mode Toggle

I added a toggle button using JavaScript that applies a dark-mode class and stores the setting in localStorage.

🗂️ Sections I Included

  • Home
  • About
  • Projects with filters
  • Skills
  • Articles
  • Contact Form (via Formspree)

🚀 Hosting on GitHub Pages

I version-controlled my site using Git, then deployed it through GitHub Pages in the repository settings.

🛠 Tools I Used

  • Visual Studio Code
  • Git & GitHub
  • Formspree
  • Figma

📈 What I Learned

This project helped me learn more about front-end dev, accessibility, modular sectioning, and deployment workflows.

💡 Final Thoughts

Whether you're new or experienced, building your own site is a great way to grow as a developer and showcase your progress.