progress

2026-04-26 13:08:31 +02:00
parent 7d71d8a3f4
commit 9a85e1ac98
3 changed files with 285 additions and 72 deletions
@@ -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>

-    <div id="introduction"></div>
+    <div class="main-content">
+        <div id="introduction" data-nav="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);
-
-                item.links.forEach(link_json => {
-                    const entrance = document.createElement("div");
-                    links.appendChild(entrance);
+                const github_link = document.createElement("div");
+                github_link.className = "link-row";
+                project.appendChild(github_link);

                const link = document.createElement("a");
-                    link.href = link_json.link;
+                link.href = item.github;
                link.target = "_blank";
                link.rel = "noopener noreferrer";
                link.className = "text-link";
-                    link.textContent = link_json.desc;
-                    entrance.appendChild(link);
-                });
+                link.textContent = data.github_desc;
+                github_link.appendChild(link);
            });
            restoreScroll();
+            setupObserver();
        }

        loadData();
@@ -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",
@@ -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;
 }