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

new animations

Browse Source
This commit is contained in:
samantha42
2026-05-24 21:35:04 +02:00
parent 81c47d56b4
commit 05d8732e85
4 changed files with 397 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/about.html
+28 -7
View File
@@ -128,23 +128,23 @@
<div class="section-head"><h2>education</h2></div>
<div class="edu-grid">
<div class="edu-card">
<div class="edu-year">2025 —<br>present</div>
<div class="edu-year">2025 — present</div>
<div>
<div class="edu-degree">Bachelor of Economics &amp; Business Administration (HA)</div>
<div class="edu-inst">Aalborg University · Expected 2028</div>
</div>
</div>
<div class="edu-card">
<div class="edu-year">2024 — 2025</div>
<div class="edu-year">2024 — 2025 <br> <span class="edu-tag tag-dropped">discontinued</span> </div>
<div class="edu-body">
<div class="edu-degree">Mathematics-Technology (BSc)</div>
<div class="edu-inst">Aalborg University · 1 semester</div>
<span class="edu-tag tag-dropped">discontinued</span>
</div>
</div>
<div class="edu-card">
<div class="edu-year">2020 —<br>2023</div>
<div class="edu-year">2020 — 2023</div>
<div>
<div class="edu-degree">HTX – Technical Upper Secondary Education</div>
<div class="edu-inst">Viden Gymnasier</div>
@@ -163,9 +163,9 @@
</div>
</section>
<section>
<section id="interestlist" >
<div class="section-head"><h2>interests</h2></div>
<div class="interests-row">
<div class="interestssection-row">
<span class="interest-chip">cinema</span>
<span class="interest-chip">tv shows</span>
<span class="interest-chip">Economics</span>
@@ -214,9 +214,17 @@
</section>
<br>
<section id="interests" >
<div class="page-header">
<h2 class="page-title" id="interest">interests</h2>
<span class="page-sub" id="interest-sub">Fav lists</span>
<span class="matrix-hidden" id="matrix-hidden">
Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.
<br>
Neo: What truth?
<br>
Boy: There is no spoon.
</span>
</div>
<div class="section-head"><h2>Movie/Show Top list</h2></div>
<div class="toplist-group">
@@ -227,7 +235,7 @@
<img src="/static/posters/bladerunner2049.jpg" alt="Blade Runner 2049">
<p>Blade Runner 2049</p>
</div>
<div class="poster-item">
<div class="poster-item posterhover" onclick="cureClick()">
<img src="/static/posters/AcureForWellness.jpg" alt="A Cure of Wellness">
<p>A Cure of Wellness</p>
</div>
@@ -281,6 +289,7 @@
<a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles" >Git repo</a>
</p>
</div>
</section>
<section style="display: none;" id="alice" class="play" >
<br>
<div class="section-head"><h2>Want to play a game Alice?!</h2></div>
@@ -294,6 +303,18 @@
<h2>This game is</h2>
</section>
<section id="secret" class="Hitchhiker">
<div class="number">42</div>
<div class="divider"></div>
<p class="quote">So long, and thanks for all the fish.</p>
<p class="attribution">Douglas Adams &nbsp;·&nbsp; The Hitchhiker's Guide to the Galaxy</p>
<div class="secret-hint">
<p>shhh. i have a secret to share &mdash; <a href="/secret">follow me</a></p>
</div>
</section>
<script src="/static/scripts/tetris.js"></script>
</div>
static/about.js
+287 -10
View File
@@ -40,27 +40,270 @@
// just some fun.
console.log("%c👀 hi there!", "font-size:20px")
function cureClick() {
if (document.getElementById('cure-canvas')) return;
const el = document.getElementById('interest');
el.textContent = "Actually... I'm feeling much better now!"
startWater();
isDay = false;
applyState();
setTimeout(() => {
el.textContent = 'interest';
stopWater();
}, 10000);
}
let cureCanvas, cureCtx, cureAnimFrame;
function startWater() {
cureCanvas = document.createElement('canvas');
cureCanvas.id = 'cure-canvas';
cureCanvas.width = window.innerWidth;
cureCanvas.height = window.innerHeight;
Object.assign(cureCanvas.style, {
position: 'fixed',
top: 0,
left: 0,
pointerEvents: 'none',
zIndex: -1, // behind everything
opacity: '0',
transition: 'opacity 1.4s ease'
});
document.body.appendChild(cureCanvas);
cureCtx = cureCanvas.getContext('2d');
requestAnimationFrame(() => { cureCanvas.style.opacity = '1'; });
const W = cureCanvas.width;
const H = cureCanvas.height;
// waterline sits at 38% from the top
const waterlineY = H * 0.38;
// floating particles below the surface
const particles = Array.from({ length: 55 }, () => ({
x: Math.random() * W,
y: waterlineY + 20 + Math.random() * (H - waterlineY - 20),
r: 1 + Math.random() * 2.5,
speedX: (Math.random() - 0.5) * 0.3,
speedY: -0.08 - Math.random() * 0.18, // slow upward drift
opacity: 0.08 + Math.random() * 0.18
}));
function drawFrame(ts) {
cureCtx.clearRect(0, 0, W, H);
// ── sky above waterline (very subtle, mostly transparent) ──────────
const sky = cureCtx.createLinearGradient(0, 0, 0, waterlineY);
sky.addColorStop(0, 'rgba(190, 230, 255, 0.06)');
sky.addColorStop(1, 'rgba(190, 230, 255, 0.01)');
cureCtx.fillStyle = sky;
cureCtx.fillRect(0, 0, W, waterlineY);
// ── water body below waterline ─────────────────────────────────────
const water = cureCtx.createLinearGradient(0, waterlineY, 0, H);
water.addColorStop(0, 'rgba(80, 190, 220, 0.28)');
water.addColorStop(0.35, 'rgba(40, 140, 190, 0.22)');
water.addColorStop(0.7, 'rgba(20, 90, 150, 0.20)');
water.addColorStop(1, 'rgba(10, 50, 110, 0.22)');
cureCtx.fillStyle = water;
cureCtx.fillRect(0, waterlineY, W, H - waterlineY);
// ── caustic shimmer streaks ────────────────────────────────────────
const numStreaks = 10;
for (let i = 0; i < numStreaks; i++) {
const phase = (ts * 0.0004 + i * 0.63) % 1;
const x = (i / numStreaks) * W + Math.sin(ts * 0.0008 + i) * 60;
const yTop = waterlineY + 10 + Math.sin(ts * 0.001 + i * 1.3) * 18;
const yBot = yTop + 40 + Math.sin(ts * 0.0007 + i * 0.9) * 30;
const streak = cureCtx.createLinearGradient(x, yTop, x + 6, yBot);
streak.addColorStop(0, 'rgba(200, 245, 255, 0)');
streak.addColorStop(0.4, `rgba(200, 245, 255, ${0.05 + 0.06 * Math.sin(ts * 0.002 + i)})`);
streak.addColorStop(1, 'rgba(200, 245, 255, 0)');
cureCtx.fillStyle = streak;
cureCtx.fillRect(x, yTop, 5, yBot - yTop);
}
// ── floating particles ─────────────────────────────────────────────
particles.forEach(p => {
p.x += p.speedX;
p.y += p.speedY;
// reset when reaching the surface
if (p.y < waterlineY + 5) {
p.y = H - 10;
p.x = Math.random() * W;
}
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
const depth = (p.y - waterlineY) / (H - waterlineY); // 0 = surface, 1 = bottom
cureCtx.beginPath();
cureCtx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
cureCtx.fillStyle = `rgba(180, 240, 255, ${p.opacity * (0.4 + 0.6 * (1 - depth))})`;
cureCtx.fill();
});
// ── animated surface waves (2 layers, different speeds & amplitudes) ─
function drawWaveLine(amp, freq, speed, lineW, alpha) {
cureCtx.beginPath();
for (let x = 0; x <= W; x += 3) {
const y = waterlineY
+ Math.sin(x * freq + ts * speed) * amp
+ Math.sin(x * freq * 1.7 + ts * speed * 0.6) * (amp * 0.4);
x === 0 ? cureCtx.moveTo(x, y) : cureCtx.lineTo(x, y);
}
cureCtx.strokeStyle = `rgba(210, 245, 255, ${alpha})`;
cureCtx.lineWidth = lineW;
cureCtx.stroke();
}
// primary wave
drawWaveLine(7, 0.012, 0.0018, 2.0, 0.70);
// secondary wave (slightly offset phase)
drawWaveLine(4, 0.018, 0.0024, 1.2, 0.40);
// micro ripple
drawWaveLine(2, 0.030, 0.0032, 0.7, 0.25);
// ── foam/highlight on the crest ────────────────────────────────────
cureCtx.beginPath();
for (let x = 0; x <= W; x += 3) {
const y = waterlineY
+ Math.sin(x * 0.012 + ts * 0.0018) * 7
+ Math.sin(x * 0.020 + ts * 0.0024) * 3;
x === 0 ? cureCtx.moveTo(x, y - 1) : cureCtx.lineTo(x, y - 1);
}
cureCtx.strokeStyle = 'rgba(255, 255, 255, 0.18)';
cureCtx.lineWidth = 1;
cureCtx.stroke();
if (cureCanvas) cureAnimFrame = requestAnimationFrame(drawFrame);
}
cureAnimFrame = requestAnimationFrame(drawFrame);
}
function stopWater() {
if (!cureCanvas) return;
cureCanvas.style.opacity = '0';
cancelAnimationFrame(cureAnimFrame);
setTimeout(() => {
cureCanvas.remove();
cureCanvas = null;
}, 1400);
}
function draculaClick() {
if (document.getElementById('lightning-canvas')) return;
const el = document.getElementById('interest');
if (!el) return; // el is a DOM node, never a string
el.textContent = '🦇 interest 🦇';
el.textContent = 'children of the night';
startLightning();
isDay = false;
applyState();
setTimeout(() => {
el.textContent = "interest";
}, 5000);
el.textContent = 'interest';
stopLightning();
}, 10000);
}
let lightningCanvas, lightningCtx, lightningInterval, lightningFlashTimeout;
function startLightning() {
lightningCanvas = document.createElement('canvas');
lightningCanvas.id = 'lightning-canvas';
lightningCanvas.width = window.innerWidth;
lightningCanvas.height = window.innerHeight;
Object.assign(lightningCanvas.style, {
position: 'fixed', top: 0, left: 0,
pointerEvents: 'none', zIndex: 9999,
opacity: '0', transition: 'opacity 0.3s ease'
});
document.body.appendChild(lightningCanvas);
lightningCtx = lightningCanvas.getContext('2d');
requestAnimationFrame(() => { lightningCanvas.style.opacity = '1'; });
function drawBolt(x1, y1, x2, y2, roughness, depth) {
if (depth === 0) {
lightningCtx.beginPath();
lightningCtx.moveTo(x1, y1);
lightningCtx.lineTo(x2, y2);
lightningCtx.stroke();
return;
}
const mx = (x1 + x2) / 2 + (Math.random() - 0.5) * roughness;
const my = (y1 + y2) / 2 + (Math.random() - 0.5) * roughness;
drawBolt(x1, y1, mx, my, roughness / 2, depth - 1);
drawBolt(mx, my, x2, y2, roughness / 2, depth - 1);
// random fork branch
if (depth > 2 && Math.random() < 0.4) {
const fx = mx + (Math.random() - 0.3) * roughness * 2;
const fy = my + Math.random() * roughness * 2;
lightningCtx.save();
lightningCtx.globalAlpha *= 0.5;
drawBolt(mx, my, fx, fy, roughness / 2, depth - 2);
lightningCtx.restore();
}
}
function flashStrike() {
lightningCtx.clearRect(0, 0, lightningCanvas.width, lightningCanvas.height);
const numBolts = 1 + Math.floor(Math.random() * 3);
for (let i = 0; i < numBolts; i++) {
const startX = lightningCanvas.width * (0.1 + Math.random() * 0.8);
const endX = startX + (Math.random() - 0.5) * 300;
const color = Math.random() < 0.6
? `rgba(220, 180, 255, ${0.6 + Math.random() * 0.4})` // purple
: `rgba(255, 255, 255, ${0.7 + Math.random() * 0.3})`; // white
lightningCtx.strokeStyle = color;
lightningCtx.lineWidth = 0.5 + Math.random() * 2;
lightningCtx.shadowColor = color;
lightningCtx.shadowBlur = 18 + Math.random() * 30;
lightningCtx.globalAlpha = 1;
drawBolt(startX, 0, endX, lightningCanvas.height * (0.4 + Math.random() * 0.5), 120, 7);
}
// ambient flash on the body
document.body.style.transition = 'background 0.05s';
document.body.style.background = `rgba(80, 0, 120, 0.08)`;
setTimeout(() => { document.body.style.background = ''; }, 80);
// fade the bolt out
lightningFlashTimeout = setTimeout(() => {
lightningCtx.clearRect(0, 0, lightningCanvas.width, lightningCanvas.height);
}, 80 + Math.random() * 120);
}
// irregular strike cadence — like real lightning
function scheduleStrike() {
flashStrike();
const delay = 600 + Math.random() * 2200;
lightningInterval = setTimeout(scheduleStrike, delay);
}
scheduleStrike();
}
function stopLightning() {
if (!lightningCanvas) return;
lightningCanvas.style.opacity = '0';
clearTimeout(lightningInterval);
clearTimeout(lightningFlashTimeout);
setTimeout(() => {
lightningCanvas.remove();
lightningCanvas = null;
}, 800);
}
function matrixClick() {
const sub = document.getElementById('interest-sub');
const col = sub.color
sub.textContent = `Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.`
sub.style.display = "none"
const matrixsub = document.getElementById('matrix-hidden');
matrixsub.style.display = "block"
sub.style.color = "green"
setTimeout(() => {
sub.textContent = "Fav lists"
sub.style.color = "#6b6560"
matrixsub.style.display = "none"
sub.style.display = "block"
}, 15000);
}
@@ -73,6 +316,9 @@
startRain();
isDay = false
applyState();
setTimeout(() => {
el.textContent = "interest";
stopRain();
@@ -182,3 +428,34 @@ function dragonClick() {
}, 300);
};
}
function unhide42() {
const alicegameSection = document.getElementById('alice');
const tetrisSection = document.getElementById('tetris');
const experiencesection = document.getElementById('experience');
const educationsection = document.getElementById('education');
const automationsection = document.getElementById('automation');
const interestssection = document.getElementById('interests');
const opinionsection = document.getElementById('opinion');
const interestlistsection = document.getElementById('interestlist');
const hiddenssection = document.getElementById('secret');
if (hiddenssection.style.display == 'none') {
hiddenssection.style.display = 'block';
} else {
hiddenssection.style.display = 'none';
}
alicegameSection.style.display = 'none';
tetrisSection.style.display = 'none';
experiencesection.style.display = 'none';
educationsection.style.display = 'none';
automationsection.style.display = 'none';
interestssection.style.display = 'none';
opinionsection.style.display = 'none';
interestlistsection.style.display = 'none';
}
static/style/styles.css
+2 -2
View File
@@ -1156,10 +1156,10 @@ nav .section-label {
display: inline-block;
margin-top: 8px;
font-family: 'DM Mono', monospace;
font-size: 10px;
font-size: 8px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
padding: 3px 5px;
border-radius: 3px;
}
static/style/styles2.css
+17 -2
View File
@@ -262,10 +262,10 @@ footer{
display: inline-block;
margin-top: 8px;
font-family: 'DM Mono', monospace;
font-size: 10px;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
padding: 3px 5px;
border-radius: 3px;
}
@@ -576,3 +576,18 @@ a{
color: var(--color-text-secondary);
}
.copy-btn:hover { background: var(--color-background-secondary); }
.Hitchhiker {
max-width: 480px;
width: 100%;
text-align: center;
display: none;
}
.matrix-hidden {
display: none;
color: green;
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
padding-left: 1.1rem;
}