43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import Image from 'next/image';
|
|
import type { PortfolioProps } from '@/server/content';
|
|
import styles from './EducationSection.module.css';
|
|
|
|
export const EducationSection = ({ portfolio }: PortfolioProps) => {
|
|
const copy = portfolio.messages.education;
|
|
|
|
return (
|
|
<section id="education" className={styles.educationSection}>
|
|
<div className="content-container">
|
|
<div className="section-header" data-reveal="soft">
|
|
<div className="section-title-wrap">
|
|
<h2 className="section-title">{copy.title}</h2>
|
|
<div className="section-underline" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Degree Card */}
|
|
{portfolio.education.map(education => <div key={education.id} className={styles.card} data-reveal-group>
|
|
<div className={styles.crestCol} data-reveal="image">
|
|
<div className={styles.crestContainer}>
|
|
<Image
|
|
src={education.logo.src}
|
|
alt={education.institution}
|
|
fill
|
|
sizes="(max-width: 650px) 12rem, 16.5rem"
|
|
className={styles.crestImage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.detailsCol} data-reveal="soft">
|
|
<h3 className={styles.degreeTitle}>{education.degree}</h3>
|
|
<div className={styles.institution}>{education.institution}</div>
|
|
<div className={styles.date}>{education.date}</div>
|
|
<p className={styles.description}>{education.description}</p>
|
|
</div>
|
|
</div>)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|