feat: update ProjectsSection to use localized project data and enhance project interface

This commit is contained in:
Sascha 2026-07-07 13:01:38 +02:00
parent e57f0e7753
commit b863dd9186
4 changed files with 40 additions and 46 deletions

View File

@ -1,6 +1,5 @@
import { GitBranch, ExternalLink } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
import { projectsData } from '../../config/projects-config';
import type { Project } from '../../data/Project';
import { useScreenReaderAnnouncements } from '../../hooks/useScreenReaderAnnouncements';
import { useProjectKeyboardNavigation } from '../../hooks/useProjectKeyboardNavigation';
@ -16,12 +15,22 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
const { texts: allTexts } = useLanguage();
const texts = allTexts.projects;
const accessibilityTexts = allTexts.accessibility;
const localizedProjectsData: Project[] = texts.projectItems.map((item) => ({
id: item.id,
title: item.title,
description: item.description,
image: item.image || '',
technologies: item.technologies || [],
year: item.year,
github: item.github,
live: item.live,
}));
// Use centralized texts as defaults, allow props to override
const {
title = texts.title,
subtitle = texts.subtitle,
projects = [...projectsData].sort((a, b) => {
projects = [...localizedProjectsData].sort((a, b) => {
const yearA = Number.parseInt(a.year || '0');
const yearB = Number.parseInt(b.year || '0');
return yearB - yearA; // Descending order (newest first)

View File

@ -1,6 +1,4 @@
import portfolioImage from '@/assets/portfolio.PNG';
import ergoVRImage from '@/assets/ErgoVR.PNG';
import icaraceImage from '@/assets/icarace.PNG';
import dancaAlegriaImage from '@/assets/Danca-Alegria.png';
import lukasImage from '@/assets/lukas.png';
import a11yhubImage from '@/assets/a11yhub.png';
@ -24,26 +22,6 @@ export const projects = {
},
{
id: 2,
title: 'ErgoVR',
description:
'Eine Virtual-Reality-Anwendung zur Analyse von Motion Sickness in VR-Umgebungen aus dem Jahr 2015.',
image: ergoVRImage,
technologies: ['Unity3D', 'C#', 'Oculus SDK'],
year: '2015',
github: 'https://github.com/LuciusShadow/ErgoVR',
},
{
id: 3,
title: 'Icarace',
description:
'Beteiligung an der Entwicklung einer Web-Plattform für ein Fitness-Rennspiel für die Icaros GmbH bis 2018.',
image: icaraceImage,
technologies: ['Angular 4', 'Typescript', 'HTML', 'CSS'],
year: '2018',
github: '',
},
{
id: 4,
title: 'Danca Alegria Vereins-Website',
description:
'Unterstützung bei freiwilligen Änderungen zur Einhaltung der WCAG 2.1 Level AA Barrierefreiheit.',
@ -53,7 +31,7 @@ export const projects = {
live: 'https://www.danca-alegria.de',
},
{
id: 5,
id: 3,
title: 'Squarespace-Page für Massage-Service',
description:
'Design, Erstellung und Styling einer Landingpage, Angeboten und Scheduling via Squarespace',
@ -63,7 +41,7 @@ export const projects = {
live: 'https://www.lukasmobilemassage.de',
},
{
id: 6,
id: 4,
title: 'Plattform für Bildungsangebote zu digitaler Barrierefreiheit',
description:
'Viele Events, Webinar und Co. haben keinen zentralen Ort, wo sie aufgerufen werden. Dieses Projekt in Zusammenarbeit mit Benjamin Christi soll helfen dieses Problem zu lösen.',

View File

@ -148,6 +148,11 @@ export interface TextConfig {
id: number;
title: string;
description: string;
image?: string;
technologies?: string[];
github?: string;
live?: string;
year?: string;
}>;
};

View File

@ -2,6 +2,8 @@ import portfolioImage from '@/assets/portfolio.PNG';
import ergoVRImage from '@/assets/ErgoVR.PNG';
import icaraceImage from '@/assets/icarace.PNG';
import dancaAlegriaImage from '@/assets/Danca-Alegria.png';
import lukasImage from '@/assets/lukas.png';
import a11yhubImage from '@/assets/a11yhub.png';
export const projects = {
title: 'Featured Projects',
@ -22,26 +24,6 @@ export const projects = {
},
{
id: 2,
title: 'ErgoVR',
description:
'A virtual reality application for analysis of motion sickness in VR environments from 2015.',
image: ergoVRImage,
technologies: ['Unity3D', 'C#', 'Oculus SDK'],
year: '2015',
github: 'https://github.com/LuciusShadow/ErgoVR',
},
{
id: 3,
title: 'Icarace',
description:
'Participated in the development of a web-platform for a fitness racing game for Icaros GmbH until 2018.',
image: icaraceImage,
technologies: ['Angular 4', 'Typescript', 'HTML', 'CSS'],
year: '2018',
live: 'https://live.icarace.com/home',
},
{
id: 4,
title: 'Danca Alegria Association Website',
description:
'Assist in volunatary changes to accomodate WCAG 2.1 Level AA accessibility.',
@ -49,6 +31,26 @@ export const projects = {
technologies: ['Wordpress', 'PHP', 'HTML', 'CSS'],
year: '2025',
live: 'https://www.danca-alegria.de',
},
{
id: 3,
title: 'Squarespace Page for Mobile Massage Service',
description:
'Designed and built a service landing page, offer presentation, and appointment scheduling with Squarespace.',
image: lukasImage,
technologies: ['Squarespace', 'CSS', 'Figma'],
year: '2026',
live: 'https://www.lukasmobilemassage.de',
},
{
id: 4,
title: 'Platform for Digital Accessibility Education Offers',
description:
'A collaboration project with Benjamin Christi to provide one central place for events, webinars, and training offers about digital accessibility.',
image: a11yhubImage,
technologies: ['Payload', 'CSS', 'Typescript'],
year: '2026',
live: 'https://www.a11y-hub.de',
}
],
};