refactor(content): improve section clarity and accessibility

src/components/SkillsSection.tsx

@@ -15,10 +15,6 @@ 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':
@@ -95,7 +91,7 @@ export const SkillsSection: React.FC = () => {
                     <div className={styles.toolIconContainer}>
                       <Image
                         src={tool.icon}
-                        alt={tool.name}
+                        alt=""
                         width={64}
                         height={64}
                         className={styles.toolIcon}
@@ -110,12 +106,14 @@ export const SkillsSection: React.FC = () => {
         </div>
 
         {/* Filter Tabs Under Card */}
-        <div className={styles.filterTabsRow}>
+        <div className={styles.filterTabsRow} aria-label="Filter tools by discipline">
           {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'