Responsive Personal Portfolio Website

This project demonstrates the requirements of the HTML, CSS, and JavaScript assignment using a responsive personal portfolio.

Technologies

• HTML5
• CSS3
• JavaScript
• CSS Grid
• CSS Flexbox
• Media Queries

Features

• Semantic HTML structure
• Responsive two-column layout
• Responsive skills grid using CSS Grid
• Responsive project cards
• Mobile navigation controlled with JavaScript
• Interactive Learn More button
• Contact form validation and success message
• Dynamic copyright year
• Hover effects and responsive behavior

Project Structure

portfolio-website/
├── portfolio.html
├── portfolio.css
├── portfolio.js
├── README.md
└── Screenshot 2025-03-23 212402.png

JavaScript Demonstration

The project uses JavaScript for:

• Mobile menu open/close
• Navigation state
• Learn More/Show Less interaction
• Contact form handling
• Dynamic year

Responsive Design

The CSS uses CSS Grid, Flexbox, and media queries to adapt the interface for desktop, tablet, and mobile screen sizes.

Running

Open portfolio.html directly in a browser, or use the VS Code Live Server extension.