Lesson 17 of 18

⚡ Portfolio — Part 2

🎯 Grades 9–12 ⏱ ~45 minutes 🔴 Project

What You'll Add

Dark mode toggle (saves preference to localStorage)
Smooth scroll and active nav highlighting on scroll
Contact form with JavaScript validation and success feedback

⚡ Portfolio — Full Version with JS

This is the Part 2 starter with dark mode, smooth scroll, and form validation. Click Run to preview — the buttons work inside the iframe!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Portfolio</title>
  <style>
    *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
    :root{--bg:#ffffff;--text:#1e293b;--card:#f8fafc;--nav:#0f172a;--primary:#3b82f6}
    .dark-mode{--bg:#0f172a;--text:#e2e8f0;--card:#1e293b}
    body{font-family:sans-serif;background:var(--bg);color:var(--text);transition:background .3s,color .3s}
    nav{background:var(--nav);padding:.75rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
    .logo{color:#4ade80;font-weight:800}.nav-links{display:flex;gap:1.2rem;list-style:none}
    .nav-links a{color:#94a3b8;text-decoration:none;font-size:.88rem}.nav-links a:hover{color:#fff}
    #dark-btn{background:rgba(255,255,255,.08);border:none;color:#e2e8f0;padding:.35rem .8rem;border-radius:6px;cursor:pointer}
    .hero{padding:5rem 2rem;text-align:center;background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff}
    .hero h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem}.hero p{color:#94a3b8;margin-bottom:1.5rem}
    .btn{background:var(--primary);color:#fff;padding:.6rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:700;border:none;cursor:pointer;font-size:.95rem}
    section{padding:3rem 2rem;max-width:860px;margin:0 auto}h2{margin-bottom:1.2rem;font-size:1.5rem}
    .skills{display:flex;flex-wrap:wrap;gap:.5rem}.skill{background:#dbeafe;color:#1d4ed8;padding:.25rem .8rem;border-radius:20px;font-size:.82rem;font-weight:700}
    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.card{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:1.1rem}
    .card h3{margin-bottom:.3rem}.card p{font-size:.85rem;color:#64748b;margin-bottom:.6rem}.card a{color:var(--primary);font-size:.85rem;font-weight:700;text-decoration:none}
    form{display:flex;flex-direction:column;gap:.75rem;max-width:500px}
    input,textarea{padding:.55rem .75rem;border:1px solid #cbd5e1;border-radius:8px;font-size:.9rem;background:var(--card);color:var(--text)}
    #form-msg{font-weight:700;margin-top:.25rem}
  </style>
</head>
<body>
<nav><div class="logo">YourName</div>
  <ul class="nav-links"><li><a href="#skills">Skills</a></li><li><a href="#projects">Projects</a></li><li><a href="#contact">Contact</a></li></ul>
  <button id="dark-btn">🌙 Dark</button>
</nav>
<div class="hero"><h1>Hi, I'm <span style="color:#4ade80">Alex</span> 👋</h1><p>Front-End Developer</p><a href="#projects" class="btn">View Projects</a></div>
<section id="skills"><h2>Skills</h2><div class="skills"><span class="skill">HTML</span><span class="skill">CSS</span><span class="skill">JavaScript</span><span class="skill">Grid</span><span class="skill">Flexbox</span></div></section>
<section id="projects"><h2>Projects</h2><div class="cards"><div class="card"><h3>Weather App</h3><p>Real weather via API</p><a href="#">View →</a></div><div class="card"><h3>Quiz Game</h3><p>Score tracking + timer</p><a href="#">View →</a></div></div></section>
<section id="contact"><h2>Contact</h2>
  <form id="cf"><input type="text" id="cf-name" placeholder="Your name"/><input type="email" id="cf-email" placeholder="your@email.com"/><textarea id="cf-msg" rows="3" placeholder="Your message"></textarea><button class="btn" type="submit">Send Message</button><p id="form-msg"></p></form>
</section>
<script>
  // Dark mode toggle with localStorage
  const darkBtn = document.getElementById("dark-btn");
  if(localStorage.getItem("dark")==="1") document.body.classList.add("dark-mode");
  darkBtn.addEventListener("click",()=>{
    document.body.classList.toggle("dark-mode");
    localStorage.setItem("dark", document.body.classList.contains("dark-mode")?"1":"0");
  });
  // Form validation
  document.getElementById("cf").addEventListener("submit",function(e){
    e.preventDefault();
    const msg = document.getElementById("form-msg");
    const name = document.getElementById("cf-name").value.trim();
    const email = document.getElementById("cf-email").value.trim();
    const body = document.getElementById("cf-msg").value.trim();
    if(!name||!email||!body){ msg.style.color="red"; msg.textContent="Please fill all fields."; return; }
    if(!email.includes("@")){ msg.style.color="red"; msg.textContent="Enter a valid email."; return; }
    msg.style.color="#22c55e"; msg.textContent="✓ Message sent! I'll reply soon.";
    this.reset();
  });
</script>
</body></html>

Quick Check

1. How do you make anchor links scroll smoothly?

AUsing JavaScript only

BAdding scroll-behavior: smooth to the html element

CAdding a transition to every section

2. Which Web API saves data that persists between browser sessions?

AsessionStorage

BlocalStorage

Cdocument.cookie

3. What CSS property keeps the nav bar at the top during scroll?

Aposition: fixed

Bposition: sticky; top: 0

Cposition: absolute; top: 0

4. What should you do after a successful form submission?

AReload the page

BShow a success message and call form.reset()

CHide the form element permanently

⚡ Portfolio — Part 2

What You'll Add

Dark Mode with localStorage

Smooth Scroll and Sticky Nav

Contact Form Validation