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-03-13 17:50:20 +01:00
parent 6dbea2dffc
commit 5fdde7257d
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -36,18 +36,18 @@
<a href="#home" class="nav-logo"> <a href="#home" class="nav-logo">
<span class="bracket">&lt;</span>NG<span class="bracket">/&gt;</span> <span class="bracket">&lt;</span>NG<span class="bracket">/&gt;</span>
</a> </a>
<ul class="nav-links" id="navLinks">
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#experience" class="nav-link">Experience</a></li>
<li><a href="#education" class="nav-link">Education</a></li>
</ul>
<button class="burger" id="burger" aria-label="Menu"> <button class="burger" id="burger" aria-label="Menu">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</button> </button>
</nav> </nav>
</header> </header>
<ul class="nav-links" id="navLinks">
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#experience" class="nav-link">Experience</a></li>
<li><a href="#education" class="nav-link">Education</a></li>
</ul>
<main> <main>

20
script.js
View File

@@ -58,8 +58,8 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
// ── Sprinkle background ──────────────────────────── // ── Sprinkle background ────────────────────────────
(function () { (function () {
const canvas = document.getElementById('bgCanvas'); const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const COLORS = ['#e63946', '#f4722b', '#ffbe0b', '#ff006e', '#e07b39', '#ffd166']; const COLORS = ['#e63946', '#f4722b', '#ffbe0b', '#ff006e', '#e07b39', '#ffd166'];
const COUNT = 1000; // number of sprinkles const COUNT = 1000; // number of sprinkles
@@ -168,12 +168,13 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
// ── Nav: scroll state & active link ─────────────────────────── // ── Nav: scroll state & active link ───────────────────────────
(function () { (function () {
const header = document.getElementById('header'); const header = document.getElementById('header');
const links = document.querySelectorAll('.nav-link'); const links = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('section[id]'); const sections = document.querySelectorAll('section[id]');
const burger = document.getElementById('burger');
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 24); header.classList.toggle('scrolled', window.scrollY > 24 || burger.classList.contains('open'));
let current = ''; let current = '';
sections.forEach(s => { sections.forEach(s => {
@@ -188,16 +189,19 @@ function startHeroTypewriter(nameEl, fullName, restEls) {
// ── Mobile burger ────────────────────────────────────────────── // ── Mobile burger ──────────────────────────────────────────────
(function () { (function () {
const burger = document.getElementById('burger'); const burger = document.getElementById('burger');
const navLinks = document.getElementById('navLinks'); const navLinks = document.getElementById('navLinks');
const header = document.getElementById('header');
burger.addEventListener('click', () => { burger.addEventListener('click', () => {
burger.classList.toggle('open'); burger.classList.toggle('open');
navLinks.classList.toggle('open'); navLinks.classList.toggle('open');
header.classList.toggle('scrolled', burger.classList.contains('open') || window.scrollY > 24);
}); });
navLinks.querySelectorAll('a').forEach(a => { navLinks.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => { a.addEventListener('click', () => {
burger.classList.remove('open'); burger.classList.remove('open');
navLinks.classList.remove('open'); navLinks.classList.remove('open');
header.classList.toggle('scrolled', window.scrollY > 24);
}); });
}); });
})(); })();

18
style.css
View File

@@ -77,13 +77,16 @@ button { font-family: var(--font); cursor: pointer; border: none; background: no
/* ── Nav ────────────────────────────────────────────────────── */ /* ── Nav ────────────────────────────────────────────────────── */
#header { #header {
background: rgba(254, 254, 227, 0.85); background: rgba(254, 254, 227, 0);
position: fixed; top: 0; left: 0; right: 0; position: fixed; top: 0; left: 0; right: 0;
height: var(--nav-h); height: var(--nav-h);
z-index: 1000; z-index: 1000;
transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s;
} }
#header.scrolled { #header.scrolled {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
background: rgba(254, 254, 227, 0.75);
box-shadow: 0 2px 20px rgba(230, 57, 70, 0.08); box-shadow: 0 2px 20px rgba(230, 57, 70, 0.08);
} }
nav { nav {
@@ -104,6 +107,17 @@ nav {
.nav-logo:hover { color: var(--red); } .nav-logo:hover { color: var(--red); }
.nav-links { display: flex; gap: 0.1rem; } .nav-links { display: flex; gap: 0.1rem; }
@media (min-width: 769px) {
.nav-links {
position: fixed;
top: 0;
right: max(calc((100vw - var(--max-w)) / 2 + 2rem), 2rem);
height: var(--nav-h);
align-items: center;
z-index: 1001;
}
}
.nav-link { .nav-link {
font-weight: 700; font-weight: 700;
font-size: 0.8rem; font-size: 0.8rem;
@@ -485,7 +499,7 @@ footer {
position: fixed; position: fixed;
top: var(--nav-h); top: var(--nav-h);
left: 0; right: 0; left: 0; right: 0;
background: rgba(254,254,227,0.5); background: rgba(254, 254, 227, 0.75);;
backdrop-filter: blur(30px); backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
flex-direction: column; flex-direction: column;