🌐 Personal Portfolio Website – Gregory George

🚀 Project Overview

This is a responsive, multi-page personal portfolio website built using HTML, CSS, and JavaScript. It showcases my front-end development skills, projects, and interactive form functionalities, and implements several core web development concepts as per assignment requirements.

---

🛠️ Tools Used

• HTML5 – Structure and semantics
• CSS3 – Styling, layout, animations, and responsive design
• JavaScript (Vanilla JS) – DOM manipulation, event handling, validation, dynamic features
• VS Code – Code editor
• W3C Validator – HTML and CSS validation
• Git + GitHub – Version control and deployment
• Google Chrome – Development and testing

---

🌟 Key Features Implemented

✅ HTML

• Semantic HTML5 structure with <header>, <main>, <section>, <article>, <nav>, and <footer>
• SEO meta tags for title, description, keywords, and author
• Image with alt text, links (absolute, relative, email, anchor)
• Embedded YouTube video (iframe) and interactive image map
• Ordered, unordered, and nested lists in the About Me section

✅ CSS

• Dark theme using CSS variables
• Responsive layout with media queries (2-column and 3-column grids)
• Animated text and image motion effects
• Hover and focus transitions for interactivity
• Custom styling for navigation, forms, and buttons
• Light/dark theme toggle using JavaScript and CSS class switching

✅ JavaScript

• Time-based greeting message shown on page load
• Form validation using regular expressions (email, phone)
• Theme toggle between light and dark modes
• Show/hide project details on card click
• DOM element styling on focus and blur with event listeners

---

⚔️ Challenges Faced & Solutions

1. Ensuring Full Responsiveness

Challenge: The multi-column layout broke on small screens.
Solution: Media queries were used to shift to single-column layouts on tablets and mobile devices.

2. Typing Animation Timing

Challenge: Getting the typing animation to reveal one character at a time without showing full words.
Solution: Used steps() in CSS with a count matching the number of characters in the text.

3. Validating Form Inputs Without Plugins

Challenge: No external libraries allowed.
Solution: Used custom regular expressions and JavaScript form event handling for clean validation.

4. Theme Switching Logic

Challenge: Toggling themes without breaking layout or causing flickers.
Solution: Applied class-based styling (light-mode) and CSS transitions, and positioned the toggle button for easy access.

---

📌 Final Note

This portfolio not only highlights my technical skills but also reflects my vision as a front-end developer. Every section was crafted to balance aesthetics, functionality, and responsiveness — with a touch of personality and interactivity.

---

© 2025 Gregory George | Front-End Developer & Cybersecurity Enthusiast