NikolajDanger/website-cv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐐

Browse Source
This commit is contained in:
NikolajDanger
2026-08-04 14:50:22 +02:00
parent aa365755af
commit 70ce1c3efa
3 changed files with 3 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-15
View File
@@ -18,23 +18,8 @@
<link rel="stylesheet" href="/fonts/fonts.css" /> <link rel="stylesheet" href="/fonts/fonts.css" />
<link rel="stylesheet" href="/fa/css/all.min.css" /> <link rel="stylesheet" href="/fa/css/all.min.css" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<!-- LOADER -->
<div class="loader" id="loader">
<div class="loader-inner">
<div class="loader-code">
<span class="lc lc1">const developer = {</span>
<span class="lc lc2"> &nbsp;name: <em>"Nikolaj Gade"</em>,</span>
<span class="lc lc3"> &nbsp;status: <em>"loading..."</em></span>
<span class="lc lc4">};</span>
</div>
<div class="loader-bar-wrap"><div class="loader-bar"></div></div>
<div class="loader-pct" id="loaderPct">0%</div>
</div>
</div>
<!-- CANVAS BACKGROUND --> <!-- CANVAS BACKGROUND -->
<canvas id="bgCanvas" aria-hidden="true"></canvas> <canvas id="bgCanvas" aria-hidden="true"></canvas>
script.js
+3 -18
View File
@@ -25,34 +25,19 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
typeNext(); typeNext();
} }
// ── Loader ──────────────────────────────────────────────────── // ── Hero intro ────────────────────────────────────────────────
(function () { (function () {
const loader = document.getElementById('loader');
const pctEl = document.getElementById('loaderPct');
const nameEl = document.querySelector('.hero-name'); const nameEl = document.querySelector('.hero-name');
const restEls = [...document.querySelectorAll('.hero-role, .hero-pronouns, .hero-links, .hero-visual')]; const restEls = [...document.querySelectorAll('.hero-role, .hero-pronouns, .hero-links, .hero-visual')];
// Store the name and clear it immediately (loader covers the page anyway) // Store the name and clear it so the typewriter can type it out
const fullName = nameEl.textContent.trim(); const fullName = nameEl.textContent.trim();
nameEl.textContent = ''; nameEl.textContent = '';
// Hide hero elements that reveal after typing // Hide hero elements that reveal after typing
restEls.forEach(el => el.classList.add('fade-up')); restEls.forEach(el => el.classList.add('fade-up'));
let pct = 0; startHeroTypewriter(nameEl, fullName, restEls);
const tick = setInterval(() => {
pct += Math.random() * 15;
if (pct >= 100) {
pct = 100;
clearInterval(tick);
setTimeout(() => {
loader.classList.add('hide');
// Wait for the loader fade-out (0.6s), then start typing
setTimeout(() => startHeroTypewriter(nameEl, fullName, restEls), 600);
}, 300);
}
pctEl.textContent = Math.floor(pct) + '%';
}, 110);
})(); })();
style.css
-31
View File
@@ -44,37 +44,6 @@ button { font-family: var(--font); cursor: pointer; border: none; background: no
opacity: 0.3; opacity: 0.3;
} }
/* ── Loader ─────────────────────────────────────────────────── */
.loader {
position: fixed; inset: 0;
background: var(--ink);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loader.hide { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-code {
font-family: var(--mono);
font-size: 1rem;
color: var(--yellow);
text-align: left;
display: inline-block;
margin-bottom: 1.75rem;
}
.loader-code em { color: var(--orange); font-style: normal; }
.lc { display: block; opacity: 0; transform: translateY(10px); animation: lcFade 0.4s var(--ease) forwards; }
.lc1 { animation-delay: 0.1s; }
.lc2 { animation-delay: 0.35s; }
.lc3 { animation-delay: 0.6s; }
.lc4 { animation-delay: 0.85s; }
@keyframes lcFade { to { opacity: 1; transform: none; } }
.loader-bar-wrap { width: 200px; height: 3px; background: rgba(255,255,255,0.1); border-radius: 99px; margin: 0 auto 0.75rem; overflow: hidden; }
.loader-bar { height: 100%; background: var(--grad); width: 0%; animation: barFill 2.5s var(--ease) forwards; animation-delay: 0.5s; }
@keyframes barFill { to { width: 100%; } }
.loader-pct { font-family: var(--mono); font-size: 0.8rem; color: var(--orange); }
/* ── Nav ────────────────────────────────────────────────────── */ /* ── Nav ────────────────────────────────────────────────────── */
#header { #header {
background: rgba(254, 254, 227, 0); background: rgba(254, 254, 227, 0);