118 lines
4.1 KiB
TypeScript
118 lines
4.1 KiB
TypeScript
import { Code, Palette, ShieldCheck, Eye } from 'lucide-react';
|
|
import { getTexts } from '../../config/texts';
|
|
import type { SkillBadge } from '../../data/SkillBadge';
|
|
import type { Service } from '../../data/Service';
|
|
import saschaImage from '../../assets/sascha.png';
|
|
|
|
interface AboutSectionProps {
|
|
name?: string;
|
|
title?: string;
|
|
subtitle?: string;
|
|
bio?: string[];
|
|
profileImage?: string;
|
|
featureCards?: Service[];
|
|
}
|
|
|
|
export default function AboutSection(props: AboutSectionProps = {}) {
|
|
const texts = getTexts().about;
|
|
|
|
// Use centralized texts as defaults, allow props to override
|
|
const {
|
|
name = texts.name,
|
|
title = texts.title,
|
|
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"
|
|
}
|
|
]
|
|
} = props;
|
|
return (
|
|
<section id="about" className="about-section">
|
|
<div className="about-section__container">
|
|
{/* Section Header */}
|
|
<div className="about-section__header">
|
|
<h2 className="about-section__title">
|
|
{title}
|
|
</h2>
|
|
<p className="about-section__subtitle">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Personal Photo and Bio */}
|
|
<div className="about-section__content">
|
|
<div className="about-section__image-wrapper">
|
|
<img
|
|
src={profileImage}
|
|
alt={`${name} - Web Developer`}
|
|
className="about-section__image"
|
|
/>
|
|
<div className="about-section__image-overlay" aria-label={`${name}`}></div>
|
|
</div>
|
|
|
|
<div className="about-section__bio-section">
|
|
<div className="about-section__bio-content">
|
|
<h3 className="about-section__greeting">
|
|
Hi, I'm {name}!
|
|
</h3>
|
|
<div className="about-section__bio-text">
|
|
{bio.map((paragraph, index) => (
|
|
<p key={index}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature Cards Grid */}
|
|
<div className="about-section__features">
|
|
{featureCards.map((card, index) => {
|
|
const IconComponent = card.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`about-section__feature-card about-section__feature-card--${card.colorClass}`}
|
|
>
|
|
<div className="about-section__feature-header">
|
|
<IconComponent className={`about-section__feature-icon about-section__feature-icon--${card.colorClass}`} />
|
|
<h3 className={`about-section__feature-title about-section__feature-title--${card.colorClass}`}>
|
|
{card.title}
|
|
</h3>
|
|
</div>
|
|
<div className="about-section__feature-content">
|
|
<p className={`about-section__feature-description about-section__feature-description--${card.colorClass}`}>
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |