🐐

2026-08-06 11:18:12 +02:00
parent 70ce1c3efa
commit abcc01f717
3 changed files with 27 additions and 3 deletions
@@ -18,6 +18,10 @@
  <link rel="stylesheet" href="/fonts/fonts.css" />
  <link rel="stylesheet" href="/fa/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
+
+  <!-- Runs before the body paints, so the pre-reveal styles in style.css apply
+       from the very first frame instead of flashing. -->
+  <script>document.documentElement.classList.add('js');</script>
 </head>
 <body>
  <!-- CANVAS BACKGROUND -->
@@ -47,7 +51,7 @@
    <!-- HERO -->
    <section id="home" class="hero">
      <div class="hero-content">
-        <h1 class="hero-name" >Nikolaj Gade</h1>
+        <h1 class="hero-name"><span class="hero-name-static">Nikolaj Gade</span></h1>
        <p class="hero-role">Software Developer</p>
        <p class="hero-pronouns">they/them · he/him</p>

@@ -368,6 +372,6 @@
    <p>This website was built by a horde of angry rats masquerading as a software developer</p>
  </footer>

-  <script src="script.js"></script>
+  <script src="script.js" defer></script>
 </body>
 </html>
@@ -34,7 +34,8 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
  const fullName = nameEl.textContent.trim();
  nameEl.textContent = '';

-  // Hide hero elements that reveal after typing
+  // Hide hero elements that reveal after typing. They're already hidden by the
+  // .js pre-reveal block in style.css; this just adds the transition.
  restEls.forEach(el => el.classList.add('fade-up'));

  startHeroTypewriter(nameEl, fullName, restEls);
@@ -194,6 +195,7 @@ function startHeroTypewriter(nameEl, fullName, restEls) {

 // ── Scroll fade-in ─────────────────────────────────────────────
 (function () {
+  // Keep this list in sync with the .js pre-reveal block in style.css
  const targets = document.querySelectorAll(
    '.section-header, .about-grid, .skill-card, .timeline-item, ' +
    '.project-card, .edu-card'
@@ -146,6 +146,24 @@ main { position: relative; z-index: 1; }
 .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
 .fade-up.visible { opacity: 1; transform: none; }

+/* Pre-reveal state. script.js adds .fade-up at runtime, which is too late to stop
+   these from painting first, so hide them here instead. Selectors mirror the
+   queries in script.js — change both together. */
+.js .hero-name-static { visibility: hidden; }
+.js .hero-role:not(.visible),
+.js .hero-pronouns:not(.visible),
+.js .hero-links:not(.visible),
+.js .hero-visual:not(.visible),
+.js .section-header:not(.visible),
+.js .about-grid:not(.visible),
+.js .skill-card:not(.visible),
+.js .timeline-item:not(.visible),
+.js .project-card:not(.visible),
+.js .edu-card:not(.visible) {
+  opacity: 0;
+  transform: translateY(28px);
+}
+
 /* Hero typewriter cursor */
 .hero-cursor {
  display: inline-block;