chore: create initial project snapshot

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

src/components/MilestonesSection.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { ArrowUpRight } from 'lucide-react';
+import { milestones } from '@/data/milestones';
+import styles from './MilestonesSection.module.css';
+
+export const MilestonesSection: React.FC = () => {
+  return (
+    <section id="milestones" className={styles.milestonesSection}>
+      <div className="content-container">
+        {/* Section Header */}
+        <div className="section-header">
+          <span className="section-eyebrow">AWARDS & ACHIEVEMENTS</span>
+          <div className="section-title-wrap">
+            <h2 className="section-title">Milestones Along the Way</h2>
+            <div className="section-underline" />
+          </div>
+        </div>
+
+        {/* Certificate Cards List */}
+        <div className={styles.cardsList}>
+          {milestones.map((item) => (
+            <div key={item.id} className={styles.certCard}>
+              {/* Thumbnail */}
+              <div className={styles.thumbnailContainer}>
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className={styles.certImage}
+                />
+              </div>
+
+              {/* Content Details */}
+              <div className={styles.certDetails}>
+                <div className={styles.titleRow}>
+                  <h3 className={styles.certTitle}>{item.title}</h3>
+                </div>
+
+                <div className={styles.issuerRow}>
+                  <span className={styles.issuerText}>{item.issuer}</span>
+                </div>
+
+                <div className={styles.dateBadge}>{item.date}</div>
+
+                <p className={styles.description}>{item.description}</p>
+
+                {/* View Certificate Link */}
+                <div className={styles.actionRow}>
+                  <a
+                    href={item.link || '#'}
+                    className={styles.viewCertLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span>View certificate</span>
+                    <ArrowUpRight size={16} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};