98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { Award } from 'lucide-react';
|
|
import { getTexts } from '../../config/texts';
|
|
import type { Certification } from '../../data/Certification';
|
|
|
|
interface CertificationsSectionProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
certifications?: Certification[];
|
|
}
|
|
|
|
export default function CertificationsSection(props: CertificationsSectionProps = {}) {
|
|
const texts = getTexts().certifications;
|
|
|
|
// 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: ""
|
|
}
|
|
]
|
|
} = props;
|
|
// Sort certifications by year in descending order (newest first)
|
|
const sortedCertifications = [...certifications].sort((a, b) => {
|
|
return parseInt(b.year) - parseInt(a.year);
|
|
});
|
|
|
|
return (
|
|
<section id="certifications" className="certifications-section">
|
|
<div className="certifications-section__container">
|
|
{/* Section Header */}
|
|
<div className="certifications-section__header">
|
|
<h2 className="certifications-section__title">
|
|
{title}
|
|
</h2>
|
|
<p className="certifications-section__subtitle">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Certifications Grid */}
|
|
<div className="certifications-section__grid">
|
|
{sortedCertifications.map((cert, index) => (
|
|
<div key={index} className="certifications-section__card">
|
|
<div className="certifications-section__card-header">
|
|
{cert.icon ? (
|
|
<img
|
|
src={cert.icon}
|
|
alt={cert.issuer}
|
|
className="certifications-section__card-icon-image"
|
|
/>
|
|
) : (
|
|
<Award className="certifications-section__card-icon" />
|
|
)}
|
|
<h3 className="certifications-section__card-title">{cert.name}</h3>
|
|
<p className="certifications-section__card-issuer">{cert.issuer}</p>
|
|
</div>
|
|
<div className="certifications-section__card-content">
|
|
<span className="certifications-section__card-badge">
|
|
{cert.year}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|