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,
-  keywordBadges,
-  toolsList,
+  skillsByDiscipline,
   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) => (
-                <span key={badge} className={styles.badgePill}>
+              {activeDiscipline.keywords.map((badge, index) => (
+                <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) => {
-                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=""
-                        width={64}
-                        height={64}
-                        className={styles.toolIcon}
-                      />
-                    </div>
-                    <span className={styles.toolLabel}>{tool.name}</span>
+              {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="Filter tools by discipline">
+        <div className={styles.filterTabsRow} aria-label="Choose skill discipline">
           {filterTabs.map((tab) => {
             const isActive = activeFilter === tab.id;
             return (