PortfolioWebsite/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fretux</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="img/favicon.ico " type=image/x-icon>
</head>
<body>
<!-- Welcome Screen -->
<div id="welcome-screen">
  <div id="welcome-content">
    <h1 id="welcome-text">Welcome! Click the image below to begin your journey through my site!</h1>
    <img id="enter-button" src="img/Penguin_Normal.png" alt="Enter Website"/>
    <img id="turn-device-sideways" src="img/turn-device-sideways.png" alt="Enter Website"/>
    <button id="dark-mode-toggle" class="dark-mode-toggle">
      🌙<br>
      Toggle Dark Mode
    </button>
  </div>
</div>

<!-- Game Container -->
<div id="game-container">
  <canvas id="game-canvas"></canvas>
  <div id="content-overlay">
    <h1 id="section-title"></h1>
    <p id="section-content"></p>
  </div>

  <!-- "?" Block Explanatory Text -->
  <div id="block-info" class="hidden">
    <h1>Welcome!</h1>
    <p>Welcome to my portfolio! Here, you'll discover the projects I've worked on, along with insights about my skills
      and background. If you're curious about my work or have any questions, feel free to reach out! Enjoy
      exploring!</p>
  </div>
</div>

<section id="projects">
  <div class="project">
    <h3 class="project-name">TRLStats</h3>
    <p class="project-description">An interactive JavaScript and Python application designed to calculate damage
      statistics for the popular Roblox game 'The Red Lake'.</p>
    <img src="Project_TrlStats.png" alt="TRLStats">
    <p class="long-description" data-project-name="TRLStats">TRLStats was my first project, a damage calculator for the
      Roblox game 'The Red Lake'. This project combines Python, Flask for backend processing, and JavaScript to
      dynamically display data extracted from JSON files.</p>
    <a class="link" href="https://fretux.ch/trlstats" data-project-name="TRLStats">Link to the Website</a>
    <p class="tags">HTML</p>
    <p class="tags">CSS</p>
    <p class="tags">Javascript</p>
    <p class="tags">Python</p>
    <p class="tags">JSON</p>
  </div>
  <div class="project">
    <h3 class="project-name">SBB-History</h3>
    <p class="project-description">A Website about the creation of the SBB (Swiss Train Corporation) with an
      interactable map!</p>
    <img src="SBB-History.png" alt="SBB-History">
    <p class="long-description" data-project-name="SBB-History">For a School Project, me and 2 friends had to create a
      page about the economic history of a part of the swiss, which we chose to do about the "SBB", the Swiss Train
      Coorporation, founded in 1902. It is a simple Website, using HTML, CSS and Javascript, alongside the "Maptiler"
      API for the interactive map.</p>
    <a class="link" href="https://sbb-history.fretux.ch" data-project-name="SBB-History">Link to the Website</a>
    <p class="tags">HTML</p>
    <p class="tags">CSS</p>
    <p class="tags">Javascript</p>
  </div>
  <div class="pagination-controls">
    <button id="prev-button" disabled>Previous</button>
    <button id="next-button">Next</button>
  </div>
  <!-- More projects here -->
</section>
<div id="detailsContainer"
     style="display:none; position:fixed; top:20%; left:20%; width:60%; height:60%; background:white; padding:20px; overflow:auto; box-shadow: 0 0 10px rgba(0,0,0,0.5);">
  <!-- Details will be loaded here -->
</div>

<!-- NPC Dialog Overlay (initially hidden via CSS) -->
<div id="npc-dialog" class="hidden">
  <div id="npc-dialog-content">
    <p id="npc-dialog-text">Hello, I'm Frederik Spirgi (aka Fretux), the creator of this website! Feel free to ask me
      anything—I'm here to share my journey and the technologies behind this interactive experience!</p>
    <button id="dialog-option-1">Tell me more about your background!</button>
    <br>
    <button id="dialog-option-2">What technologies did you use to build this site?</button>
    <br>
    <button id="dialog-option-3">Why did you create this interactive website?</button>
    <br>
    <h6>(You can leave the house by pressing Enter again)</h6>
  </div>
</div>

<div id="mobile-controls">
  <button id="move-left-button"><</button>
  <button id="jump-button">^</button>
  <button id="move-right-button">></button>
  <button id="interact-button">Interact</button>
  <button id="interact-character-button" class="hidden">Interact with Character</button>
</div>


<!-- Snowfall Container -->
<div id="snow-container"></div>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="Tutorial.js"></script>
<script type="text/javascript" src="darkmode.js"></script>
</body>
</html>