.profile/about.html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Braeden Sowinski</title>
    <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
    <meta name='author' content="Braeden Sowinski" />
    <meta name='keywords' content="Braeden Sowinski, McDazzzled" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>

    <!-- Load CSS -->
    <link rel="stylesheet" href="./public/css/style.css">
  </head>
  <body class="js-stop-transition">
    <header class=header>
      <nav class=nav>
        <div class=logo>
          <a href="/" title="McDazzzled (Alt + H)">
            <img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;" aria-label=logo height=32>McDazzzled
          </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" title="about">
              <span class="active">About</span>
            </a>
          </li>
          <li id="projects-link">
            <a href="/projects" title="projects">
              <span class="active">Projects</span>
            </a>
          </li>
        </ul>
        <p class="menu cta">Menu</p>
      </nav>

      <!-- Moble Nav Menu -->
      <div id="mobile__menu" class="overlay">
        <a class="close">&times;</a>
        <div class="overlay__content">
          <a href="/" title="Home">
            <span class="active">Home</span>
          </a>
          <a href="/about" title="about">
            <span class="active">About</span>
          </a>
          <a href="/projects" title="projects">
            <span class="active">Projects</span>
          </a>
      </div>
    </header>

    <!-- About Body -->
    <div class="about-section">
      <div class="inner-container">
        <h1 id="about-me">About Me</h1>
        <p class="text">
          Hello there,
          I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software developer; adaptable and driven with a 
          strong work ethic, with the motivation to thrive in any setting, team-based or individually motivated. Aiming to set the bar high, 
          and leave good impressions to any employer.

          I am ambitious to learn more in Software, IT, and System Administration, and am actively expanding my horizons. I am experienced in API 
          development, web applications serving hundreds of thousands of users, simple desktop applications and more. With the advanced knowledge 
          of Python and the Node.js framework, intermediate knowledge with GoLang, and a basic understanding of C/C++ and Java. I can bring and 
          expand on many skill sets you may desire. With my ability to learn quickly, and adapt to any work environment; I can be a valuable 
          asset to any team. I can also bring excellent IT support, with the ability to investigate and resolve computer issues within Windows 
          and Linux operating systems. With System Administration being a key part in my journey, I run and manage several Linux servers for 
          personal and or professional projects. 
        </p>
        <div class="skills">

          <span>
            <img
              style="transform: translate(0, 8px);"
              src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python"
              width="24"
              height="24"
            >
            Python
          </span>
          <span>
            <img
              style="transform: translate(0, 8px);"
              src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript"
              width="24"
              height="24"
            >
            Node.js
          </span>
          <span>
            <img
              style="transform: translate(0, 8px);"
              src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go"
              width="24"
              height="24"
            >
            Go
          </span>
          <span>
            <img
              style="transform: translate(0, 8px);"
              src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb"
              width="24"
              height="24"
            >
            MongoDB
          </span>
          <span>
            <img
              style="transform: translate(0, 8px);"
              src="https://img.shields.io/badge/git-black?style=for-the-badge&logo=git"
              width="24"
              height="24"
            >
            Git
          </span>
        </div>
      </div>
    </div>

  <!-- Import Mobile.js for mobile nav menu -->
  <script src="./public/scripts/mobile.js"></script>

  <!-- Disable transitions on webpage load -->
  <script>document.body.classList.remove('js-stop-transition')</script>

  <!-- Change Theme Scripts -->
  <script type="text/javascript">
    document.getElementById("theme-toggle").addEventListener("click", () => {
      document.body.className.includes("dark")?(document.body.classList.remove('dark'),
      localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'),
      localStorage.setItem("pref-theme",'dark')),
      "dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark");
    });
  </script>
  <script>
    // If storage is supported set theme to dark by default
    if (typeof(Storage) !== "undefined") {
      if (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark");
      if (sessionStorage.getItem("theme")=='light') {
        document.body.className.includes("dark")?(document.body.classList.remove('dark'),
        localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'),
        localStorage.setItem("pref-theme",'dark'));
      }
    }
  </script>
  </body>
</html>