minor content changes
This commit is contained in:
+58
-51
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<link rel="icon" href="images/generated_two_no_background.png">
|
||||
<meta charset="UTF-8" />
|
||||
@@ -7,26 +8,29 @@
|
||||
<title>Marvins Portfolio</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- MOBILE BAR -->
|
||||
<div class="mobile-bar">
|
||||
<!-- MOBILE BAR -->
|
||||
<div class="mobile-bar">
|
||||
<p class="mobile-logo">Marvin Kraußer</p>
|
||||
<button class="mobile-btn" onclick="openDrawer()">Menü ↓</button>
|
||||
</div>
|
||||
<div class="mobile-drawer" id="drawer">
|
||||
</div>
|
||||
<div class="mobile-drawer" id="drawer">
|
||||
<div class="mobile-drawer-head">
|
||||
<span>Navigation</span>
|
||||
<button class="mobile-btn" onclick="closeDrawer()">✕ Schließen</button>
|
||||
</div>
|
||||
<div id="drawer-links"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-top">
|
||||
<p class="sidebar-name">Marvin Kraußer</p>
|
||||
<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="mailto:marvin.krausser277@gmail.com">marvin.krausser277@gmail.com</a>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<main class="main">
|
||||
<!-- MAIN -->
|
||||
<main class="main">
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="hero" data-nav="Start" class="hero-section">
|
||||
<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">
|
||||
<a class="text-link" href="https://github.com/marvinkrausser" target="_blank">GitHub ↗</a>
|
||||
</div>
|
||||
@@ -53,40 +59,40 @@
|
||||
<!-- PROJEKTE werden per JS eingefügt -->
|
||||
<div id="projects-root"></div>
|
||||
|
||||
</main>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
/* ══════════════════════════════════════════════════════
|
||||
<script>
|
||||
/* ══════════════════════════════════════════════════════
|
||||
DATEN
|
||||
Jedes Projekt hat:
|
||||
- id, title, description, tags, stars, forks, status,
|
||||
github, demo
|
||||
- blocks[]: Array von { label, heading, text, image }
|
||||
image kann ein URL-String sein oder null (= Platzhalter)
|
||||
══════════════════════════════════════════════════════ */
|
||||
const PROJECTS = [
|
||||
══════════════════════════════════════════════════════ */
|
||||
const PROJECTS = [
|
||||
{
|
||||
id: "pixelcnn",
|
||||
title: "PixelCNN",
|
||||
description: "Deep Learning-Modell basierend auf PixelCNN zur generativen Bildsynthese mit PyTorch.",
|
||||
tags: ["Python", "PyTorch"],
|
||||
title: "PixelCNN Bildgeneration",
|
||||
description: "Autoregressives Deep Learning-Modell basierend auf PixelCNN zur generativen Bildsynthese mit PyTorch.",
|
||||
tags: ["Python", "PyTorch", "CUDA"],
|
||||
github: "https://github.com/MarvinKrausser/pixelcnn",
|
||||
blocks: [
|
||||
{
|
||||
label: "",
|
||||
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",
|
||||
},
|
||||
{
|
||||
label: "",
|
||||
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",
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "boardgame",
|
||||
title: "Online Multiplayer Game",
|
||||
@@ -97,7 +103,7 @@ const PROJECTS = [
|
||||
{
|
||||
label: "",
|
||||
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",
|
||||
},
|
||||
{
|
||||
@@ -113,7 +119,7 @@ const PROJECTS = [
|
||||
image: "images/boardgame_ai.png",
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "towerdefense",
|
||||
title: "Towerdefense Game",
|
||||
@@ -129,15 +135,15 @@ const PROJECTS = [
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
];
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════
|
||||
/* ══════════════════════════════════════════════════════
|
||||
WEB COMPONENT: <project-section>
|
||||
Rendert einen kompletten Projekt-Abschnitt mit
|
||||
Header, alternierenden Content-Blocks und Link-Zeile.
|
||||
══════════════════════════════════════════════════════ */
|
||||
class ProjectSection extends HTMLElement {
|
||||
══════════════════════════════════════════════════════ */
|
||||
class ProjectSection extends HTMLElement {
|
||||
connectedCallback() {
|
||||
const p = JSON.parse(this.getAttribute("data-project") || "{}");
|
||||
if (!p.id) return;
|
||||
@@ -179,25 +185,25 @@ class ProjectSection extends HTMLElement {
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
}
|
||||
customElements.define("project-section", ProjectSection);
|
||||
}
|
||||
customElements.define("project-section", ProjectSection);
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════
|
||||
/* ══════════════════════════════════════════════════════
|
||||
RENDER
|
||||
══════════════════════════════════════════════════════ */
|
||||
const root = document.getElementById("projects-root");
|
||||
PROJECTS.forEach(p => {
|
||||
══════════════════════════════════════════════════════ */
|
||||
const root = document.getElementById("projects-root");
|
||||
PROJECTS.forEach(p => {
|
||||
const el = document.createElement("project-section");
|
||||
el.setAttribute("data-project", JSON.stringify(p));
|
||||
root.appendChild(el);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════
|
||||
/* ══════════════════════════════════════════════════════
|
||||
NAV AUFBAUEN + ACTIVE STATE
|
||||
══════════════════════════════════════════════════════ */
|
||||
function buildNav() {
|
||||
══════════════════════════════════════════════════════ */
|
||||
function buildNav() {
|
||||
const sidebarNav = document.getElementById("sidebar-nav");
|
||||
const drawerLinks = document.getElementById("drawer-links");
|
||||
sidebarNav.innerHTML = "";
|
||||
@@ -259,9 +265,9 @@ function buildNav() {
|
||||
ma.textContent = s.idx ? `${s.idx} – ${s.label}` : s.label;
|
||||
drawerLinks.appendChild(ma);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setupObserver() {
|
||||
function setupObserver() {
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) {
|
||||
@@ -273,25 +279,26 @@ function setupObserver() {
|
||||
}, { 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);
|
||||
// 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 openDrawer() { document.getElementById("drawer").classList.add("open"); }
|
||||
function closeDrawer() { document.getElementById("drawer").classList.remove("open"); }
|
||||
|
||||
function scrollToSection(id) {
|
||||
function scrollToSection(id) {
|
||||
document.getElementById(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
history.replaceState(null, null, window.location.pathname);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user