chore: create initial project snapshot

Capture the portfolio source, design references, and production assets with repository-specific ignore rules.

src/components/ExperienceSection.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { MapPin } from 'lucide-react';
+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&apos;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}>
+                      <MapPin size={14} className={styles.locationIcon} />
+                      <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>
+  );
+};