Bayda77/digital-resume-FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added expand all toggle

Browse Source
This commit is contained in:
Bayda77
2026-01-12 20:19:25 -06:00
parent 127aa9acc7
commit 65fbec3e33
1 changed files with 68 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/Skills.tsx
View File

@@ -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>