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

changed language button design, extracted image meta data into new config file

Browse Source
This commit is contained in:
marvin
2026-04-27 21:04:50 +02:00
parent ec369d5f6d
commit 7ec4e44c49
5 changed files with 406 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/img_config.json
+39
View File
@@ -0,0 +1,39 @@
{
"images": [
{
"id": "pixelcnn_1",
"image": "images/mnist_conditioned_gen_results_cropped.png",
"image_pos": "center"
},
{
"id": "pixelcnn_2",
"image": "images/seminararbeit.png",
"image_pos": "left"
},
{
"id": "boardgame_1",
"image": "images/boardgame_demo.png",
"image_pos": "center"
},
{
"id": "boardgame_2",
"image": "images/boardgame_connection.png",
"image_pos": "center"
},
{
"id": "boardgame_3",
"image": "images/boardgame_ai.png",
"image_pos": "left"
},
{
"id": "towerdefense_1",
"image": "images/towerdefense_demo.png",
"image_pos": "center"
},
{
"id": "personal_website_1",
"image": "images/personal_website.png",
"image_pos": "left"
}
]
}
index.html
+293 -280
View File
@@ -2,340 +2,353 @@
<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">
<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 class="lang-dropdown">
<button id="lang-button">Sprache</button>
<aside class="sidebar">
<div id="lang-menu" class="lang-menu hidden">
<div class="lang-item hidden" data-lang="de">de</div>
<div class="lang-item hidden" data-lang="en">en</div>
</div>
</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 class="main-content">
<div id="introduction" data-nav="introduction"></div>
<div id="projects-section"></div>
<div id="sidebar-top">
<h3 id="sidebar-top-head">Marvin Kraußer</h3>
<div id="sidebar-top-content"></div>
</div>
<script>
//document.cookie = "lang=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
let lang = getCookie("lang");
console.log(lang);
if (lang == null) {
lang = navigator.language.split("-")[0];
}
if (lang != "en" && lang != "de") {
lang = "en";
}
history.scrollRestoration = "manual";
<nav id="navbar">
</nav>
function saveScroll() {
sessionStorage.setItem("scrollY", window.scrollY);
}
<div class="sidebar-bottom-margin">
<div class="lang-dropdown" id="lang-dropdown">
<button id="lang-button">Sprache</button>
function restoreScroll() {
const scrollY = sessionStorage.getItem("scrollY");
if (scrollY !== null) {
<div id="lang-menu" class="lang-menu hidden">
<div class="lang-item hidden" data-lang="de">de</div>
<div class="lang-item hidden" data-lang="en">en</div>
</div>
</div>
document.documentElement.style.scrollBehavior = "auto";
<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>
</div>
</aside>
window.scrollTo(0, parseInt(scrollY));
<div class="main-content">
<div id="introduction" data-nav="introduction"></div>
document.documentElement.style.scrollBehavior = "smooth";
}
}
<div id="projects-section"></div>
</div>
window.addEventListener("beforeunload", saveScroll);
<script>
//document.cookie = "lang=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
let lang = getCookie("lang");
console.log(lang);
if (lang == null) {
lang = navigator.language.split("-")[0];
}
if (lang != "en" && lang != "de") {
lang = "en";
}
history.scrollRestoration = "manual";
function setupObserver() {
const sections = document.querySelectorAll("[data-nav]");
const navLinks = document.querySelectorAll(".nav-link");
function saveScroll() {
sessionStorage.setItem("scrollY", window.scrollY);
}
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
function restoreScroll() {
const scrollY = sessionStorage.getItem("scrollY");
if (scrollY !== null) {
navLinks.forEach(link => {
link.classList.toggle(
"active",
link.dataset.target === entry.target.id
);
});
document.documentElement.style.scrollBehavior = "auto";
}
});
}, {
threshold: 0.3,
rootMargin: "0px 0px -30% 0px"
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
);
});
sections.forEach(section => observer.observe(section));
}
}
});
}, {
threshold: 0.3,
rootMargin: "0px 0px -30% 0px"
});
async function loadData() {
const response = await fetch(`./lang/${lang}.json`);
const data = await response.json();
sections.forEach(section => observer.observe(section));
}
const website_title = document.getElementById("website_title");
website_title.textContent = data.title_website;
async function loadData() {
const response = await fetch(`./lang/${lang}.json`);
const image_response = await fetch(`./config/img_config.json`)
const image_config = await image_response.json()
const data = await response.json();
const introduction = document.getElementById("introduction");
const container = document.getElementById("projects-section");
const navbar = document.getElementById("navbar");
const sidebar_top = document.getElementById("sidebar-top-content");
const website_title = document.getElementById("website_title");
website_title.textContent = data.title_website;
const sidebar_top_status = document.createElement("p");
sidebar_top_status.textContent = data.status;
sidebar_top.appendChild(sidebar_top_status);
const introduction = document.getElementById("introduction");
const container = document.getElementById("projects-section");
const navbar = document.getElementById("navbar");
const sidebar_top = document.getElementById("sidebar-top-content");
const sidebar_top_profession = document.createElement("p");
sidebar_top_profession.textContent = data.profession;
sidebar_top.appendChild(sidebar_top_profession);
const sidebar_top_status = document.createElement("p");
sidebar_top_status.textContent = data.status;
sidebar_top.appendChild(sidebar_top_status);
const sidebar_top_workplace = document.createElement("p");
sidebar_top_workplace.textContent = data.workplace;
sidebar_top.appendChild(sidebar_top_workplace);
const sidebar_top_profession = document.createElement("p");
sidebar_top_profession.textContent = data.profession;
sidebar_top.appendChild(sidebar_top_profession);
const headline_introduction = document.createElement("h1");
headline_introduction.textContent = data.title_introduction;
introduction.appendChild(headline_introduction);
const sidebar_top_workplace = document.createElement("p");
sidebar_top_workplace.textContent = data.workplace;
sidebar_top.appendChild(sidebar_top_workplace);
const content_introduction = document.createElement("p");
content_introduction.textContent = data.content_introduction;
introduction.appendChild(content_introduction);
const headline_introduction = document.createElement("h1");
headline_introduction.textContent = data.title_introduction;
introduction.appendChild(headline_introduction);
const github_link_introduction = document.createElement("a");
github_link_introduction.textContent = "GitHub ↗"
github_link_introduction.className = "text-link introduction";
github_link_introduction.href = "https://github.com/marvinkrausser";
github_link_introduction.target = "_blank";
github_link_introduction.rel = "noopener noreferrer";
introduction.appendChild(github_link_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 github_link_introduction = document.createElement("a");
github_link_introduction.textContent = "GitHub ↗"
github_link_introduction.className = "text-link introduction";
github_link_introduction.href = "https://github.com/marvinkrausser";
github_link_introduction.target = "_blank";
github_link_introduction.rel = "noopener noreferrer";
introduction.appendChild(github_link_introduction);
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link";
navbar_link.href = "#introduction";
const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item";
navbar.appendChild(navbar_item);
const idx = document.createElement("span");
idx.className = "idx";
idx.textContent = "00\u00A0\u00A0\u00A0";
navbar_link.appendChild(idx);
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link";
navbar_link.href = "#introduction";
const text = document.createTextNode(data.title_introduction);
navbar_link.appendChild(text);
navbar_link.dataset.target = "introduction";
navbar_item.appendChild(navbar_link);
const idx = document.createElement("span");
idx.className = "idx";
idx.textContent = "00\u00A0\u00A0\u00A0";
navbar_link.appendChild(idx);
const navbar_group = document.createElement("li");
navbar_group.className = "navbar-group";
navbar_group.textContent = data.navbar_group
navbar.appendChild(navbar_group);
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, j) => {
const project = document.createElement("section");
project.className = "project-section";
project.id = item.id;
project.setAttribute("data-nav", item.id);
container.appendChild(project);
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");
navbar_item.className = "navbar-item";
navbar.appendChild(navbar_item);
const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item";
navbar.appendChild(navbar_item);
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link";
navbar_link.href = `#${item.id}`;
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link";
navbar_link.href = `#${item.id}`;
const idx = document.createElement("span");
idx.className = "idx";
idx.textContent = String(j + 1).padStart(2, "0") + "\u00A0\u00A0\u00A0";
navbar_link.appendChild(idx);
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 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 header = document.createElement("div");
header.className = "section-header";
project.appendChild(header);
const headerTitle = document.createElement("h1");
headerTitle.className = "section-title";
headerTitle.textContent = item.title;
header.appendChild(headerTitle);
const headerTitle = document.createElement("h1");
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 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);
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 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";
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 github_link = document.createElement("div");
github_link.className = "link-row";
project.appendChild(github_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();
const button = document.getElementById("lang-button");
const menu = document.getElementById("lang-menu");
const items = document.querySelectorAll(".lang-item");
button.textContent = lang;
button.addEventListener("click", () => {
items.forEach(item => {
if (item.dataset.lang != lang) {
item.classList.toggle("hidden");
}
});
menu.classList.toggle("hidden");
item.tags.forEach(tag_json => {
const tag = document.createElement("span");
tag.className = "tag";
tag.textContent = tag_json;
tags.appendChild(tag);
});
items.forEach(item => {
item.addEventListener("click", () => {
const lang_selected = item.dataset.lang;
const content_blocks = document.createElement("div");
content_blocks.className = "content-blocks";
project.appendChild(content_blocks);
button.textContent = item.textContent;
menu.classList.add("hidden");
items.forEach(element => {
element.classList.add("hidden");
});
item.blocks.forEach((content, i) => {
const content_block = document.createElement("div");
content_block.className = "content-block";
content_blocks.appendChild(content_block);
setCookie("lang", lang_selected, "3600");
location.reload();
});
const block_image = document.createElement("div");
const image = document.createElement("img");
const image_id = content.image;
const image_object = image_config.images.find(img => img.id === image_id);
image.className = image_object.image_pos;
image.src = image_object.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 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";
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);
}
});
document.addEventListener("click", (e) => {
if (!e.target.closest(".lang-dropdown")) {
menu.classList.add("hidden");
items.forEach(element => {
element.classList.add("hidden");
});
}
const github_link = document.createElement("div");
github_link.className = "link-row";
project.appendChild(github_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();
const button = document.getElementById("lang-button");
const menu = document.getElementById("lang-menu");
const items = document.querySelectorAll(".lang-item");
const dropdown = document.getElementById("lang-dropdown");
button.textContent = lang;
button.addEventListener("click", () => {
items.forEach(item => {
item.classList.toggle("hidden", item.dataset.lang == lang);
});
menu.classList.toggle("hidden");
dropdown.classList.toggle("show-border");
});
items.forEach(item => {
item.addEventListener("click", () => {
const lang_selected = item.dataset.lang;
button.textContent = item.textContent;
menu.classList.add("hidden");
dropdown.classList.remove("show-border");
items.forEach(element => {
element.classList.add("hidden");
});
function setCookie(name, value, maxAge) {
document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
}
setCookie("lang", lang_selected, "3600");
location.reload();
});
});
function getCookie(name) {
const cookies = document.cookie.split("; ");
document.addEventListener("click", (e) => {
if (!e.target.closest(".lang-dropdown")) {
menu.classList.add("hidden");
dropdown.classList.remove("show-border");
items.forEach(element => {
element.classList.add("hidden");
});
}
});
for (let c of cookies) {
const [key, value] = c.split("=");
if (key === name) return value;
}
function setCookie(name, value, maxAge) {
document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
}
return null;
}
</script>
function getCookie(name) {
const cookies = document.cookie.split("; ");
for (let c of cookies) {
const [key, value] = c.split("=");
if (key === name) return value;
}
return null;
}
</script>
</body>
lang/de.json
+7 -7
View File
@@ -23,12 +23,12 @@
{
"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"
"image": "pixelcnn_1"
},
{
"heading": "Seminararbeit",
"text": "Zusätzlich zum Projekt wurde eine --link-- und ein --link-- erstellt.",
"image": "images/seminararbeit.png",
"image": "pixelcnn_2",
"links": [
{
"id": "seminararbeit",
@@ -60,7 +60,7 @@
{
"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 --link-- und --link-- wurden erstellt.",
"image": "images/boardgame_demo.png",
"image": "boardgame_1",
"links": [
{
"id": "entwicklerhandbuch",
@@ -77,12 +77,12 @@
{
"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"
"image": "boardgame_2"
},
{
"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"
"image": "boardgame_3"
}
]
},
@@ -107,7 +107,7 @@
{
"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"
"image": "towerdefense_1"
}
]
},
@@ -126,7 +126,7 @@
{
"heading": "Technisches",
"text": "Die Website wurde mit HTML, CSS und JavaScript ohne die Verwendung externer Libraries entwickelt. Der Inhalt ist in sprachspezifischen JSON-Dateien gespeichert. Die Website wird dynamisch mithilfe von JavaScript aus der jeweiligen JSON-Datei generiert. Das Git-Repository verwendet einen Feature-Branch-Workflow, um die Korrektheit der Website auch während der Entwicklung sicherzustellen.",
"image": "images/personal_website.png"
"image": "personal_website_1"
}
]
}
lang/en.json
+7 -7
View File
@@ -23,12 +23,12 @@
{
"heading": "Image generation with Deep Learning",
"text": "The model uses Convolutional Neural Networks and deep learning to generate images. The MNIST digits dataset was used for training, and the model was trained on a GPU using CUDA. Additionally, the model can be specifically controlled with class inputs, as shown in the example with digits from 0 to 9. Due to limited resources, my model is restricted to low-complexity datasets.",
"image": "images/mnist_conditioned_gen_results_cropped.png"
"image": "pixelcnn_1"
},
{
"heading": "Seminar paper",
"text": "A --link-- and --link-- were created alongside the Project.",
"image": "images/seminararbeit.png",
"image": "pixelcnn_2",
"links": [
{
"id": "seminararbeit",
@@ -60,7 +60,7 @@
{
"heading": "Client",
"text": "The game client was developed using Unity and C# and is based on a turn-based movement and card system. All designs were created independently. A --link-- and --link-- were also created.",
"image": "images/boardgame_demo.png",
"image": "boardgame_1",
"links": [
{
"id": "entwicklerhandbuch",
@@ -77,12 +77,12 @@
{
"heading": "Server",
"text": "The server was implemented in C# using a layered architecture that ensures a clear separation between WebSocket connection management and game-related logic (e.g. player assignment and session management). Communication between server and client was standardized using a defined JSON schema to ensure compatibility and interchangeability of components developed by different teams.",
"image": "images/boardgame_connection.png"
"image": "boardgame_2"
},
{
"heading": "AI Players",
"text": "In addition, several rule-based AI players were implemented that can be integrated into the system. Code quality was ensured through automated tests. Team collaboration followed agile methods (Scrum), and both server and AI were deployed using Docker containers.",
"image": "images/boardgame_ai.png"
"image": "boardgame_3"
}
]
},
@@ -107,7 +107,7 @@
{
"heading": "Singleplayer Tower Defense Game",
"text": "Simple tower defense game created entirely from scratch with custom designs. Uses the A* algorithm to calculate the pathfinding route. A demo build is available in the GitHub repository.",
"image": "images/towerdefense_demo.png"
"image": "towerdefense_1"
}
]
},
@@ -126,7 +126,7 @@
{
"heading": "Technical details",
"text": "The website was developed using HTML, CSS, and JavaScript without the use of external libraries. The content is stored in language-specific JSON files. The website is dynamically generated using JavaScript based on the respective JSON file. The Git repository follows a feature-branch workflow to ensure correctness of the website even during development.",
"image": "images/personal_website.png"
"image": "personal_website_1"
}
]
}
main_style.css
+60 -30
View File
@@ -9,6 +9,7 @@
--sans: 'DM Sans', system-ui, sans-serif;
--nav-w: 230px;
--font-size: 17px;
--margin-main-content: 100px;
}
@media (prefers-color-scheme: dark) {
@@ -67,21 +68,36 @@ a {
display: flex;
gap: 3px;
margin-top: 10px;
width: 83px;
width: 91px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: none;
background: none;
margin-bottom: 10px;
}
.lang-dropdown.show-border {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg2);
}
.lang-menu {
display: flex;
align-items: center;
gap: 3px;
margin-top: 5px;
}
.lang-item {
cursor: pointer;
background-color: var(--surface);
width: 40px;
height: 20px;
text-align: center;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
@@ -187,10 +203,16 @@ option {
font-size: 13px;
}
.sidebar-bottom-margin {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
}
#sidebar-bottom {
padding: 36px 32px 28px;
border-top: 1px solid var(--border);
margin-top: auto;
display: flex;
flex-direction: column;
gap: 14px;
@@ -208,9 +230,9 @@ option {
#introduction {
padding-top: 100px;
margin-left: 60px;
margin-left: var(--margin-main-content);
margin-bottom: 60px;
margin-right: 100px;
margin-right: var(--margin-main-content);
}
#introduction p {
@@ -227,15 +249,15 @@ option {
}
.content-block {
height: 400px;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.section-header {
margin: 80px;
margin-left: 60px;
margin-right: 40%;
margin-left: var(--margin-main-content);
margin-right: var(--margin-main-content);
}
.tags {
@@ -263,34 +285,48 @@ option {
overflow: hidden;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: flex;
}
.block-image.right {
margin-right: 60px;
margin-right: var(--margin-main-content);
border-left: 1px solid var(--border);
justify-content: left;
}
.block-image.left {
margin-left: 60px;
margin-left: var(--margin-main-content);
border-right: 1px solid var(--border);
justify-content: right;
}
.block-image img {
height: 100%;
width: 100%;
max-width: 700px;
max-height: 700px;
object-fit: cover;
}
.block-image img.left {
object-position: left;
}
.block-image img.center {
object-position: center;
}
.block-image img.right {
object-position: right;
}
.block-text {
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid var(--border);
overflow: hidden;
}
.block-text.right {
margin-right: 60px;
padding-left: 60px;
}
.block-text.left {
padding-right: 60px;
margin-left: 60px;
margin-right: var(--margin-main-content);
padding-left: var(--margin-main-content);
}
.text-content {
@@ -302,12 +338,6 @@ option {
font-weight: normal;
}
.block-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-link:hover {
border-color: var(--text);
}
@@ -325,7 +355,7 @@ option {
}
.link-row {
margin: 60px;
margin: var(--margin-main-content);
margin-top: 30px;
}