README.md – Michael Meng’s Personal Homepage (CS5356 HW3)

Michael Meng | Personal Homepage

Welcome to my personal homepage for CS5356 - Homework 3. This project showcases my work in AI, frontend development, and design, featuring a dynamically generated webpage with interactive elements, API integrations, and a polished UI.

🚀 Live Website

🔗 Visit My Website

---

📌 Features

✅ 1. Responsive Design (HTML + CSS Grid & Flexbox)

• The website is fully responsive, adapting seamlessly across different screen sizes (from 375px (iPhone Mini) to 1512px (Desktop)).
• Implemented CSS Flexbox and Grid for layout organization.
• Used semantic HTML elements to structure content properly.

✅ 2. Dynamic Dog Image Generator (API Integration)

• Fetches a random dog image from the Dog CEO API (https://dog.ceo/api/breeds/image/random).
• Button allows users to fetch a new dog image instantly.

✅ 3. Interactive Elements

• Magic Mouse Trail Effect 🐭✨ – A smooth trailing effect follows the user's mouse.
• Header Color Change on Hover 🎨 – Changes dynamically based on cursor position.
• Profile Picture Hover Glow 🔥 – Adds a glowing effect when hovered.

✅ 4. Themed Sections & Visual Improvements

• Bio Section: Includes my profile picture and a brief introduction.
• Projects Section: Displays my work, using a beautiful block layout with improved spacing.
• Photography Section: Showcases my love for capturing moments, centered and visually appealing.
• Footer: Displays copyright information in a professional format.

✅ 5. Fixed Background Image

• The background image remains static while scrolling using background-attachment: fixed;, creating a parallax effect.

✅ 6. GitHub Pages Deployment

• The website is hosted on GitHub Pages, making it easily accessible via the provided URL.

---

📂 Project Structure

/cs5356-hw3
│── index.html       # Main HTML file
│── style.css        # CSS file for styling
│── script.js        # JavaScript file for interactivity
│── img/             # Folder containing images
│── README.md        # Documentation (this file)

---

🛠️ Technologies Used

Technology	Purpose
HTML5	Structure & Content
CSS3 (Flexbox & Grid)	Styling & Layout
JavaScript (ES6+)	Interactivity & API Integration
GitHub Pages	Hosting & Deployment
Dog CEO API	Fetching Random Dog Images

---

📜 How to Run Locally

1️⃣ Clone the Repository

git clone https://github.com/michaelm7x/cs5356-hw3.git
cd cs5356-hw3

2️⃣ Open the Project

Simply open the index.html file in your browser.

3️⃣ Alternatively, Start a Local Server

npx serve

Then, navigate to http://localhost:3000/ (or the displayed port).

---

🛠️ Enhancements & Extra Credit

⭐ Extra Credit Features

• [✔] Mouse Events: Implemented Profile Picture Hover Glow.
• [✔] API Integration: Fetches real-time data from the Dog CEO API.

🔥 Possible Future Improvements

• Add a dark mode toggle 🌙.
• Introduce a blog section 📝 to showcase projects in detail.
• Implement an image carousel 🎞️ for photography.

---

👨‍💻 Author

👤 Michael Meng
📍 CS5356 Student | Passionate about AI & Frontend Development
📧 Contact Me

---

📜 License

© 2025 Michael Meng. All Rights Reserved.

---

🔥 Visit My Website 🚀