marvin/MarvinKrausser.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor content changes

Browse Source
This commit is contained in:
marvin
2026-04-02 18:16:18 +02:00
parent 171c06b18e
commit 567c41b4b7
1 changed files with 246 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+58 -51
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<link rel="icon" href="images/generated_two_no_background.png"> <link rel="icon" href="images/generated_two_no_background.png">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -7,26 +8,29 @@
<title>Marvins Portfolio</title> <title>Marvins Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="header_style.css"> <link rel="stylesheet" href="header_style.css">
</head> </head>
<body> <body>
<!-- MOBILE BAR --> <!-- MOBILE BAR -->
<div class="mobile-bar"> <div class="mobile-bar">
<p class="mobile-logo">Marvin Kraußer</p> <p class="mobile-logo">Marvin Kraußer</p>
<button class="mobile-btn" onclick="openDrawer()">Menü ↓</button> <button class="mobile-btn" onclick="openDrawer()">Menü ↓</button>
</div> </div>
<div class="mobile-drawer" id="drawer"> <div class="mobile-drawer" id="drawer">
<div class="mobile-drawer-head"> <div class="mobile-drawer-head">
<span>Navigation</span> <span>Navigation</span>
<button class="mobile-btn" onclick="closeDrawer()">✕ Schließen</button> <button class="mobile-btn" onclick="closeDrawer()">✕ Schließen</button>
</div> </div>
<div id="drawer-links"></div> <div id="drawer-links"></div>
</div> </div>
<!-- SIDEBAR --> <!-- SIDEBAR -->
<aside class="sidebar"> <aside class="sidebar">
<div class="sidebar-top"> <div class="sidebar-top">
<p class="sidebar-name">Marvin Kraußer</p> <p class="sidebar-name">Marvin Kraußer</p>
<span class="sidebar-sub">Student B.Sc.<br>Medieninformatik<br>Universität Ulm</span> <span class="sidebar-sub">Student B.Sc.<br>Medieninformatik<br>Universität Ulm</span>
@@ -36,15 +40,17 @@
<a href="https://github.com/marvinkrausser" target="_blank">github.com/marvinkrausser ↗</a> <a href="https://github.com/marvinkrausser" target="_blank">github.com/marvinkrausser ↗</a>
<a href="mailto:marvin.krausser277@gmail.com">marvin.krausser277@gmail.com</a> <a href="mailto:marvin.krausser277@gmail.com">marvin.krausser277@gmail.com</a>
</div> </div>
</aside> </aside>
<!-- MAIN --> <!-- MAIN -->
<main class="main"> <main class="main">
<!-- HERO --> <!-- HERO -->
<section id="hero" data-nav="Start" class="hero-section"> <section id="hero" data-nav="Start" class="hero-section">
<h1>Hallo!</h1> <h1>Hallo!</h1>
<p>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.</p> <p>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.</p>
<div class="hero-links"> <div class="hero-links">
<a class="text-link" href="https://github.com/marvinkrausser" target="_blank">GitHub ↗</a> <a class="text-link" href="https://github.com/marvinkrausser" target="_blank">GitHub ↗</a>
</div> </div>
@@ -53,40 +59,40 @@
<!-- PROJEKTE werden per JS eingefügt --> <!-- PROJEKTE werden per JS eingefügt -->
<div id="projects-root"></div> <div id="projects-root"></div>
</main> </main>
<script> <script>
/* ══════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════
DATEN DATEN
Jedes Projekt hat: Jedes Projekt hat:
- id, title, description, tags, stars, forks, status, - id, title, description, tags, stars, forks, status,
github, demo github, demo
- blocks[]: Array von { label, heading, text, image } - blocks[]: Array von { label, heading, text, image }
image kann ein URL-String sein oder null (= Platzhalter) image kann ein URL-String sein oder null (= Platzhalter)
══════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════ */
const PROJECTS = [ const PROJECTS = [
{ {
id: "pixelcnn", id: "pixelcnn",
title: "PixelCNN", title: "PixelCNN Bildgeneration",
description: "Deep Learning-Modell basierend auf PixelCNN zur generativen Bildsynthese mit PyTorch.", description: "Autoregressives Deep Learning-Modell basierend auf PixelCNN zur generativen Bildsynthese mit PyTorch.",
tags: ["Python", "PyTorch"], tags: ["Python", "PyTorch", "CUDA"],
github: "https://github.com/MarvinKrausser/pixelcnn", github: "https://github.com/MarvinKrausser/pixelcnn",
blocks: [ blocks: [
{ {
label: "", label: "",
heading: "Bildgenerierung mit Deep Learning", heading: "Bildgenerierung mit Deep Learning",
text: "Das Modell verwendet Convolutional Neural Networks und Deep Learning zur Generierung von Bildern. Als Trainingsdatensatz wurden die MNIST-Digits verwendet. Zusätzlich kann das Modell gezielt mit Klassen als Eingabe gesteuert werden, wie im Beispiel mit den Ziffern von 0 bis 9 gezeigt. Aufgrund begrenzter Ressourcen ist mein Modell auf Datensätze mit niedriger Komplexität beschränkt.", text: "Das Modell verwendet Convolutional Neural Networks und Deep Learning zur Generierung von Bildern. Als Trainingsdatensatz wurden die MNIST-Digits verwendet und mittels CUDA auf einer GPU trainiert. Zusätzlich kann das Modell gezielt mit Klassen als Eingabe gesteuert werden, wie im Beispiel mit den Ziffern von 0 bis 9 gezeigt. Aufgrund begrenzter Ressourcen ist mein Modell auf Datensätze mit niedriger Komplexität beschränkt.",
image: "images/mnist_conditioned_gen_results_cropped.png", image: "images/mnist_conditioned_gen_results_cropped.png",
}, },
{ {
label: "", label: "",
heading: "Seminararbeit", heading: "Seminararbeit",
text: "Das Projekt entstand im Rahmen einer begleitenden <a class=\"text-link\" href=\"pdf_viewer.html?file=Seminararbeit.pdf\">Seminararbeit ↗</a> mit <a class=\"text-link\" href=\"pdf_viewer.html?file=Seminararbeit_Vortrag.pdf\">Vortrag ↗</a>.", text: "Das Projekt entstand begleitend zusätzlich zu einer <a class=\"text-link\" href=\"pdf_viewer.html?file=Seminararbeit.pdf\">Seminararbeit ↗</a> mit <a class=\"text-link\" href=\"pdf_viewer.html?file=Seminararbeit_Vortrag.pdf\">Vortrag ↗</a>.",
image: "images/seminararbeit.png", image: "images/seminararbeit.png",
} }
] ]
}, },
{ {
id: "boardgame", id: "boardgame",
title: "Online Multiplayer Game", title: "Online Multiplayer Game",
@@ -97,7 +103,7 @@ const PROJECTS = [
{ {
label: "", label: "",
heading: "Client", heading: "Client",
text: "Der Game Client wurde mit Unity und C# entwickelt und basiert auf einem rundenbasierten Bewegungs- und Kartensystem. Sämtliche Designs wurden eigenständig erstellt. Ein <a class=\"text-link\" href=\"pdf_viewer.html?file=Team23_Benutzerhandbuch_BoC.pdf\">Benutzerhandbuch ↗</a> und <a class=\"text-link\" href=\"pdf_viewer.html?file=Team23_Entwicklerhandbuch_BoC.pdf\">Entwicklerhandbuch ↗</a> sind verfügbar.", text: "Der Game Client wurde mit Unity und C# entwickelt und basiert auf einem rundenbasierten Bewegungs- und Kartensystem. Sämtliche Designs wurden eigenständig erstellt. Auch ein <a class=\"text-link\" href=\"pdf_viewer.html?file=Team23_Benutzerhandbuch_BoC.pdf\">Benutzerhandbuch ↗</a> und <a class=\"text-link\" href=\"pdf_viewer.html?file=Team23_Entwicklerhandbuch_BoC.pdf\">Entwicklerhandbuch ↗</a> wurden erstellt.",
image: "images/boardgame_demo.png", image: "images/boardgame_demo.png",
}, },
{ {
@@ -113,7 +119,7 @@ const PROJECTS = [
image: "images/boardgame_ai.png", image: "images/boardgame_ai.png",
} }
] ]
}, },
{ {
id: "towerdefense", id: "towerdefense",
title: "Towerdefense Game", title: "Towerdefense Game",
@@ -129,15 +135,15 @@ const PROJECTS = [
}, },
], ],
}, },
]; ];
/* ══════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════
WEB COMPONENT: <project-section> WEB COMPONENT: <project-section>
Rendert einen kompletten Projekt-Abschnitt mit Rendert einen kompletten Projekt-Abschnitt mit
Header, alternierenden Content-Blocks und Link-Zeile. Header, alternierenden Content-Blocks und Link-Zeile.
══════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════ */
class ProjectSection extends HTMLElement { class ProjectSection extends HTMLElement {
connectedCallback() { connectedCallback() {
const p = JSON.parse(this.getAttribute("data-project") || "{}"); const p = JSON.parse(this.getAttribute("data-project") || "{}");
if (!p.id) return; if (!p.id) return;
@@ -179,25 +185,25 @@ class ProjectSection extends HTMLElement {
</div> </div>
</section>`; </section>`;
} }
} }
customElements.define("project-section", ProjectSection); customElements.define("project-section", ProjectSection);
/* ══════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════
RENDER RENDER
══════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════ */
const root = document.getElementById("projects-root"); const root = document.getElementById("projects-root");
PROJECTS.forEach(p => { PROJECTS.forEach(p => {
const el = document.createElement("project-section"); const el = document.createElement("project-section");
el.setAttribute("data-project", JSON.stringify(p)); el.setAttribute("data-project", JSON.stringify(p));
root.appendChild(el); root.appendChild(el);
}); });
/* ══════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════
NAV AUFBAUEN + ACTIVE STATE NAV AUFBAUEN + ACTIVE STATE
══════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════ */
function buildNav() { function buildNav() {
const sidebarNav = document.getElementById("sidebar-nav"); const sidebarNav = document.getElementById("sidebar-nav");
const drawerLinks = document.getElementById("drawer-links"); const drawerLinks = document.getElementById("drawer-links");
sidebarNav.innerHTML = ""; sidebarNav.innerHTML = "";
@@ -259,9 +265,9 @@ function buildNav() {
ma.textContent = s.idx ? `${s.idx} – ${s.label}` : s.label; ma.textContent = s.idx ? `${s.idx} – ${s.label}` : s.label;
drawerLinks.appendChild(ma); drawerLinks.appendChild(ma);
}); });
} }
function setupObserver() { function setupObserver() {
const observer = new IntersectionObserver(entries => { const observer = new IntersectionObserver(entries => {
entries.forEach(e => { entries.forEach(e => {
if (e.isIntersecting) { if (e.isIntersecting) {
@@ -273,25 +279,26 @@ function setupObserver() {
}, { rootMargin: "0px 0px -55% 0px", threshold: 0 }); }, { rootMargin: "0px 0px -55% 0px", threshold: 0 });
document.querySelectorAll("[data-nav]").forEach(s => observer.observe(s)); document.querySelectorAll("[data-nav]").forEach(s => observer.observe(s));
} }
// Custom elements render async – short timeout before building nav // Custom elements render async – short timeout before building nav
setTimeout(() => { buildNav(); setupObserver(); }, 120); setTimeout(() => { buildNav(); setupObserver(); }, 120);
/* ══════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════
MOBILE DRAWER MOBILE DRAWER
══════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════ */
function openDrawer() { document.getElementById("drawer").classList.add("open"); } function openDrawer() { document.getElementById("drawer").classList.add("open"); }
function closeDrawer() { document.getElementById("drawer").classList.remove("open"); } function closeDrawer() { document.getElementById("drawer").classList.remove("open"); }
function scrollToSection(id) { function scrollToSection(id) {
document.getElementById(id).scrollIntoView({ document.getElementById(id).scrollIntoView({
behavior: 'smooth' behavior: 'smooth'
}); });
history.replaceState(null, null, window.location.pathname); history.replaceState(null, null, window.location.pathname);
} }
</script> </script>
</body> </body>
</html> </html>