Stage 2: About + Skills | Unit 27

UNIT 2 / 7

STEP 1

The About Section: Telling Your Story

A portfolio about section is not a resume. It is a story that answers: who are you, what do you care about, and why should someone hire or work with you? For this unit, the default character (Jordan Bearcub) uses their Indigenous identity and community-focused mission as part of their professional story — which is exactly how it should work. Your story is part of your value.

The layout is two columns: a square avatar placeholder and social links on the left, prose bio and skill tags on the right.

STEP 2

Add the About CSS and HTML

👉 Key CSS: .about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; }
.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-size: 5rem; font-weight: 700; }
.skill-tag:hover { transform: translateY(-2px); border-color: var(--accent); }

Include the light-mode CSS variable overrides so the about section adapts when the theme toggles. Since all colors use var(--bg), var(--surface), etc., they will update automatically when those variables change.

Stage 2 Complete

The about section displays your story, avatar initials, social links, and skill tags. When you add light mode later, all the colors adapt automatically.

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); }
  </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>
  
</body>
</html>

Live Preview