init project files

components/sections/Experience.tsx

@@ -0,0 +1,56 @@
+'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>
+  );
+}