Digital Portfolio for CS5709 - Software Engineering Evolution (Phase 2)

This project is an advanced, dynamic, multi-page digital portfolio built for the CS5709 module at the University of Limerick. It showcases my skills, projects, and technical abilities.

This Phase 2 version has evolved significantly from the original, incorporating peer feedback to implement advanced features, a robust technology stack, and a fully responsive user experience.

➡️ View Live Demo Here

Key Features

• Dynamic Content Management:
  • Blog: Fetches posts from a live Firebase Firestore database.
  • Projects & Skills: Data is dynamically loaded from local JSON files, demonstrating separation of concerns.
• Advanced Animation Stack:
  • Page Transitions: Smooth, animated transitions between all routes using Framer Motion.
  • Interactive UI: Utilizes GSAP for the initial welcome splash screen and scroll-triggered animations on the About page.
• Fully Responsive Design:
  • Adapts seamlessly to all device sizes, from mobile to desktop.
  • Features a functional hamburger menu for intuitive mobile navigation.
• Interactive Filtering & Search:
  • The projects page includes a live search bar and category filters to sort projects dynamically.
• Performance Optimized:
  • Uses React.lazy() and Suspense for code-splitting, ensuring fast initial load times.
• Dark / Light Mode:
  • Includes a theme toggle button, with the user's preference saved in localStorage using React Context.
• API Integration:
  • The contact form is fully functional and integrates with Formspree for backend email handling.

Technology Stack

• Core: React.js, TypeScript, Vite
• Styling: CSS3 (with CSS Variables), Material-UI (MUI)
• Animation: Framer Motion, GSAP
• Routing: react-router-dom
• Data & API: Firebase (Firestore), Formspree
• Tooling: Git, GitHub, GitHub Actions (for CI/CD)

CI/CD Pipeline

This project uses GitHub Actions for continuous integration and continuous deployment (CI/CD). The workflow is defined in .github/workflows/deploy.yml and automates the deployment of the portfolio to GitHub Pages.

Key steps in the pipeline:

• Trigger: The action automatically runs on every push to the main branch.
• Build: It sets up a Node.js 20.x environment, installs dependencies using npm ci, and builds the static site with npm run build.
• Deploy: The resulting ./dist directory is then deployed to the gh-pages branch using the peaceiris/actions-gh-pages action, which updates the live demo site.

Getting Started

To run this project locally, follow these steps:

Prerequisites

You need to have Node.js and npm installed on your machine.

Installation & Setup

1. Clone the repository:

   git clone [https://github.com/GavinZHU2020/FirstPortForlio.git](https://github.com/GavinZHU2020/FirstPortForlio.git)

2. Navigate into the project directory:

   cd FirstPortForlio

3. Install the dependencies:

   npm install

4. (Optional) Firebase Setup: To run the blog, you will need to set up your own Firebase project and create a src/firebaseConfig.ts file with your credentials.

5. Start the development server:

   npm run dev

The application will be available at http://localhost:5173.

---

This project was updated by Wenkai Zhu for Assessment 3 (Phase 2) of the CS5709 module.