website new
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
+168
@@ -0,0 +1,168 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title id="website_title"></title>
|
||||||
|
<link rel="stylesheet" href="main_style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div id="introduction"></div>
|
||||||
|
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
history.scrollRestoration = "manual";
|
||||||
|
|
||||||
|
function saveScroll() {
|
||||||
|
sessionStorage.setItem("scrollY", window.scrollY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function restoreScroll() {
|
||||||
|
const scrollY = sessionStorage.getItem("scrollY");
|
||||||
|
if (scrollY !== null) {
|
||||||
|
window.scrollTo(0, parseInt(scrollY));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("beforeunload", saveScroll);
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
const response = await fetch("./lang/de.json");
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const website_title = document.getElementById("website_title");
|
||||||
|
website_title.textContent = data.title_website;
|
||||||
|
|
||||||
|
const introduction = document.getElementById("introduction");
|
||||||
|
const container = document.getElementById("app");
|
||||||
|
const navbar = document.getElementById("navbar");
|
||||||
|
|
||||||
|
const headline_introduction = document.createElement("h1");
|
||||||
|
headline_introduction.textContent = data.title_introduction;
|
||||||
|
introduction.appendChild(headline_introduction);
|
||||||
|
|
||||||
|
const content_introduction = document.createElement("p");
|
||||||
|
content_introduction.textContent = data.content_introduction;
|
||||||
|
introduction.appendChild(content_introduction);
|
||||||
|
|
||||||
|
const navbar_item = document.createElement("li");
|
||||||
|
navbar_item.className = "navbar-item";
|
||||||
|
navbar.appendChild(navbar_item);
|
||||||
|
|
||||||
|
const navbar_link = document.createElement("a");
|
||||||
|
navbar_link.href = "#introduction";
|
||||||
|
navbar_link.textContent = data.title_introduction;
|
||||||
|
navbar_item.appendChild(navbar_link);
|
||||||
|
|
||||||
|
|
||||||
|
data.content.forEach(item => {
|
||||||
|
const project = document.createElement("section");
|
||||||
|
project.className = "project-section";
|
||||||
|
project.id = item.id;
|
||||||
|
container.appendChild(project);
|
||||||
|
|
||||||
|
const navbar_item = document.createElement("li");
|
||||||
|
navbar_item.className = "navbar-item";
|
||||||
|
navbar.appendChild(navbar_item);
|
||||||
|
|
||||||
|
const navbar_link = document.createElement("a");
|
||||||
|
navbar_link.href = `#${item.id}`;
|
||||||
|
navbar_link.textContent = item.title;
|
||||||
|
navbar_item.appendChild(navbar_link);
|
||||||
|
|
||||||
|
const header = document.createElement("div");
|
||||||
|
header.className = "section-header";
|
||||||
|
project.appendChild(header);
|
||||||
|
|
||||||
|
const headerTitle = document.createElement("h2");
|
||||||
|
headerTitle.className = "section-title";
|
||||||
|
headerTitle.textContent = item.title;
|
||||||
|
header.appendChild(headerTitle);
|
||||||
|
|
||||||
|
const headerDesc = document.createElement("p");
|
||||||
|
headerDesc.className = "section-desc";
|
||||||
|
headerDesc.textContent = item.description;
|
||||||
|
header.appendChild(headerDesc);
|
||||||
|
|
||||||
|
const tags = document.createElement("div");
|
||||||
|
tags.className = "tags";
|
||||||
|
header.appendChild(tags);
|
||||||
|
|
||||||
|
item.tags.forEach(tag_json => {
|
||||||
|
const tag = document.createElement("span");
|
||||||
|
tag.className = "tag";
|
||||||
|
tag.textContent = tag_json;
|
||||||
|
tags.appendChild(tag);
|
||||||
|
});
|
||||||
|
|
||||||
|
const content_blocks = document.createElement("div");
|
||||||
|
content_blocks.className = "content-blocks";
|
||||||
|
project.appendChild(content_blocks);
|
||||||
|
|
||||||
|
item.blocks.forEach((content, i) => {
|
||||||
|
const content_block = document.createElement("div");
|
||||||
|
content_block.className = "content-block";
|
||||||
|
content_blocks.appendChild(content_block);
|
||||||
|
|
||||||
|
const block_image = document.createElement("div");
|
||||||
|
|
||||||
|
const image = document.createElement("img");
|
||||||
|
image.src = content.image;
|
||||||
|
image.loading = "lazy";
|
||||||
|
block_image.appendChild(image);
|
||||||
|
|
||||||
|
const block_text = document.createElement("div");
|
||||||
|
|
||||||
|
const text_title = document.createElement("h3");
|
||||||
|
text_title.textContent = content.heading;
|
||||||
|
block_text.appendChild(text_title);
|
||||||
|
|
||||||
|
const text = document.createElement("p");
|
||||||
|
text.textContent = content.text;
|
||||||
|
block_text.appendChild(text);
|
||||||
|
|
||||||
|
if (i % 2 == 1) {
|
||||||
|
block_image.className = "block-image right";
|
||||||
|
block_text.className = "block-text left";
|
||||||
|
content_block.appendChild(block_text);
|
||||||
|
content_block.appendChild(block_image);
|
||||||
|
} else {
|
||||||
|
block_image.className = "block-image left";
|
||||||
|
block_text.className = "block-text right";
|
||||||
|
content_block.appendChild(block_image);
|
||||||
|
content_block.appendChild(block_text);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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 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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
restoreScroll();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+123
@@ -0,0 +1,123 @@
|
|||||||
|
{
|
||||||
|
"title_website": "Marvins Protfolio",
|
||||||
|
"title_introduction": "Hallo!",
|
||||||
|
"content_introduction": "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.",
|
||||||
|
"status": "Stuent B.Sc.",
|
||||||
|
"profession": "Medieninformatik",
|
||||||
|
"workplace": "Universität Ulm",
|
||||||
|
"content": [
|
||||||
|
{
|
||||||
|
"id": "pixelcnn",
|
||||||
|
"title": "PixelCNN Bildgeneration",
|
||||||
|
"description": "Autoregressives Deep Learning-Modell basierend auf PixelCNN zur generativen Bildsynthese mit PyTorch.",
|
||||||
|
"tags": [
|
||||||
|
"Python",
|
||||||
|
"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 ↗"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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 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 begleitend zusätzlich zu einer Seminararbeit und Vortrag. Beide Pdfs sind verlinkt.",
|
||||||
|
"image": "images/seminararbeit.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "boardgame",
|
||||||
|
"title": "Online Multiplayer Game",
|
||||||
|
"description": "Ein Online-Multiplayer-Brettspiel mit Server, Spielclient und KI-Spieler entstanden als Gruppenarbeit mit 5 weiteren Kommilitonen.",
|
||||||
|
"tags": [
|
||||||
|
"C#",
|
||||||
|
".net",
|
||||||
|
"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 ↗"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "",
|
||||||
|
"heading": "Server",
|
||||||
|
"text": "Der Server wurde in C# mit einer mehrschichtigen Architektur umgesetzt, die eine klare Trennung zwischen WebSocket-Verbindungsmanagement und spielbezogener Logik (z. B. Spielerzuweisung und Sitzungsverwaltung) ermöglicht. Die Kommunikation zwischen Server und Client wurde durch ein definiertes JSON-Schema standardisiert, um die Kompatibilität und Austauschbarkeit der von verschiedenen Entwicklerteams entwickelten Komponenten sicherzustellen.",
|
||||||
|
"image": "images/boardgame_connection.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "",
|
||||||
|
"heading": "KI-Spieler",
|
||||||
|
"text": "Zusätzlich wurden mehrere regelbasierte KI-Spieler implementiert, die in das System integriert werden können. Die Codequalität wurde durch automatisierte Tests sichergestellt. Die Zusammenarbeit im Team erfolgte nach agilen Methoden (Scrum), und Server sowie KI wurden containerbasiert mit Docker bereitgestellt.",
|
||||||
|
"image": "images/boardgame_ai.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "towerdefense",
|
||||||
|
"title": "Towerdefense Game",
|
||||||
|
"description": "Singleplayer Towerdefense Game mit Editor entstanden im Rahmen einer Vorlesung als Einzelprojekt.",
|
||||||
|
"tags": [
|
||||||
|
"C#",
|
||||||
|
"Unity"
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"id": "github",
|
||||||
|
"link": "https://github.com/MarvinKrausser/TowerDefenseGame",
|
||||||
|
"desc": "Auf GitHub ansehen ↗"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"blocks": [
|
||||||
|
{
|
||||||
|
"label": "",
|
||||||
|
"heading": "Singleplayer Tower Defense Game",
|
||||||
|
"text": "Einfaches Tower-Defense-Spiel das von Grund auf mit eigenen Designs erstellt wurde. Nutzt den A*-Algorithmus zur Berechnung des Laufweges. Ein Demo-Build ist im Github Repository vorhanden.",
|
||||||
|
"image": "images/towerdefense_demo.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
+141
@@ -0,0 +1,141 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #5E4C93;
|
||||||
|
--bg2: #1b162a;
|
||||||
|
--text: #FFFFFF;
|
||||||
|
--surface: #3e3261;
|
||||||
|
--muted: #C5C1D1;
|
||||||
|
--border: #20192a;
|
||||||
|
--serif: 'Instrument Serif', Georgia, serif;
|
||||||
|
--sans: 'DM Sans', system-ui, sans-serif;
|
||||||
|
--nav-w: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #5E4C93;
|
||||||
|
--bg2: #1b162a;
|
||||||
|
--text: #FFFFFF;
|
||||||
|
--surface: #3e3261;
|
||||||
|
--muted: #C5C1D1;
|
||||||
|
--border: #20192a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, var(--bg), var(--bg2));
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, a {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#introduction {
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-left: 100px;
|
||||||
|
margin-bottom: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#introduction p {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-section {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-block {
|
||||||
|
height: 400px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
margin: 80px;
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
margin-top: 40px;
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.block-image {
|
||||||
|
overflow: hidden;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-image.right {
|
||||||
|
margin-right: 100px;
|
||||||
|
border-left: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-image.left {
|
||||||
|
margin-left: 100px;
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-text.right {
|
||||||
|
margin-right: 100px;
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-text.left {
|
||||||
|
padding-right: 50px;
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-link:hover {
|
||||||
|
border-color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-link {
|
||||||
|
font-size: 0.90rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding-bottom: 2px;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-row {
|
||||||
|
margin: 100px;
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user