Final Project — Personal Portfolio Website

🧩 1. Project Overview

You’ll create a multi-page portfolio with consistent design and professional layout. Host it on GitHub Pages or your own server.

🧱 2. Folder Structure

/portfolio-site
├── index.html
├── about.html
├── projects.html
├── contact.html
├── css/
│   └── style.css
├── images/
│   ├── profile.jpg
│   ├── project1.jpg
│   ├── project2.jpg
│   └── project3.jpg
└── fonts/

🎨 3. Design Guidelines

💻 4. Core Components

✅ Header & Navigation

<header class="site-header">
  <div class="logo">StreetGeek</div>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="projects.html">Projects</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

.site-header{
  display:flex;justify-content:space-between;align-items:center;
  background:#0E477B;color:#fff;padding:20px;border-radius:12px;
}
.site-header nav{display:flex;gap:15px;}
.site-header a{color:#fff;text-decoration:none;}
.site-header a:hover{color:#FFB71B;}

✅ Hero (Home)

<section class="hero">
  <h1>Hello, I'm Yogi 👋</h1>
  <p>WordPress Developer & Web Design Instructor</p>
  <a class="btn" href="projects.html">View My Work</a>
</section>

✅ About Section

<section class="about">
  <img src="images/profile.jpg" alt="Your Name" />
  <div>
    <h2>About Me</h2>
    <p>I'm a passionate developer and educator helping beginners build modern websites.</p>
  </div>
</section>

About Me

I'm a passionate WordPress developer and educator teaching beginners how to build and manage their own websites.

✅ Projects Grid

<section class="projects">
  <h2>My Projects</h2>
  <div class="grid">
    <div class="card"><img src="images/project1.jpg" alt=""><h3>Portfolio Site</h3></div>
    <div class="card"><img src="images/project2.jpg" alt=""><h3>Blog Layout</h3></div>
    <div class="card"><img src="images/project3.jpg" alt=""><h3>Shop Template</h3></div>
  </div>
</section>

My Projects

Portfolio Site

Blog Layout

Shop Template

✅ Contact Section

<section class="contact">
  <h2>Get In Touch</h2>
  <form>
    <label>Name:</label><input type="text" required>
    <label>Email:</label><input type="email" required>
    <label>Message:</label><textarea rows="5"></textarea>
    <button type="submit">Send Message</button>
  </form>
</section>

💡 5. Responsive Adjustments

Copy these at the bottom of css/style.css:

@media (max-width:768px){
  .site-header{ flex-direction:column; gap:10px; }
  .site-header nav a{ display:block; }
  .projects .grid{ grid-template-columns:1fr; }
}

Now your layout adapts beautifully on mobile and tablet screens.

🧠 6. Launch Checklist

• All pages link correctly
• Consistent fonts and colors
• Responsive across sizes (no sideways scroll)
• Images contain descriptive alt text
• No console/validator errors
• Your name & contact info are correct

🧪 7. Bonus: Publish Online

🧠 8. Quiz Time

• What are four essential pages in a professional portfolio?
• Which CSS tool best builds multi-column project grids?
• How can you make navigation responsive on mobile?
• Why include alt attributes on images?
• What free tool can you use to publish your site?