🌐 [Hiya] — My Web Portfolio

Hi there! 👋
This is my personal portfolio project, created as part of my web development assignments. It is built with semantic HTML5 and external CSS, showing both my coding skills and design sense.

---

🚀 About the Project

This project has two main stages:

Stage 1 — Semantic HTML5:

• Used meaningful HTML5 tags like <header>, <nav>, <main>, <section>, <footer>, <table>, and <form>.
• Smooth navigation links for easy scrolling.
• Organized sections: hero banner, about me with photo, project showcase, skills table, and a contact form.
• Accessibility is considered: images have alt text, forms have labels and required fields.
• No CSS yet — the focus is purely on structure and clarity.
• Check it here: Assignment-1

Stage 2 — Styled with CSS:

• Added a separate style.css file for all styling — no inline styles.
• Navigation menu and buttons have custom colors, hover effects, and padding.
• Skills table has alternating row colors and bold headers.
• Sections use margins, padding, borders, and subtle shadows for a clean look.
• “Back to Top” button is fixed for easy navigation.
• Responsive design ensures the site looks good on mobile, tablet, and desktop.
• Fonts are chosen for readability, and color theme is consistent using CSS variables.
• Check it here: Assignment-2

---

🧩 How It’s Organized

Here’s how the project files are arranged: myPortfolio/ ├── README.md ├── Assignment-1/ │ ├── index.html # HTML5 semantic portfolio │ └── Profile.png # Profile image placeholder └── Assignment-2/ ├── index.html # HTML5 + CSS portfolio ├── style.css # External styling └── Profile.png # Profile image placeholder

Assignment 1: Focused on structure, semantic tags, forms, and accessibility.
Assignment 2: Added styling, responsive layout, hover effects, table styling, and interactive UI elements.

---

🛠 Tech & Skills Used

• HTML5: Semantic tags, forms, tables, structure.
• CSS3: External styles, pseudo-classes, variables, box model, responsive units.
• Accessibility: Alt text, labels, semantic layout.
• Responsive Design: Adjusts smoothly to different screen sizes.
• Clean Code Practices: Well-indented, maintainable, and easy to extend.

---

✅ Key Features

• Clear sectioning for welcome, about, projects, skills, and contact.
• Semantic HTML5 ensures accessibility and SEO-friendly structure.
• CSS styling adds visual clarity, consistent colors, and responsive layout.
• Form validation ensures required fields are filled.
• Back to Top button for better user experience.

---

📄 License

This project is for personal learning and demonstration purposes only. Not for redistribution or commercial use.

---

Thanks for checking out my portfolio! ✨