feat(skills): add discipline-specific content and tool assets

src/components/SkillsSection.module.css

@@ -116,19 +116,12 @@
   padding: 0.75rem 0.375rem;
   box-sizing: border-box;
   transition:
-    opacity var(--motion-duration-default) ease,
-    filter var(--motion-duration-default) ease,
     border-color var(--motion-duration-fast) ease,
     box-shadow var(--motion-duration-default) ease,
     transform var(--motion-duration-default) var(--motion-ease-out);
   cursor: default;
 }
 
-.toolDimmed {
-  opacity: 0.35;
-  filter: grayscale(0.8);
-}
-
 .toolIconContainer {
   width: clamp(2.25rem, 42%, 3.5rem);
   height: clamp(2.25rem, 42%, 3.5rem);

src/components/SkillsSection.tsx

@@ -4,9 +4,7 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import { Code, BarChart2, Wand2 } from 'lucide-react';
 import {
-  skillCategories,
+  skillsByDiscipline,
-  keywordBadges,
-  toolsList,
   filterTabs,
   FilterTab,
 } from '@/data/skills';
@@ -14,6 +12,7 @@ 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) {
@@ -39,14 +38,14 @@ export const SkillsSection: React.FC = () => {
         </div>
 
         {/* Main Card Container */}
-        <div className={styles.mainCard}>
+        <div className={styles.mainCard} aria-live="polite">
           {/* Section: Skills */}
           <div className={styles.skillsBlock}>
             <span className={styles.cardEyebrow}>SKILLS</span>
 
-            {/* 8 Skill Meters Grid */}
+            {/* Discipline-specific skill meters */}
             <div className={styles.skillsGrid}>
-              {skillCategories.map((skill) => (
+              {activeDiscipline.skills.map((skill) => (
                 <div key={skill.name} className={styles.skillItem}>
                   <div className={styles.skillName}>{skill.name}</div>
                   <div className={styles.meterSegments}>
@@ -65,8 +64,8 @@ export const SkillsSection: React.FC = () => {
 
             {/* Keyword Badges */}
             <div className={styles.badgeCloud}>
-              {keywordBadges.map((badge) => (
+              {activeDiscipline.keywords.map((badge, index) => (
-                <span key={badge} className={styles.badgePill}>
+                <span key={`${badge}-${index}`} className={styles.badgePill}>
                   {badge}
                 </span>
               ))}
@@ -79,34 +78,26 @@ export const SkillsSection: React.FC = () => {
 
             {/* 8-Column Grid */}
             <div className={styles.toolsGrid}>
-              {toolsList.map((tool) => {
+              {activeDiscipline.tools.map((tool) => (
-                const isMatching = tool.category.includes(activeFilter);
+                <div key={tool.id} className={styles.toolTile}>
-                return (
+                  <div className={styles.toolIconContainer}>
-                  <div
+                    <Image
-                    key={tool.id}
+                      src={tool.icon}
-                    className={`${styles.toolTile} ${
+                      alt=""
-                      !isMatching ? styles.toolDimmed : ''
+                      width={64}
-                    }`}
+                      height={64}
-                  >
+                      className={styles.toolIcon}
-                    <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>
-                );
+                  <span className={styles.toolLabel}>{tool.name}</span>
-              })}
+                </div>
+              ))}
             </div>
           </div>
         </div>
 
         {/* Filter Tabs Under Card */}
-        <div className={styles.filterTabsRow} aria-label="Filter tools by discipline">
+        <div className={styles.filterTabsRow} aria-label="Choose skill discipline">
           {filterTabs.map((tab) => {
             const isActive = activeFilter === tab.id;
             return (

src/data/skills.ts

@@ -1,79 +1,241 @@
+export type DisciplineId =
+  | 'software-engineering'
+  | 'product-management'
+  | 'design-ux';
+
 export interface SkillCategory {
   name: string;
-  level: number; // 1 to 5
+  level: number;
 }
 
 export interface ToolItem {
   id: string;
   name: string;
   icon: string;
-  category: ('software-engineering' | 'product-management' | 'design-ux')[];
 }
 
-export const skillCategories: SkillCategory[] = [
+export interface SkillDiscipline {
-  { name: 'Backend', level: 5 },
+  skills: SkillCategory[];
-  { name: 'Databases', level: 4 },
+  keywords: string[];
-  { name: 'Testing & Quality', level: 3 },
+  tools: ToolItem[];
-  { name: 'System Design', level: 3 },
+}
-  { name: 'Frontend', level: 5 },
-  { name: 'DevOps', level: 2 },
-  { name: 'Web Scraping', level: 3 },
-  { name: 'Version Control', level: 4 },
-];
-
-export const keywordBadges: string[] = [
-  'Documentation',
-  'Authentication',
-  'Authorization',
-  'OAuth2',
-  'JWT',
-  'Caching',
-  'Rate Limiting',
-  'Throttling',
-  'WebSockets',
-  'Background Job',
-  'Web Scraping',
-  'Bash Scripting',
-  'Microservices',
-  'Performance Optimization',
-  'Third-Party Integration',
-];
-
-export const toolsList: ToolItem[] = [
-  // Row 1
-  { id: 'vscode', name: 'VS Code', icon: '/images/tools/vscode.png', category: ['software-engineering'] },
-  { id: 'codex', name: 'Codex', icon: '/images/tools/codex.png', category: ['software-engineering', 'product-management'] },
-  { id: 'antigravity', name: 'Antigravity', icon: '/images/tools/antigravity.png', category: ['software-engineering', 'product-management'] },
-  { id: 'git', name: 'Git', icon: '/images/tools/git.png', category: ['software-engineering'] },
-  { id: 'github', name: 'GitHub', icon: '/images/tools/github.png', category: ['software-engineering', 'product-management'] },
-  { id: 'python', name: 'Python', icon: '/images/tools/python.png', category: ['software-engineering'] },
-  { id: 'django', name: 'Django', icon: '/images/tools/django.png', category: ['software-engineering'] },
-  { id: 'fastapi', name: 'FastAPI', icon: '/images/tools/fastapi.png', category: ['software-engineering'] },
-  // Row 2
-  { id: 'celery', name: 'Celery', icon: '/images/tools/celery.png', category: ['software-engineering'] },
-  { id: 'postgresql', name: 'PostgreSQL', icon: '/images/tools/postgresql.png', category: ['software-engineering'] },
-  { id: 'redis', name: 'Redis', icon: '/images/tools/redis.png', category: ['software-engineering'] },
-  { id: 'neo4j', name: 'Neo4j', icon: '/images/tools/neo4j.png', category: ['software-engineering'] },
-  { id: 'mongodb', name: 'MongoDB', icon: '/images/tools/mongodb.png', category: ['software-engineering'] },
-  { id: 'typescript', name: 'TypeScript', icon: '/images/tools/typescript.png', category: ['software-engineering'] },
-  { id: 'react', name: 'React', icon: '/images/tools/react.png', category: ['software-engineering', 'design-ux'] },
-  { id: 'nextjs', name: 'Next.js', icon: '/images/tools/nextjs.png', category: ['software-engineering', 'design-ux'] },
-  // Row 3
-  { id: 'linux', name: 'Linux', icon: '/images/tools/linux.png', category: ['software-engineering'] },
-  { id: 'docker', name: 'Docker', icon: '/images/tools/docker.png', category: ['software-engineering'] },
-  { id: 'nginx', name: 'Nginx', icon: '/images/tools/nginx.png', category: ['software-engineering'] },
-  { id: 'caddy', name: 'Caddy', icon: '/images/tools/caddy.png', category: ['software-engineering'] },
-  { id: 'minio', name: 'MinIO', icon: '/images/tools/minio.png', category: ['software-engineering'] },
-  { id: 'prometheus', name: 'Prometheus', icon: '/images/tools/prometheus.png', category: ['software-engineering'] },
-  { id: 'grafana', name: 'Grafana', icon: '/images/tools/grafana.png', category: ['software-engineering', 'product-management'] },
-  { id: 'kubernetes', name: 'Kubernetes', icon: '/images/tools/kubernetes.png', category: ['software-engineering'] },
-];
 
 export interface FilterTab {
-  id: 'software-engineering' | 'product-management' | 'design-ux';
+  id: DisciplineId;
   label: string;
 }
 
+const tool = (id: string, name: string, icon = id): ToolItem => ({
+  id,
+  name,
+  icon: `/images/tools/${icon}.png`,
+});
+
+const placeholderTool = (id: string, name: string): ToolItem => ({
+  id,
+  name,
+  icon: `/images/tools/${id}.png`,
+});
+
+export const skillsByDiscipline: Record<DisciplineId, SkillDiscipline> = {
+  'software-engineering': {
+    skills: [
+      { name: 'Backend', level: 5 },
+      { name: 'Databases', level: 4 },
+      { name: 'Testing & Quality', level: 3 },
+      { name: 'System Design', level: 3 },
+      { name: 'Frontend', level: 3 },
+      { name: 'DevOps', level: 2 },
+      { name: 'Web Scraping', level: 2 },
+      { name: 'Version Control', level: 4 },
+    ],
+    keywords: [
+      'Documentation',
+      'Authentication',
+      'Authorization',
+      'OAuth2',
+      'JWT',
+      'Caching',
+      'Rate Limiting',
+      'Throttling',
+      'WebSockets',
+      'Background Job',
+      'Web Scraping',
+      'Bash Scripting',
+      'Microservices',
+      'Performance Optimization',
+      'Third-Party Integration',
+    ],
+    tools: [
+      tool('vscode', 'VS Code'),
+      tool('codex', 'Codex'),
+      tool('antigravity', 'Antigravity'),
+      tool('git', 'Git'),
+      tool('github', 'GitHub'),
+      tool('python', 'Python'),
+      tool('django', 'Django'),
+      tool('fastapi', 'FastAPI'),
+      tool('celery', 'Celery'),
+      tool('postgresql', 'PostgreSQL'),
+      tool('redis', 'Redis'),
+      tool('neo4j', 'Neo4j'),
+      tool('mongodb', 'MongoDB'),
+      tool('typescript', 'TypeScript'),
+      tool('react', 'React'),
+      tool('nextjs', 'Next.js'),
+      tool('linux', 'Linux'),
+      tool('docker', 'Docker'),
+      tool('nginx', 'Nginx'),
+      tool('caddy', 'Caddy'),
+      tool('minio', 'MinIO'),
+      tool('prometheus', 'Prometheus'),
+      tool('grafana', 'Grafana'),
+      tool('kubernetes', 'Kubernetes'),
+    ],
+  },
+  'product-management': {
+    skills: [
+      { name: 'Technical Product Management', level: 4 },
+      { name: 'Product Strategy', level: 3 },
+      { name: 'Product Analytics', level: 2 },
+      { name: 'Roadmapping & Prioritization', level: 3 },
+      { name: 'User Research', level: 3 },
+      { name: 'Testing & Quality', level: 3 },
+    ],
+    keywords: [
+      'Market Research',
+      'Competitive Analysis',
+      'Customer Segmentation',
+      'Personas',
+      'Jobs to Be Done',
+      'Value Proposition',
+      'Product-Market Fit',
+      'MVP Definition',
+      'RICE',
+      'MoSCoW',
+      'PRDs',
+      'Requirements Gathering',
+      'User Stories',
+      'Acceptance Criteria',
+      'Agile',
+      'Scrum',
+      'Sprint Planning',
+      'Kanban',
+      'Product Documentation',
+      'KPI Definition',
+      'OKRs',
+      'North Star Metrics',
+      'Funnel Analysis',
+      'Conversion Analysis',
+      'Retention Analysis',
+      'Churn Analysis',
+      'A/B Testing',
+      'Beta Testing',
+      'Usability Testing',
+      'Customer Interviews',
+      'Customer Journey Mapping',
+      'Engineering Collaboration',
+      'Design Collaboration',
+      'Go-to-Market',
+      'Technical Trade-offs',
+      'Technical Debt',
+      'Scalability',
+      'Performance',
+    ],
+    tools: [
+      placeholderTool('notion', 'Notion'),
+      placeholderTool('mizito', 'Mizito'),
+      tool('github-projects', 'GitHub Projects', 'github'),
+      placeholderTool('jira', 'Jira'),
+      placeholderTool('porsline', 'Porsline'),
+      placeholderTool('mattermost', 'Mattermost'),
+      placeholderTool('figma', 'Figma'),
+      placeholderTool('figjam', 'Fig Jam'),
+      placeholderTool('sql', 'SQL'),
+      placeholderTool('power-bi', 'Power BI'),
+      placeholderTool('metabase', 'Metabase'),
+      placeholderTool('google-docs', 'Google Docs'),
+      placeholderTool('google-sheets', 'Google Sheets'),
+      placeholderTool('google-slides', 'Google Slides'),
+      placeholderTool('microsoft-office', 'Microsoft Office'),
+      placeholderTool('chatgpt', 'ChatGPT'),
+      placeholderTool('gemini', 'Gemini'),
+      placeholderTool('claude', 'Claude'),
+    ],
+  },
+  'design-ux': {
+    skills: [
+      { name: 'Visual Design', level: 4 },
+      { name: 'UI Design', level: 3 },
+      { name: 'UX Design', level: 2 },
+      { name: 'User Research', level: 4 },
+      { name: 'Product Thinking', level: 3 },
+      { name: 'Prototyping', level: 3 },
+      { name: 'Design Systems', level: 3 },
+    ],
+    keywords: [
+      'Typography',
+      'Color Theory',
+      'Color Theory',
+      'Visual Hierarchy',
+      'Iconography & Imagery',
+      'Interface Patterns',
+      'Component Design',
+      'States',
+      'Interactions',
+      'Responsive Design',
+      'Design Consistency',
+      'User Flows',
+      'Information Architecture',
+      'Usability Principles',
+      'Accessibility',
+      'Surveys',
+      'Personas',
+      'User Segmentation',
+      'Problem Definition',
+      'Feature Prioritization',
+      'Success Metrics',
+      'Wireframing',
+      'Microinteractions',
+      'Motion & Transition Design',
+      'Component Libraries',
+      'Design Tokens',
+      'Pattern Documentation',
+      'Scalable Component Architecture',
+      'Design-Development Alignment',
+      'Usability Testing',
+      'A/B Testing',
+      'Storytelling',
+      'Design Collaboration',
+      'Go-to-Market',
+      'Technical Trade-offs',
+      'Technical Debt',
+      'Scalability',
+      'Performance',
+    ],
+    tools: [
+      placeholderTool('figma', 'Figma'),
+      placeholderTool('figjam', 'Fig Jam'),
+      placeholderTool('framer', 'Framer'),
+      placeholderTool('adobe-illustrator', 'Adobe Illustrator'),
+      placeholderTool('adobe-photoshop', 'Adobe Photoshop'),
+      placeholderTool('adobe-xd', 'Adobe XD'),
+      placeholderTool('penpot', 'Penpot'),
+      placeholderTool('html', 'HTML'),
+      placeholderTool('css', 'CSS'),
+      placeholderTool('javascript', 'JavaScript'),
+      placeholderTool('tailwind', 'Tailwind'),
+      tool('vscode', 'VS Code'),
+      tool('github', 'GitHub'),
+      placeholderTool('chatgpt', 'ChatGPT'),
+      placeholderTool('gemini', 'Gemini'),
+      placeholderTool('claude-design', 'Claude Design'),
+      tool('codex', 'Codex'),
+      tool('antigravity', 'Antigravity'),
+    ],
+  },
+};
+
 export const filterTabs: FilterTab[] = [
   { id: 'software-engineering', label: 'Software Engineering' },
   { id: 'product-management', label: 'Product Management' },