samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new darkmode, disbales/hidden min games

Browse Source
This commit is contained in:
samantha42
2026-05-23 11:52:02 +02:00
parent 4cb5ea8724
commit 0f0c72e705
16 changed files with 771 additions and 1347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/about.html
+62 -154
View File
@@ -6,9 +6,10 @@
<title>Samantha Vero Friis</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/static/styles2.css" />
<link rel="stylesheet" href="/static/style/styles2.css" />
<link rel="stylesheet" href="/static/style/game.css" />
</head>
<body>
<body class="theme-root day " id="themeRoot">
<nav>
<a class="nav-logo" href="#">samantha_vero_friis</a>
@@ -20,11 +21,28 @@
<a href="/infra">infrastructure</a>
<a href="/git">git</a>
<a class="cta" href="mailto:me@samantha42.xyz">contact</a>
</div>
</nav>
<div class="shell">
<aside>
<div class="row">
<div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle" aria-label="Toggle day/night mode">
<div class="track day" id="track">
<div class="stars">
<div class="star"></div><div class="star"></div><div class="star"></div>
<div class="star"></div><div class="star"></div>
</div>
</div>
<div class="knob day" id="knob">
<div class="sun-rays" id="rays"></div>
<div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
<div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
<div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
</div>
</div>
</div>
<div>
<p class="sidebar-label">navigate</p>
<div class="sidebar-links">
@@ -52,6 +70,24 @@
<p class="sidebar-label">location</p>
<div style="font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);">Denmark<br>Aalborg Øst, 9220</div>
</div>
<div>
<p class="sidebar-label">languages</p>
<div class="lang-row">
<span class="lang-badge">Danish</span>
<span class="lang-badge">English</span>
</div>
</div>
<div style="flex: 1;"></div>
<!--
<div class="sidebar-links">
<p class="sidebar-label">mini games</p>
<a href="#alice" onclick="unhideGame()"> Follow the rabbit</a>
<a href="#tetris" onclick="unhideTetris()" >Alexey Pajitnov</a>
</div>
-->
</aside>
<main id="about">
@@ -127,14 +163,6 @@
</div>
</section>
<section>
<div class="section-head"><h2>languages</h2></div>
<div class="lang-row">
<span class="lang-badge">Danish</span>
<span class="lang-badge">English</span>
</div>
</section>
<section>
<div class="section-head"><h2>interests</h2></div>
<div class="interests-row">
@@ -188,7 +216,7 @@
<div class="page-header">
<h2 class="page-title" id="interest">interests</h2>
<span class="page-sub">Fav lists</span>
<span class="page-sub" id="interest-sub">Fav lists</span>
</div>
<div class="section-head"><h2>Movie/Show Top list</h2></div>
<div class="toplist-group">
@@ -203,9 +231,9 @@
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
<p>A Cure of Wellness</p>
</div>
<div class="poster-item">
<img src="/static/posters/Fightclub.jpg" alt="Fight Club">
<p>Fight Club</p>
<div class="poster-item posterhover" onclick="matrixClick()">
<img src="/static/posters/matrix.jpg" alt="matrix">
<p>The Matrix</p>
</div>
<div class="poster-item posterhover" onclick="draculaClick()">
<img src="/static/posters/Dracula.webp" alt="Dracula: A Love Tale">
@@ -246,38 +274,28 @@
</div>
</div>
<div class="section-head"><h2>Lunix rice</h2></div>
<div class="rice-wrap">
<img src="/static/images/rice.png" width="500px">
<div>
<div style="padding-left: 10%;"><img src="/static/images/rice.png" width="80%" style="align-self: center;"></div>
<p class="exp-body">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows on my screen so everything stays organized without dragging things around. I also use Quickshell, which lets me customize menus, shortcuts, and system controls to work exactly how I want.
My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more control and customization than a typical computer setup. The result is a clean, fast, and super efficient desktop that’s hard to go back from.</p>
My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more control and customization than a typical computer setup. The result is a clean, fast, and super efficient desktop that’s hard to go back from.
<a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles" >Git repo</a>
</p>
</div>
<!--
<div class="section-head"><h2>Games</h2></div>
<section style="display: none;" id="alice" class="play" >
<br>
<div class="section-head"><h2>Want to play a game Alice?!</h2></div>
<div class="story-text" id="story-text"></div>
<div class="choices" id="choices"></div>
</section>
<script src="/static/scripts/game.js"></script>
<section style="display: none;" id="tetris" >
<h2>This game is</h2>
</section>
<script src="/static/scripts/tetris.js"></script>
<div class="toplist-group">
<div class="toplist-body">
<div class="game-grid">
<div class="poster-item">
<img src="/static/posters/Chernobyl.webp" alt="Chernobyl">
<p>Chernobyl</p>
</div>
<div class="poster-item">
<p>Balders Gate</p>
</div>
<div class="poster-item">
<p>Factorio</p>
</div>
<div class="poster-item">
<p>Slay the spire 2</p>
</div>
<div class="game-item">
<img src="/static/posters/risetr-banner.png" alt="Rise of the Tomb Raider">
<p>Rise of the Tomb Raider</p>
</div>
</div>
</div>-->
</div>
@@ -290,116 +308,6 @@ My system is based on Arch Linux or Manjaro Linux, which are versions of Linux t
<div class="footer-copy">© 2026 — all rights reserved</div>
</footer>
<script>
// just some fun.
console.log("%c👀 hi there!", "font-size:20px")
function draculaClick() {
const el = document.getElementById('interest');
if (!el) return; // el is a DOM node, never a string
el.textContent = '🦇 interest 🦇';
setTimeout(() => {
el.textContent = "interest";
}, 5000);
}
function bladerunnerClick() {
if (document.getElementById('rain-canvas')) return; // already running, do nothing
const el = document.getElementById('interest');
el.textContent = 'tears in rain';
startRain();
setTimeout(() => {
el.textContent = "interest";
stopRain();
}, 10000);
}
let rainCanvas, rainCtx, rainInterval;
function startRain() {
rainCanvas = document.createElement('canvas');
rainCanvas.id = 'rain-canvas';
rainCanvas.width = window.innerWidth;
rainCanvas.height = window.innerHeight;
document.body.appendChild(rainCanvas);
rainCtx = rainCanvas.getContext('2d');
requestAnimationFrame(() => { rainCanvas.style.opacity = '1'; });
const drops = Array.from({ length: 120 }, () => ({
x: Math.random() * rainCanvas.width,
y: Math.random() * rainCanvas.height,
speed: 8 + Math.random() * 7,
length: 12 + Math.random() * 20,
opacity: 0.2 + Math.random() * 0.4
}));
rainInterval = setInterval(() => {
rainCtx.clearRect(0, 0, rainCanvas.width, rainCanvas.height);
drops.forEach(drop => {
rainCtx.beginPath();
rainCtx.moveTo(drop.x, drop.y);
rainCtx.lineTo(drop.x - 2, drop.y + drop.length);
rainCtx.strokeStyle = `rgba(174, 214, 241, ${drop.opacity})`;
rainCtx.lineWidth = 3;
rainCtx.stroke();
drop.y += drop.speed;
if (drop.y > rainCanvas.height) {
drop.y = -drop.length;
drop.x = Math.random() * rainCanvas.width;
}
});
}, 30);
}
function stopRain() {
if (!rainCanvas) return;
rainCanvas.style.opacity = '0';
setTimeout(() => {
clearInterval(rainInterval);
rainCanvas.remove();
rainCanvas = null;
}, 800);
}
function dragonClick() {
const existing = document.getElementById('dragon-grid');
if (existing) { existing.remove(); return; }
const grid = document.createElement('canvas');
grid.id = 'dragon-grid';
grid.width = window.innerWidth;
grid.height = window.innerHeight;
grid.style.transition = 'opacity 1s ease';
document.body.appendChild(grid);
const ctx = grid.getContext('2d');
const img = new Image();
img.src = '/static/images/dragon.png';
img.onload = () => {
const size = 250;
const cols = Math.ceil(grid.width / size);
const rows = Math.ceil(grid.height / size);
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
ctx.drawImage(img, c * size, r * size, size, size);
}
}
setTimeout(() => {
grid.style.opacity = '0';
setTimeout(() => grid.remove(), 1000);
}, 300);
};
}
</script>
<script src="/static/about.js" ></script>
</body>
</html>