Fretux/PortfolioWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve styling

Browse Source
This commit is contained in:
fretuks
2026-06-09 11:53:07 +02:00
parent 1c6a7fdb59
commit f34ef3b84c
3 changed files with 579 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+13 -14
View File
@@ -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
and background. If you're curious about my work or have any questions, feel free to reach out! Enjoy
exploring!</p>
<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>
<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="img/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>
<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>
@@ -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
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>
<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="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
anything—I'm here to share my journey and the technologies behind this interactive experience!</p>
<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>
script1.js
+503 -308
View File
File diff suppressed because it is too large Load Diff
style.css
+63 -23
View File
@@ -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);
border: 2px solid gold;
border-radius: 10px;
padding: 10px;
width: 250px;
background: rgba(248, 252, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 22px;
padding: 18px;
width: 280px;
text-align: center;
font-family: Arial, sans-serif;
color: black;
font-family: "Trebuchet MS", Verdana, sans-serif;
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);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: rgba(248, 252, 255, 0.94);
padding: 24px;
border-radius: 26px;
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;
}
}