Portfolio Course Project — My First Web Project

A responsive one-page portfolio built with React and Vite for CMPT 276 — Introduction to Software Engineering at Simon Fraser University. It was my first web project ever: component-based development, custom CSS, and deployment on GitHub Pages.

Live Demo GitHub Repo

Demo

Preview

Portfolio course project — one-page React portfolio — My first web project (CMPT 276): one-page React portfolio with hero, skills, projects, education, and footer. Built with Vite and deployed to GitHub Pages.

Context & Motivation

This project was part of CMPT 276 at SFU, where the goal was to build a personal portfolio that showcases projects, technical skills, academic background, and contact information. I wanted a single-page site with alternating sections and a clean UI to practice component-based development and learn deployment with GitHub Pages. It was my first time building a full web application from scratch.

What It Does

Responsive layout — Works on mobile and desktop
Sticky navigation bar — Easy navigation while scrolling
Hero section — Profile image and link to SFU
Skills & projects — Sections with images and descriptions
Academic achievements and experience — Education and work highlights
Footer — Clickable social links and resume download

Tech Stack

React Vite CSS Git & GitHub GitHub Pages

Project Structure

The app is organized around React components and static assets:

src/components/ — React components (NavBar, Hero, Projects, Skills, etc.)
public/ — Static assets (images, icons)
index.html — Entry HTML file
index.css — Global styling

Vite is used for fast development and builds, the output is deployed to GitHub Pages.

GitHub Practices

As part of the course, the project followed solid GitHub workflow:

10+ GitHub issues created with linked commits
Feature branches and pull requests for changes
Clear, descriptive commit messages
Valid MIT License — simple and permissive, so others can reuse or modify the code with attribution

Key Takeaways

This was my first real web project and it taught me the basics of React, component structure, and deploying a static site. Building something end-to-end — from local dev with Vite to a live URL on GitHub Pages — gave me confidence to tackle bigger full-stack projects later. The alternating sections and clean UI were a good exercise in layout and CSS, and the course emphasis on issues, branches, and PRs set up habits I still use today.

← Back to Projects