Improve styling

index.html

@@ -32,21 +32,16 @@
   <!-- "?" 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
+    <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>
-      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
+    <p class="project-description">An interactive JavaScript and Python application designed to calculate damage statistics for the popular Roblox game 'The Red Lake'.</p>
-      statistics for the popular Roblox game 'The Red Lake'.</p>
     <img src="img/Project_TrlStats.png" alt="TRLStats">
-    <p class="long-description" data-project-name="TRLStats">TRLStats was my first project, a damage calculator for the
+    <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>
-      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>
@@ -59,15 +54,20 @@
     <p class="project-description">A Website about the creation of the SBB (Swiss Train Corporation) with an
       interactable map!</p>
     <img src="img/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
+    <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>
-      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="project">
+    <h3 class="project-name">KnockedBack</h3>
+    <p class="project-description">A minecraft forge mod for 1.20.1 that revamps dying!</p>
+    <img src="img/Knockedback.png" alt="KnockedBack">
+    <p class="long-description" data-project-name="KnockedBack">For a long time, I had wanted a mod that really changed how dying worked in PVP, to make it more tactical. However, there was none. So, I looked into the possibility of making my own minecraft mod, initially with neoforge, but after multiple setbacks, I decided to go with normal forge, as it was easier.</p>
+    <a class="link" href="https://www.curseforge.com/minecraft/mc-mods/knockedback" data-project-name="KnockedBack">Link to the Mod</a>
+    <p class="tags">Java</p>
+  </div>
   <div class="pagination-controls">
     <button id="prev-button" disabled>Previous</button>
     <button id="next-button">Next</button>
@@ -82,8 +82,7 @@
 <!-- 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
+    <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>
-      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>

style.css

@@ -3,7 +3,8 @@ html, body {
     padding: 0;
     height: 100%;
     overflow-x: hidden;
-    background-color: #B3C0CA;
+    background: linear-gradient(180deg, #8fc9f2 0%, #eef8ff 100%);
+    font-family: "Trebuchet MS", Verdana, sans-serif;
 }
 
 #welcome-screen {
@@ -194,7 +195,7 @@ p {
     width: 100%;
     height: 100vh;
     overflow: hidden;
-    background-color: #B3C0CA;
+    background: #8fc9f2;
 }
 
 #game-canvas {
@@ -245,18 +246,31 @@ p {
 }
 
 #block-info {
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(248, 252, 255, 0.94);
-    border: 2px solid gold;
+    border: 1px solid rgba(255, 255, 255, 0.72);
-    border-radius: 10px;
+    border-radius: 22px;
-    padding: 10px;
+    padding: 18px;
-    width: 250px;
+    width: 280px;
     text-align: center;
-    font-family: Arial, sans-serif;
+    font-family: "Trebuchet MS", Verdana, sans-serif;
-    color: black;
+    color: #102033;
     font-size: 14px;
     z-index: 10;
     animation: fade-in 0.5s ease-out;
     position: absolute;
+    box-shadow: 0 24px 60px rgba(9, 24, 43, 0.24);
+    backdrop-filter: blur(12px);
+}
+
+#block-info h1 {
+    margin: 0 0 8px;
+    color: #102033;
+}
+
+#block-info p {
+    margin: 0;
+    color: #496071;
+    line-height: 1.45;
 }
 
 @keyframes fade-in {
@@ -305,12 +319,20 @@ p {
 
 button {
     margin-top: 10px;
-    padding: 5px 10px;
+    padding: 10px 16px;
     color: white;
-    background-color: darkgoldenrod;
+    background: #102033;
     border: none;
     cursor: pointer;
-    border-radius: 5px;
+    border-radius: 14px;
+    box-shadow: 0 10px 24px rgba(9, 24, 43, 0.16);
+    font-family: inherit;
+    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
+}
+
+button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 30px rgba(9, 24, 43, 0.22);
 }
 
 #turn-device-sideways {
@@ -319,19 +341,21 @@ button {
 
 #mobile-controls {
     position: fixed;
-    bottom: 10px;
+    bottom: 14px;
     width: 100%;
     display: flex;
     justify-content: center;
     gap: 10px;
+    z-index: 20;
+    pointer-events: none;
 }
 
 #interact-character-button {
     position: absolute;
-    bottom: 60px;
+    bottom: 66px;
     left: 50%;
     transform: translateX(-50%);
-    background-color: blue;
+    background: #2f7dd3;
 }
 
 #interact-button,
@@ -339,13 +363,17 @@ button {
 #jump-button,
 #move-right-button {
     display: inline-block;
-    padding: 10px 20px;
+    padding: 12px 18px;
     font-size: 16px;
-    background-color: blue;
+    background: rgba(16, 32, 51, 0.88);
+    border: 1px solid rgba(255, 255, 255, 0.24);
+    backdrop-filter: blur(10px);
+    pointer-events: auto;
 }
 
 #mobile-controls button:active {
-    background-color: #0056b3;
+    background-color: #2f7dd3;
+    transform: translateY(1px) scale(0.98);
 }
 
 #npc-dialog {
@@ -355,13 +383,25 @@ button {
     transform: translateX(-50%);
     width: 80%;
     max-width: 600px;
-    background-color: rgba(255, 255, 255, 0.9);
+    background: rgba(248, 252, 255, 0.94);
-    padding: 20px;
+    padding: 24px;
-    border-radius: 10px;
+    border-radius: 26px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    box-shadow: 0 30px 80px rgba(9, 24, 43, 0.28);
+    backdrop-filter: blur(16px);
     z-index: 1000;
 }
 
+#npc-dialog p {
+    color: #102033;
+    line-height: 1.5;
+}
+
+#npc-dialog button {
+    width: 100%;
+    background: #102033;
+}
+
 @media (min-width: 768px) {
     #mobile-controls {
         display: none;
@@ -435,4 +475,4 @@ button {
 
 .dark-mode #welcome-screen {
     background-color: #333;
-}
+}