💼 Developer Portfolio Website

A responsive single-page developer portfolio website built using pure HTML and CSS (no frameworks or build tools).

---

🚀 Project Overview

This project demonstrates foundational frontend development skills including:

• Semantic HTML structure
• Modern CSS layout techniques (Flexbox & Grid)
• Responsive design principles
• Clean and minimal UI design

The website includes the following sections:

• 🏠 Home (Hero Section)
• 👤 About
• 🛠 Skills
• 📂 Projects
• 📬 Contact
• 🔻 Footer

The design follows a modern dark theme with smooth scrolling navigation.

---

🛠 Technologies Used

HTML5

Used for structuring the website using semantic elements such as:

• <nav> — Navigation bar
• <section> — Content grouping
• <form> — Contact form

CSS3

Used for styling and layout:

• Flexbox (alignment and centering)
• CSS Grid (responsive layouts)
• Hover effects & transitions
• Media queries for responsiveness

Google Fonts

• Inter font imported via CDN for clean typography

---

🏗 Project Structure

Navigation uses anchor links:

#home
#about
#skills
#projects
#contact

Layout structure:

1. Fixed Navigation Bar
2. Full-screen Hero Section
3. Content Sections
4. Footer

---

📌 Section Breakdown

Navigation Bar

• Fixed positioning
• Flexbox alignment
• Hover effects
• Backdrop blur effect

Hero Section

• Full viewport height (100vh)
• Centered content
• Gradient background
• Call-to-action button

About Section

• Centered paragraph
• Max-width for readability

Skills Section

• CSS Grid layout
• auto-fit with minmax()
• Hover animation on cards

Projects Section

• Grid-based layout
• Project cards
• Hover lift effect

Contact Section

• Styled form UI
• Input fields & button

⚠️ Note: The contact form is currently frontend-only and not connected to a backend.

To make it functional, it can be connected to:

• EmailJS
• Node.js backend
• Serverless functions

Footer

• Minimal styling
• Subtle visual weight

---

📱 Responsiveness

• Media query for screens below 768px
• Adjusted hero text size
• Reduced navigation spacing
• Grid layouts automatically adapt using auto-fit and minmax()

Compatible with:

• Desktop
• Tablet
• Mobile

---