Stage 6: Contact Section + Footer | Unit 27

UNIT 6 / 7

STEP 1

The Contact Section

A portfolio without a way to reach you is an open door with no mailbox. The contact section has two columns: left for human context (why reach out, how to find you), right for the form. This structure is more inviting than a form alone — it humanizes the request.

The form inputs use the same CSS variable pattern as the rest of the site: background: var(--bg) and border: 1px solid var(--border). They adapt to light/dark mode automatically.

STEP 2

Add the Contact CSS and HTML

👉 Form input CSS: .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field input, .form-field textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); outline: none; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); }

Stage 6 Complete

The full portfolio is built: hero, about, projects, and contact. The theme toggle works in both dark and light mode across all sections.

Next: Stage 7 polishes the motion — card hover lifts, skill tag bounces, button transitions.

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); }
    #projects { background: var(--bg); padding: 80px 0; }
    .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
    .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 { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--surface2) 0%, #232a3d 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; border-bottom: 1px solid var(--border); }
    .project-body { padding: 22px 24px; }
    .project-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
    .project-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
    .project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .project-tag { background: rgba(107,155,209,0.12); color: var(--accent); padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .project-links { display: flex; gap: 10px; }
    .proj-link { font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color 0.2s; }
    .proj-link:hover { 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>

<section id="projects">
    <div class="container">
      <p class="section-label">Work</p>
      <h2 class="section-heading">Selected Projects</h2>
      <div class="projects-grid">
        <div class="project-card">
          <div class="project-thumb">📚</div>
          <div class="project-body">
            <h3 class="project-title">Lakota Word Explorer</h3>
            <p class="project-desc">An interactive vocabulary site with 3D CSS flip cards, category filtering, and a JavaScript Set-based progress tracker. Built to support Lakota language revitalization.</p>
            <div class="project-tags"><span class="project-tag">HTML</span><span class="project-tag">CSS</span><span class="project-tag">JavaScript</span></div>
            <div class="project-links"><a href="#" class="proj-link">🔗 Live Site</a><a href="#" class="proj-link">📄 Code</a></div>
          </div>
        </div>
        <div class="project-card">
          <div class="project-thumb">🍽</div>
          <div class="project-body">
            <h3 class="project-title">Manoomin Kitchen</h3>
            <p class="project-desc">A restaurant site for a fictional Native-owned Ojibwe cuisine spot. Features tab-switched menu, scroll-triggered header, and a full reservation form.</p>
            <div class="project-tags"><span class="project-tag">CSS Grid</span><span class="project-tag">JS DOM</span><span class="project-tag">Scroll Events</span></div>
            <div class="project-links"><a href="#" class="proj-link">🔗 Live Site</a><a href="#" class="proj-link">📄 Code</a></div>
          </div>
        </div>
        <div class="project-card">
          <div class="project-thumb">🌐</div>
          <div class="project-body">
            <h3 class="project-title">Wičhóni Digital Center Pitch</h3>
            <p class="project-desc">A community advocacy site with animated stat counters and IntersectionObserver scroll fade-ins. Pitching a Native-led digital access hub on Standing Rock.</p>
            <div class="project-tags"><span class="project-tag">IntersectionObserver</span><span class="project-tag">setInterval</span><span class="project-tag">Advocacy</span></div>
            <div class="project-links"><a href="#" class="proj-link">🔗 Live Site</a><a href="#" class="proj-link">📄 Code</a></div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script>
    var body = document.body;
    var toggleBtn = document.getElementById('themeToggle');
    var saved = localStorage.getItem('theme');
    if (saved === 'light') {
      body.classList.add('light-mode');
      toggleBtn.textContent = '🌙 Dark mode';
    }
    toggleBtn.addEventListener('click', function() {
      body.classList.toggle('light-mode');
      var isLight = body.classList.contains('light-mode');
      localStorage.setItem('theme', isLight ? 'light' : 'dark');
      toggleBtn.textContent = isLight ? '🌙 Dark mode' : '☀ Light mode';
    });
  </script>
</body>
</html>

Live Preview