diff --git a/index.html b/index.html index 0cdeabd..9d27b72 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@
- + diff --git a/scripts/core/cookies.js b/scripts/core/cookies.js new file mode 100644 index 0000000..a2d0923 --- /dev/null +++ b/scripts/core/cookies.js @@ -0,0 +1,14 @@ +export function setCookie(name, value, maxAge) { + document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`; +} + +export 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; +} diff --git a/scripts/core/data.js b/scripts/core/data.js new file mode 100644 index 0000000..6cc4809 --- /dev/null +++ b/scripts/core/data.js @@ -0,0 +1,9 @@ +export async function loadContent(lang) { + const response = await fetch(`./lang/${lang}.json`); + return response.json(); +} + +export async function loadImageConfig() { + const response = await fetch("./config/img_config.json"); + return response.json(); +} diff --git a/scripts/core/dates.js b/scripts/core/dates.js new file mode 100644 index 0000000..2df9931 --- /dev/null +++ b/scripts/core/dates.js @@ -0,0 +1,19 @@ +export function formatDate(date, locale) { + const dateObj = new Date(date); + + if (isNaN(dateObj.getTime())) { + return date; + } + + return new Intl.DateTimeFormat(locale || "de-DE", { + dateStyle: "medium" + }).format(dateObj); +} + +// "from to ", with the wording taken from the language file. +export function formatDateRange(item) { + const startDate = formatDate(item.start, item.locale); + const endDate = formatDate(item.end, item.locale); + + return item.from + "\n" + startDate + "\n" + item.to + "\n" + endDate; +} diff --git a/scripts/core/dom.js b/scripts/core/dom.js new file mode 100644 index 0000000..8ff3dc1 --- /dev/null +++ b/scripts/core/dom.js @@ -0,0 +1,7 @@ +// Creates an element with an optional class name and text content. +export function el(tag, className, text) { + const element = document.createElement(tag); + if (className) element.className = className; + if (text !== undefined) element.textContent = text; + return element; +} diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..a3be413 --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,41 @@ +import { loadContent, loadImageConfig } from "./core/data.js"; +import { detectLanguage, setupLanguageDropdown } from "./ui/language.js"; +import { setupThemeToggle } from "./ui/theme.js"; +import { createNavbar, setupMobileNavbar, hideMobileNavbar } from "./ui/navbar.js"; +import { setupScrollRestoration, restoreScroll, setupScrollSpy } from "./ui/scroll.js"; +import { renderSidebarTop } from "./sections/sidebar.js"; +import { renderIntroduction } from "./sections/introduction.js"; +import { renderWork } from "./sections/work.js"; +import { renderProjects } from "./sections/projects.js"; + +const lang = detectLanguage(); + +// Each control exists twice: sidebar (desktop) and mobile bar. +setupThemeToggle("themeToggle", ["themeToggle2"]); +setupThemeToggle("themeToggle2", ["themeToggle"]); +setupLanguageDropdown(lang, "lang-button", "lang-menu", "lang-dropdown"); +setupLanguageDropdown(lang, "lang-button2", "lang-menu2", "lang-dropdown2"); + +setupScrollRestoration(); + +async function init() { + const data = await loadContent(lang); + const imageConfig = await loadImageConfig(); + + document.getElementById("website_title").textContent = data.title_website; + + setupMobileNavbar(); + const navbar = createNavbar(); + const container = document.getElementById("projects-section"); + + renderSidebarTop(data); + renderIntroduction(data, navbar); + renderWork(container, navbar, data); + renderProjects(container, navbar, data, imageConfig); + + restoreScroll(); + setupScrollSpy(); + hideMobileNavbar(); +} + +init(); diff --git a/scripts/main_page.js b/scripts/main_page.js deleted file mode 100644 index 8f00625..0000000 --- a/scripts/main_page.js +++ /dev/null @@ -1,459 +0,0 @@ -let lang = getCookie("lang"); -if (lang == null) { - lang = navigator.language.split("-")[0]; -} -if (lang != "en" && lang != "de") { - lang = "en"; -} - -document.documentElement.lang = lang; - -function setupLangDropdown(buttonId, menuId, dropdownId, themeToggle, themeToggleOthers) { - const toggle = document.getElementById(themeToggle); - const toggleElements = themeToggleOthers.map(id => document.getElementById(id)); - - toggle.addEventListener("change", () => { - document.documentElement.classList.toggle("dark", toggle.checked); - if (toggle.checked) { - setCookie("theme", "dark", 60 * 60 * 24 * 7); - toggleElements.forEach(element => { - element.checked = true; - }); - } - else { - setCookie("theme", "light", 60 * 60 * 24 * 7); - toggleElements.forEach(element => { - element.checked = false; - }); - } - - }); - - const theme = getCookie("theme"); - - if (theme === "dark") { - document.documentElement.classList.add("dark"); - toggle.checked = true; - } - - const button = document.getElementById(buttonId); - const menu = document.getElementById(menuId); - const dropdown = document.getElementById(dropdownId); - const items = menu.querySelectorAll(".lang-item"); - - button.textContent = lang; - - button.addEventListener("click", (e) => { - e.stopPropagation(); - - 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(el => el.classList.add("hidden")); - - setCookie("lang", lang_selected, "3600"); - location.reload(); - }); - }); - - document.addEventListener("click", (e) => { - if (!e.target.closest(`#${dropdownId}`)) { - menu.classList.add("hidden"); - dropdown.classList.remove("show-border"); - items.forEach(el => el.classList.add("hidden")); - } - }); -} -setupLangDropdown("lang-button", "lang-menu", "lang-dropdown", "themeToggle", ["themeToggle2"]); -setupLangDropdown("lang-button2", "lang-menu2", "lang-dropdown2", "themeToggle2", ["themeToggle"]); - -history.scrollRestoration = "manual"; - -function saveScroll() { - sessionStorage.setItem("scrollY", window.scrollY); -} - -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, - rootMargin: "-10% 0px -80% 0px" - }); - - sections.forEach(section => observer.observe(section)); -} - -function createDate(date, lang){ - const dateObj = new Date(date); - - if (isNaN(dateObj.getTime())) { - return date; - } - - const formattedDate = new Intl.DateTimeFormat(lang || 'de-DE', { - dateStyle: 'medium' - }).format(dateObj); - - return formattedDate -} - -function StartEndDate(item){ - const startDate = createDate(item.start, item.locale); - const endDate = createDate(item.end, item.locale); - - return item.from + "\n" + startDate + "\n" + item.to + "\n" + endDate; -} - -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 website_title = document.getElementById("website_title"); - website_title.textContent = data.title_website; - - 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 navbar_mobile = document.getElementById("navbar-mobile"); - const button_mobile2 = document.getElementById("button-mobile"); - - document.addEventListener("click", (e) => { - if (!e.target.closest("#navbar-mobile") && !e.target.closest("#button-mobile") && !navbar_mobile.classList.contains("inactive")) { - navbar_mobile.classList.add("inactive"); - button_mobile2.classList.remove("inactive"); - } - }); - - const navbar_mobile_links = document.getElementById("navbar-mobile-links"); - const button_navbar_mobile = document.createElement("button"); - const button_mobile = document.getElementById("button-mobile"); - button_navbar_mobile.textContent = ""; - button_mobile.textContent = ""; - button_navbar_mobile.classList = "button-mobile navbar"; - navbar_mobile_links.appendChild(button_navbar_mobile); - button_navbar_mobile.addEventListener("click", () => { - navbar_mobile.classList.toggle("inactive"); - button_mobile.classList.toggle("inactive"); - }); - button_mobile.addEventListener("click", () => { - navbar_mobile.classList.toggle("inactive"); - button_mobile.classList.toggle("inactive"); - }); - - 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; - introduction.appendChild(headline_introduction); - - const content_introduction = document.createElement("p"); - content_introduction.textContent = data.content_introduction; - introduction.appendChild(content_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); - - create_navbar_entry(navbar, navbar_mobile_links, data.title_introduction, "introduction", 0); - - const navbar_group_work = document.createElement("li"); - navbar_group_work.className = "navbar-group"; - navbar_group_work.textContent = data.navbar_group_work - navbar.appendChild(navbar_group_work); - - - data.content_work.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); - - create_navbar_entry(navbar, navbar_mobile_links, item.title, item.id, j + 1); - - - 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 headerDescRole = document.createElement("p"); - headerDescRole.className = "section-desc"; - headerDescRole.textContent = item.description; - header.appendChild(headerDescRole); - - const headerDescCompany = document.createElement("p"); - headerDescCompany.className = "section-desc"; - headerDescCompany.textContent = StartEndDate(item) + "\n" + item.at + "\n" + item.company; - header.appendChild(headerDescCompany); - - - const techs = document.createElement("div"); - techs.className = "tags"; - header.appendChild(techs); - - item.tech.forEach(tech_json => { - const tech = document.createElement("span"); - tech.className = "tag"; - tech.textContent = tech_json; - techs.appendChild(tech); - }); - - - const tasks = document.createElement("div"); - tasks.className = "tasks-div"; - project.appendChild(tasks); - - item.tasks.forEach(task_json => { - const task = document.createElement("div"); - task.className = "task-div"; - - - const taskTitle = document.createElement("span"); - taskTitle.className = "task-title"; - taskTitle.textContent = task_json.title + ": "; - task.appendChild(taskTitle); - - const taskContent = document.createElement("span"); - taskContent.className = "task-content"; - taskContent.textContent = task_json.content; - task.appendChild(taskContent); - - tasks.appendChild(task); - }); - }) - - - const navbar_group_projects = document.createElement("li"); - navbar_group_projects.className = "navbar-group"; - navbar_group_projects.textContent = data.navbar_group_projects - navbar.appendChild(navbar_group_projects); - - data.content_projects.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); - - create_navbar_entry(navbar, navbar_mobile_links, item.title, item.id, j + 1); - - 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 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"); - 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("h2"); - 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(); - - navbar_mobile.classList.add("inactive"); -} - -loadData(); - -function create_navbar_entry(navbar, navbar_mobile_links, title, id, j) { - 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 = `#${id}`; - - const idx = document.createElement("span"); - idx.className = "idx"; - idx.textContent = String(j).padStart(2, "0") + "\u00A0\u00A0\u00A0"; - navbar_link.appendChild(idx); - - const text = document.createTextNode(title); - navbar_link.appendChild(text); - navbar_link.dataset.target = id; - navbar_item.appendChild(navbar_link); - - create_navbar_entry_mobile(navbar_mobile_links, title, id) -} - -function create_navbar_entry_mobile(navbar_mobile_links, title, id) { - const navbar_item = document.createElement("li"); - navbar_item.className = "navbar-item-mobile"; - navbar_mobile_links.appendChild(navbar_item); - - const navbar_link = document.createElement("a"); - navbar_link.className = "nav-link-mobile"; - navbar_link.href = `#${id}`; - navbar_link.textContent = title; - navbar_item.appendChild(navbar_link); -} - -function setCookie(name, value, maxAge) { - document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`; -} - -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; -} diff --git a/scripts/sections/common.js b/scripts/sections/common.js new file mode 100644 index 0000000..0129b3f --- /dev/null +++ b/scripts/sections/common.js @@ -0,0 +1,31 @@ +import { el } from "../core/dom.js"; + +// Shared skeleton of work and project sections:
+ header with title, +// plus the matching navbar entry. +export function createSection(container, navbar, item, index) { + const section = el("section", "project-section"); + section.id = item.id; + section.setAttribute("data-nav", item.id); + container.appendChild(section); + + navbar.addEntry(item.title, item.id, index + 1); + + const header = el("div", "section-header"); + section.appendChild(header); + header.appendChild(el("h1", "section-title", item.title)); + + return { section, header }; +} + +export function appendDescription(header, text) { + header.appendChild(el("p", "section-desc", text)); +} + +export function appendTags(header, tags) { + const tagList = el("div", "tags"); + header.appendChild(tagList); + + tags.forEach(tag => { + tagList.appendChild(el("span", "tag", tag)); + }); +} diff --git a/scripts/sections/introduction.js b/scripts/sections/introduction.js new file mode 100644 index 0000000..7ba11bf --- /dev/null +++ b/scripts/sections/introduction.js @@ -0,0 +1,16 @@ +import { el } from "../core/dom.js"; + +export function renderIntroduction(data, navbar) { + const introduction = document.getElementById("introduction"); + + introduction.appendChild(el("h1", "", data.title_introduction)); + introduction.appendChild(el("p", "", data.content_introduction)); + + const githubLink = el("a", "text-link introduction", "GitHub ↗"); + githubLink.href = "https://github.com/marvinkrausser"; + githubLink.target = "_blank"; + githubLink.rel = "noopener noreferrer"; + introduction.appendChild(githubLink); + + navbar.addEntry(data.title_introduction, "introduction", 0); +} diff --git a/scripts/sections/projects.js b/scripts/sections/projects.js new file mode 100644 index 0000000..5979e8e --- /dev/null +++ b/scripts/sections/projects.js @@ -0,0 +1,90 @@ +import { el } from "../core/dom.js"; +import { createSection, appendDescription, appendTags } from "./common.js"; + +export function renderProjects(container, navbar, data, imageConfig) { + navbar.addGroup(data.navbar_group_projects); + + data.content_projects.forEach((item, index) => { + const { section, header } = createSection(container, navbar, item, index); + + appendDescription(header, item.description); + appendTags(header, item.tags); + + const blocks = el("div", "content-blocks"); + section.appendChild(blocks); + item.blocks.forEach((block, i) => { + blocks.appendChild(createBlock(block, i, imageConfig)); + }); + + section.appendChild(createGithubLink(item.github, data.github_desc)); + }); +} + +// One image + text block. Odd blocks put the image on the right. +function createBlock(block, index, imageConfig) { + const contentBlock = el("div", "content-block"); + const blockImage = createImage(block.image, imageConfig); + const blockText = createText(block); + + if (index % 2 == 1) { + blockImage.className = "block-image right"; + blockText.className = "block-text left"; + contentBlock.appendChild(blockText); + contentBlock.appendChild(blockImage); + } else { + blockImage.className = "block-image left"; + blockText.className = "block-text right"; + contentBlock.appendChild(blockImage); + contentBlock.appendChild(blockText); + } + + return contentBlock; +} + +function createImage(imageId, imageConfig) { + const blockImage = el("div"); + const imageObject = imageConfig.images.find(img => img.id === imageId); + + const image = el("img", imageObject.image_pos); + image.src = imageObject.image; + image.loading = "lazy"; + blockImage.appendChild(image); + + return blockImage; +} + +function createText(block) { + const blockText = el("div"); + blockText.appendChild(el("h2", "", block.heading)); + + // "--link--" in the text marks where the next entry of block.links goes. + const parts = block.text.split("--link--"); + const textContent = el("div", "text-content"); + blockText.appendChild(textContent); + + parts.forEach((part, i) => { + textContent.appendChild(el("span", "", part)); + + if (i < parts.length - 1) { + const link = el("a", "text-link", block.links[i].desc); + link.href = block.links[i].link; + link.target = "_blank"; + link.rel = "noopener noreferrer"; + textContent.appendChild(link); + } + }); + + return blockText; +} + +function createGithubLink(url, text) { + const row = el("div", "link-row"); + + const link = el("a", "text-link", text); + link.href = url; + link.target = "_blank"; + link.rel = "noopener noreferrer"; + row.appendChild(link); + + return row; +} diff --git a/scripts/sections/sidebar.js b/scripts/sections/sidebar.js new file mode 100644 index 0000000..8dc8a7d --- /dev/null +++ b/scripts/sections/sidebar.js @@ -0,0 +1,10 @@ +import { el } from "../core/dom.js"; + +// Status / profession / workplace lines below the name. +export function renderSidebarTop(data) { + const content = document.getElementById("sidebar-top-content"); + + content.appendChild(el("p", "", data.status)); + content.appendChild(el("p", "", data.profession)); + content.appendChild(el("p", "", data.workplace)); +} diff --git a/scripts/sections/work.js b/scripts/sections/work.js new file mode 100644 index 0000000..feb9819 --- /dev/null +++ b/scripts/sections/work.js @@ -0,0 +1,30 @@ +import { el } from "../core/dom.js"; +import { formatDateRange } from "../core/dates.js"; +import { createSection, appendDescription, appendTags } from "./common.js"; + +export function renderWork(container, navbar, data) { + navbar.addGroup(data.navbar_group_work); + + data.content_work.forEach((item, index) => { + const { section, header } = createSection(container, navbar, item, index); + + appendDescription(header, item.description); + appendDescription(header, formatDateRange(item) + "\n" + item.at + "\n" + item.company); + appendTags(header, item.tech); + + section.appendChild(createTasks(item.tasks)); + }); +} + +function createTasks(tasks) { + const tasksDiv = el("div", "tasks-div"); + + tasks.forEach(task => { + const taskDiv = el("div", "task-div"); + taskDiv.appendChild(el("span", "task-title", task.title + ": ")); + taskDiv.appendChild(el("span", "task-content", task.content)); + tasksDiv.appendChild(taskDiv); + }); + + return tasksDiv; +} diff --git a/scripts/ui/language.js b/scripts/ui/language.js new file mode 100644 index 0000000..689cc6d --- /dev/null +++ b/scripts/ui/language.js @@ -0,0 +1,61 @@ +import { getCookie, setCookie } from "../core/cookies.js"; + +const SUPPORTED_LANGUAGES = ["en", "de"]; + +// Language from cookie, else browser language, else "en". +export function detectLanguage() { + let lang = getCookie("lang"); + if (lang == null) { + lang = navigator.language.split("-")[0]; + } + if (!SUPPORTED_LANGUAGES.includes(lang)) { + lang = "en"; + } + + document.documentElement.lang = lang; + return lang; +} + +export function setupLanguageDropdown(lang, buttonId, menuId, dropdownId) { + const button = document.getElementById(buttonId); + const menu = document.getElementById(menuId); + const dropdown = document.getElementById(dropdownId); + const items = menu.querySelectorAll(".lang-item"); + + button.textContent = lang; + + button.addEventListener("click", (e) => { + e.stopPropagation(); + + 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(el => el.classList.add("hidden")); + + setCookie("lang", lang_selected, "3600"); + location.reload(); + }); + }); + + document.addEventListener("click", (e) => { + if (!e.target.closest(`#${dropdownId}`)) { + menu.classList.add("hidden"); + dropdown.classList.remove("show-border"); + items.forEach(el => el.classList.add("hidden")); + } + }); +} diff --git a/scripts/ui/navbar.js b/scripts/ui/navbar.js new file mode 100644 index 0000000..a2e1de4 --- /dev/null +++ b/scripts/ui/navbar.js @@ -0,0 +1,73 @@ +import { el } from "../core/dom.js"; + +const navbarMobile = () => document.getElementById("navbar-mobile"); +const openButton = () => document.getElementById("button-mobile"); + +// Mobile bar: open/close buttons and closing on outside click. +export function setupMobileNavbar() { + const navbar = navbarMobile(); + const button = openButton(); + const links = document.getElementById("navbar-mobile-links"); + + const toggle = () => { + navbar.classList.toggle("inactive"); + button.classList.toggle("inactive"); + }; + + document.addEventListener("click", (e) => { + if (!e.target.closest("#navbar-mobile") && !e.target.closest("#button-mobile") && !navbar.classList.contains("inactive")) { + navbar.classList.add("inactive"); + button.classList.remove("inactive"); + } + }); + + const closeButton = el("button", "button-mobile navbar", ""); + links.appendChild(closeButton); + closeButton.addEventListener("click", toggle); + + button.textContent = ""; + button.addEventListener("click", toggle); +} + +export function hideMobileNavbar() { + navbarMobile().classList.add("inactive"); +} + +// Desktop sidebar navigation and mobile bar links, filled together. +export function createNavbar() { + const desktop = document.getElementById("navbar"); + const mobile = document.getElementById("navbar-mobile-links"); + + return { + addGroup(title) { + desktop.appendChild(el("li", "navbar-group", title)); + }, + + addEntry(title, id, index) { + addDesktopEntry(desktop, title, id, index); + addMobileEntry(mobile, title, id); + } + }; +} + +function addDesktopEntry(navbar, title, id, index) { + const item = el("li", "navbar-item"); + navbar.appendChild(item); + + const link = el("a", "nav-link"); + link.href = `#${id}`; + link.dataset.target = id; + item.appendChild(link); + + link.appendChild(el("span", "idx", String(index).padStart(2, "0") + "   ")); + link.appendChild(document.createTextNode(title)); +} + +function addMobileEntry(navbar, title, id) { + const item = el("li", "navbar-item-mobile"); + navbar.appendChild(item); + + const link = el("a", "nav-link-mobile", title); + link.href = `#${id}`; + item.appendChild(link); +} diff --git a/scripts/ui/scroll.js b/scripts/ui/scroll.js new file mode 100644 index 0000000..69b26a4 --- /dev/null +++ b/scripts/ui/scroll.js @@ -0,0 +1,48 @@ +// Scroll position restore across reloads (e.g. after switching language). + +function saveScroll() { + sessionStorage.setItem("scrollY", window.scrollY); +} + +export function setupScrollRestoration() { + history.scrollRestoration = "manual"; + window.addEventListener("beforeunload", saveScroll); +} + +export 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"; + } +} + +// Highlights the sidebar link of the section currently in view. +export function setupScrollSpy() { + 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, + rootMargin: "-10% 0px -80% 0px" + }); + + sections.forEach(section => observer.observe(section)); +} diff --git a/scripts/ui/theme.js b/scripts/ui/theme.js new file mode 100644 index 0000000..dec3d17 --- /dev/null +++ b/scripts/ui/theme.js @@ -0,0 +1,22 @@ +import { getCookie, setCookie } from "../core/cookies.js"; + +const THEME_MAX_AGE = 60 * 60 * 24 * 7; + +// Wires a dark-mode toggle and keeps the other toggles (sidebar / mobile bar) in sync. +export function setupThemeToggle(toggleId, otherToggleIds) { + const toggle = document.getElementById(toggleId); + const otherToggles = otherToggleIds.map(id => document.getElementById(id)); + + toggle.addEventListener("change", () => { + document.documentElement.classList.toggle("dark", toggle.checked); + setCookie("theme", toggle.checked ? "dark" : "light", THEME_MAX_AGE); + otherToggles.forEach(other => { + other.checked = toggle.checked; + }); + }); + + if (getCookie("theme") === "dark") { + document.documentElement.classList.add("dark"); + toggle.checked = true; + } +} diff --git a/styles/work_style.css b/styles/work_style.css index 30a92a7..8db6315 100644 --- a/styles/work_style.css +++ b/styles/work_style.css @@ -1,5 +1,5 @@ /* Work / career sections. - DOM (see loadData in main_page.js): + DOM (see scripts/sections/work.js): .section-header > h1 + p.section-desc (role) + p.section-desc (dates, company) + .tags .tasks-div > .task-div > span.task-title + span.task-content */