From 46d21aa7f52d6c254a569436e616595216467b2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 12 Aug 2026 18:40:47 +0200
Subject: [PATCH] fix(hero): render localized heading lines

---
 messages/de.json                        |  6 ++++--
 messages/en.json                        |  6 ++++--
 src/lib/components/PortfolioPage.svelte | 20 ++++++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/messages/de.json b/messages/de.json
index c9afb10..874962a 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -22,8 +22,10 @@
 	"theme_use_light": "Helles Farbschema verwenden",
 	"theme_use_dark": "Dunkles Farbschema verwenden",
 	"hero_role": "Full Stack Developer",
-	"hero_title": "Software Qualität",
-	"hero_accent": "sichtbar gemacht.",
+	"hero_heading_line_1": "Software",
+	"hero_heading_line_2": "Qualität",
+	"hero_heading_line_3": "sichtbar",
+	"hero_heading_line_4": "gemacht.",
 	"hero_browse_projects": "Projekte ansehen",
 	"hero_contact": "Kontakt aufnehmen",
 	"cv_pdf_download": "CV als PDF laden",
diff --git a/messages/en.json b/messages/en.json
index ce38780..4f6a099 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -22,8 +22,10 @@
 	"theme_use_light": "Use light color theme",
 	"theme_use_dark": "Use dark color theme",
 	"hero_role": "Full Stack Developer",
-	"hero_title": "Software quality",
-	"hero_accent": "made visible.",
+	"hero_heading_line_1": "Software",
+	"hero_heading_line_2": "quality",
+	"hero_heading_line_3": "made",
+	"hero_heading_line_4": "visible.",
 	"hero_browse_projects": "Browse projects",
 	"hero_contact": "Get in touch",
 	"cv_pdf_download": "Download CV (PDF)",
diff --git a/src/lib/components/PortfolioPage.svelte b/src/lib/components/PortfolioPage.svelte
index 4e4d830..e284c59 100644
--- a/src/lib/components/PortfolioPage.svelte
+++ b/src/lib/components/PortfolioPage.svelte
@@ -245,10 +245,22 @@ markUsed(() => [
 			class="grid gap-10 xl:grid-cols-[minmax(0,1.35fr)_minmax(24rem,0.9fr)]"
 		>
 			<div class="min-w-0 space-y-8">
-				<h1 id="intro-title" class="hero-heading theme-heading max-w-4xl" lang={locale}>
-					{t(m.hero_title)}
-					<br />
-					<span class="text-[var(--color-brand-cyan)]">{t(m.hero_accent)}</span>
+				<h1
+					id="intro-title"
+					class="hero-heading theme-heading max-w-4xl max-[23rem]:text-5xl"
+					lang={locale}
+					aria-label={`${t(m.hero_heading_line_1)} ${t(m.hero_heading_line_2)} ${t(m.hero_heading_line_3)} ${t(m.hero_heading_line_4)}`}
+				>
+					<span aria-hidden="true">
+						<span class="block">{t(m.hero_heading_line_1)}</span>
+						<span class="block">{t(m.hero_heading_line_2)}</span>
+						<span class="block text-[var(--color-brand-cyan)]">
+							{t(m.hero_heading_line_3)}
+						</span>
+						<span class="block text-[var(--color-brand-cyan)]">
+							{t(m.hero_heading_line_4)}
+						</span>
+					</span>
 				</h1>
 				<p class="text-lg text-[var(--color-brand-text)]">{content.basics.summary}</p>
 				<ul class="flex list-none flex-wrap gap-4 p-0">