diff --git a/index.html b/index.html index ce83c1e..05605ae 100644 --- a/index.html +++ b/index.html @@ -17,16 +17,20 @@ name="keywords" content="freelance software developer, accessible web development, barrierefreie Webentwicklung, React developer, TypeScript, web accessibility, BFSG, Germany" /> - + - - - + + + - + - - - + + + + + + + - + + + - + + + + + + + + + +
diff --git a/prerender.js b/prerender.js index 201a062..fdf2240 100644 --- a/prerender.js +++ b/prerender.js @@ -6,17 +6,24 @@ * Usage: node prerender.js (run after `vite build`) */ -import { createServer } from 'http' -import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs' -import { join, dirname } from 'path' -import { fileURLToPath } from 'url' +import { createServer } from 'node:http' +import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs' +import { join, dirname } from 'node:path' +import { fileURLToPath } from 'node:url' import puppeteer from 'puppeteer' const __dirname = dirname(fileURLToPath(import.meta.url)) const DIST = join(__dirname, 'dist') const PORT = 4173 -const ROUTES = ['/', '/technical', '/imprint', '/privacy-policy'] +const ROUTES = [ + '/de/', + '/de/technical', + '/en/', + '/en/technical', + '/imprint', + '/privacy-policy', +] /** Minimal static file server that falls back to index.html (SPA). */ function startServer() { @@ -81,7 +88,10 @@ async function prerender() { await page.close() // Write to dist//index.html - const outDir = route === '/' ? DIST : join(DIST, route) + // Normalise the route: strip trailing slash for directory creation (except root, which is now redirected) + const routeDir = + route.endsWith('/') && route !== '/' ? route.slice(0, -1) : route + const outDir = routeDir === '/' ? DIST : join(DIST, routeDir) if (!existsSync(outDir)) { mkdirSync(outDir, { recursive: true }) } @@ -95,7 +105,9 @@ async function prerender() { console.log('\n✅ Prerendering complete!\n') } -prerender().catch((err) => { +try { + await prerender() +} catch (err) { console.error('Prerendering failed:', err) process.exit(1) -}) +} diff --git a/public/og-image.png b/public/og-image.png new file mode 100644 index 0000000..9c74e21 Binary files /dev/null and b/public/og-image.png differ diff --git a/public/sitemap.xml b/public/sitemap.xml index 53c760d..8bf6994 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -1,18 +1,44 @@ + - https://sascha-bach.de/ - - + https://sascha-bach.de/de/ + + + + 2025-06-28 monthly 1.0 + - https://sascha-bach.de/technical - - + https://sascha-bach.de/en/ + + + + 2025-06-28 + monthly + 0.9 + + + + https://sascha-bach.de/de/technical + + + + 2025-06-28 monthly 0.8 + + + https://sascha-bach.de/en/technical + + + + 2025-06-28 + monthly + 0.7 + diff --git a/src/app/AppRouter.tsx b/src/app/AppRouter.tsx index 956139e..193cec8 100644 --- a/src/app/AppRouter.tsx +++ b/src/app/AppRouter.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom'; import '../scss/App.scss'; import Navbar from '../components/layout/Navigation'; import Footer from '../components/layout/Footer'; @@ -8,13 +8,73 @@ import LandingPage from '../pages/LandingPage'; import ImprintPage from '../pages/ImprintPage'; import PrivacyPolicy from '../pages/PrivacyPolicy'; import BackToTopButton from '../components/BackToTopButton'; +import { getLanguageFromPath, useLanguage } from '../contexts/LanguageContext'; import type { Theme } from '../data/types'; +/** Syncs the LanguageContext whenever the URL prefix (/de/ or /en/) changes. */ +function LanguageSyncer() { + const { setLanguage, language } = useLanguage(); + const location = useLocation(); + + useEffect(() => { + const urlLang = getLanguageFromPath(location.pathname); + if (urlLang && urlLang !== language) { + setLanguage(urlLang); + } + }, [location.pathname, language, setLanguage]); + + return null; +} + +function AppShell({ theme, setTheme }: Readonly<{ theme: Theme; setTheme: React.Dispatch>; }>) { + const location = useLocation(); + + useEffect(() => { + const hash = location.hash.substring(1); + if (hash) { + setTimeout(() => { + const element = document.getElementById(hash); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + }, 100); + } + }, [location.hash]); + + return ( +
+ Skip to main content + + +
+ + {/* Root redirects → German (primary market) */} + } /> + } /> + + {/* German routes */} + } /> + } /> + + {/* English routes */} + } /> + } /> + + {/* Shared pages (noindex, language-independent) */} + } /> + } /> + +
+
+ +
+ ); +} + function AppRouter() { const [theme, setTheme] = useState('light'); useEffect(() => { - // Check for saved theme preference or default to light mode const savedTheme = localStorage.getItem('theme') as Theme | null; if (savedTheme) { setTheme(savedTheme); @@ -22,52 +82,13 @@ function AppRouter() { }, []); useEffect(() => { - // Apply theme to document and save preference document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); }, [theme]); - useEffect(() => { - // Handle hash-based navigation for sections - const handleHashChange = () => { - const hash = globalThis.location.hash.substring(1); - if (hash) { - setTimeout(() => { - const element = document.getElementById(hash); - if (element) { - element.scrollIntoView({ behavior: 'smooth' }); - } - }, 100); - } - }; - - // Check hash on initial load - handleHashChange(); - - // Listen for hash changes - globalThis.addEventListener('hashchange', handleHashChange); - - return () => { - globalThis.removeEventListener('hashchange', handleHashChange); - }; - }, []); - return ( -
- Skip to main content - -
- - } /> - } /> - } /> - } /> - -
-
- -
+ ); } diff --git a/src/app/PortfolioApp.tsx b/src/app/PortfolioApp.tsx index 667908b..9d18304 100644 --- a/src/app/PortfolioApp.tsx +++ b/src/app/PortfolioApp.tsx @@ -1,9 +1,11 @@ -import { LanguageProvider } from '../contexts/LanguageContext'; +import { LanguageProvider, getLanguageFromPath } from '../contexts/LanguageContext'; import AppRouter from './AppRouter'; function PortfolioApp() { + const initialLanguage = getLanguageFromPath(globalThis.location.pathname) ?? 'de'; + return ( - + ); diff --git a/src/assets/og-image.png b/src/assets/og-image.png new file mode 100644 index 0000000..9c74e21 Binary files /dev/null and b/src/assets/og-image.png differ diff --git a/src/components/LanguageToggle.tsx b/src/components/LanguageToggle.tsx index d365b09..a664ca5 100644 --- a/src/components/LanguageToggle.tsx +++ b/src/components/LanguageToggle.tsx @@ -1,15 +1,26 @@ +import { useNavigate, useLocation } from 'react-router-dom'; import { useLanguage } from '../contexts/LanguageContext'; import type { Language } from '../data/types'; import '../scss/language-toggle.scss'; import { useScreenReaderAnnouncements } from '../hooks/useScreenReaderAnnouncements'; +/** Swap /de/ ↔ /en/ prefix (or /de/technical ↔ /en/technical) in the pathname. */ +function getEquivalentPath(pathname: string, targetLang: Language): string { + if (pathname.startsWith('/de')) return pathname.replace(/^\/de/, `/${targetLang}`); + if (pathname.startsWith('/en')) return pathname.replace(/^\/en/, `/${targetLang}`); + return `/${targetLang}/`; +} + export default function LanguageToggle() { - const { language, setLanguage } = useLanguage(); + const { language } = useLanguage(); const { announce } = useScreenReaderAnnouncements(); + const navigate = useNavigate(); + const location = useLocation(); const handleLanguageChange = (newLang: Language) => { if (newLang !== language) { - setLanguage(newLang); + const targetPath = getEquivalentPath(location.pathname, newLang); + navigate(targetPath); announce(`Language changed to ${newLang === 'en' ? 'English' : 'Deutsch'}`); } }; diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 8b2b48b..e7e6b45 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -23,14 +23,15 @@ export default function Navbar({ const navigate = useNavigate(); const { texts } = useLanguage(); - const isLandingPage = location.pathname === '/'; + const isLandingPage = location.pathname === '/de/' || location.pathname === '/en/' || location.pathname === '/'; + const technicalPath = location.pathname.startsWith('/en') ? '/en/technical' : '/de/technical'; const menuItems = isLandingPage ? texts.navigation.landingMenuItems : texts.navigation.menuItems; // Track active section based on scroll position useEffect(() => { - if (location.pathname !== '/technical' && location.pathname !== '/') { + if (location.pathname !== technicalPath && !isLandingPage) { setActiveSection(''); return; } @@ -66,7 +67,7 @@ export default function Navbar({ return (
{ e.preventDefault(); diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx index d111e84..16f2bf8 100644 --- a/src/components/sections/AboutSection.tsx +++ b/src/components/sections/AboutSection.tsx @@ -79,8 +79,8 @@ export default function AboutSection(props: AboutSectionProps = {}) { {greeting ?? `Hi, I'm ${name}!`}
- {bio.map((paragraph, index) => ( -

{paragraph}

+ {bio.map((paragraph) => ( +

{paragraph}

))}
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx index 94c2b1a..aa18523 100644 --- a/src/components/sections/HeroSection.tsx +++ b/src/components/sections/HeroSection.tsx @@ -14,6 +14,9 @@ interface HeroSectionProps { tertiaryButtonText?: string; statItems?: StatItem[]; hideStats?: boolean; + showPrimaryButton?: boolean; + showSecondaryButton?: boolean; + showTertiaryButton?: boolean; } export default function HeroSection(props: HeroSectionProps = {}) { @@ -30,6 +33,9 @@ export default function HeroSection(props: HeroSectionProps = {}) { tertiaryButtonText = texts.tertiaryButtonText, statItems = texts.statItems, hideStats = false, + showPrimaryButton = true, + showSecondaryButton = true, + showTertiaryButton = true, } = props; const location = useLocation(); const navigate = useNavigate(); @@ -54,14 +60,9 @@ export default function HeroSection(props: HeroSectionProps = {}) { link.remove(); announce('Resume download started successfully'); - } catch (error) { + } catch { announce('Resume download failed, opening in new tab'); - - try { - window.open(resumePDF, '_blank'); - } catch { - announce('Unable to access resume file'); - } + window.open(resumePDF, '_blank'); } }; @@ -88,32 +89,38 @@ export default function HeroSection(props: HeroSectionProps = {}) { {/* Hidden descriptions for screen readers */} diff --git a/src/config/certifications-config.ts b/src/config/certifications-config.ts index a375dae..4878f2c 100644 --- a/src/config/certifications-config.ts +++ b/src/config/certifications-config.ts @@ -1,4 +1,4 @@ -import { certifications } from './locales/en/certifications'; +import { certifications } from './locales/en/technical/certifications'; import type { Certification } from '../data/Certification'; export const certificationsData: Certification[] = certifications.certificationItems diff --git a/src/config/locales/de/index.ts b/src/config/locales/de/index.ts index f4d8981..e13fd64 100644 --- a/src/config/locales/de/index.ts +++ b/src/config/locales/de/index.ts @@ -1,18 +1,19 @@ import { navigation } from './navigation'; import { themeToggle } from '../../theme-toggle'; import { footer } from './footer'; -import { hero } from './hero'; -import { about } from './about'; -import { landingAboutMe } from './landing-aboutme'; -import { landingReasons } from './landing-reasons'; -import { landingExperience } from './landing-experience'; -import { landingWinnings } from './landing-winnings'; -import { landingProcesses } from './landing-processes'; -import { landingReferences } from './landing-references'; -import { services } from './services'; -import { skills } from './skills'; +import { hero } from './technical/hero'; +import { about } from './technical/about'; +import { landingAboutMe } from './landing/landing-aboutme'; +import { landingHero } from './landing/landing-hero'; +import { landingReasons } from './landing/landing-reasons'; +import { landingExperience } from './landing/landing-experience'; +import { landingWinnings } from './landing/landing-winnings'; +import { landingProcesses } from './landing/landing-processes'; +import { landingReferences } from './landing/landing-references'; +import { services } from './technical/services'; +import { skills } from './technical/skills'; import { projects } from './projects'; -import { certifications } from './certifications'; +import { certifications } from './technical/certifications'; import { contact } from './contact'; import { imprint } from './imprint'; import { privacyPolicy } from './privacy-policy'; @@ -25,6 +26,7 @@ export const de = { hero, about, landingAboutMe, + landingHero, landingReasons, landingExperience, landingWinnings, diff --git a/src/config/locales/de/landing-aboutme.ts b/src/config/locales/de/landing-aboutme.ts deleted file mode 100644 index c131e19..0000000 --- a/src/config/locales/de/landing-aboutme.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const landingAboutMe = { - title: 'Mehr Kunden durch Barrierefreiheit', - subtitle: '', - greeting: 'Hi, ich bin Sascha.', - name: 'Sascha', - bio: [ - 'Ich verhelfe Unternehmen zu Webseiten, die von allen genutzt werden können. Eine Webseite, die für alle funktioniert, erreicht alle.', - ], - featureCards: [] as Array<{ title: string; description: string; }>, -}; diff --git a/src/config/locales/de/landing/landing-aboutme.ts b/src/config/locales/de/landing/landing-aboutme.ts new file mode 100644 index 0000000..ec8e426 --- /dev/null +++ b/src/config/locales/de/landing/landing-aboutme.ts @@ -0,0 +1,17 @@ +export const landingAboutMe = { + title: 'Über mich', + subtitle: '', + greeting: 'Hi, ich bin Sascha.', + name: 'Sascha', + bio: [ + `Seit ich zum ersten Mal mit dem Thema Barrierefreiheit in Berührung gekommen bin, habe ich + für mich einen Mehrwert in der Webentwicklung entdeckt, der mich seitdem nicht mehr loslässt. + Barrierefreiheit ist für mich nicht nur ein technisches Thema, sondern eine Angelegenheit, die mit meinen persönlichen Werten + von Inklusion und Gleichberechtigung übereinstimmt. + Ich helfe Webagenturen und Unternehmen bei der Entwicklung und Umsetzung von Apps und Webseiten mit und ohne Barrierefreiheit.`, + `In meiner Freizeit tanze ich Brasilianischen Zouk und West Coast Swing. Ich beschäftige mich mit alternativen + Beziehungsformen und bin ein großer Fan von Science-Fiction-Filmen. Außerdem interessiere ich mich für Persönlichkeitsentwicklung und + Ethik in der Technologie. Ich bin immer offen für neue Kontakte und spannende Projekte, also zögert nicht, mich zu kontaktieren!`, + ], + featureCards: [] as Array<{ title: string; description: string; }>, +}; diff --git a/src/config/locales/de/landing-experience.ts b/src/config/locales/de/landing/landing-experience.ts similarity index 100% rename from src/config/locales/de/landing-experience.ts rename to src/config/locales/de/landing/landing-experience.ts diff --git a/src/config/locales/de/landing/landing-hero.ts b/src/config/locales/de/landing/landing-hero.ts new file mode 100644 index 0000000..93d234c --- /dev/null +++ b/src/config/locales/de/landing/landing-hero.ts @@ -0,0 +1,5 @@ +export const landingHero = { + title: 'Barrierefreiheit: 20\u00A0% mehr Reichweite, 100\u00A0% mehr Zugang.', + description: 'Ich helfe Ihnen, Ihre Website für jeden zugänglich zu machen – im Einklang mit dem BFSG.', + tertiaryButtonText: 'Kontakt aufnehmen', +}; diff --git a/src/config/locales/de/landing-processes.ts b/src/config/locales/de/landing/landing-processes.ts similarity index 100% rename from src/config/locales/de/landing-processes.ts rename to src/config/locales/de/landing/landing-processes.ts diff --git a/src/config/locales/de/landing-reasons.ts b/src/config/locales/de/landing/landing-reasons.ts similarity index 85% rename from src/config/locales/de/landing-reasons.ts rename to src/config/locales/de/landing/landing-reasons.ts index ccf6735..75cb3c6 100644 --- a/src/config/locales/de/landing-reasons.ts +++ b/src/config/locales/de/landing/landing-reasons.ts @@ -3,11 +3,11 @@ export const landingReasons = { reasons: [ { - stat: '15 %', - text: 'aller Menschen in Deutschland haben eine Beeinträchtigung. Das sind 12 Millionen potenzielle Kunden.', + stat: '20\u00A0%', + text: 'aller Menschen in Deutschland haben eine Beeinträchtigung. Das sind 16 Millionen potenzielle Kunden.', }, { - stat: '80 %', + stat: '80\u00A0%', text: 'dieser Menschen verlassen Webseiten, die nicht für sie funktionieren.', }, { diff --git a/src/config/locales/de/landing-references.ts b/src/config/locales/de/landing/landing-references.ts similarity index 100% rename from src/config/locales/de/landing-references.ts rename to src/config/locales/de/landing/landing-references.ts diff --git a/src/config/locales/de/landing-winnings.ts b/src/config/locales/de/landing/landing-winnings.ts similarity index 100% rename from src/config/locales/de/landing-winnings.ts rename to src/config/locales/de/landing/landing-winnings.ts diff --git a/src/config/locales/de/about.ts b/src/config/locales/de/technical/about.ts similarity index 97% rename from src/config/locales/de/about.ts rename to src/config/locales/de/technical/about.ts index 855d031..bd8f023 100644 --- a/src/config/locales/de/about.ts +++ b/src/config/locales/de/technical/about.ts @@ -6,7 +6,7 @@ export const about = { bio: [ 'Ich habe Informatik an der TU Darmstadt studiert und 2016 meinen Bachelor mit einer Arbeit über Motion Sickness in Virtual Reality abgeschlossen. Seitdem arbeite ich als Software- und Webentwickler mit Schwerpunkt auf Angular und React.', 'In meiner Arbeit habe ich gesehen, dass jedes Unternehmen anders ist, aber viele stehen vor der gleichen Herausforderung: ihre digitale Präsenz zugänglich, modern und zukunftssicher zu halten. Vielen Unternehmen ist bereits bewusst, dass Barrierefreiheit gesetzlich vorgeschrieben ist, aber in der Praxis kommt es vor allem darauf an, dass eine Website für alle Nutzer einfach und angenehm funktioniert.', - 'Meine Spezialisierung liegt in Web Accessibility (WCAG 2.1, BFSG, European Accessibility Act). Ich helfe Unternehmen dabei, ihre Websites und Anwendungen zu aktualisieren, sodass sie konform und gleichzeitig für jeden einfach zu bedienen sind. Was meine Kunden schätzen, ist, dass ich technisches Fachwissen in Angular, React und TypeScript mit einem menschenzentrierten Ansatz verbinde. Denn Barrierefreiheit geht nicht nur um Code, sondern um Menschen.', + 'Meine Spezialisierung liegt in Web Accessibility (WCAG 2.2, BFSG, European Accessibility Act). Ich helfe Unternehmen dabei, ihre Websites und Anwendungen zu aktualisieren, sodass sie konform und gleichzeitig für jeden einfach zu bedienen sind. Was meine Kunden schätzen, ist, dass ich technisches Fachwissen in Angular, React und TypeScript mit einem menschenzentrierten Ansatz verbinde. Denn Barrierefreiheit geht nicht nur um Code, sondern um Menschen.', 'Wenn Sie sich fragen, ob Ihre Website bereits den Standards für Barrierefreiheit entspricht, oder wenn Sie das Gefühl haben, dass es Zeit ist, Ihre Online-Präsenz inklusiver und rechtssicher zu gestalten, würde ich Sie gerne unterstützen. Oft können bereits wenige klare Schritte einen großen Unterschied machen und Ihrer Website helfen, mehr Menschen zu erreichen und sich von der Konkurrenz abzuheben.', 'Lassen Sie uns verbinden und schauen, wie wir Ihre Website barrierefrei, modern und zukunftssicher machen können.', ], diff --git a/src/config/locales/de/certifications.ts b/src/config/locales/de/technical/certifications.ts similarity index 72% rename from src/config/locales/de/certifications.ts rename to src/config/locales/de/technical/certifications.ts index ef95eb3..1e35ce8 100644 --- a/src/config/locales/de/certifications.ts +++ b/src/config/locales/de/technical/certifications.ts @@ -1,4 +1,4 @@ -import { certificationItems } from '../../certifications-data'; +import { certificationItems } from '../../../certifications-data'; export const certifications = { title: 'Zertifizierungen & Erfolge', diff --git a/src/config/locales/de/hero.ts b/src/config/locales/de/technical/hero.ts similarity index 89% rename from src/config/locales/de/hero.ts rename to src/config/locales/de/technical/hero.ts index 1968d7b..4db7850 100644 --- a/src/config/locales/de/hero.ts +++ b/src/config/locales/de/technical/hero.ts @@ -1,5 +1,5 @@ export const hero = { - title: 'Jeder verdient ein reibungsloses Online-Erlebnis', + title: 'Barrierefreie Webentwicklung für alle', description: 'Ich helfe Ihnen, barrierefreie Websites zu erstellen, die jeden Besucher einbeziehen, im Einklang mit dem Barrierefreiheitsstärkungsgesetz.', primaryButtonText: 'Projekte ansehen', diff --git a/src/config/locales/de/services.ts b/src/config/locales/de/technical/services.ts similarity index 100% rename from src/config/locales/de/services.ts rename to src/config/locales/de/technical/services.ts diff --git a/src/config/locales/de/skills.ts b/src/config/locales/de/technical/skills.ts similarity index 100% rename from src/config/locales/de/skills.ts rename to src/config/locales/de/technical/skills.ts diff --git a/src/config/locales/en/TextConfig.ts b/src/config/locales/en/TextConfig.ts index 089bfbb..1894060 100644 --- a/src/config/locales/en/TextConfig.ts +++ b/src/config/locales/en/TextConfig.ts @@ -52,6 +52,13 @@ export interface TextConfig { }>; }; + // Landing Hero Section + landingHero: { + title: string; + description: string; + tertiaryButtonText: string; + }; + // Landing About Me Section landingAboutMe: { title: string; diff --git a/src/config/locales/en/index.ts b/src/config/locales/en/index.ts index 01d84c0..e516834 100644 --- a/src/config/locales/en/index.ts +++ b/src/config/locales/en/index.ts @@ -1,18 +1,19 @@ import { navigation } from './navigation'; import { themeToggle } from '../../theme-toggle'; import { footer } from './footer'; -import { hero } from './hero'; -import { about } from './about'; -import { landingAboutMe } from './landing-aboutme'; -import { landingReasons } from './landing-reasons'; -import { landingExperience } from './landing-experience'; -import { landingWinnings } from './landing-winnings'; -import { landingProcesses } from './landing-processes'; -import { landingReferences } from './landing-references'; -import { services } from './services'; -import { skills } from './skills'; +import { hero } from './technical/hero'; +import { about } from './technical/about'; +import { landingAboutMe } from './landing/landing-aboutme'; +import { landingHero } from './landing/landing-hero'; +import { landingReasons } from './landing/landing-reasons'; +import { landingExperience } from './landing/landing-experience'; +import { landingWinnings } from './landing/landing-winnings'; +import { landingProcesses } from './landing/landing-processes'; +import { landingReferences } from './landing/landing-references'; +import { services } from './technical/services'; +import { skills } from './technical/skills'; import { projects } from './projects'; -import { certifications } from './certifications'; +import { certifications } from './technical/certifications'; import { contact } from './contact'; import { imprint } from './imprint'; import { privacyPolicy } from './privacy-policy'; @@ -29,6 +30,7 @@ export const en: TextConfig = { hero, about, landingAboutMe, + landingHero, landingReasons, landingExperience, landingWinnings, diff --git a/src/config/locales/en/landing-aboutme.ts b/src/config/locales/en/landing/landing-aboutme.ts similarity index 100% rename from src/config/locales/en/landing-aboutme.ts rename to src/config/locales/en/landing/landing-aboutme.ts diff --git a/src/config/locales/en/landing-experience.ts b/src/config/locales/en/landing/landing-experience.ts similarity index 100% rename from src/config/locales/en/landing-experience.ts rename to src/config/locales/en/landing/landing-experience.ts diff --git a/src/config/locales/en/landing/landing-hero.ts b/src/config/locales/en/landing/landing-hero.ts new file mode 100644 index 0000000..c040dad --- /dev/null +++ b/src/config/locales/en/landing/landing-hero.ts @@ -0,0 +1,5 @@ +export const landingHero = { + title: 'Accessible websites that reach more customers and ensure legal compliance', + description: 'I help you make your website accessible to everyone – compliant with accessibility laws.', + tertiaryButtonText: 'Get in Touch', +}; diff --git a/src/config/locales/en/landing-processes.ts b/src/config/locales/en/landing/landing-processes.ts similarity index 100% rename from src/config/locales/en/landing-processes.ts rename to src/config/locales/en/landing/landing-processes.ts diff --git a/src/config/locales/en/landing-reasons.ts b/src/config/locales/en/landing/landing-reasons.ts similarity index 100% rename from src/config/locales/en/landing-reasons.ts rename to src/config/locales/en/landing/landing-reasons.ts diff --git a/src/config/locales/en/landing-references.ts b/src/config/locales/en/landing/landing-references.ts similarity index 100% rename from src/config/locales/en/landing-references.ts rename to src/config/locales/en/landing/landing-references.ts diff --git a/src/config/locales/en/landing-winnings.ts b/src/config/locales/en/landing/landing-winnings.ts similarity index 100% rename from src/config/locales/en/landing-winnings.ts rename to src/config/locales/en/landing/landing-winnings.ts diff --git a/src/config/locales/en/about.ts b/src/config/locales/en/technical/about.ts similarity index 100% rename from src/config/locales/en/about.ts rename to src/config/locales/en/technical/about.ts diff --git a/src/config/locales/en/certifications.ts b/src/config/locales/en/technical/certifications.ts similarity index 71% rename from src/config/locales/en/certifications.ts rename to src/config/locales/en/technical/certifications.ts index 5d91c51..d10a981 100644 --- a/src/config/locales/en/certifications.ts +++ b/src/config/locales/en/technical/certifications.ts @@ -1,4 +1,4 @@ -import { certificationItems } from '../../certifications-data'; +import { certificationItems } from '../../../certifications-data'; export const certifications = { title: 'Certifications & Achievements', diff --git a/src/config/locales/en/hero.ts b/src/config/locales/en/technical/hero.ts similarity index 100% rename from src/config/locales/en/hero.ts rename to src/config/locales/en/technical/hero.ts diff --git a/src/config/locales/en/services.ts b/src/config/locales/en/technical/services.ts similarity index 100% rename from src/config/locales/en/services.ts rename to src/config/locales/en/technical/services.ts diff --git a/src/config/locales/en/skills.ts b/src/config/locales/en/technical/skills.ts similarity index 100% rename from src/config/locales/en/skills.ts rename to src/config/locales/en/technical/skills.ts diff --git a/src/contexts/LanguageContext.tsx b/src/contexts/LanguageContext.tsx index d00e9fe..5571c95 100644 --- a/src/contexts/LanguageContext.tsx +++ b/src/contexts/LanguageContext.tsx @@ -11,46 +11,29 @@ interface LanguageContextType { const LanguageContext = createContext(undefined); -const LANGUAGE_KEY = 'preferred-language'; - -function getBrowserLanguage(): Language { - const browserLang = navigator.language.toLowerCase(); - if (browserLang.startsWith('en')) { - return 'en'; - } - return 'de'; // Default to German for all other languages -} - -function getSavedLanguage(): Language | null { - const saved = localStorage.getItem(LANGUAGE_KEY); - if (saved === 'en' || saved === 'de') { - return saved; - } +/** Derive the language from the URL pathname prefix (/en/… or /de/…). */ +export function getLanguageFromPath(pathname: string): Language | null { + if (pathname.startsWith('/en')) return 'en'; + if (pathname.startsWith('/de')) return 'de'; return null; } -export function LanguageProvider({ children }: { children: ReactNode; }) { - const [language, setLanguageState] = useState(() => { - // First check localStorage, then browser language, then default to German - return getSavedLanguage() || getBrowserLanguage(); - }); +export function LanguageProvider({ initialLanguage = 'de', children }: Readonly<{ initialLanguage?: Language; children: ReactNode; }>) { + const [language, setLanguage] = useState(initialLanguage); const texts = language === 'de' ? de : en; - const setLanguage = (lang: Language) => { - setLanguageState(lang); - localStorage.setItem(LANGUAGE_KEY, lang); - // Update HTML lang attribute for accessibility and SEO + const handleSetLanguage = (lang: Language) => { + setLanguage(lang); document.documentElement.lang = lang; }; useEffect(() => { - // Set initial lang attribute document.documentElement.lang = language; }, [language]); return ( - + {children} ); diff --git a/src/hooks/usePageSeo.ts b/src/hooks/usePageSeo.ts index bd4ed13..4986e84 100644 --- a/src/hooks/usePageSeo.ts +++ b/src/hooks/usePageSeo.ts @@ -5,11 +5,12 @@ interface SeoProps { description: string; canonical?: string; noIndex?: boolean; + image?: string; } const BASE_URL = 'https://sascha-bach.de'; -export function usePageSeo({ title, description, canonical, noIndex }: SeoProps) { +export function usePageSeo({ title, description, canonical, noIndex, image }: SeoProps) { useEffect(() => { document.title = title; @@ -30,6 +31,12 @@ export function usePageSeo({ title, description, canonical, noIndex }: SeoProps) setMeta('twitter:title', title); setMeta('twitter:description', description); + if (image) { + const imageUrl = image.startsWith('http') ? image : `${BASE_URL}${image}`; + setMeta('og:image', imageUrl, true); + setMeta('twitter:image', imageUrl); + } + if (canonical) { setMeta('og:url', `${BASE_URL}${canonical}`, true); diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 5d3d9b2..3e3746e 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -6,12 +6,18 @@ import CertificationsSection from '../components/sections/CertificationsSection' import ProjectsSection from '../components/sections/ProjectsSection'; import ContactSection from '../components/sections/ContactSection'; import { usePageSeo } from '../hooks/usePageSeo'; +import { useLanguage } from '../contexts/LanguageContext'; export default function HomePage() { + const { language } = useLanguage(); usePageSeo({ - title: 'Sascha Bach | Technical Portfolio – Skills, Services & Projects', - description: 'Explore the technical portfolio of Sascha Bach: services, skills, certifications, and projects in React, TypeScript, and accessible web development.', - canonical: '/technical', + title: language === 'de' + ? 'Sascha Bach | Technisches Portfolio – Skills, Services & Projekte' + : 'Sascha Bach | Technical Portfolio – Skills, Services & Projects', + description: language === 'de' + ? 'Das technische Portfolio von Sascha Bach: Services, Fähigkeiten, Zertifizierungen und Projekte in React, TypeScript und barrierefreier Webentwicklung.' + : 'Explore the technical portfolio of Sascha Bach: services, skills, certifications, and projects in React, TypeScript, and accessible web development.', + canonical: `/${language}/technical`, }); return ( diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index e9a7c1c..169b49a 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -1,3 +1,4 @@ +import HeroSection from '../components/sections/HeroSection'; import LandingAboutMeSection from '../components/landing/LandingAboutMeSection'; import ReasonsSection from '../components/landing/ReasonsSection'; import ExperienceSection from '../components/landing/ExperienceSection'; @@ -7,16 +8,31 @@ import ProjectsSection from '../components/sections/ProjectsSection'; import ReferencesSection from '../components/landing/ReferencesSection'; import ContactSection from '../components/sections/ContactSection'; import { usePageSeo } from '../hooks/usePageSeo'; +import { useLanguage } from '../contexts/LanguageContext'; export default function LandingPage() { + const { language, texts } = useLanguage(); + const t = texts.landingHero; usePageSeo({ - title: 'Sascha Bach | Freelance Software Developer – Accessible Web Development', - description: 'Freelance software developer in Germany specializing in accessible web development. Building inclusive websites compliant with the Accessibility Act.', - canonical: '/', + title: language === 'de' + ? 'Sascha Bach | Freelance Softwareentwickler – Barrierefreie Webentwicklung' + : 'Sascha Bach | Freelance Software Developer – Accessible Web Development', + description: language === 'de' + ? 'Freelance Softwareentwickler in Deutschland spezialisiert auf barrierefreie Webentwicklung. Ich baue inklusive Websites konform zum BFSG mit React, TypeScript und modernen Frameworks.' + : 'Freelance software developer in Germany specializing in accessible web development. Building inclusive websites compliant with the Accessibility Act.', + canonical: `/${language}/`, }); return ( <> + diff --git a/src/scss/sections/hero-section.scss b/src/scss/sections/hero-section.scss index f5f0c2c..852bff4 100644 --- a/src/scss/sections/hero-section.scss +++ b/src/scss/sections/hero-section.scss @@ -47,7 +47,7 @@ } &__container { - max-width: 800px; + max-width: 900px; width: 100%; text-align: center; @include flex-center; diff --git a/src/scss/sections/landing-hero-section.scss b/src/scss/sections/landing-hero-section.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/utils/scrollUtils.ts b/src/utils/scrollUtils.ts index 6e2faff..54aa508 100644 --- a/src/utils/scrollUtils.ts +++ b/src/utils/scrollUtils.ts @@ -3,13 +3,30 @@ import type { NavigateFunction } from 'react-router-dom'; // Offset to account for sticky navbar height (65px) plus some padding const SCROLL_OFFSET = 65; +function isScrollablePath(pathname: string): boolean { + return ( + pathname === '/de/' || + pathname === '/en/' || + pathname === '/de/technical' || + pathname === '/en/technical' || + // legacy fallbacks + pathname === '/' || + pathname === '/technical' + ); +} + +/** Returns /de/technical or /en/technical depending on the current path prefix. */ +function getTechnicalPath(currentPath: string): string { + if (currentPath.startsWith('/en')) return '/en/technical'; + return '/de/technical'; +} + export function scrollToSection( sectionId: string, currentPath: string, navigate?: NavigateFunction ): void { - const isScrollablePage = currentPath === '/technical' || currentPath === '/'; - if (isScrollablePage) { + if (isScrollablePath(currentPath)) { const element = document.getElementById(sectionId); if (element) { const elementPosition = element.getBoundingClientRect().top; @@ -21,11 +38,9 @@ export function scrollToSection( }); } } else if (navigate) { - // If we're on another page, navigate to homepage with hash - navigate(`/technical#${sectionId}`); + navigate(`${getTechnicalPath(currentPath)}#${sectionId}`); } else { - // Fallback: direct navigation without router - globalThis.location.href = `/technical#${sectionId}`; + globalThis.location.href = `${getTechnicalPath(currentPath)}#${sectionId}`; } } diff --git a/vercel.json b/vercel.json index 3cdefcc..ce49b4c 100644 --- a/vercel.json +++ b/vercel.json @@ -3,13 +3,13 @@ "outputDirectory": "dist", "framework": "vite", "rewrites": [ - { - "source": "/privacy-policy", - "destination": "/privacy-policy.html" - }, - { - "source": "/(.*)", - "destination": "/index.html" - } + { "source": "/", "destination": "/de/" }, + { "source": "/technical", "destination": "/de/technical" }, + { "source": "/de/", "destination": "/de/index.html" }, + { "source": "/de/technical", "destination": "/de/technical/index.html" }, + { "source": "/en/", "destination": "/en/index.html" }, + { "source": "/en/technical", "destination": "/en/technical/index.html" }, + { "source": "/privacy-policy", "destination": "/privacy-policy.html" }, + { "source": "/(.*)", "destination": "/index.html" } ] }