From 9a85e1ac982cb6c825e9e8ae2d4087d2b23b1efd Mon Sep 17 00:00:00 2001
From: marvinkrausser <koro.no.omo@gmail.com>
Date: Sun, 26 Apr 2026 13:08:31 +0200
Subject: [PATCH] progress

---
 index.html     | 151 ++++++++++++++++++++++++++++++++++++++++---------
 lang/de.json   |  71 +++++++++++------------
 main_style.css | 135 +++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 285 insertions(+), 72 deletions(-)
diff --git a/index.html b/index.html
index c9f38ca..d8f6426 100644
--- a/index.html
+++ b/index.html
@@ -2,19 +2,32 @@
 <html lang="de">
 
 <head>
+    <link rel="icon" href="images/generated_two_no_background.png">
     <meta charset="UTF-8">
     <title id="website_title"></title>
     <link rel="stylesheet" href="main_style.css">
 </head>
 
 <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">
-    </nav>
+    <div class="main-content">
+        <div id="introduction" data-nav="introduction"></div>
 
-    <div id="introduction"></div>
-
-    <div id="app"></div>
+        <div id="projects-section"></div>
+    </div>
 
     <script>
         history.scrollRestoration = "manual";
@@ -26,12 +39,42 @@
         function restoreScroll() {
             const scrollY = sessionStorage.getItem("scrollY");
             if (scrollY !== null) {
+
+                document.documentElement.style.scrollBehavior = "auto";
+
                 window.scrollTo(0, parseInt(scrollY));
+
+                document.documentElement.style.scrollBehavior = "smooth";
             }
         }
 
         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() {
             const response = await fetch("./lang/de.json");
             const data = await response.json();
@@ -40,8 +83,21 @@
             website_title.textContent = data.title_website;
 
             const introduction = document.getElementById("introduction");
-            const container = document.getElementById("app");
+            const container = document.getElementById("projects-section");
             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");
             headline_introduction.textContent = data.title_introduction;
@@ -56,15 +112,30 @@
             navbar.appendChild(navbar_item);
 
             const navbar_link = document.createElement("a");
+            navbar_link.className = "nav-link";
             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);
 
+            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");
                 project.className = "project-section";
                 project.id = item.id;
+                project.setAttribute("data-nav", item.id);
                 container.appendChild(project);
 
                 const navbar_item = document.createElement("li");
@@ -72,15 +143,24 @@
                 navbar.appendChild(navbar_item);
 
                 const navbar_link = document.createElement("a");
+                navbar_link.className = "nav-link";
                 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);
 
                 const header = document.createElement("div");
                 header.className = "section-header";
                 project.appendChild(header);
 
-                const headerTitle = document.createElement("h2");
+                const headerTitle = document.createElement("h1");
                 headerTitle.className = "section-title";
                 headerTitle.textContent = item.title;
                 header.appendChild(headerTitle);
@@ -123,9 +203,28 @@
                     text_title.textContent = content.heading;
                     block_text.appendChild(text_title);
 
-                    const text = document.createElement("p");
-                    text.textContent = content.text;
-                    block_text.appendChild(text);
+                    const parts = content.text.split("--link--");
+                    const text_content = document.createElement("div");
+                    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) {
                         block_image.className = "block-image right";
@@ -140,24 +239,20 @@
                     }
                 });
 
-                const links = document.createElement("div");
-                links.className = "link-row";
-                project.appendChild(links);
+                const github_link = document.createElement("div");
+                github_link.className = "link-row";
+                project.appendChild(github_link);
 
-                item.links.forEach(link_json => {
-                    const entrance = document.createElement("div");
-                    links.appendChild(entrance);
-
-                    const link = document.createElement("a");
-                    link.href = link_json.link;
-                    link.target = "_blank";
-                    link.rel = "noopener noreferrer";
-                    link.className = "text-link";
-                    link.textContent = link_json.desc;
-                    entrance.appendChild(link);
-                });
+                const link = document.createElement("a");
+                link.href = item.github;
+                link.target = "_blank";
+                link.rel = "noopener noreferrer";
+                link.className = "text-link";
+                link.textContent = data.github_desc;
+                github_link.appendChild(link);
             });
             restoreScroll();
+            setupObserver();
         }
 
         loadData();
diff --git a/lang/de.json b/lang/de.json
index ecdd406..d45d9e0 100644
--- a/lang/de.json
+++ b/lang/de.json
@@ -5,6 +5,8 @@
   "status": "Stuent B.Sc.",
   "profession": "Medieninformatik",
   "workplace": "Universität Ulm",
+  "github_desc": "Auf GitHub ansehen ↗",
+  "navbar_group": "Projekte",
   "content": [
     {
       "id": "pixelcnn",
@@ -15,23 +17,7 @@
         "PyTorch",
         "CUDA"
       ],
-      "links": [
-        {
-          "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 ↗"
-        }
-      ],
+      "github": "https://github.com/MarvinKrausser/pixelcnn",
       "blocks": [
         {
           "label": "",
@@ -42,8 +28,20 @@
         {
           "label": "",
           "heading": "Seminararbeit",
-          "text": "Das Projekt entstand begleitend zusätzlich zu einer Seminararbeit und Vortrag. Beide Pdfs sind verlinkt.",
-          "image": "images/seminararbeit.png"
+          "text": "Das Projekt entstand begleitend zusätzlich zu einer --link-- und --link--.",
+          "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",
         "Docker"
       ],
-      "links": [
-        {
-          "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 ↗"
-        }
-      ],
+      "github": "https://github.com/MarvinKrausser/BoardgameServer",
       "blocks": [
         {
           "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. Auch ein Benutzerhandbuch und Entwicklerhandbuch wurden erstellt und sind verlinkt.",
-          "image": "images/boardgame_demo.png"
+          "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",
+          "links": [
+            {
+              "id": "entwicklerhandbuch",
+              "link": "pdfs/Team23_Entwicklerhandbuch_BoC.pdf",
+              "desc": "Entwicklerhandbuch ↗"
+            },
+            {
+              "id": "benutzerhandbuch",
+              "link": "pdfs/Team23_Benutzerhandbuch_BoC.pdf",
+              "desc": "Benutzerhandbuch ↗"
+            }
+          ]
         },
         {
           "label": "",
@@ -103,6 +97,7 @@
         "C#",
         "Unity"
       ],
+      "github": "https://github.com/MarvinKrausser/TowerDefenseGame",
       "links": [
         {
           "id": "github",
diff --git a/main_style.css b/main_style.css
index 2ad7f0f..3278740 100644
--- a/main_style.css
+++ b/main_style.css
@@ -21,15 +21,27 @@
     }
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 body {
     background: linear-gradient(135deg, var(--bg), var(--bg2));
+    margin: 0;
 }
 
-p {
+p,
+span,
+li {
     color: var(--muted);
+    line-height: 1.7;
+    font-size: 15px;
 }
 
-h1, h2, h3, a {
+h1,
+h2,
+h3,
+a {
     color: var(--text);
 }
 
@@ -37,10 +49,109 @@ h1, h2, h3, a {
     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 {
-    margin-top: 100px;
+    padding-top: 100px;
     margin-left: 100px;
     margin-bottom: 150px;
+    margin-right: 100px;
 }
 
 #introduction p {
@@ -78,6 +189,10 @@ h1, h2, h3, a {
     border-radius: 3px;
 }
 
+.content-block {
+    overflow: hidden;
+}
+
 
 .block-image {
     overflow: hidden;
@@ -100,6 +215,7 @@ h1, h2, h3, a {
     flex-direction: column;
     justify-content: center;
     border-top: 1px solid var(--border);
+    overflow: hidden;
 }
 
 .block-text.right {
@@ -112,6 +228,14 @@ h1, h2, h3, a {
     margin-left: 100px;
 }
 
+.text-content {
+    display: inline;
+}
+
+.text-content a {
+    font-size: 15px;
+}
+
 .block-image img {
     width: 100%;
     height: 100%;
@@ -123,6 +247,8 @@ h1, h2, h3, a {
 }
 
 .text-link {
+    display: inline-block;
+    width: fit-content;
     font-size: 0.90rem;
     font-weight: 500;
     text-decoration: none;
@@ -135,7 +261,4 @@ h1, h2, h3, a {
 .link-row {
     margin: 100px;
     margin-top: 30px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
 }
\ No newline at end of file
