showcase.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Side projects built by Akdeniz University Computer Engineering students — outside coursework, in their own repositories." />
  <meta name="theme-color" content="#F7F8FC" />

  <!-- Open Graph -->
  <meta property="og:title"       content="Showcase — AkdenizOS" />
  <meta property="og:description" content="Side projects built by Akdeniz University Computer Engineering students — outside coursework, in their own repositories." />
  <meta property="og:url"         content="https://akdenizos.org" />
  <meta property="og:type"        content="website" />
  <meta property="og:image"       content="https://akdenizos.org/og-image.png" />

  <title>Showcase — AkdenizOS</title>

  <!-- Favicons -->
  <link rel="icon"             type="image/x-icon" href="favicon.ico" />
  <link rel="icon"             type="image/png" sizes="96x96" href="favicon-96x96.png" />
  <link rel="apple-touch-icon" href="apple-touch-icon.png" />
  <link rel="manifest"         href="site.webmanifest" />

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />

  <!-- Styles -->
  <link rel="stylesheet" href="assets/css/main.css" />
</head>

<body>
<div class="page-shell">

  <!-- ══════════════════════════════════════
       NAVIGATION
  ══════════════════════════════════════ -->
  <nav class="navbar" aria-label="Primary navigation">
    <div class="navbar__inner">

    <a href="./" class="navbar__brand" aria-label="AkdenizOS — home">
      <span class="navbar__logo">
        <img src="akdenizoslogo.png" alt="" width="22" height="22" />
      </span>
      AkdenizOS
    </a>

    <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="nav-links">
      <span class="nav-toggle__bar"></span>
      <span class="nav-toggle__bar"></span>
      <span class="nav-toggle__bar"></span>
    </button>

    <div class="navbar__links" id="nav-links" role="list">
      <a href="repos.html" role="listitem">Repositories</a>
      <a href="showcase.html" aria-current="page" role="listitem">Showcase</a>
      <a href="contribute.html" role="listitem">Contribute</a>
      <a href="activity.html" role="listitem">Activity</a>
      <a class="navbar__cta"
         href="https://github.com/AkdenizOS"
         target="_blank"
         rel="noopener noreferrer"
         role="listitem">
        View GitHub ↗
      </a>
    </div>

    </div>
  </nav>

  <main>

    <div class="container page-head">
      <h1>Things students built.</h1>
      <p>
        Not coursework — the side projects, the weekend tools, the thing you made
        because it annoyed you that it did not exist. Every card links to the
        student's own repository, under their own account.
      </p>
    </div>

    <section class="section section--flush-top container" aria-label="Student projects">
      <div class="showcase" id="showcase">
        <p class="showcase__status">Loading projects…</p>
      </div>
    </section>

    <section class="section container" data-scroll>

      <div class="section-head">
        <p class="section-tag">How to get listed</p>
        <h2>One entry, one pull request.</h2>
        <p>
          The list lives in <code>showcase.json</code>. Add an object for your repo,
          open a pull request, and it appears here once merged. Stars, language and
          your avatar are read from GitHub, so there is nothing to keep updated.
        </p>
      </div>

      <div class="steps">
        <div class="step">
          <h3>It has to be yours</h3>
          <p>
            A public repository under your own account. Not a fork, not a course
            assignment — those belong in the <a href="repos.html">repository index</a>.
          </p>
        </div>
        <div class="step">
          <h3>Add four fields</h3>
          <p>
            <code>repo</code>, <code>title</code>, <code>blurb</code> and a
            <code>color</code> from the palette: navy, sea, teal, moss, amber, sun,
            rust, plum. Tags are optional, and so is <code>url</code> — if the
            project runs somewhere, the card opens the live site.
          </p>
        </div>
        <div class="step">
          <h3>Open the pull request</h3>
          <p>
            A check runs on it — the repo has to exist, be public, be yours, and the
            colour has to be one of the eight. Broken entries never reach the page.
          </p>
        </div>
        <div class="step">
          <h3>That is it</h3>
          <p>
            Once merged your card is live. Change the blurb any time with another
            pull request; the counts look after themselves.
          </p>
        </div>
      </div>

    </section>

    <section class="section container" data-scroll>
      <div class="cta-band">

        <div class="cta-band__copy">
          <p class="section-tag">Your turn</p>
          <h2>Put the thing you built where people can find it.</h2>
          <p>
            It does not have to be finished or impressive. It has to be yours.
            Questions? <a href="mailto:contact@efekurucay.com">contact@efekurucay.com</a>
          </p>
        </div>

        <div class="cta-band__actions">
          <a class="btn btn--primary"
             href="https://github.com/AkdenizOS/AkdenizOS.github.io/blob/main/showcase.json"
             target="_blank" rel="noopener noreferrer">
            Edit showcase.json
            <svg class="btn__arrow" width="14" height="14" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2.5"
                 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </a>
          <a class="btn btn--ghost" href="contribute.html">
            How contributing works
          </a>
        </div>

      </div>
    </section>

  </main>

  <!-- ══════════════════════════════════════
       FOOTER
  ══════════════════════════════════════ -->
  <footer class="site-footer">
    <div class="footer-inner">

      <div class="footer__brand">
        <a href="./" class="navbar__brand" aria-label="AkdenizOS — home">
          <span class="navbar__logo">
            <img src="akdenizoslogo.png" alt="" width="20" height="20" />
          </span>
          AkdenizOS
        </a>
        <p class="footer__tagline">
          An open community of Akdeniz University Computer Engineering students.
        </p>
      </div>

      <nav class="footer__links" aria-label="Footer navigation">
        <div class="footer__col">
          <span class="footer__col-title">This site</span>
          <a href="repos.html">Repositories</a>
          <a href="showcase.html">Showcase</a>
          <a href="contribute.html">Contribute</a>
          <a href="activity.html">Activity</a>
        </div>
        <div class="footer__col">
          <span class="footer__col-title">Organisation</span>
          <a href="https://github.com/AkdenizOS" target="_blank" rel="noopener noreferrer">GitHub</a>
          <a href="https://akdeniz.gitbook.io/" target="_blank" rel="noopener noreferrer">Documentation</a>
          <a href="https://github.com/AkdenizOS/AkdenizOS.github.io" target="_blank" rel="noopener noreferrer">Website source</a>
        </div>
      </nav>

    </div>

    <p class="footer__bottom">
      Built with open-source spirit. No rights reserved — knowledge belongs to everyone.
    </p>
  </footer>

</div><!-- /.page-shell -->
<script src="assets/js/main.js"></script>
<script src="assets/js/showcase.js"></script>
</body>
</html>