Pasted text(9).txt
Document
here is my portfolio

I need to add a game similar to how splat and harbor havoc have their own tabs

I’ll show you the exact places to edit instead of rewriting the whole portfolio file. The key is adding one sidebar link, one new slide section, and making sure the slide order indexes stay aligned.

Yes. Your portfolio is built around duplicated <section class="slide project"> blocks, and Splat/Harbor Havoc already follow that pattern.

Add this sidebar link after Harbor Havoc:

<a href="#New Game" data-index="6">New Game</a>

Then change the existing Contact link to:

<a href="#contact" data-index="7">Contact</a>

Then paste this new project slide right after the Harbor Havoc section and before Contact:

<!-- New Game -->
<section class="slide project" id="Flame and Fortune" aria-label="Flame and Fortune">
  <div>
    <div class="kicker">Project</div>
    <h2>New Game Title</h2>
    <p class="lead">Short description of the game goes here.</p>

    <div class="meta">
      <div class="card"><div class="label">Role</div><div class="value">Designer / Programmer</div></div>
      <div class="card"><div class="label">Team</div><div class="value">Solo Project</div></div>
      <div class="card"><div class="label">Platform</div><div class="value">PC</div></div>
      <div class="card"><div class="label">Tools</div><div class="value">Unity, C#</div></div>
    </div>

    <h3>Highlights</h3>
    <ul class="clean">
      <li>Highlight one major mechanic or system.</li>
      <li>Highlight your design or programming contribution.</li>
      <li>Highlight testing, polish, production, or player experience.</li>
    </ul>

    <div class="btn-row">
      <a class="btn primary" href="YOUR-LINK-HERE" target="_blank" rel="noopener noreferrer">Play New Game!</a>
    </div>
  </div>

  <div class="media" aria-label="New Game Media">
    <a href="YOUR-LINK-HERE" target="_blank" rel="noopener noreferrer">
      <img src="images/NewGameImage.png" alt="New Game screenshot" style="object-fit: contain; width:100%; height:100%;" loading="eager" decoding="async" fetchpriority="high" />
    </a>
  </div>
</section>

Also update these existing sidebar indexes after Contact, since adding a new slide shifts them:

<a href="#class-games" data-index="8">Games</a>

Make sure your image file is actually inside:

images/NewGameImage.png

and replace YOUR-LINK-HERE with either an itch.io link or a local build path.

can you integrate it?

I’ll integrate the new tab directly into your HTML with placeholder title, image, and link values so you can rename them later. I’ll also fix the slide indexes so the sidebar navigation still lines up.

Done. I integrated the new game tab and slide into your portfolio HTML.


i have this weird line in the middle but this is good so far

That line is coming from this in your CSS:

.slide::after {
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid var(--outline);
  border-radius:20px;
  pointer-events:none;
}

That pseudo-element draws a full rectangle on every slide. When slides sit next to each other, the borders can visually line up and create that “cut across the screen” effect you’re seeing.
Quick fix (recommended)

Just remove or comment it out:

/* .slide::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid var(--outline);
  border-radius:20px;
  pointer-events:none;
} */

If you still want the frame

You can soften it instead:

.slide::after{
  border:1px solid rgba(255,255,255,0.05);
}

or only show it on hover (cleanest look):

.slide::after{
  opacity:0;
  transition:opacity .2s ease;
}
.slide:hover::after{
  opacity:1;
}

This is a common side effect of that “framed slide” style. Removing it will give you a much cleaner, modern look and eliminate that line completely.

the new game tab on the left is unclickable

Yeah this is a classic side effect of how your nav + slider are wired.
What’s actually happening

Your sidebar links rely on this:

<a href="#New Game" data-index="6">New Game</a>

BUT your section is:

<section class="slide project" id="New Game">

👉 Spaces in IDs break navigation behavior in JS + CSS selectors.
The browser sometimes tolerates it, but your scroll + IntersectionObserver logic will not.
Fix (this will 100% solve it)
1. Change the section ID

<section class="slide project" id="new-game" aria-label="New Game">

2. Update the sidebar link

<a href="#new-game" data-index="6">New Game</a>

3. (Optional but recommended) Fix all your IDs

Right now you also have:

    #Bubble Catcher

    #Short Cinematic

These can cause future bugs too.

Convert them like this:

id="bubble-catcher"
id="short-cinematic"
id="splat"
id="harbor-havoc"

And update their links accordingly.
Why this matters (quick)

Your script does things like:

document.getElementById(id)

When id = "New Game", it can fail or behave inconsistently depending on how the hash is parsed.
Result

After this:

    Sidebar click works

    Smooth scrolling works

    Active highlighting works correctly

    No weird edge-case bugs later

If you want, I can clean your whole nav + ID system so everything is consistent and future-proof.

Pasted text(10).txt
Document
here is the current script, make only those changes

Done. I only changed the Flame and Fortune ID/link so the left tab can click correctly.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mark Bergsbaken — Portfolio</title>
  <meta name="description" content="Game Design portfolio for Mark Bergsbaken." />
  <meta name="theme-color" content="#0e1116" />
  <!--
    INDEX TEMPLATE (single file) — horizontal, slide-style portfolio.
    HOW TO USE (quick):
    1) Replace name + text placeholders.
    2) Put images in /images and videos in /videos.
    3) Duplicate a <section class="slide project"> to add more projects.
    4) Keep IDs unique (#project-01, #class, #class-games, etc).
  -->
  <style>
    /* Make images/videos fill the .media frame */
    .media > img {
      width: 100%;
      height: 100%;
      object-fit: contain;   /* shows whole image */
      background: #0e1116;  /* optional letterbox color */
      display: block;
    }
    .media > video {
      width: 100%;
      height: 100%;
      object-fit: cover;     /* fills, may crop */
      object-position: 50% 50%;
      display: block;
    }
    :root{
      --bg: #0e1116;
      --bg-2: #121722;
      --fg: #e6e6e6;
      --muted: #9aa4b2;
      --accent: #7dd3fc; /* change to taste */
      --outline: #2a3340;
      --sidebar-w: 280px;
      --radius: 16px;
      --pad: 28px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--fg);
      font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      overflow:hidden; /* scroll handled inside slider */
    }
    a{color:inherit}

    /* ——— Sidebar / Topbar ——— */
    .sidebar{
      position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
      border-right:1px solid var(--outline);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) , var(--bg-2);
      padding: calc(var(--pad) + 2px) var(--pad);
      display:flex; flex-direction:column; gap:20px; z-index:5;
    }
    .brand{display:flex; flex-direction:column; gap:6px}
    .brand .who{font-weight:700; font-size:1.2rem; letter-spacing:.2px}
    .brand .what{color:var(--muted); font-size:.96rem}
    .nav{margin-top:8px; display:flex; flex-direction:column; gap:6px}
    .nav a{
      text-decoration:none; padding:8px 0; border-radius:8px;
      color:var(--muted); transition: color .2s ease;
    }
    .nav a.active, .nav a:hover{color:var(--fg)}
    .spacer{flex:1}
    .links{display:flex; flex-direction:column; gap:8px; color:var(--muted)}
    .links a{opacity:.9}

    /* Submenu styles for the sidebar */
    .subnav { margin-top: 8px; }
    .subnav > summary {
      list-style: none; cursor: pointer; color: var(--muted);
      padding: 8px 0; user-select: none; outline: none;
    }
    .subnav[open] > summary { color: var(--fg); }
    .subnav > a { display:block; padding:6px 0 6px 14px; color:var(--muted); text-decoration:none }
    .subnav > a:hover { color:var(--fg) }

    /* ——— Horizontal slider ——— */
    .slider{
      position:fixed; inset:0 0 0 var(--sidebar-w);
      display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
      scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
      gap:0;
    }
    .slide{
      scroll-snap-align:start; scroll-snap-stop:always;
      min-width: calc(100vw - var(--sidebar-w)); height:100vh;
      padding: 72px clamp(32px, 6vw, 72px) 140px; position:relative;
      display:grid; grid-template-columns: 1.2fr 1fr; gap:40px;
      align-items:center;
    }
    /* .slide::after{
      content:""; position:absolute; inset:18px; border:1px solid var(--outline); border-radius:20px; pointer-events:none;
    } */

    .hero{background: radial-gradient(80% 80% at 20% 10%, rgba(125,211,252,.08), transparent 60%), var(--bg)}
    .about{background: radial-gradient(80% 80% at 80% 100%, rgba(125,211,252,.06), transparent 60%), var(--bg)}
    .project{background: radial-gradient(80% 80% at 50% 0%, rgba(125,211,252,.05), transparent 60%), var(--bg)}
    .contact{background: radial-gradient(80% 80% at 30% 100%, rgba(125,211,252,.08), transparent 60%), var(--bg)}

    h1,h2,h3{margin:0 0 12px}
    h1{font-size: clamp(2rem, 2.6rem + 1vw, 4rem); line-height:1.05}
    h2{font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem)}
    p{margin:0 0 12px}
    .muted{color:var(--muted)}
    .kicker{color:var(--accent); text-transform:uppercase; letter-spacing:.24em; font-weight:600; font-size:.8rem}

    .lead{font-size: clamp(1rem, .95rem + .5vw, 1.25rem); color:#d7e0ea}

    .btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
    .btn{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
      border:1px solid var(--outline); text-decoration:none; font-weight:600;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    }
    .btn.primary{border-color:transparent; background: linear-gradient(180deg, rgba(125,211,252,.28), rgba(125,211,252,.16)); color:#082736}

    .media{width:100%; aspect-ratio: 16 / 10; border:1px dashed var(--outline); border-radius:var(--radius); position:relative; overflow:hidden}
    .ph{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.95rem;}
    .ph::before,.ph::after{content:""; position:absolute; inset:0; background: repeating-conic-gradient(from 45deg, transparent 0 15deg, rgba(255,255,255,.02) 15deg 30deg)}
    .ph::after{mask: linear-gradient(#0008,#0008) content-box, linear-gradient(#0008,#0008); -webkit-mask-composite: xor; mask-composite: exclude; padding:6px; border-radius:var(--radius)}

    .meta{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin:16px 0 8px}
    .meta .card{border:1px solid var(--outline); border-radius:12px; padding:12px}
    .meta .label{color:var(--muted); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase}
    .meta .value{font-weight:600}

    ul.clean{list-style:none; padding:0; margin:12px 0 0}
    ul.clean li{margin:8px 0; color:#d7e0ea}

    /* ——— Pager (bottom squares) ——— */
    .pager{position:fixed; left:calc(var(--sidebar-w) + 12px); right:12px; bottom:18px; display:flex; justify-content:center; gap:10px; z-index:6;}
    .dot{width:14px; height:14px; border:1px solid var(--outline); border-radius:4px; background:transparent; cursor:pointer; opacity:.85}
    .dot[aria-current="true"]{background:var(--accent); border-color:transparent}

    /* ——— Arrows ——— */
    .arrow{position:fixed; top:50%; transform:translateY(-50%); z-index:6}
    .arrow button{width:42px; height:42px; border-radius:999px; border:1px solid var(--outline); background:rgba(0,0,0,.25); color:var(--fg); cursor:pointer}
    .arrow button:hover{background:rgba(255,255,255,.06)}
    .arrow.left{left: calc(var(--sidebar-w) + 10px)}
    .arrow.right{right: 10px}

    /* ——— Responsive ——— */
  /* ——— Responsive ——— */
/* ——— Responsive ——— */
/* ——— Responsive ——— */
@media (max-width: 900px){

  /* Top bar */
  .sidebar{
    inset:auto 0 auto 0;
    height:64px; width:auto;
    flex-direction:row; align-items:center; gap:12px;
    padding:0 var(--pad);
    border-right:none; border-bottom:1px solid var(--outline);
  }
  .brand{ flex:1; }
  .brand .what{ display:none; }              /* hide tagline on mobile */
  .brand .who{
    font-size: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 70vw;
  }
  .nav, .links{ display:none; }

  /* Scroll vertically */
  .slider{
    inset:64px 0 0 0;
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack, with larger padding + spacing */
  .slide{
    min-width:100vw;
    grid-template-columns: 1fr;
    height:auto;
    min-height: calc(100dvh - 96px);
    padding: 112px 22px 240px;      /* ↑ more air above/below */
    gap: 40px;                       /* space between text + media */
  }

  /* REMOVE the rounded rectangle frame on mobile */
  .slide::after{ display:none; }

  /* Make CTAs sit lower (also pushes media down) */
  .btn-row{
    margin-top: 18px;
    margin-bottom: clamp(56px, 12vh, 160px);  /* big gap before media */
  }

  /* Extra push for all media blocks */
  .slide .media{
    margin-top: clamp(40px, 10vh, 140px);
  }

  /* If you want the hero even lower, uncomment:
  .hero .media{ margin-top: clamp(80px, 16vh, 200px); }
  */

  /* Tidy heading sizing so the name never clips */
  .hero h1{
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    line-height: 1.12;
    overflow-wrap:anywhere;
  }

  /* Optional: hide side arrows on mobile if they overlap content */
  /* .arrow{ display:none; } */

  .arrow.left{ left:10px; }
  .pager{ left:12px; }

  /* Only fix the ABOUT slide on phones */
@media (max-width: 900px){
  /* extra space between the text block and the media row */
  #about{ gap: 56px; }

  /* drop the dashed border + push the image way down */
  #about .media{
    border: none;                          /* remove dashed rectangle */
    margin-top: clamp(80px, 14vh, 220px);  /* move image down a lot */
  }

  /* keep the image sizing tidy */
  #about .media > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Only fix the GAMES slide on phones */
@media (max-width: 900px){
  /* extra space between text block and media row */
  #class-games{ 
    gap: 56px; 
  }

  /* remove dashed frame + push the image down a lot */
  #class-games .media{
    border: none;                          /* kill dashed rectangle */
    margin-top: clamp(80px, 14vh, 220px);  /* lower the media block */
  }

  /* tidy sizing for whatever is inside .media */
  #class-games .media > img,
  #class-games .media > video{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

}

}




    @media (prefers-reduced-motion: reduce){
      .slider{scroll-behavior:auto}
    }
  </style>
</head>
<body>
  <!-- ——— Fixed sidebar / topbar ——— -->
  <aside class="sidebar" aria-label="Primary">
    <div class="brand">
      <div class="who">Mark Bergsbaken</div>
      <div class="what">Publishing and Game Design</div>
    </div>
    <nav class="nav" id="side-nav">
      <a href="#home" data-index="0" class="active">Home</a>
      <a href="#about" data-index="1">About</a>
      <a href="#Bubble Catcher" data-index="2">Bubble Catcher</a>
      <a href="#Short Cinematic" data-index="3">Short Cinematic</a>
      <a href="#Splat!" data-index="4">Splat!</a>
      <a href="#Harbor Havoc" data-index="5">Harbor Havoc</a>
      <a href="#flame-and-fortune" data-index="6">Flame and Fortune</a>
      <a href="#contact" data-index="7">Contact</a>
      <a href="#class-games" data-index="8">Games</a>
      <!-- NEW: Class submenu with internal tabs -->
<!-- OLD CLASSES -->
<details class="subnav">
 <summary>Old Classes</summary>

  <details class="subnav">
    <summary>GDD210</summary>
    <!-- <a href="#class">Overview</a> -->
    <a href="#class-labs">Labs</a>
    <!-- <a href="#class-pm">Project Mgmt</a> -->
  </details>
</details>

<!-- CURRENT / NEW CLASSES -->
<details class="subnav" open>
  <summary>GDD211</summary>
  <!-- <a href="#gdd211">Overview</a> -->
  <a href="#gdd211-games">Labs</a>
  <!-- <a href="#gdd211-pm">Project Mgmt</a> -->
</details>

<!-- <details class="subnav">
  <summary>GDD314</summary>
  <a href="#gdd314">Overview</a>
  <a href="#gdd314-games">Games</a>
  <a href="#gdd314-pm">Project Mgmt</a>
</details> -->

    </nav>
    <div class="spacer"></div>
    <div class="links">
      <a href="https://www.linkedin.com/in/mark-bergsbaken/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
      <a href="mailto:MarkBergsbaken@gmail.com">Email</a>
      <!-- <a href="assets/resume.pdf" target="_blank" rel="noopener noreferrer">Résumé (PDF)</a> -->
    </div>
  </aside>

  <!-- ——— Horizontal slides container ——— -->
  <main class="slider" id="slider" tabindex="0" aria-live="polite">

    <!-- Slide 1: Hero -->
    <section class="slide hero" id="home" aria-label="Home">
      <div>
        <div class="kicker">Portfolio</div>
        <h1>Mark Bergsbaken</h1>
        <p class="lead">A Game Designer who aspires to break into the publishing space by bringing creative projects to market.</p>
        <div class="btn-row">
          <a class="btn primary" href="#project-01">View Projects</a>
          <a class="btn" href="#contact">Get in touch</a>
        </div>
      </div>
      <div class="media" aria-label="Hero media">
        <img src="images/PortfolioPic.jpg" alt="Flagship project composite" loading="eager" decoding="async" fetchpriority="high" />
      </div>
    </section>

    <!-- Slide 2: About -->
     
    <section class="slide about" id="about" aria-label="About">
      <div>
        <div class="kicker">About</div>
        <h2>Collaborator Above All Else</h2>
        <p>First ever <strong>GDD Publisher</strong><br> Bringing people together, and great games to market! Strong emphasis on Unity, JavaScript, and implementation.</p>
        <div class="meta">
          <div class="card"><div class="label">Roles</div><div class="value">Game Design, Implementation, Publishing</div></div>
          <div class="card"><div class="label">Engines</div><div class="value">Unity, Unreal</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">C#, Java, Git, Jira</div></div>
          <div class="card"><div class="label">Location</div><div class="value">Southington, Connecticut</div></div>
        </div>
      </div>
      <div class="media" aria-label="Headshot or process photo">
        <a href="https://assetstore.unity.com/packages/2d/characters/pixel-art-character-package-312497" target="_blank" rel="noopener noreferrer">
          <img src="images/AssetStorePage.png" alt="Unity Asset Store page" style="object-fit: contain; width:100%; height:100%;" loading="eager" decoding="async" fetchpriority="high" />
        </a>
      </div>
    </section>

    <!-- Slide 3: Project 1 -->
    <section class="slide project" id="Bubble Catcher" aria-label="Bubble Catcher">
      <div>
        <div class="kicker">Featured Project</div>
        <h2>"Bubbles" Themed Game Jam</h2>
        <p class="lead">A simple bubble-based game where the player sees how far they can progress.</p>

        <div class="meta">
          <div class="card"><div class="label">Role</div><div class="value">Lead Designer</div></div>
          <div class="card"><div class="label">Disciplines</div><div class="value">Art/Sound Design, Progression, Programming</div></div>
          <div class="card"><div class="label">Platform</div><div class="value">PC</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">Unity, C#, Git</div></div>
        </div>

        <h3>Highlights</h3>
        <ul class="clean">
          <li><strong>Solo developed</strong> with sound effects and compounding progression.</li>
          <li>Built graybox to alpha; complete with scripting and art.</li>
          <li>Modular design for future scripting tools and learning.</li> 
        </ul>
        <div class="btn-row">
          <a class="btn primary" href="GameBuilds/Bubbles/index.html" target="_blank" rel="noopener noreferrer">Play Bubble Catcher!</a>
        </div>
      </div>
      <div class="media" aria-label="Project 1 video">
        <!-- Tip: rename files to avoid spaces, e.g., videos/bubble-catcher.mp4 & .webm -->
        <video controls preload="metadata">
          <source src="Videos/BubbleCatcher.mp4" type="video/mp4">
          Your browser doesn’t support HTML5 video. <a href="Videos/BubbleCatcher.mp4">Download the trailer</a>.
        </video>
      </div>
    </section>

    <!-- Slide 4: Project 2 -->
    <section class="slide project" id="Short Cinematic" aria-label="Short Cinematic">
      <div>
        <div class="kicker">Project</div>
        <h2>Short Cinematic Project</h2>
        <p class="lead">Captured all aspects of development and collaboration.</p>
        <div class="meta">
          <div class="card"><div class="label">Role</div><div class="value">Documentation Manager</div></div>
          <div class="card"><div class="label">Team</div><div class="value">16 collaborators</div></div>
          <div class="card"><div class="label">Platform</div><div class="value">WebGL</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">Unity, ProCreate, Photoshop, Maya, ZBrush</div></div>
        </div>
        <h3>Highlights</h3>
        <ul class="clean">
          <li>Captured documentation for <strong>each step</strong> of the team development process.</li>
          <li>Created a central website for students for future employment.</li>
          <li>All tools linked; each team member credited for their contribution.</li>
        </ul>
        <div class="btn-row">
          <a class="btn primary" href="https://markbergsbaken.my.canva.site/final-project-documentation" target="_blank" rel="noopener noreferrer">View Documentation Page</a>
        </div>
      </div>
      <div class="media" aria-label="Project 2 video">
        <video controls preload="metadata" playsinline poster="images/bubbles-poster.jpg">
          <source src="videos/402FinalWithCredits.webm" type="video/webm" />
          <source src="videos/402FinalWithCredits.mp4" type="video/mp4" />
          Your browser doesn’t support HTML5 video. <a href="videos/402FinalWithCredits.mp4">Download the trailer</a>.
        </video>
      </div>
    </section>

    <!-- Slide 5: Project 3 -->
    <section class="slide project" id="Splat!" aria-label="Splat!">
      <div>
        <div class="kicker">Project</div>
        <h2>SPLAT!</h2>
        <p class="lead"></p>
        <div class="meta">
          <div class="card"><div class="label">Role</div><div class="value">Designer / Scripter</div></div>
          <div class="card"><div class="label">Team</div><div class="value">Solo project</div></div>
          <div class="card"><div class="label">Platform</div><div class="value">PC</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">Unity, C#</div></div>
        </div>
        <h3>Highlights</h3>
        <ul class="clean">
          <li>Balanced art, level, and sound design while keeping the project on track.</li>
          <li>Extensive playtesting and debugging required at all phases.</li>
          <li>Delivered a clean product with dynamic puzzles.</li>
        </ul>
        <div class="btn-row">
          <a class="btn primary" href="https://mywebspace.quinnipiac.edu/mbergsbaken/200/Final/" target="_blank" rel="noopener noreferrer">Play Splat!</a>
        </div>
      </div>
      <div class="media" aria-label="Project 3 media">
        <a href="https://mywebspace.quinnipiac.edu/mbergsbaken/200/Final/" target="_blank" rel="noopener noreferrer">
          <img src="images/splat.png" alt="SPLAT screenshot" style="object-fit: contain; width:100%; height:100%;" loading="eager" decoding="async" fetchpriority="high" />
        </a>
      </div>
    </section>

        <!-- Slide 6: Harbor Havoc -->
    <section class="slide project" id="Harbor Havoc" aria-label="Harbor Havoc">
      <div>
        <div class="kicker">Project</div>
        <h2>Harbor Havoc</h2>
        <p class="lead"></p>
        <div class="meta">
          <div class="card"><div class="label">Role</div><div class="value">Designer / Programmer</div></div>
          <div class="card"><div class="label">Team</div><div class="value">Team Project</div></div>
          <div class="card"><div class="label">Platform</div><div class="value">PC</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">Unity, C#</div></div>
        </div>
        <h3>Highlights</h3>
        <ul class="clean">
          <li>Juggled art direction, programming, and overall Game Flow.</li>
          <li>Developed all enemy logic and created tools for ease of use</li>
          <li>Managed all PM tasks, and designed deliverables. Managed scheduling, implementaion, and created Itch.io page</li>
        </ul>
        <div class="btn-row">
          <a class="btn primary" href="https://markbergsbaken.itch.io/harbor-havoc" target="_blank" rel="noopener noreferrer">Play Harbor Havoc!</a>
        </div>
      </div>
      <div class="media" aria-label="Harbor Havoc Media">
        <a href="https://markbergsbaken.itch.io/harbor-havoc" target="_blank" rel="noopener noreferrer">
          <img src="images/HarborHavoc.png" alt="HarborHavocScreenshot" style="object-fit: contain; width:100%; height:100%;" loading="eager" decoding="async" fetchpriority="high" />
        </a>
      </div>
    </section>

    <!-- Slide 7: Flame and Fortune -->
    <section class="slide project" id="flame-and-fortune" aria-label="Flame and Fortune">
      <div>
        <div class="kicker">Project</div>
        <h2>Flame and Fortune</h2>
        <p class="lead"></p>
        <div class="meta">
          <div class="card"><div class="label">Role</div><div class="value">Designer / Programmer</div></div>
          <div class="card"><div class="label">Team</div><div class="value">2 People</div></div>
          <div class="card"><div class="label">Platform</div><div class="value">PC/Web</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">Unity, C#</div></div>
        </div>
        <h3>Highlights</h3>
        <ul class="clean">
          <li>Designed and implemented the core gameplay loop.</li>
          <li>Built gameplay systems with a focus on player feedback and polish.</li>
          <li></li>
        </ul>
        <div class="btn-row">
          <a class="btn primary" href="https://markbergsbaken.itch.io/flame-and-fortune" target="_blank" rel="noopener noreferrer">Play Flame and Fortune!</a>
        </div>
      </div>
      <div class="media" aria-label="Flame and Fortune Media">
        <a href="https://markbergsbaken.itch.io/flame-and-fortune" target="_blank" rel="noopener noreferrer">
          <img src="images/FlameAndFortune.png" alt="Flame and Fortune screenshot" style="object-fit: contain; width:100%; height:100%;" loading="eager" decoding="async" fetchpriority="high" />
        </a>
      </div>
    </section>

    <!-- Slide 8: Contact -->
    <section class="slide contact" id="contact" aria-label="Contact">
      <div>
        <div class="kicker">Contact</div>
        <h2>Let’s build something</h2>
        <p class="lead">Available for junior/associate roles, internships, and collaboration.</p>
        <p>Email: <a href="mailto:MarkBergsbaken@gmail.com">MarkBergsbaken@gmail.com</a></p>
        <p>LinkedIn: <a href="https://www.linkedin.com/in/mark-bergsbaken/" target="_blank" rel="noopener noreferrer">Mark Bergsbaken</a></p>
        <div class="btn-row">
          <a class="btn primary" href="#home">Back to top</a>
        </div>
      </div>
      <div class="media" aria-label="Contact media">
        <img src="images/Logo.png" alt="Logo" loading="eager" decoding="async" fetchpriority="high" />
      </div>
    </section>

    <!-- Slide 8: Class Overview
    <section class="slide project" id="class" aria-label="Class Overview">
      <div>
        <div class="kicker">GDD210</div>
        <h2>Course Overview</h2>
        <p class="lead">Central hub for class resources, assignments, and links.</p>
        <div class="meta">
          <div class="card"><div class="label">Course</div><div class="value">GDD 210</div></div>
          <div class="card"><div class="label">Role</div><div class="value">Student / Designer</div></div>
          <div class="card"><div class="label">Tools</div><div class="value">Unity, C#, Jira/Trello</div></div>
          <div class="card"><div class="label">Links</div><div class="value">See tabs</div></div>
        </div>
        <div class="btn-row">
          <a class="btn" href="#class-games">Go to Games</a>
          <a class="btn" href="#class-pm">Go to Project Mgmt</a>
        </div>
      </div>
            <div class="media" aria-label="Overview media">
        <img src="Images/Classroom.jpg" alt="Overview" loading="eager" decoding="async" fetchpriority="high" />
       
      </div>
    </section>   -->

    <!-- Slide 9: Class — Games -->
    <section class="slide project" id="class-games" aria-label="Class — Games">
      <div>
        <div class="kicker">Class</div>
        <h2>Games</h2>
        <p class="lead">Links and builds for playable prototypes and assignments.</p>
        <ul class="clean">
          <li><a class="btn" href="#project-01">Bubbles Jam</a></li>
          <li><a class="btn" href="#project-02">Cinematic Project</a></li>
          <li><a class="btn" href="#project-03">SPLAT!</a></li>
          <!-- <li><a class="btn" href="GameBuilds/Lab1/index.html" target="_blank" rel="noopener noreferrer">Play Lab 1 ↗</a></li>
          <li><a class="btn" href="GameBuilds/Lab2/index.html" target="_blank" rel="noopener noreferrer">Play Lab 2 ↗</a></li>
          <li><a class="btn" href="GameBuilds/Lab3/index.html" target="_blank" rel="noopener noreferrer">Play Lab 3 ↗</a></li> -->
          <li><a class="btn" href="https://markbergsbaken.itch.io/harbor-havoc" target="_blank" rel="noopener noreferrer">Play Harbor Havoc ↗</a></li>
          <li><a class="btn" href="https://markbergsbaken.itch.io/harbor-havoc" target="_blank" rel="noopener noreferrer">Play Flame and Fortune ↗</a></li>



        </ul>
      </div>
      <div class="media" aria-label="Games media">
        <img src="Images/Games.jpg" alt="Games" loading="eager" decoding="async" fetchpriority="high" />
      </div>
    </section>

    <!-- Slide 10: Class — Project Management -->
    <!-- <section class="slide project" id="class-pm" aria-label="Class — Project Management">
      <div>
        <div class="kicker">Class</div>
        <h2>Project Management</h2>
        <p class="lead">Each Lab will be posted here.</p>
        <div class="btn-row">
          <a class="btn primary" href="https://trello.com/b/iuCbhFSx/gdd210" target="_blank" rel="noopener noreferrer">Open Trello ↗</a>
        
        </div>
        <p class="muted">Click to see Design Docs and Postmortems!</p>
      </div>
      <div class="media" aria-label="PM media">
  
        <img src="Images/ProjectManagement.png" alt="PM" loading="eager" decoding="async" fetchpriority="high" />
      </div>
    </section> -->

<!-- Slide 11: Class labs-->
        <section class="slide project" id="class-labs" aria-label="Class — Labs">
      <div>
        <div class="kicker">Class</div>
        <h2>Labs</h2>
        <p class="lead">Links and builds for playable prototypes and assignments.</p>
        <ul class="clean">
          <li><a class="btn" href="GameBuilds/Lab1/index.html" target="_blank" rel="noopener noreferrer">Play Lab 1 ↗</a></li>
          <li><a class="btn" href="GameBuilds/Lab2/index.html" target="_blank" rel="noopener noreferrer">Play Lab 2 ↗</a></li>
          <li><a class="btn" href="GameBuilds/Lab3/index.html" target="_blank" rel="noopener noreferrer">Play Lab 3 ↗</a></li>
         
        </ul>
      </div>
      <div class="media" aria-label="Games media">
        <img src="Images/Games.jpg" alt="Games" loading="eager" decoding="async" fetchpriority="high" />
      </div>
    </section>

    <!-- ===================== -->
<!-- GDD211 -->
<!-- ===================== -->

<!-- <section class="slide project" id="gdd211" aria-label="GDD211 Overview">
  <div>
    <div class="kicker">GDD211</div>
    <h2>Course Overview</h2>
    <p class="lead">Central hub for GDD211 projects, assignments, and experiments.</p>
  </div>
  <div class="media">
    <div class="ph">GDD211 overview image</div>
  </div>
</section> -->

<section class="slide project" id="gdd211-games" aria-label="GDD211 Games">
  <div>
    <div class="kicker">GDD211</div>
    <h2>Labs</h2>
    <p class="lead">Playable prototypes and class assignments.</p>
    <ul class="clean">
      <li><a class="btn" href="GameBuilds/211_Lab1/index.html" target="_blank" rel="noopener noreferrer">Lab 1 ↗</a></li>
      <li><a class="btn" href="GameBuilds/211_Lab2/Lab2Build2.apk">Download Lab 2 (Android APK) ↗</a></li>    
    </ul>
  </div>
  <div class="media">
    <div class="ph">Game Picture Here</div>
  </div>
</section>

<!-- <section class="slide project" id="gdd211-pm" aria-label="GDD211 Project Management">
  <div>
    <div class="kicker">GDD211</div>
    <h2>Project Management</h2>
    <p class="lead">Planning, documentation, and tracking.</p>
    <div class="btn-row">
      <a class="btn primary" href="#" target="_blank" rel="noopener noreferrer">Open Board ↗</a>
    </div>
  </div>
  <div class="media">
    <div class="ph">GDD211 PM media</div>
  </div>
</section> -->

<!-- ===================== -->
<!-- GDD314 -->
<!-- ===================== -->

<!-- <section class="slide project" id="gdd314" aria-label="GDD314 Overview">
  <div>
    <div class="kicker">GDD314</div>
    <h2>Course Overview</h2>
    <p class="lead">Advanced work, systems, and portfolio-ready projects.</p>
  </div>
  <div class="media">
    <div class="ph">GDD314 overview image</div>
  </div>
</section>

<section class="slide project" id="gdd314-games" aria-label="GDD314 Games">
  <div>
    <div class="kicker">GDD314</div>
    <h2>Games</h2>
    <p class="lead">Major builds and advanced prototypes.</p>
    <ul class="clean">
      <li><a class="btn" href="#" target="_blank" rel="noopener noreferrer">Game link here ↗</a></li>
    </ul>
  </div>
  <div class="media">
    <div class="ph">GDD314 games media</div>
  </div>
</section>

<section class="slide project" id="gdd314-pm" aria-label="GDD314 Project Management">
  <div>
    <div class="kicker">GDD314</div>
    <h2>Project Management</h2>
    <p class="lead">Production tracking and documentation.</p>
    <div class="btn-row">
      <a class="btn primary" href="#" target="_blank" rel="noopener noreferrer">Open Board ↗</a>
    </div>
  </div>
  <div class="media">
    <div class="ph">GDD314 PM media</div>
  </div>
</section> -->



  </main>

  <!-- Bottom squares (auto-generated) -->
  <div class="pager" id="pager" aria-label="Slide navigation" role="tablist"></div>

  <!-- Side arrows -->
  <div class="arrow left"><button id="prev" aria-label="Previous slide" title="Previous">◀</button></div>
  <div class="arrow right"><button id="next" aria-label="Next slide" title="Next">▶</button></div>

  <script>
    (function(){
      const slider = document.getElementById('slider');
      const slides = Array.from(slider.querySelectorAll('.slide'));
      const pager = document.getElementById('pager');
      const sideNav = document.getElementById('side-nav');
      const prevBtn = document.getElementById('prev');
      const nextBtn = document.getElementById('next');

      // Build bottom squares based on the number of slides
      slides.forEach((s, i) => {
        const b = document.createElement('button');
        b.className = 'dot';
        b.type = 'button';
        b.setAttribute('role', 'tab');
        b.setAttribute('aria-controls', s.id);
        b.setAttribute('aria-label', s.getAttribute('aria-label') || `Slide ${i+1}`);
        b.addEventListener('click', () => s.scrollIntoView({behavior:'smooth', inline:'start', block:'nearest'}));
        pager.appendChild(b);
      });

      const dots = Array.from(pager.querySelectorAll('.dot'));
      // Only nav links that map to slides should be highlighted
      const sideLinks = sideNav ? Array.from(sideNav.querySelectorAll('a[data-index]')) : [];

      function setActive(index){
        dots.forEach((d,i)=> d.setAttribute('aria-current', i===index ? 'true' : 'false'));
        sideLinks.forEach((a,i)=> a.classList.toggle('active', i===index));
        const id = slides[index].id;
        if(location.hash !== '#' + id){
          history.replaceState(null, '', '#' + id);
        }
      }

      // Observe which slide is centered
      const io = new IntersectionObserver((entries)=>{
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a,b)=> b.intersectionRatio - a.intersectionRatio)[0];
        if(visible){
          const idx = slides.indexOf(visible.target);
          if(idx >= 0) setActive(idx);
        }
      }, {root: slider, threshold:[0.5, 0.75, 0.99]});

      slides.forEach(s => io.observe(s));

      // Arrow buttons
      function go(delta){
        const current = dots.findIndex(d => d.getAttribute('aria-current') === 'true');
        const next = Math.min(slides.length-1, Math.max(0, current + delta));
        slides[next].scrollIntoView({behavior:'smooth', inline:'start', block:'nearest'});
      }
      prevBtn.addEventListener('click', () => go(-1));
      nextBtn.addEventListener('click', () => go(1));

      // Keyboard left/right
      window.addEventListener('keydown', (e)=>{
        if (['ArrowLeft','ArrowRight'].includes(e.key)){
          e.preventDefault();
          go(e.key==='ArrowRight' ? 1 : -1);
        }
      });

      // Hash deep-link on load
      window.addEventListener('load', ()=>{
        const id = (location.hash || '').replace('#','');
        const target = id && document.getElementById(id);
        if(target){
          target.scrollIntoView({behavior:'auto', inline:'start', block:'nearest'});
        } else {
          setActive(0);
        }
      });
    })();
  </script>
</body>
</html>