index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta charset="UTF-8" />
  <link rel="icon" type="image/x-icon" href="textures\favico.ico">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link href="./style.css" rel="stylesheet">
  <script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
  <title>NotIntense | Developer Portfolio</title>
</head>
<body>
  <div id="content-container">
  <canvas id="bg" style="opacity: 0.1;"></canvas>
  <script src="./modules/index.min.js"></script>
  <script type="module" src="main.js" defer></script>
  <div id="site-status"></div>
  <button id="toggle-ui" title="Toggle UI">
  <i class="fas fa-eye"></i></button>

  <!--Spotify-->
  <div id="spotify-container">
    <iframe 
      src="https://open.spotify.com/embed/playlist/2YzzQRodRYU0XtuRvcSTFO?utm_source=generator&theme=0" 
      width="350" height="155" frameborder="0" allowfullscreen
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy"
      style="border: none; border-radius: 12px;">
    </iframe>
  </div>
  <!--Spotify End-->

  <div id="pfctnr" class="profileContainer">
    <div class="card" id="mainProfileCard">
      <div id="frontCard">
        <div class="profileImage">
        <img src="./textures/notintense.gif" alt="Profile Picture">
        </div>
        <h2 class="name">NotIntense</h2>
        <p class="title">Software Engineer</p>
        <p class="bio">I'm a college undergraduate at Rochester Institute of Technology, passionate about pursuing Software Engineering as a lifetime career. Starting when I was 12, I know C#, Javascript, and the Unity game engine.</p>
        <div class="icon">
          <a href="https://github.com/NotIntense" target="_blank" class="iconItem"><i class="fab fa-github fa-2x"></i></a>
          <a href="https://gitlab.com/notintense" target="_blank" class="iconItem"><i class="fa-brands fa-gitlab fa-2x"></i></a>
          <a href="mailto:contact@notintense.com" target="_blank" class="iconItem"><i class="fa-solid fa-envelope fa-2x"></i></a>
        </div>
      </div>
      <div id="backCard" style="display: none; transform: rotateY(-180deg);">
        <div class="profileImage">
          <img src="./textures/notintense.gif" alt="Profile Picture">
        </div>
        <h2 class="name" style="margin-bottom: -32px;">NotIntense</h2>
        <h2 class="name" style="scale: 75%;">(Inty)</h2>
        <p class="title">More!!</p>
        <p class="bio">I've lived in 8 U.S. states and two countries. I've far worked with two game development studios on providing updates/game development to the Steam gaming platform.
          My goal is to one day get up on a level with major tech companies :>
        </p>
        <div class="icon">
          <a href="#" class="flagiconItem"> 🇩🇪
            <div class="flagtooltip">
              Bayern (5y)<br>
            </div>
          </a>

          <a href="#" class="flagiconItem"> 🇺🇸
            <div class="flagtooltip">
              California (2y)<br>
              Washington D.C. (2y)<br>
              Kansas (2y)<br>
              Virgina (2y)<br>
              Georgia (2y)<br>
              North Carolina (2y)<br>
              Kentucky (1y)<br>
              New York<br>
            </div>
          </a>
        </div>
      </div>
      <button type="button" id="oh,Hi" class="buttonMore" onclick="mainCardMoreInfo()">More info</button>
    </div>
    <div class="card">
      <div class="info">
        <h2 class="header">What I do:</h2>
        <p class="bioProjects">Below include a range of Steam projects I've worked on with studios to personal or community projects on Github.
        </p>
      </div>

      <!--SCP SecretLab-->
      <a href="https://store.steampowered.com/app/700330/SCP_Secret_Laboratory/" target="_blank" style="text-decoration: none;">
        <div class="projectObject">
          <img class="projectImage" src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/700330/19e84a7d25dc97d4ebf6358bbf8a5081330deaea/header.jpg?t=1780232910">
            <div class="projectText">
              <h2 class="projectTitle">SCP: Secret Laboratory</h2>
              <p class="projectDesc">Deep within a secure underground facility, a sudden containment breach allows many of the secured anomalies to escape from their chambers.</p>
            </div>
        </div>
      </a>
      <!--End SCP Valravn-->
      <!--SCP Valravn-->
      <a href="https://store.steampowered.com/app/2707670/SCP_Valravn/" target="_blank" style="text-decoration: none;">
        <div class="projectObject">
          <img class="projectImage" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/2707670/hero_capsule.jpg?t=1744836505">
            <div class="projectText">
              <h2 class="projectTitle">SCP: Valravn</h2>
              <p class="projectDesc">You never lose a war, when war is what you sell. Infiltrate the Valravn Corp. Put down the horrors in the dark. Containment is not enough.</p>
            </div>
        </div>
      </a>
      <!--End SCP Valravn-->
      <!--SCP Labrat-->
      <a href="https://store.steampowered.com/app/1402020/SCP_Labrat/" target="_blank" style="text-decoration: none;">
        <div class="projectObject">
          <img class="projectImage" src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/1402020/hero_capsule.jpg?t=1739980764">
            <div class="projectText">
              <h2 class="projectTitle">SCP: Labrat</h2>
              <p class="projectDesc">You are a test subject in the underground SCP research facility. When a containment breach occurs, you must find your way out. Escape the SCPs, discover anomalous objects, and collect valuable resources along the way. </p>
            </div>
        </div>
      </a>
      <!--End SCP Labrat-->
      <!--Personal/Community projects-->
      <a href="https://github.com/NotIntense" target="_blank" style="text-decoration: none;">
        <div class="projectObject">
          <img class="projectImage" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png">
            <div class="projectText">
              <h2 class="projectTitle">Personal/Community projects</h2>
              <p class="projectDesc">Go here to visit personal and community projects I've contributed to!</p>
            </div>
        </div>
      </a>
      <!--End Personal/Community projects-->
    </div>
  </div>
  </div>
</body>

<script>
  let rotated = false;
  let pC = document.getElementById('mainProfileCard');
  let button = document.getElementById('oh,Hi');
  let frontCard = document.getElementById('frontCard');
  let backCard = document.getElementById('backCard');

  function mainCardMoreInfo() {

    if (!rotated){
      pC.style.transform = 'rotateY(-180deg)';
      button.style.transform = 'rotateY(-180deg)';
      frontCard.style.display = "none";
      
      backCard.style.display = "block";

      rotated = true;
    }
    else{
      pC.style.transform = 'rotateY(0deg)';
      button.style.transform = 'rotateY(0deg)';
      frontCard.style.display = "block";

      backCard.style.display = "none";

      rotated = false;
    }
  }
</script>
</html>