diff --git a/index.html b/index.html index a919e19..3cba081 100644 --- a/index.html +++ b/index.html @@ -18,23 +18,8 @@ - - -
-
-
- const developer = { -  name: "Nikolaj Gade", -  status: "loading..." - }; -
-
-
0%
-
-
- diff --git a/script.js b/script.js index f4c59d8..9609200 100644 --- a/script.js +++ b/script.js @@ -25,34 +25,19 @@ function startHeroTypewriter(nameEl, fullName, restEls) { typeNext(); } -// ── Loader ──────────────────────────────────────────────────── +// ── Hero intro ──────────────────────────────────────────────── (function () { - const loader = document.getElementById('loader'); - const pctEl = document.getElementById('loaderPct'); const nameEl = document.querySelector('.hero-name'); 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(); nameEl.textContent = ''; // Hide hero elements that reveal after typing restEls.forEach(el => el.classList.add('fade-up')); - let pct = 0; - 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); + startHeroTypewriter(nameEl, fullName, restEls); })(); diff --git a/style.css b/style.css index f734137..e6a2008 100644 --- a/style.css +++ b/style.css @@ -44,37 +44,6 @@ button { font-family: var(--font); cursor: pointer; border: none; background: no 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 ────────────────────────────────────────────────────── */ #header { background: rgba(254, 254, 227, 0);