diff --git a/index.html b/index.html
index a58eec9..0cdeabd 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
+
diff --git a/lang/de.json b/lang/de.json
index 45dc64a..ba860fc 100644
--- a/lang/de.json
+++ b/lang/de.json
@@ -6,8 +6,45 @@
"profession": "Medieninformatik",
"workplace": "Universität Ulm",
"github_desc": "Auf GitHub ansehen ↗",
- "navbar_group": "Projekte",
- "content": [
+ "navbar_group_work": "Berufserfahrung",
+ "navbar_group_projects": "Projekte",
+ "content_work": [
+ {
+ "id": "siemens_mobility",
+ "title": "Siemens Mobility GmbH",
+ "company": "Siemens Mobility GmbH",
+ "description": "Werkstudent Softwareentwicklung in Simulationsumgebung (Hybrid)",
+ "type": "Hybrid",
+ "tasks": [
+ {
+ "title": "Netzwerkentwicklung & Integration",
+ "content": "Konzeption und Implementierung einer stabilen Remote-Schnittstelle zur Anbindung externer Clients an eine Unity-Simulationsumgebung."
+ },
+ {
+ "title": "Server-Infrastruktur & Deployment",
+ "content": "Einrichtung, Absicherung und Administration eines Debian 13-Servers sowie Bereitstellung der Anwendungsinstanzen."
+ },
+ {
+ "title": "Agile Teamarbeit & Quality Assurance",
+ "content": "Aktive Kollaboration im Entwicklerteam unter Anwendung von Feature-Branching-Workflows (Git) und systematischen Code-Reviews."
+ }
+ ],
+ "tech": [
+ "Unity",
+ "WebRTC",
+ "Linux",
+ "GitLab",
+ "C#"
+ ],
+ "start": "2026-05-15",
+ "end": "heute",
+ "locale": "de-DE",
+ "from": "von",
+ "to": "bis",
+ "at": "bei"
+ }
+ ],
+ "content_projects": [
{
"id": "cnn_website",
"title": "CNN Website",
diff --git a/lang/en.json b/lang/en.json
index d1639da..37a6a02 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -6,8 +6,46 @@
"profession": "Media Informatics",
"workplace": "Ulm University",
"github_desc": "View on GitHub ↗",
- "navbar_group": "Projects",
- "content": [
+ "navbar_group_work": "Career",
+ "navbar_group_projects": "Projects",
+ "content_work": [
+ {
+ "id": "siemens_mobility",
+ "title": "Siemens Mobility GmbH",
+ "company": "Siemens Mobility GmbH",
+ "description": "Working Student Software Engineering in Simulation Environment (Hybrid)",
+ "type": "Hybrid",
+ "tasks": [
+ {
+ "title": "Network Development & Integration",
+ "content": "Design and implementation of a stable remote interface to connect external clients to a Unity simulation environment."
+ },
+ {
+ "title": "Server Infrastructure & Deployment",
+ "content": "Setup, securing, and administration of a Debian 13 server as well as deployment of application instances."
+ },
+ {
+ "title": "Agile Teamwork & Quality Assurance",
+ "content": "Active collaboration within the development team using feature-branching workflows (Git) and systematic code reviews."
+ }
+ ],
+ "tech": [
+ "Unity",
+ "WebRTC",
+ "Linux",
+ "GitLab",
+ "C#",
+ "FFmpeg"
+ ],
+ "start": "2026-05-15",
+ "end": "present",
+ "locale": "en-US",
+ "from": "from",
+ "to": "to",
+ "at": "at"
+}
+ ],
+ "content_projects": [
{
"id": "cnn_website",
"title": "CNN Website",
diff --git a/scripts/main_page.js b/scripts/main_page.js
index 67dac46..8f00625 100644
--- a/scripts/main_page.js
+++ b/scripts/main_page.js
@@ -126,6 +126,27 @@ function setupObserver() {
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`)
@@ -196,13 +217,84 @@ async function loadData() {
create_navbar_entry(navbar, navbar_mobile_links, data.title_introduction, "introduction", 0);
- const navbar_group = document.createElement("li");
- navbar_group.className = "navbar-group";
- navbar_group.textContent = data.navbar_group
- navbar.appendChild(navbar_group);
+ 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);
- data.content.forEach((item, j) => {
+ 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;
diff --git a/styles/sidebar_style.css b/styles/sidebar_style.css
index f19ee71..98eb3a8 100644
--- a/styles/sidebar_style.css
+++ b/styles/sidebar_style.css
@@ -62,7 +62,7 @@
}
.navbar-group {
- margin-top: 15px;
+ margin-top: 25px;
margin-bottom: 5px;
font-size: calc(var(--font-size) + 0.1rem);
font-family: var(--serif);
diff --git a/styles/work_style.css b/styles/work_style.css
new file mode 100644
index 0000000..a17b898
--- /dev/null
+++ b/styles/work_style.css
@@ -0,0 +1,34 @@
+.work-date {
+ margin-top: 30px;
+ color: var(--muted);
+ font-size: 0.95rem;
+ line-height: 1.6;
+}
+
+.tasks-div {
+ margin-top: 60px;
+ display: flex;
+ flex-direction: column;
+ gap: 35px;
+ margin-bottom: 120px;
+ margin-left: var(--margin-main-content);
+}
+
+.task-div {
+ display: flex;
+ flex-direction: column;
+ gap: 0px;
+ align-items: baseline;
+}
+
+.task-title {
+ color: var(--text);
+ font-weight: 700;
+ font-size: 1rem;
+}
+
+.task-content {
+ color: var(--muted);
+ font-size: 1rem;
+ line-height: 1.7;
+}