diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx index 54eaa41..7b79049 100644 --- a/src/components/sections/AboutSection.tsx +++ b/src/components/sections/AboutSection.tsx @@ -14,6 +14,7 @@ interface AboutSectionProps { export default function AboutSection(props: AboutSectionProps = {}) { const texts = getTexts().about; + const accessibilityTexts = getTexts().accessibility; // Use centralized texts as defaults, allow props to override const { @@ -22,32 +23,12 @@ export default function AboutSection(props: AboutSectionProps = {}) { subtitle = texts.subtitle, bio = texts.bio, profileImage = saschaImage, - featureCards = [ - { - icon: Code, - title: "Web Development", - description: "Building modern web applications with Angular and React frameworks, leveraging TypeScript and JavaScript for robust, scalable solutions.", - colorClass: "primary" - }, - { - icon: Palette, - title: "Responsive Design", - description: "Creating pixel-perfect, responsive interfaces that work seamlessly across all devices and screen sizes.", - colorClass: "secondary" - }, - { - icon: ShieldCheck, - title: "Cross-Browser Compatibility", - description: "Ensuring consistent user experiences across all major browsers with thorough testing and optimization.", - colorClass: "tertiary" - }, - { - icon: Eye, - title: "Web Accessibility", - description: "Implementing accessibility best practices to deliver websites that support screen readers, keyboard navigation, and assistive technologies.", - colorClass: "quaternary" - } - ] + featureCards = texts.featureCards.map((card, index) => ({ + icon: [Code, Palette, ShieldCheck, Eye][index] || Code, + title: card.title, + description: card.description, + colorClass: ["primary", "secondary", "tertiary", "quaternary"][index] || "primary" + })) } = props; return ( @@ -65,8 +46,8 @@ export default function AboutSection(props: AboutSectionProps = {}) { {/* Skip link for keyboard navigation */}
diff --git a/src/components/sections/CertificationsSection.tsx b/src/components/sections/CertificationsSection.tsx index ae88754..f29769d 100644 --- a/src/components/sections/CertificationsSection.tsx +++ b/src/components/sections/CertificationsSection.tsx @@ -10,43 +10,18 @@ interface CertificationsSectionProps { export default function CertificationsSection(props: CertificationsSectionProps = {}) { const texts = getTexts().certifications; + const accessibilityTexts = getTexts().accessibility; // Use centralized texts as defaults, allow props to override const { title = texts.title, subtitle = texts.subtitle, - certifications = [ - { - name: "Practical Prompt Engineering Masterclass: Hands-On Learning", - issuer: "Udemy Lecture - Asif Farooqi, Abdullah Dar", - year: "2025", - icon: "" - }, - { - name: "Understanding Typescript", - issuer: "Udemy Lecture - Maximilian Schwarzmüller", - year: "2025", - icon: "" - }, - { - name: "Angular Step by Step", - issuer: "Udemy Lecture - Shivprasad Koirala", - year: "2020", - icon: "" - }, - { - name: "Angular and Typescript", - issuer: "LinkedIn TestDome", - year: "2020", - icon: "" - }, - { - name: "Bachelor of Science in Computer Science", - issuer: "TU Darmstadt", - year: "2015", - icon: "" - } - ] + certifications = texts.certificationItems.map((cert, index) => ({ + name: cert.name, + issuer: cert.issuer, + year: ["2025", "2025", "2020", "2020", "2015"][index] || "2025", + icon: "" + })) } = props; // Sort certifications by year in descending order (newest first) @@ -70,7 +45,7 @@ export default function CertificationsSection(props: CertificationsSectionProps {/* Skip link for keyboard navigation */} diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx index caa2f69..70790bb 100644 --- a/src/components/sections/ContactSection.tsx +++ b/src/components/sections/ContactSection.tsx @@ -40,14 +40,14 @@ export default function ContactSection(props: ContactSectionProps = {}) { // Enhanced email handler with better accessibility const handleEmailClick = () => { const email = getEmailAddress(); - const subject = encodeURIComponent("Portfolio Inquiry - Let's discuss your project"); - const body = encodeURIComponent("Hello Sascha,\n\nI visited your portfolio and would like to discuss a potential project or collaboration.\n\nBest regards,"); + const subject = encodeURIComponent(texts.emailSubject); + const body = encodeURIComponent(texts.emailBody); // Announce action to screen readers const announcement = document.createElement('div'); announcement.setAttribute('aria-live', 'polite'); announcement.setAttribute('class', 'sr-only'); - announcement.textContent = 'Opening email client with pre-filled message'; + announcement.textContent = texts.emailAnnouncement; document.body.appendChild(announcement); globalThis.location.href = `mailto:${email}?subject=${subject}&body=${body}`; @@ -67,7 +67,7 @@ export default function ContactSection(props: ContactSectionProps = {}) { const announcement = document.createElement('div'); announcement.setAttribute('aria-live', 'polite'); announcement.setAttribute('class', 'sr-only'); - announcement.textContent = `Opening ${platform} profile in new tab`; + announcement.textContent = texts.socialAnnouncement.replace('{platform}', platform); document.body.appendChild(announcement); globalThis.open(url, '_blank', 'noopener,noreferrer'); diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx index 71acf80..59feabd 100644 --- a/src/components/sections/HeroSection.tsx +++ b/src/components/sections/HeroSection.tsx @@ -16,6 +16,7 @@ interface HeroSectionProps { export default function HeroSection(props: HeroSectionProps = {}) { const texts = getTexts().hero; + const accessibilityTexts = getTexts().accessibility; // Use centralized texts as defaults, allow props to override const { @@ -98,7 +99,7 @@ export default function HeroSection(props: HeroSectionProps = {}) { {/* Skip link for keyboard navigation */} @@ -140,11 +141,11 @@ export default function HeroSection(props: HeroSectionProps = {}) { {/* Hidden descriptions for screen readers */}