fixed bug related to flexbox preventing accordion logic on mobile. need to fix skill cards position on desktop

README.md

@@ -18,9 +18,9 @@ Week 1: 17/12/24 - 23/12/24 (Planning for the future)
 
 Bug Fixes:
 
-- [ ] Breathing animation of background gradient stopped.
-- [ ] Add state to skill accordions for mobile.
-- [ ] Alignment of project card on mobile.
+- [x] Breathing animation of background gradient stopped.
+- [x] Add state to skill accordions for mobile.
+- [x] Alignment of project card on mobile.
 - [ ] Profile picture animation is slightly cutoff on mobile.
 
 Week 2: 24/12/24 - 30/12/24 (Adding key information)

src/Primary.jsx

@@ -1,7 +1,6 @@
 // TODO: Replace h4 callToAction with a GREEN button callToAction.
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
 import SkillCard from "./components/SkillCard";
-import { terminal } from "virtual:terminal";
 
 export default function Primary({
   primaryText,
@@ -11,7 +10,7 @@ export default function Primary({
   skills,
   initState,
 }) {
-  const [activeCardIndex, setActiveCardIndex] = useState(null);
+  let [activeCardIndex, setActiveCardIndex] = useState(null);
   return (
     <>
       <div id="primary">
@@ -25,36 +24,28 @@ export default function Primary({
             <img id="profile" src={image} />
           </div>
         </div>
-        <div id="skills-section">
-          <div className="cards">
-            <SkillCard
-              header="Languages"
-              symbol="code"
-              list={skills.languages}
-              initState={initState[0]}
-              index={0}
-              isActive={activeCardIndex === 0}
-              onToggle={() => setActiveCardIndex(0)}
-            />
-            <SkillCard
-              header="Tools"
-              symbol="terminal"
-              list={skills.tools}
-              initState={initState[1]}
-              index={1}
-              isActive={activeCardIndex === 1}
-              onToggle={() => setActiveCardIndex(1)}
-            />
-            <SkillCard
-              header="Other"
-              symbol="hub"
-              list={skills.other}
-              initState={initState[2]}
-              index={2}
-              isActive={activeCardIndex === 2}
-              onToggle={() => setActiveCardIndex(2)}
-            />
-          </div>
+        <div id="skills-cards">
+          <SkillCard
+            header="Languages"
+            symbol="code"
+            list={skills.languages}
+            isActive={activeCardIndex === 0}
+            onToggle={() => setActiveCardIndex(0)}
+          />
+          <SkillCard
+            header="Tools"
+            symbol="terminal"
+            list={skills.tools}
+            isActive={activeCardIndex === 1}
+            onToggle={() => setActiveCardIndex(1)}
+          />
+          <SkillCard
+            header="Other"
+            symbol="hub"
+            list={skills.other}
+            isActive={activeCardIndex === 2}
+            onToggle={() => setActiveCardIndex(2)}
+          />
         </div>
         <span className="material-icons down-indicator">
           keyboard_double_arrow_down

src/components/SkillCard.jsx

@@ -2,17 +2,14 @@ import React, { useState } from "react";
 
 // TODO: Add state which only allows one skill card at a time to be expanded.
 // TODO: Ensure that the expandability of the skill card is only an option when @media max-width 790px (mobile)
-const SkillCard = ({ header, symbol, list, initState, isActive, onToggle }) => {
-  const [isExpanded, setIsExpanded] = useState(initState || isActive);
-
-  const toggleExpansion = () => {
-    setIsExpanded(!isExpanded);
+const SkillCard = ({ header, symbol, list, isActive, onToggle }) => {
+  function test() {
+    console.log("click detected");
     onToggle();
-  };
-
+  }
   return (
-    <div className={`card shadow ${isActive ? "active-skill-card" : ""}`}>
-      <div className="skill-section-header" onClick={() => toggleExpansion()}>
+    <div className="card shadow">
+      <div className="skill-card-header" onClick={() => test()}>
         <span className="material-icons skill-symbol">{symbol}</span>
         <h3>{header}</h3>
       </div>

src/components/VerticalSlider.jsx

@@ -24,7 +24,7 @@ export default function VerticalSlider({ slides }) {
       >
         {slides.map((slide, index) => (
           <SwiperSlide key={index}>
-            {({ isActive }) => <div className="slide-container">{slide}</div>}
+            {<div className="slide-container">{slide}</div>}
           </SwiperSlide>
         ))}
       </Swiper>

src/main.css

@@ -23,8 +23,8 @@
 
 body {
   margin: 0;
+  height: 100vh;
   position: relative;
-  height: 100%;
   background: linear-gradient(
     135deg,
     #84509f 0%,
@@ -32,7 +32,10 @@ body {
     #39124e 61%,
     #170123 100%
   );
-  animation: background-fade 1s linear infinite;
+  background-size:
+    300% 100%,
+    cover;
+  animation: background-fade 4s linear infinite;
   animation-direction: alternate;
   background-attachment: fixed;
 }
@@ -69,10 +72,7 @@ h4 {
   font-size: 5vw;
   color: #ebd2ff;
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  margin: 0 auto;
 }
 
 .shadow {
@@ -101,14 +101,14 @@ h4 {
 
 /**ACTIVE PAGE ANIMATIONS**/
 .swiper-slide-active #header,
-.swiper-slide-active #skills-section,
+.swiper-slide-active #skill-cards,
 .swiper-slide-active #project-section,
 .swiper-slide-active #project-cards-section {
   opacity: 0;
 }
 
 .swiper-slide-active #header,
-.swiper-slide-active #skills-section,
+.swiper-slide-active #skill-cards,
 .swiper-slide-active #project-section,
 .swiper-slide-active #project-cards-section,
 .down-indicator {
@@ -121,7 +121,7 @@ h4 {
   animation-delay: 0.2s;
 }
 
-.swiper-slide-active #skills-section,
+.swiper-slide-active #skills-cards,
 .swiper-slide-active #project-cards-section {
   animation-delay: 0.8s;
 }
@@ -195,34 +195,21 @@ h4 {
   animation: imgMoveDown 0.8s ease-in forwards 0.2s;
 }
 
-#skills-section {
+#skills-cards {
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.cards {
   display: grid;
-  grid-template-columns: 30% 30% 30%;
-  grid-template-rows: 100%;
-  column-gap: 2.25vw;
-  justify-content: center;
+  place-items: center;
 }
 
 /**SKILL CARDS**/
 .card {
-  align-items: center;
-  justify-content: center;
   text-align: center;
   background-color: #ebd2ff;
   border-radius: 20px;
-  width: 20vw;
+  min-width: 20vw;
 }
 
-.card .skill-section-header {
+.skill-card-header {
   display: grid;
   grid-template-columns: 20% 60%;
   grid-template-rows: 100%;
@@ -235,11 +222,9 @@ h4 {
   margin: 0;
   background-color: #4a245e;
   border-radius: 18px 18px 0 0;
-
-  width: 100%;
 }
 
-.card .skill-section-header .skill-symbol {
+.skill-symbol {
   font-variation-settings:
     "FILL" 0,
     "wght" 200,
@@ -485,18 +470,17 @@ h4 {
     justify-content: left;
   }
 
-  #skills-section .card .skill-section-header {
+  .skill-card-header {
     border-radius: 18px 18px 18px 18px;
   }
 
   .cards {
     grid-template-columns: 100%;
     grid-template-rows: 30% 30% 30%;
-    column-gap: 0;
   }
 
   .card {
-    width: 50vw;
+    min-width: 50vw;
     margin: 1vw;
   }
 
@@ -536,9 +520,6 @@ h4 {
   .project-text-column {
     margin-left: 5vw;
   }
-
-  .button {
-  }
 }
 
 @media (max-width: 485px) {