Stage 3: Projects Section | Unit 27

UNIT 3 / 7

STEP 1

Project Cards

Portfolio projects are displayed as cards. Each card has four parts: a thumbnail placeholder (colored div with an emoji), a title, a description, tech tags, and action links. The placeholder thumb uses aspect-ratio: 16/9 so it stays proportional at any width without specifying a fixed height.

The three default projects are the sites you built in Units 24, 25, and 26. You will update these to your real projects as you complete more work.

STEP 2

Add the Projects CSS and Cards

👉 Card hover CSS: .project-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.project-thumb { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }

Build 3 project cards. Each card: thumb div, title, 2-sentence description, 3 tech tags, and two links (Live Site and Code).

Stage 3 Complete

Three portfolio projects are on display, each with hover lift effects. Next: dark/light mode toggle.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jordan Bearcub | Developer Portfolio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap">
  <style>
    :root {
      --bg: #0e1117;
      --surface: #161b27;
      --surface2: #1d2333;
      --accent: #6b9bd1;
      --accent2: #b565d8;
      --text: #e6eaf3;
      --muted: #7a849a;
      --border: rgba(255,255,255,0.08);
      --font-display: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
    }
    .light-mode {
      --bg: #f5f7fa;
      --surface: #ffffff;
      --surface2: #eef1f6;
      --text: #1a1d2e;
      --muted: #6b7385;
      --border: rgba(0,0,0,0.08);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); font-family: var(--font-body); transition: background 0.3s, color 0.3s; }
    .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
    #hero {
      min-height: 100vh;
      display: flex; align-items: center;
      background: linear-gradient(160deg, #0a0d14 0%, var(--bg) 70%);
      padding: 80px 0;
      position: relative;
    }
    .theme-toggle { position: absolute; top: 32px; right: 32px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 10px 18px; border-radius: 100px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; gap: 8px; }
    .theme-toggle:hover { background: var(--surface2); }
    .hero-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.0; margin-bottom: 8px; }
    .hero-role { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 300; color: var(--muted); margin-bottom: 28px; }
    .hero-role em { color: var(--accent2); font-style: normal; font-weight: 500; }
    #hero p.bio { font-size: 1.0625rem; line-height: 1.8; color: var(--muted); max-width: 520px; margin-bottom: 40px; }
    .hero-links { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn-accent { display: inline-block; background: var(--accent); color: white; padding: 13px 28px; border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: opacity 0.2s; }
    .btn-accent:hover { opacity: 0.85; }
    .btn-ghost { display: inline-block; background: transparent; color: var(--text); border: 1px solid var(--border); padding: 12px 26px; border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: border-color 0.2s; }
    .btn-ghost:hover { border-color: var(--muted); }
    #about { background: var(--surface); padding: 80px 0; }
    .section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
    .section-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--text); margin-bottom: 36px; }
    .about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; }
    .avatar-block { display: flex; flex-direction: column; gap: 20px; }
    .avatar { width: 100%; aspect-ratio: 1/1; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,0.9); }
    .social-links { display: flex; flex-direction: column; gap: 8px; }
    .social-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); font-size: 0.875rem; font-weight: 500; transition: color 0.2s; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .social-link:last-child { border-bottom: none; }
    .social-link:hover { color: var(--accent); }
    .about-text p { font-size: 1rem; line-height: 1.85; color: var(--muted); margin-bottom: 20px; }
    .skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
    .skill-tag { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 100px; font-size: 0.8125rem; font-weight: 500; transition: transform 0.2s, border-color 0.2s; }
    .skill-tag:hover { transform: translateY(-2px); border-color: var(--accent); }
  </style>
</head>
<body>

<section id="hero">
    <button class="theme-toggle" id="themeToggle">☀ Light mode</button>
    <div class="container">
      <p class="hero-tag">Full-Stack Developer • Native Web Builder</p>
      <h1>Jordan<br>Bearcub</h1>
      <p class="hero-role">I build things for the <em>web.</em></p>
      <p class="bio">Sisseton-Wahpeton Oyate citizen. CS student at the University of North Dakota. I create accessible, beautiful websites that tell Native stories with code.</p>
      <div class="hero-links">
        <a href="#projects" class="btn-accent">See My Work</a>
        <a href="#contact" class="btn-ghost">Get in Touch</a>
      </div>
    </div>
  </section>

<section id="about">
    <div class="container">
      <p class="section-label">About</p>
      <h2 class="section-heading">A bit about me</h2>
      <div class="about-grid">
        <div class="avatar-block">
          <div class="avatar">JB</div>
          <div class="social-links">
            <a href="#" class="social-link">🔗 github.com/jordan-bearcub</a>
            <a href="#" class="social-link">🔗 linkedin.com/in/jordanbearcub</a>
            <a href="#" class="social-link">✉ jordan@example.com</a>
          </div>
        </div>
        <div class="about-text">
          <p>I am a citizen of the Sisseton-Wahpeton Oyate and a junior at the University of North Dakota studying Computer Science with a focus on human-computer interaction. I started coding at age 14 in the RF Code curriculum and have not stopped since.</p>
          <p>My work sits at the intersection of technology and Indigenous storytelling. I believe the web is a sovereign publishing platform — a place where Native communities can share their histories, languages, and futures on their own terms.</p>
          <p>When I am not coding, I am working with the UND Native American Programs office on digital literacy outreach, competing in powwow, or out on the lake.</p>
          <div class="skill-tags">
            <span class="skill-tag">HTML</span>
            <span class="skill-tag">CSS</span>
            <span class="skill-tag">JavaScript</span>
            <span class="skill-tag">React</span>
            <span class="skill-tag">Python</span>
            <span class="skill-tag">Figma</span>
            <span class="skill-tag">Accessibility</span>
            <span class="skill-tag">Git</span>
          </div>
        </div>
      </div>
    </div>
  </section>
  
</body>
</html>

Live Preview