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-06 11:18:12 +02:00
parent 70ce1c3efa
commit abcc01f717
3 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6 -2
View File
@@ -18,6 +18,10 @@
<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" />
<!-- 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> </head>
<body> <body>
<!-- CANVAS BACKGROUND --> <!-- CANVAS BACKGROUND -->
@@ -47,7 +51,7 @@
<!-- HERO --> <!-- HERO -->
<section id="home" class="hero"> <section id="home" class="hero">
<div class="hero-content"> <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-role">Software Developer</p>
<p class="hero-pronouns">they/them · he/him</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> <p>This website was built by a horde of angry rats masquerading as a software developer</p>
</footer> </footer>
<script src="script.js"></script> <script src="script.js" defer></script>
</body> </body>
</html> </html>
script.js
+3 -1
View File
@@ -34,7 +34,8 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
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. 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')); restEls.forEach(el => el.classList.add('fade-up'));
startHeroTypewriter(nameEl, fullName, restEls); startHeroTypewriter(nameEl, fullName, restEls);
@@ -194,6 +195,7 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
// ── Scroll fade-in ───────────────────────────────────────────── // ── Scroll fade-in ─────────────────────────────────────────────
(function () { (function () {
// Keep this list in sync with the .js pre-reveal block in style.css
const targets = document.querySelectorAll( const targets = document.querySelectorAll(
'.section-header, .about-grid, .skill-card, .timeline-item, ' + '.section-header, .about-grid, .skill-card, .timeline-item, ' +
'.project-card, .edu-card' '.project-card, .edu-card'
style.css
+18
View File
@@ -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 { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.fade-up.visible { opacity: 1; transform: none; } .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 typewriter cursor */
.hero-cursor { .hero-cursor {
display: inline-block; display: inline-block;