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/App.jsx

@@ -1,12 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import VerticalSlider from "./components/VerticalSlider";
 import Primary from "./Primary";
-import Skills from "./Skills";
 import Projects from "./Projects";
-import Contact from "./Contact";
-import About from "./About";
-import ProjectCard from "./components/ProjectCard";
 import "./main.css";
+import { terminal } from "virtual:terminal";
 
 /**
  * TODO: Read in data from a plain text file for easier editing in the future.
@@ -16,12 +13,19 @@ export default function App() {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 790);
 
   useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth <= 790);
+    const handleResize = () => {
+      const mediaQuery = window.matchMedia("(max-width: 790px)");
+      setIsMobile(mediaQuery.matches);
+    };
+
+    handleResize(); // Initial check on mount
     window.addEventListener("resize", handleResize);
+
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   const initState = isMobile ? [true, false, false] : [true, true, true];
+  terminal.log("isMobile: " + isMobile);
 
   // DATA VARIABLES
   /*
@@ -37,7 +41,7 @@ export default function App() {
     {
       title: "One AI",
       descriptionA:
-        "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter for its write once, build anywhere ideology. Here are some of the implemented features:",
+        "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter. Here are some of the implemented features:",
       featureList: [
         "user authentication",
         "AES encryption",
@@ -97,5 +101,6 @@ export default function App() {
     />,
     <Projects cardData={projectData} />,
   ];
+
   return <VerticalSlider slides={slides} />;
 }

src/Primary.jsx

@@ -1,6 +1,7 @@
 // TODO: Replace h4 callToAction with a GREEN button callToAction.
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import SkillCard from "./components/SkillCard";
+import { terminal } from "virtual:terminal";
 
 export default function Primary({
   primaryText,
@@ -10,6 +11,7 @@ export default function Primary({
   skills,
   initState,
 }) {
+  const [activeCardIndex, setActiveCardIndex] = useState(null);
   return (
     <>
       <div id="primary">
@@ -30,18 +32,27 @@ export default function Primary({
               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>

src/components/ProjectCard.jsx

@@ -20,8 +20,8 @@ export default function ProjectCard({
           <h3>{title}</h3>
           <p>{descriptionA}</p>
           <ul className="feature-list">
-            {featureList.map((item) => (
-              <li>{item}</li>
+            {featureList.map((item, index) => (
+              <li key={index}>{item}</li>
             ))}
           </ul>
           <div className="row">

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;

src/main.css

@@ -446,7 +446,7 @@ h4 {
 @media (max-width: 790px) {
   #primary {
     display: grid;
-    grid-template-rows: 50% 40% 10%;
+    grid-template-rows: 40% 40% 10%;
     grid-template-columns: 100%;
   }
 
@@ -513,6 +513,11 @@ h4 {
     font-size: 10vw;
   }
 
+  #project-grid-container {
+    height: 90vh;
+    grid-template-rows: 10% 80%;
+  }
+
   .project-card {
     display: grid;
     grid-template-columns: 100%;
@@ -528,6 +533,10 @@ h4 {
     padding: 2vw;
   }
 
+  .project-text-column {
+    margin-left: 5vw;
+  }
+
   .button {
   }
 }