chore: create initial project snapshot

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

src/components/SkillsSection.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { Code, BarChart2, Wand2 } from 'lucide-react';
+import {
+  skillCategories,
+  keywordBadges,
+  toolsList,
+  filterTabs,
+  FilterTab,
+} from '@/data/skills';
+import styles from './SkillsSection.module.css';
+
+export const SkillsSection: React.FC = () => {
+  const [activeFilter, setActiveFilter] = useState<FilterTab['id']>('software-engineering');
+
+  const filteredTools = toolsList.filter((tool) =>
+    tool.category.includes(activeFilter)
+  );
+
+  const getFilterIcon = (id: FilterTab['id']) => {
+    switch (id) {
+      case 'software-engineering':
+        return <Code size={18} />;
+      case 'product-management':
+        return <BarChart2 size={18} />;
+      case 'design-ux':
+        return <Wand2 size={18} />;
+    }
+  };
+
+  return (
+    <section id="skills" className={styles.skillsSection}>
+      <div className="content-container">
+        {/* Section Header */}
+        <div className="section-header">
+          <span className="section-eyebrow">SKILLS & TOOLS</span>
+          <div className="section-title-wrap">
+            <h2 className="section-title">The Stack Behind the Work...</h2>
+            <div className="section-underline" />
+          </div>
+        </div>
+
+        {/* Main Card Container */}
+        <div className={styles.mainCard}>
+          {/* Section: Skills */}
+          <div className={styles.skillsBlock}>
+            <span className={styles.cardEyebrow}>SKILLS</span>
+
+            {/* 8 Skill Meters Grid */}
+            <div className={styles.skillsGrid}>
+              {skillCategories.map((skill) => (
+                <div key={skill.name} className={styles.skillItem}>
+                  <div className={styles.skillName}>{skill.name}</div>
+                  <div className={styles.meterSegments}>
+                    {[1, 2, 3, 4, 5].map((seg) => (
+                      <div
+                        key={seg}
+                        className={`${styles.segment} ${
+                          seg <= skill.level ? styles.segmentFilled : ''
+                        }`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Keyword Badges */}
+            <div className={styles.badgeCloud}>
+              {keywordBadges.map((badge) => (
+                <span key={badge} className={styles.badgePill}>
+                  {badge}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Section: Tools */}
+          <div className={styles.toolsBlock}>
+            <span className={styles.cardEyebrow}>TOOLS</span>
+
+            {/* 8-Column Grid */}
+            <div className={styles.toolsGrid}>
+              {toolsList.map((tool) => {
+                const isMatching = tool.category.includes(activeFilter);
+                return (
+                  <div
+                    key={tool.id}
+                    className={`${styles.toolTile} ${
+                      !isMatching ? styles.toolDimmed : ''
+                    }`}
+                  >
+                    <div className={styles.toolIconContainer}>
+                      <Image
+                        src={tool.icon}
+                        alt={tool.name}
+                        width={64}
+                        height={64}
+                        className={styles.toolIcon}
+                      />
+                    </div>
+                    <span className={styles.toolLabel}>{tool.name}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Filter Tabs Under Card */}
+        <div className={styles.filterTabsRow}>
+          {filterTabs.map((tab) => {
+            const isActive = activeFilter === tab.id;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveFilter(tab.id)}
+                className={`pill-btn ${
+                  isActive ? 'pill-btn-primary' : 'pill-btn-outline'
+                } ${styles.filterButton}`}
+              >
+                {getFilterIcon(tab.id)}
+                <span>{tab.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};