saschabach
/
portfolio-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: centralize feature card icon and color mappings; improve bio paragraph key handling

This commit is contained in:
Sascha 2026-03-10 16:53:49 +01:00
parent 18c508bba0
commit 54d3a810d2
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/sections/AboutSection.tsx
View File

@ -4,6 +4,11 @@ import FeatureCardsGrid from '../FeatureCardsGrid';
import type { Service } from '../../data/Service';
import saschaImage from '../../assets/sascha.png';
// Define feature card icon and color mappings as constants
const FEATURE_CARD_ICONS = [Code, Palette, ShieldCheck, Eye] as const;
const FEATURE_CARD_COLORS = ['primary', 'secondary', 'tertiary', 'quaternary'] as const;
type FeatureCardColor = typeof FEATURE_CARD_COLORS[number];
interface AboutSectionProps {
name?: string;
title?: string;
@ -28,10 +33,10 @@ export default function AboutSection(props: AboutSectionProps = {}) {
bio = texts.bio,
profileImage = saschaImage,
featureCards = texts.featureCards.map((card, index) => ({
icon: [Code, Palette, ShieldCheck, Eye][index] || Code,
icon: FEATURE_CARD_ICONS[index] || Code,
title: card.title,
description: card.description,
colorClass: (["primary", "secondary", "tertiary", "quaternary"][index] || "primary") as "primary" | "secondary" | "tertiary" | "quaternary"
colorClass: (FEATURE_CARD_COLORS[index])
}))
} = props;
@ -58,7 +63,7 @@ export default function AboutSection(props: AboutSectionProps = {}) {
</div>
{/* Personal Photo and Bio */}
<main className="about-section__content" role="main">
<main className="about-section__content">
<div className="about-section__image-wrapper">
<img
src={profileImage}
@ -75,8 +80,8 @@ export default function AboutSection(props: AboutSectionProps = {}) {
{greeting ?? `Hi, I'm ${name}!`}
</h3>
<div className="about-section__bio-text">
{bio.map((paragraph) => (
<p key={paragraph.substring(0, 50)}>{paragraph}</p>
{bio.map((paragraph, index) => (
<p key={index}>{paragraph}</p>
))}
</div>
</div>