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

progress

Browse Source
This commit is contained in:
marvin
2026-04-26 13:08:31 +02:00
parent 7d71d8a3f4
commit 9a85e1ac98
3 changed files with 285 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+123 -28
View File
@@ -2,19 +2,32 @@
<html lang="de"> <html lang="de">
<head> <head>
<link rel="icon" href="images/generated_two_no_background.png">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title id="website_title"></title> <title id="website_title"></title>
<link rel="stylesheet" href="main_style.css"> <link rel="stylesheet" href="main_style.css">
</head> </head>
<body> <body>
<aside class="sidebar">
<div id="sidebar-top">
<h3 id="sidebar-top-head">Marvin Kraußer</h3>
<div id="sidebar-top-content"></div>
</div>
<nav id="navbar">
</nav>
<div id="sidebar-bottom">
<a target="_blank" link.rel="noopener noreferrer"
href="https://github.com/marvinkrausser">github.com/marvinkrausser ↗</a>
<a href="mailto:marvin.krausser277@gmail.com">marvin.krausser277@gmail.com</a>
</div>
</aside>
<nav id="navbar"> <div class="main-content">
</nav> <div id="introduction" data-nav="introduction"></div>
<div id="introduction"></div> <div id="projects-section"></div>
</div>
<div id="app"></div>
<script> <script>
history.scrollRestoration = "manual"; history.scrollRestoration = "manual";
@@ -26,12 +39,42 @@
function restoreScroll() { function restoreScroll() {
const scrollY = sessionStorage.getItem("scrollY"); const scrollY = sessionStorage.getItem("scrollY");
if (scrollY !== null) { if (scrollY !== null) {
document.documentElement.style.scrollBehavior = "auto";
window.scrollTo(0, parseInt(scrollY)); window.scrollTo(0, parseInt(scrollY));
document.documentElement.style.scrollBehavior = "smooth";
} }
} }
window.addEventListener("beforeunload", saveScroll); window.addEventListener("beforeunload", saveScroll);
function setupObserver() {
const sections = document.querySelectorAll("[data-nav]");
const navLinks = document.querySelectorAll(".nav-link");
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.toggle(
"active",
link.dataset.target === entry.target.id
);
});
}
});
}, {
threshold: 0.3,
rootMargin: "0px 0px -30% 0px"
});
sections.forEach(section => observer.observe(section));
}
async function loadData() { async function loadData() {
const response = await fetch("./lang/de.json"); const response = await fetch("./lang/de.json");
const data = await response.json(); const data = await response.json();
@@ -40,8 +83,21 @@
website_title.textContent = data.title_website; website_title.textContent = data.title_website;
const introduction = document.getElementById("introduction"); const introduction = document.getElementById("introduction");
const container = document.getElementById("app"); const container = document.getElementById("projects-section");
const navbar = document.getElementById("navbar"); const navbar = document.getElementById("navbar");
const sidebar_top = document.getElementById("sidebar-top-content");
const sidebar_top_status = document.createElement("p");
sidebar_top_status.textContent = data.status;
sidebar_top.appendChild(sidebar_top_status);
const sidebar_top_profession = document.createElement("p");
sidebar_top_profession.textContent = data.profession;
sidebar_top.appendChild(sidebar_top_profession);
const sidebar_top_workplace = document.createElement("p");
sidebar_top_workplace.textContent = data.workplace;
sidebar_top.appendChild(sidebar_top_workplace);
const headline_introduction = document.createElement("h1"); const headline_introduction = document.createElement("h1");
headline_introduction.textContent = data.title_introduction; headline_introduction.textContent = data.title_introduction;
@@ -56,15 +112,30 @@
navbar.appendChild(navbar_item); navbar.appendChild(navbar_item);
const navbar_link = document.createElement("a"); const navbar_link = document.createElement("a");
navbar_link.className = "nav-link";
navbar_link.href = "#introduction"; navbar_link.href = "#introduction";
navbar_link.textContent = data.title_introduction;
const idx = document.createElement("span");
idx.className = "idx";
idx.textContent = "00\u00A0\u00A0\u00A0";
navbar_link.appendChild(idx);
const text = document.createTextNode(data.title_introduction);
navbar_link.appendChild(text);
navbar_link.dataset.target = "introduction";
navbar_item.appendChild(navbar_link); navbar_item.appendChild(navbar_link);
const navbar_group = document.createElement("li");
navbar_group.className = "navbar-group";
navbar_group.textContent = data.navbar_group
navbar.appendChild(navbar_group);
data.content.forEach(item => {
data.content.forEach((item, j) => {
const project = document.createElement("section"); const project = document.createElement("section");
project.className = "project-section"; project.className = "project-section";
project.id = item.id; project.id = item.id;
project.setAttribute("data-nav", item.id);
container.appendChild(project); container.appendChild(project);
const navbar_item = document.createElement("li"); const navbar_item = document.createElement("li");
@@ -72,15 +143,24 @@
navbar.appendChild(navbar_item); navbar.appendChild(navbar_item);
const navbar_link = document.createElement("a"); const navbar_link = document.createElement("a");
navbar_link.className = "nav-link";
navbar_link.href = `#${item.id}`; navbar_link.href = `#${item.id}`;
navbar_link.textContent = item.title;
const idx = document.createElement("span");
idx.className = "idx";
idx.textContent = String(j + 1).padStart(2, "0") + "\u00A0\u00A0\u00A0";
navbar_link.appendChild(idx);
const text = document.createTextNode(item.title);
navbar_link.appendChild(text);
navbar_link.dataset.target = item.id;
navbar_item.appendChild(navbar_link); navbar_item.appendChild(navbar_link);
const header = document.createElement("div"); const header = document.createElement("div");
header.className = "section-header"; header.className = "section-header";
project.appendChild(header); project.appendChild(header);
const headerTitle = document.createElement("h2"); const headerTitle = document.createElement("h1");
headerTitle.className = "section-title"; headerTitle.className = "section-title";
headerTitle.textContent = item.title; headerTitle.textContent = item.title;
header.appendChild(headerTitle); header.appendChild(headerTitle);
@@ -123,9 +203,28 @@
text_title.textContent = content.heading; text_title.textContent = content.heading;
block_text.appendChild(text_title); block_text.appendChild(text_title);
const text = document.createElement("p"); const parts = content.text.split("--link--");
text.textContent = content.text; const text_content = document.createElement("div");
block_text.appendChild(text); text_content.className = "text-content";
block_text.appendChild(text_content);
parts.forEach((part, i) => {
const text = document.createElement("span");
text.textContent = part;
text_content.appendChild(text);
if (i < parts.length - 1) {
const link_list = content.links;
const a = document.createElement("a");
a.href = link_list[i].link;
a.textContent = link_list[i].desc;
a.target = "_blank";
a.rel = "noopener noreferrer";
a.className = "text-link";
text_content.appendChild(a);
}
});
if (i % 2 == 1) { if (i % 2 == 1) {
block_image.className = "block-image right"; block_image.className = "block-image right";
@@ -140,24 +239,20 @@
} }
}); });
const links = document.createElement("div"); const github_link = document.createElement("div");
links.className = "link-row"; github_link.className = "link-row";
project.appendChild(links); project.appendChild(github_link);
item.links.forEach(link_json => { const link = document.createElement("a");
const entrance = document.createElement("div"); link.href = item.github;
links.appendChild(entrance); link.target = "_blank";
link.rel = "noopener noreferrer";
const link = document.createElement("a"); link.className = "text-link";
link.href = link_json.link; link.textContent = data.github_desc;
link.target = "_blank"; github_link.appendChild(link);
link.rel = "noopener noreferrer";
link.className = "text-link";
link.textContent = link_json.desc;
entrance.appendChild(link);
});
}); });
restoreScroll(); restoreScroll();
setupObserver();
} }
loadData(); loadData();
lang/de.json
+33 -38
View File
@@ -5,6 +5,8 @@
"status": "Stuent B.Sc.", "status": "Stuent B.Sc.",
"profession": "Medieninformatik", "profession": "Medieninformatik",
"workplace": "Universität Ulm", "workplace": "Universität Ulm",
"github_desc": "Auf GitHub ansehen ↗",
"navbar_group": "Projekte",
"content": [ "content": [
{ {
"id": "pixelcnn", "id": "pixelcnn",
@@ -15,23 +17,7 @@
"PyTorch", "PyTorch",
"CUDA" "CUDA"
], ],
"links": [ "github": "https://github.com/MarvinKrausser/pixelcnn",
{
"id": "github",
"link": "https://github.com/MarvinKrausser/pixelcnn",
"desc": "Auf GitHub ansehen ↗"
},
{
"id": "seminararbeit",
"link": "pdfs/Seminararbeit.pdf",
"desc": "Seminararbeit ansehen ↗"
},
{
"id": "seminarvortrag",
"link": "pdfs/Seminararbeit_Vortrag.pdf",
"desc": "Seminarvortrag ansehen ↗"
}
],
"blocks": [ "blocks": [
{ {
"label": "", "label": "",
@@ -42,8 +28,20 @@
{ {
"label": "", "label": "",
"heading": "Seminararbeit", "heading": "Seminararbeit",
"text": "Das Projekt entstand begleitend zusätzlich zu einer Seminararbeit und Vortrag. Beide Pdfs sind verlinkt.", "text": "Das Projekt entstand begleitend zusätzlich zu einer --link-- und --link--.",
"image": "images/seminararbeit.png" "image": "images/seminararbeit.png",
"links": [
{
"id": "seminararbeit",
"link": "pdfs/Seminararbeit.pdf",
"desc": "Seminararbeit ↗"
},
{
"id": "seminarvortrag",
"link": "pdfs/Seminararbeit_Vortrag.pdf",
"desc": "Vortrag ↗"
}
]
} }
] ]
}, },
@@ -57,29 +55,25 @@
"Unity", "Unity",
"Docker" "Docker"
], ],
"links": [ "github": "https://github.com/MarvinKrausser/BoardgameServer",
{
"id": "github",
"link": "https://github.com/MarvinKrausser/BoardgameServer",
"desc": "Auf GitHub ansehen ↗"
},
{
"id": "entwicklerhandbuch",
"link": "pdfs/Team23_Entwicklerhandbuch_BoC.pdf",
"desc": "Entwicklerhandbuch ansehen ↗"
},
{
"id": "benutzerhandbuch",
"link": "pdfs/Team23_Benutzerhandbuch_BoC.pdf",
"desc": "Benutzerhandbuch ansehen ↗"
}
],
"blocks": [ "blocks": [
{ {
"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. Auch ein Benutzerhandbuch und Entwicklerhandbuch wurden erstellt und sind verlinkt.", "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 --link-- und --link-- wurden erstellt.",
"image": "images/boardgame_demo.png" "image": "images/boardgame_demo.png",
"links": [
{
"id": "entwicklerhandbuch",
"link": "pdfs/Team23_Entwicklerhandbuch_BoC.pdf",
"desc": "Entwicklerhandbuch ↗"
},
{
"id": "benutzerhandbuch",
"link": "pdfs/Team23_Benutzerhandbuch_BoC.pdf",
"desc": "Benutzerhandbuch ↗"
}
]
}, },
{ {
"label": "", "label": "",
@@ -103,6 +97,7 @@
"C#", "C#",
"Unity" "Unity"
], ],
"github": "https://github.com/MarvinKrausser/TowerDefenseGame",
"links": [ "links": [
{ {
"id": "github", "id": "github",
main_style.css
+129 -6
View File
@@ -21,15 +21,27 @@
} }
} }
html {
scroll-behavior: smooth;
}
body { body {
background: linear-gradient(135deg, var(--bg), var(--bg2)); background: linear-gradient(135deg, var(--bg), var(--bg2));
margin: 0;
} }
p { p,
span,
li {
color: var(--muted); color: var(--muted);
line-height: 1.7;
font-size: 15px;
} }
h1, h2, h3, a { h1,
h2,
h3,
a {
color: var(--text); color: var(--text);
} }
@@ -37,10 +49,109 @@ h1, h2, h3, a {
box-sizing: border-box; box-sizing: border-box;
} }
.sidebar {
background-color: var(--bg);
margin-top: 0;
position: fixed;
top: 0;
left: 0;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
height: 100vh;
width: 230px;
}
#sidebar-top {
padding: 36px 32px 28px;
border-bottom: 1px solid var(--border);
}
#sidebar-top-content {
display: flex;
flex-direction: column;
gap: 1px;
}
#sidebar-top-content p {
margin: 0;
pad: 0;
}
#navbar {
padding: 36px 1px 28px 32px;
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
}
.navbar-group {
margin-top: 10px;
}
.nav-link {
position: relative;
text-decoration: none;
color: var(--muted);
font-size: 0.9rem;
}
.nav-link:hover {
color: var(--text);
}
.nav-link.active {
color: var(--text);
font-weight: bold;
}
.nav-link::before {
content: '';
position: absolute;
left: -32px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 0;
background: var(--text);
border-radius: 0 2px 2px 0;
transition: height 0.18s;
}
.nav-link.active::before {
height: 14px;
}
.nav-link .idx {
color: var(--muted);
font-weight: normal;
}
#sidebar-bottom {
padding: 36px 32px 28px;
border-top: 1px solid var(--border);
margin-top: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
#sidebar-bottom a {
color: var(--muted);
text-decoration: none;
font-size: 0.84rem
}
.main-content {
margin-left: 230px;
}
#introduction { #introduction {
margin-top: 100px; padding-top: 100px;
margin-left: 100px; margin-left: 100px;
margin-bottom: 150px; margin-bottom: 150px;
margin-right: 100px;
} }
#introduction p { #introduction p {
@@ -78,6 +189,10 @@ h1, h2, h3, a {
border-radius: 3px; border-radius: 3px;
} }
.content-block {
overflow: hidden;
}
.block-image { .block-image {
overflow: hidden; overflow: hidden;
@@ -100,6 +215,7 @@ h1, h2, h3, a {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
overflow: hidden;
} }
.block-text.right { .block-text.right {
@@ -112,6 +228,14 @@ h1, h2, h3, a {
margin-left: 100px; margin-left: 100px;
} }
.text-content {
display: inline;
}
.text-content a {
font-size: 15px;
}
.block-image img { .block-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -123,6 +247,8 @@ h1, h2, h3, a {
} }
.text-link { .text-link {
display: inline-block;
width: fit-content;
font-size: 0.90rem; font-size: 0.90rem;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
@@ -135,7 +261,4 @@ h1, h2, h3, a {
.link-row { .link-row {
margin: 100px; margin: 100px;
margin-top: 30px; margin-top: 30px;
display: flex;
flex-direction: column;
gap: 20px;
} }