added toggleable state to the skill cards. technically mobile works, at least on mobile-like sized browsers. it doesn't work on mobile. freakin weird.

src/components/SkillCard.jsx

@@ -2,26 +2,29 @@ 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)
-export default function SkillCard({ header, symbol, list, initState }) {
-  const [isExpanded, setIsExpanded] = useState(initState); // Initial state
+const SkillCard = ({ header, symbol, list, initState, isActive, onToggle }) => {
+  const [isExpanded, setIsExpanded] = useState(initState || isActive);
 
   const toggleExpansion = () => {
     setIsExpanded(!isExpanded);
+    onToggle();
   };
 
   return (
-    <div className="card shadow">
-      <div className="skill-section-header" onClick={toggleExpansion}>
+    <div className={`card shadow ${isActive ? "active-skill-card" : ""}`}>
+      <div className="skill-section-header" onClick={() => toggleExpansion()}>
         <span className="material-icons skill-symbol">{symbol}</span>
         <h3>{header}</h3>
       </div>
-      {isExpanded && (
+      {isActive && (
         <ul>
-          {list.map((item) => (
-            <li>{item}</li>
+          {list.map((item, index) => (
+            <li key={index}>{item}</li>
           ))}
         </ul>
       )}
     </div>
   );
-}
+};
+
+export default SkillCard;