portfolio/public_html/projects/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Projects | Josh Ashton</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="index.html">Josh Ashton</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav nav-fill w-100">
                <a class="nav-link" href="../projects">
                    <li class="nav-item">Projects</li>
                </a>
            </ul>
        </div>
    </nav>

    <!--Wrapper div, to separate filter options from the rest of the projects.-->
    <div class="projects-display">
      <form class="filter-buttons">
          <input type="radio" class="search btn btn-primary" name="filter" id="java" />
          <label for="java">Java</label>

          <input type="radio" class="search btn btn-primary" name="filter" id="html" />
          <label for="html">HTML</label>

          <input type="radio" class="search btn btn-primary" name="filter" id="css" />
          <label for="css">CSS</label>

          <input type="radio" class="search btn btn-primary" name="filter" id="javascript" />
          <label for="javascript">JavaScript</label>

          <input type="radio" class="search btn btn-primary" name="filter" id="c" />
          <label for="c">C</label>

          <input type="radio" class="search btn btn-primary" name="filter" id="c#" />
          <label for="c#">C#</label>

          <input type="radio" class="search btn btn-primary" name="filter" id="bash" />
          <label for="bash">Bash</label>
      </form>

      <!--Selectable projects that dynamically resize to fit more information.-->
      <div class="panels">

        <div class="panel java" id="dnd">
          <h3 class="label">DnD</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/dnd" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel java" id="graph">
          <h3 class="label">Graph</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2420-graph-visualizer" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel java" id="chess">
          <h3 class="label">Chess</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2420-chess" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel c# .NET" id="snake">
          <h3 class="label">Snake</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2410-snake" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel c# .NET" id="contacts">
          <h3 class="label">Contacts</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2410-contacts" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel html css js javascript" id="canvas">
          <h3 class="label">Canvas</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/dnd" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel bash" id="scripts">
          <h3 class="label">Scripts</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/scripts" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel c" id="linkedlist-c">
          <h3 class="label">Linked List in C</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/learningC" target="_blank">View Code on Github</a></button>
        </div>

        <div class="panel html css javascript" id="1430">
          <h3 class="label">CSIS 1430</h3> <!--Project label-->
          <h4 class="label-text">ASDF</h4>
          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/1430" target="_blank">View Code on Github</a></button>
        </div>

      </div>

    </div>
  </body>

  <footer>
    <script src="js/script.js"></script>
  </footer>
</html>