From 567c41b4b75fac4a5c4f7dba6cc6116cabac6f35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= Date: Thu, 2 Apr 2026 18:16:18 +0200 Subject: [PATCH] minor content changes --- index.html | 485 +++++++++++++++++++++++++++-------------------------- 1 file changed, 246 insertions(+), 239 deletions(-) diff --git a/index.html b/index.html index 1f37ad6..ce893b5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,153 +8,158 @@ Marvins Portfolio - + + - -
- - -
-
-
- Navigation - + +
+ +
- -
- - - - - -
- - -
-

Hallo!

-

Ich studiere Medieninformatik im Bachelor und habe im Rahmen meines Studiums praktische Erfahrungen in verschiedenen Projekten gesammelt. Besonders gerne arbeite ich an Projekten, in denen ich neue Technologien ausprobieren und vertiefen kann, aktuell vor allem im Bereich Machine Learning.

-
- GitHub ↗ +
+
+ Navigation +
-
+ +
- -
+ + - + +
+ + +
+

Hallo!

+

Ich studiere Medieninformatik im Bachelor und habe im Rahmen meines Studiums praktische Erfahrungen in + verschiedenen Projekten gesammelt. Besonders gerne arbeite ich an Projekten, in denen ich neue Technologien + ausprobieren und vertiefen kann, aktuell vor allem im Bereich Machine Learning.

+
+ GitHub ↗ +
+
+ + +
+ +
- + // Projekt-Sections nach dem Rendern einsammeln + const projectSections = PROJECTS.map((p, i) => ({ + id: p.id, + label: p.title, + idx: String(i + 1).padStart(2, "0"), + group: "Projekte", + })); + + const allSections = [...staticSections, ...projectSections]; + + // Gruppen + let lastGroup = "__none__"; + allSections.forEach(s => { + if (s.group !== lastGroup) { + lastGroup = s.group; + if (s.group) { + const lbl = document.createElement("span"); + lbl.className = "nav-group-label"; + lbl.textContent = s.group; + sidebarNav.appendChild(lbl); + } + } + + // Sidebar link + const a = document.createElement("a"); + a.className = "nav-link"; + a.href = "#"; + a.onclick = (e) => { + e.preventDefault(); + scrollToSection(s.id); + }; + a.dataset.target = s.id; + if (s.idx) { + const num = document.createElement("span"); + num.className = "idx"; num.textContent = s.idx; + a.appendChild(num); + } + a.appendChild(document.createTextNode(s.label)); + sidebarNav.appendChild(a); + + // Mobile drawer link + const ma = document.createElement("a"); + ma.href = "#"; + ma.onclick = (e) => { + e.preventDefault(); + scrollToSection(s.id); + closeDrawer(); + }; + ma.textContent = s.idx ? `${s.idx} – ${s.label}` : s.label; + drawerLinks.appendChild(ma); + }); + } + + function setupObserver() { + const observer = new IntersectionObserver(entries => { + entries.forEach(e => { + if (e.isIntersecting) { + document.querySelectorAll(".nav-link").forEach(a => + a.classList.toggle("active", a.dataset.target === e.target.id) + ); + } + }); + }, { rootMargin: "0px 0px -55% 0px", threshold: 0 }); + + document.querySelectorAll("[data-nav]").forEach(s => observer.observe(s)); + } + + // Custom elements render async – short timeout before building nav + setTimeout(() => { buildNav(); setupObserver(); }, 120); + + + /* ══════════════════════════════════════════════════════ + MOBILE DRAWER + ══════════════════════════════════════════════════════ */ + function openDrawer() { document.getElementById("drawer").classList.add("open"); } + function closeDrawer() { document.getElementById("drawer").classList.remove("open"); } + + function scrollToSection(id) { + document.getElementById(id).scrollIntoView({ + behavior: 'smooth' + }); + + history.replaceState(null, null, window.location.pathname); + } + + \ No newline at end of file