From 65fbec3e33aec7c95d999583f58a5ef2108b6e87 Mon Sep 17 00:00:00 2001
From: Bayda77 <sasha.bayda@outlook.com>
Date: Mon, 12 Jan 2026 20:19:25 -0600
Subject: [PATCH] Added expand all toggle

---
 src/pages/Skills.tsx | 74 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 68 insertions(+), 6 deletions(-)

diff --git a/src/pages/Skills.tsx b/src/pages/Skills.tsx
index 880724c..b5379b8 100644
--- a/src/pages/Skills.tsx
+++ b/src/pages/Skills.tsx
@@ -124,7 +124,25 @@ const itemVariants: Variants = {
 };
 
 export default function Skills() {
-    const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
+    const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+
+    const toggleCategory = (category: string) => {
+        setExpandedCategories(prev =>
+            prev.includes(category)
+                ? prev.filter(c => c !== category)
+                : [...prev, category]
+        );
+    };
+
+    const allExpanded = expandedCategories.length === TECHNICAL_SKILLS.length;
+
+    const toggleAll = () => {
+        if (allExpanded) {
+            setExpandedCategories([]);
+        } else {
+            setExpandedCategories(TECHNICAL_SKILLS.map(c => c.category));
+        }
+    };
 
     return (
         <div className="mainContentBlock" style={{ minWidth: "66vw", display: "flex", justifyContent: "center" }}>
@@ -137,9 +155,53 @@ export default function Skills() {
                 style={{ width: "100%", maxWidth: "1200px", padding: "0 40px", boxSizing: "border-box" }}
             >
                 <motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
-                    <h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
-                        Technical Skills
-                    </h2>
+                    <div style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        borderBottom: "1px solid rgba(255,255,255,0.2)",
+                        marginBottom: "25px",
+                        paddingBottom: "10px",
+                        marginTop: "15px" // Restore approximate default h2 top margin
+                    }}>
+                        <h2 style={{ color: "white", margin: 0 }}>
+                            Technical Skills
+                        </h2>
+                        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+                            <span style={{ color: "rgba(255,255,255,0.8)", fontSize: "0.9rem" }}>Expand All</span>
+                            <div
+                                onClick={toggleAll}
+                                style={{
+                                    width: "40px",
+                                    height: "22px",
+                                    background: allExpanded ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.1)",
+                                    borderRadius: "11px",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    padding: "2px",
+                                    cursor: "pointer",
+                                    boxSizing: "border-box",
+                                    border: "1px solid rgba(255,255,255,0.2)",
+                                    transition: "background 0.3s"
+                                }}
+                            >
+                                <motion.div
+                                    animate={{
+                                        x: allExpanded ? 18 : 0,
+                                        backgroundColor: allExpanded ? "#ffffff" : "rgba(255,255,255,0.5)"
+                                    }}
+                                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                                    style={{
+                                        width: "16px",
+                                        height: "16px",
+                                        borderRadius: "50%",
+                                        backgroundColor: "white",
+                                        boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
                     <div className="tech-skills-grid" style={{
                         display: "grid",
                         gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
@@ -151,8 +213,8 @@ export default function Skills() {
                                 <SkillCard
                                     key={category.category}
                                     category={category}
-                                    isExpanded={expandedCategory === category.category}
-                                    onToggle={() => setExpandedCategory(expandedCategory === category.category ? null : category.category)}
+                                    isExpanded={expandedCategories.includes(category.category)}
+                                    onToggle={() => toggleCategory(category.category)}
                                 />
                             ))}
                         </AnimatePresence>