Alex Gaffen - Personal Portfolio

This repository contains the source code for my personal portfolio website, hosted at alexgaffen.com. This site showcases my education, technical skills, work experience, and projects as a Computer Science student at McMaster University.

🚀 Live Demo

Visit the live site: alexgaffen.com

📋 Features

• Responsive Sidebar Layout: A fixed sidebar navigation that adapts to different screen sizes, shrinking vertically on shorter screens and collapsing into a mobile-friendly view on narrower devices.
• Scroll Reveal Animations: Sections smoothly fade in and slide up as you scroll down the page using the Intersection Observer API.
• Dynamic Skill Badges: Interactive skill chips with custom hover effects that change color based on the specific technology branding (e.g., Python turns blue, Git turns orange-red).
• Embedded Integrations: Integration with TryHackMe public profile badges.
• Downloadable Resume: Direct link to download the PDF resume from the sidebar.

🛠️ Technologies Used

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Fonts: Google Fonts (Oswald for headers, Open Sans for body text)
• Icons: Font Awesome 6
• Hosting: GitHub Pages

📂 Project Structure

├── assets/              # Images, icons, and PDF resume
│   ├── profile.jpg
│   ├── mcmaster.png
│   ├── canadaflag.png
│   ├── cyberclublogo.jpg
│   └── ...
├── index.html           # Main HTML structure and content
├── style.css            # Custom styling, variables, and animations
└── CNAME                # Custom domain configuration

🔧 Local Development

To view this project locally on your machine:

1. Clone the repository:

   git clone [https://github.com/AlexGaffen/AlexGaffen.github.io.git](https://github.com/AlexGaffen/AlexGaffen.github.io.git)

2. Navigate to the project directory:

   cd AlexGaffen.github.io

3. Open index.html in your preferred web browser.

📬 Contact

• LinkedIn: alexgaffen
• GitHub: alexgaffen
• Email: alexgaffen@gmail.com

---

© 2026 Alex Gaffen