🌐 Personal Portfolio Website – HTML & CSS (Learning Project)

⚠️ Disclaimer This project is created strictly for learning and practice purposes only. It is not intended to be used as a final or recommended professional portfolio.

---

📌 About This Project

This repository contains a basic personal portfolio website built using HTML5 and CSS3.

The main purpose of this project is to practice core web development fundamentals such as semantic HTML, layout design, responsiveness, and clean CSS structuring. It is designed as a learning exercise, not as a production-ready or hiring-ready portfolio.

---

🚀 Live Preview

👉 Live Link

👉 Youtube Video Link

🛠️ Tech Stack

• HTML5 – Semantic and accessible markup
• CSS3 – Flexbox, Grid, media queries, transitions
• No JavaScript / Frameworks – Pure HTML & CSS learning project

---

📂 Folder Structure

.
├── index.html
├── style.css
└── README.md

---

✨ Features Implemented

• Fixed navigation bar
• Hero section with introduction
• About section with structured content
• Skills section using CSS Grid
• Education section using card-style layout
• Contact form with semantic form elements
• Responsive layout for mobile, tablet, and desktop

---

📱 Responsive Design

The website is responsive across different screen sizes:

• 📱 Mobile devices
• 💻 Laptops
• 🖥️ Desktop screens

Media queries are used to:

• Adjust section widths
• Convert multi-column layouts into single-column layouts
• Improve form usability on smaller screens

---

🎯 Learning Objectives

By building this project, the following concepts are practiced:

• Writing clean and semantic HTML
• Structuring a multi-section webpage
• Using Flexbox and CSS Grid effectively
• Creating responsive designs using media queries
• Applying hover effects and transitions
• Organizing CSS for readability and maintainability

---

🚫 What This Project Is NOT

• ❌ A production-ready portfolio
• ❌ A recommended professional portfolio template
• ❌ Optimized for real-world hiring use
• ❌ JavaScript-powered or backend-connected

For a real portfolio, modern frameworks, accessibility improvements, performance optimization, and backend integrations are recommended.

---

🔮 Future Learning Improvements

• Add JavaScript for basic interactivity
• Implement form validation
• Improve accessibility (ARIA roles, focus states)
• Add smooth scrolling and active navbar states
• Rebuild this project using React or Next.js

---

📄 License

This project is open-source and available under the MIT License.

---

👨‍💻 Author

Jatin Dhamija Full Stack Developer

• GitHub: https://github.com/jdcodebase
• LinkedIn: https://www.linkedin.com/in/jatin-dhamija-jd/

---

⭐ If this project helped you learn HTML & CSS, feel free to star the repository!