.profile/projects.html

<!DOCTYPE html>
<html lang='en'>

<head>
  <title>Braeden Sowinski</title>
  <meta name='description' content="Braeden Sowinski's portfolio" />
  <meta name='author' content="Braeden Sowinski" />
  <meta name='keywords' content="Braeden Sowinski, projects, portfolio, software engineer" />
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>

  <link rel="stylesheet" href="./public/css/style.css">
  <link rel="stylesheet" href="./public/css/projects.css">
</head>

<body class="js-stop-transition">
  <header class="header">
    <nav class="nav">
      <div class="logo">
        <a href="./" title="sowinski.dev (Alt + H)">
          <img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt="logo" style="border-radius:50%;"
            aria-label="logo" height="32">sowinski.dev
        </a>
        <span class="logo-switches">
          <button id="theme-toggle" accesskey="t" title="(Alt + T)">
            <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
            </svg>
            <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="5" />
              <line x1="12" y1="1" x2="12" y2="3" />
              <line x1="12" y1="21" x2="12" y2="23" />
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
              <line x1="1" y1="12" x2="3" y2="12" />
              <line x1="21" y1="12" x2="23" y2="12" />
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
            </svg>
          </button>
        </span>
      </div>
      <ul id="menu" class="nav__links">
        <li id="home-link">
          <a href="./" title="Home">
            <span class="active">Home</span>
          </a>
        </li>
        <li id="about-link">
          <a href="./about.html" title="About">
            <span class="active">About</span>
          </a>
        </li>
        <li id="projects-link">
          <a href="./projects.html" title="Projects">
            <span class="active">Projects</span>
          </a>
        </li>
      </ul>
      <p class="menu cta">Menu</p>
    </nav>

    <div id="mobile__menu" class="overlay">
      <button type="button" class="close" aria-label="Close menu">&times;</button>
      <div class="overlay__content">
        <a href="./" title="Home"><span class="active">Home</span></a>
        <a href="./about.html" title="About"><span class="active">About</span></a>
        <a href="./projects.html" title="Projects"><span class="active">Projects</span></a>
      </div>
    </div>
  </header>

  <main class="projects-page page-shell">
    <section class="projects-hero">
      <p class="eyebrow">Projects & Updates</p>
      <h1>Selected work, recent milestones, and technical writeups.</h1>
      <p class="projects-intro">
          View some of the work I am proud of, and some recent acheivements of mine :)
      </p>
    </section>

    <section class="content-section">
      <div class="section-heading">
        <div>
          <p class="eyebrow">Portfolio</p>
          <h2>Selected Projects</h2>
        </div>
        <a class="section-link" href="https://github.com/SowinskiBraeden" target="_blank" rel="noopener noreferrer">View Github</a>
      </div>
      <div id="projects-grid" class="content-grid">
        <p class="loading-state">Loading projects...</p>
      </div>
    </section>

    <section class="content-section updates-section">
      <div class="section-heading">
        <div>
          <p class="eyebrow">Recent</p>
          <h2>Updates & Achievements</h2>
        </div>
      </div>
      <div id="updates-grid" class="content-grid updates-grid">
        <p class="loading-state">Loading updates...</p>
      </div>
    </section>

    <footer class="footer flex-container site-footer">
      <p>Get in touch with me!</p>
      <div class="social-icons">
        <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target="_blank" rel="noopener noreferrer me"
          title="LinkedIn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
            viewBox="0 0 16 16">
            <path
              d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
          </svg>
        </a>
        <a class="icon" href="https://github.com/SowinskiBraeden" target="_blank" rel="noopener noreferrer me" title="Github">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
            <path
              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77 5.44 5.44 0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22" />
          </svg>
        </a>
        <a class="icon" href="mailto:braeden@sowinski.dev" target="_blank" rel="noopener noreferrer me" title="Email">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
            <polyline points="22,6 12,13 2,6" />
          </svg>
        </a>
      </div>
    </footer>
  </main>

  <script src="./public/scripts/mobile.js"></script>
  <script src="./public/scripts/theme.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="./public/scripts/content.js"></script>
  <script>
    window.PORTFOLIO_CONTENT.initListPage();
  </script>
</body>

</html>