Portfolio Reverse Engineering Task

Overview

Welcome to HYF-BE! Your first assignment is to reverse-engineer and rebuild a personal portfolio website using only HTML and CSS. This exercise will help you understand the structure of a webpage and recreate it from scratch while allowing room for your own creativity.

What is a Portfolio?

A portfolio is a personalized website that showcases your skills, projects, and experience. For developers, it's an essential tool to demonstrate expertise and creativity to potential employers or clients. In this assignment, you'll rebuild an example portfolio to strengthen your HTML and CSS skills.

Here’s the portfolio you will reverse-engineer: Portfolio.

---

Assignment Objectives

• Rebuild the provided portfolio from scratch using only HTML and CSS.
• Add your own photo and personal projects—this will become your portfolio.
• Use CodePen to write and preview your code.
• Practice using semantic HTML, organized structure, and effective CSS styling.
• Create a professional, visually appealing portfolio as a result.

---

Requirements

1. HTML: Structure Your Page

Use HTML to lay out the key sections of your portfolio, adhering to these guidelines:

• Semantic HTML: Employ appropriate and meaningful tags such as <header>, <nav>, <section>, and <footer>. Avoid overuse of generic <div> tags—semantic tags improve accessibility and SEO.

  • Example elements to use: <header>, <main>, <article>, <section>, <footer>.

• Content Sections:

  • Header: Include your name and navigation links.
  • About Me: A short description of who you are.
  • Projects: Highlight at least 2-3 past projects with descriptions and optional links.
  • Contact: Add your contact details such as email or social media links.

2. CSS: Style Your Page

Use CSS to make the portfolio visually appealing and easy to navigate.

• Class and ID Naming: Use clear, descriptive names for your CSS classes and IDs (e.g., .navbar, .projects-section, .contact-info).
• Design & Layout:
  • Maintain consistent colors, fonts, and layout styles across the portfolio.
  • Leverage spacing techniques such as margin, padding, and box-sizing for a clean look.
  • Incorporate simple hover effects for buttons and links to enhance user interaction.
• Responsive Design: (Optional but encouraged) Use media queries to ensure your portfolio looks good on various screen sizes.

---

Steps to Complete

1. Set Up CodePen:
   • Watch this tutorial on using CodePen.
   • Create a new Pen for your project on CodePen.
2. Build the HTML:
   • Structure your portfolio using semantic HTML, breaking it into key sections: Header, About Me, Projects, and Contact.
3. Style with CSS:
   • Add CSS to polish your portfolio's appearance, ensuring clear class and ID naming for easy navigation.
4. Test & Iterate:
   • Preview your portfolio on CodePen and make adjustments for improvement.
5. Submit:
   • Share the URL of your CodePen project once you’re finished.

---

Submission Instructions

Submit your CodePen URL once complete, ensuring that your project is set to public for review.

---

Good Luck and Happy Coding! 🎉