101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { experiences } from '@/data/experience';
|
|
import styles from './ExperienceSection.module.css';
|
|
|
|
export const ExperienceSection: React.FC = () => {
|
|
return (
|
|
<section id="experience" className={styles.experienceSection}>
|
|
<div className="content-container">
|
|
{/* Section Header */}
|
|
<div className="section-header">
|
|
<span className="section-eyebrow">EXPERIENCES</span>
|
|
<div className="section-title-wrap">
|
|
<h2 className="section-title">Where I've Made an Impact</h2>
|
|
<div className="section-underline" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline Container */}
|
|
<div className={styles.timeline}>
|
|
{experiences.map((item, index) => (
|
|
<div key={item.id} className={styles.timelineItem}>
|
|
{/* Vertical Spine & Node Indicator */}
|
|
<div className={styles.spineColumn}>
|
|
<div
|
|
className={`${styles.nodeDot} ${
|
|
item.isCurrent ? styles.nodeCurrent : ''
|
|
}`}
|
|
/>
|
|
{index < experiences.length - 1 && (
|
|
<div className={styles.verticalLine} />
|
|
)}
|
|
</div>
|
|
|
|
{/* Item Content Layout: Left Identity & Right Details */}
|
|
<div className={styles.itemContent}>
|
|
{/* Left Identity Column */}
|
|
<div className={styles.identityCol}>
|
|
<div className={styles.metaRow}>
|
|
<span className={styles.dateBadge}>{item.date}</span>
|
|
<div className={styles.locationWrapper}>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
className={styles.locationIcon}
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
fillRule="evenodd"
|
|
d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className={styles.locationText}>{item.location}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.roleIdentityRow}>
|
|
<div className={styles.logoContainer}>
|
|
<Image
|
|
src={item.logo}
|
|
alt={`${item.company} logo`}
|
|
width={72}
|
|
height={72}
|
|
className={styles.logoImage}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.roleTitles}>
|
|
<h3 className={styles.roleTitle}>{item.role}</h3>
|
|
<div className={styles.companyName}>{item.company}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Details Column */}
|
|
<div className={styles.detailsCol}>
|
|
<p className={styles.summary}>{item.summary}</p>
|
|
|
|
<ul className={styles.bulletList}>
|
|
{item.bullets.map((bullet, bIdx) => (
|
|
<li key={bIdx} className={styles.bulletItem}>
|
|
<span className={styles.bulletDot} />
|
|
<span className={styles.bulletText}>{bullet}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|