Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 2x 10x 10x 10x 40x | import React from 'react';
import { useTranslation } from 'react-i18next';
import './Education.css';
/**
* Displays a list of educational qualifications and certifications.
* Dynamically renders education entries from i18n resources with optional institution
* and note fields.
*
* @returns {JSX.Element} Education section with a list of qualification cards.
*/
const Education = () => {
const { t } = useTranslation();
const entries = [
{
title: t('educationSection.entry1.title'),
institution: t('educationSection.entry1.institution'),
note: t('educationSection.entry1.note'),
},
{
title: t('educationSection.entry2.title'),
institution: t('educationSection.entry2.institution'),
note: t('educationSection.entry2.note'),
},
{
title: t('educationSection.entry3.title'),
institution: t('educationSection.entry3.institution'),
note: t('educationSection.entry3.note'),
},
{
title: t('educationSection.entry4.title'),
institution: t('educationSection.entry4.institution'),
note: t('educationSection.entry4.note'),
},
];
return (
<div className="education-container" id="Education">
<h2>{t('educationSection.heading')}</h2>
<div className="education-list">
{entries.map((entry, index) => (
<div className="education-card" key={index}>
<h3>{entry.title}</h3>
{entry.institution && (
<p className="education-institution">{entry.institution}</p>
)}
{entry.note && (
<p className="education-note">{entry.note}</p>
)}
</div>
))}
</div>
</div>
);
};
export default Education;
|