127 lines
4.1 KiB
TypeScript
127 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import { Code, BarChart2, Wand2 } from 'lucide-react';
|
|
import {
|
|
skillsByDiscipline,
|
|
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 activeDiscipline = skillsByDiscipline[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" data-reveal="soft">
|
|
<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} aria-live="polite" data-reveal="scale">
|
|
{/* Section: Skills */}
|
|
<div className={styles.skillsBlock}>
|
|
<span className={styles.cardEyebrow}>SKILLS</span>
|
|
|
|
{/* Discipline-specific skill meters */}
|
|
<div className={styles.skillsGrid}>
|
|
{activeDiscipline.skills.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}>
|
|
{activeDiscipline.keywords.map((badge, index) => (
|
|
<span key={`${badge}-${index}`} 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}>
|
|
{activeDiscipline.tools.map((tool) => (
|
|
<div key={tool.id} className={styles.toolTile}>
|
|
<div className={styles.toolIconContainer}>
|
|
<Image
|
|
src={tool.icon}
|
|
alt=""
|
|
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}
|
|
aria-label="Choose skill discipline"
|
|
data-reveal="soft"
|
|
>
|
|
{filterTabs.map((tab) => {
|
|
const isActive = activeFilter === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
aria-pressed={isActive}
|
|
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>
|
|
);
|
|
};
|