57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
'use client';
|
|
import { motion } from 'framer-motion';
|
|
import { experience } from '@/content/experience';
|
|
import styles from './Experience.module.scss';
|
|
|
|
export default function Experience() {
|
|
return (
|
|
<section className={styles.section} id="experience">
|
|
<div className={styles.container}>
|
|
<motion.header
|
|
className={styles.header}
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<span className={styles.eyebrow}>Experience</span>
|
|
<h2 className={styles.heading}>
|
|
Where I've worked<span className={styles.dot}>.</span>
|
|
</h2>
|
|
</motion.header>
|
|
|
|
<div className={styles.grid}>
|
|
{experience.map((item, i) => (
|
|
<motion.article
|
|
key={item.id}
|
|
className={styles.card}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-20px' }}
|
|
transition={{ duration: 0.45, delay: i * 0.1, ease: [0.22, 0.61, 0.36, 1] }}
|
|
>
|
|
<div className={styles.cardHeader}>
|
|
<span className={styles.period}>{item.period}</span>
|
|
<h3 className={styles.role}>{item.role}</h3>
|
|
{item.companyUrl ? (
|
|
<a href={item.companyUrl} className={styles.company} target="_blank" rel="noopener noreferrer">
|
|
{item.company} ↗
|
|
</a>
|
|
) : (
|
|
<span className={styles.company}>{item.company}</span>
|
|
)}
|
|
</div>
|
|
<p className={styles.desc}>{item.description}</p>
|
|
<ul className={styles.highlights}>
|
|
{item.highlights.map((h, j) => (
|
|
<li key={j}>{h}</li>
|
|
))}
|
|
</ul>
|
|
</motion.article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|