fixed bug preventing anything from rendering.

src/App.jsx

@@ -9,24 +9,6 @@ import { terminal } from "virtual:terminal";
  * TODO: Read in data from a plain text file for easier editing in the future.
  */
 export default function App() {
-  // FUNCTION DATA
-  const [isMobile, setIsMobile] = useState(window.innerWidth <= 790);
-
-  useEffect(() => {
-    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
   /*
    {
@@ -97,7 +79,6 @@ export default function App() {
       callToAction="Here's my resume."
       image="/images/profile.jpg"
       skills={skillsData}
-      initState={initState}
     />,
     <Projects cardData={projectData} />,
   ];

src/Primary.jsx

@@ -8,9 +8,9 @@ export default function Primary({
   callToAction,
   image,
   skills,
-  initState,
 }) {
-  let [activeCardIndex, setActiveCardIndex] = useState(null);
+  const [activeCardIndex, setActiveCardIndex] = useState(null);
+  () => setActiveCardIndex(0);
   return (
     <>
       <div id="primary">

src/components/SkillCard.jsx

@@ -3,17 +3,13 @@ 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, isActive, onToggle }) => {
-  function test() {
-    console.log("click detected");
-    onToggle();
-  }
   return (
     <div className="card shadow">
-      <div className="skill-card-header" onClick={() => test()}>
+      <div className="skill-card-header" onClick={() => onToggle()}>
         <span className="material-icons skill-symbol">{symbol}</span>
         <h3>{header}</h3>
       </div>
-      {(initState || isActive) && (
+      {isActive && (
         <ul>
           {list.map((item, index) => (
             <li key={index}>{item}</li>

src/main.css

@@ -23,8 +23,8 @@
 
 body {
   margin: 0;
-  height: 100vh;
   position: relative;
+  height: 100%;
   background: linear-gradient(
     135deg,
     #84509f 0%,
@@ -35,7 +35,7 @@ body {
   background-size:
     300% 100%,
     cover;
-  animation: background-fade 4s linear infinite;
+  animation: background-fade 5s linear infinite;
   animation-direction: alternate;
   background-attachment: fixed;
 }
@@ -72,7 +72,10 @@ h4 {
   font-size: 5vw;
   color: #ebd2ff;
 
-  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .shadow {

src/styles.css

@@ -1,261 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
-
-:root {
-  --width: 480px;
-}
-
-*,
-*::before,
-*::after {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: "Lato", sans-serif;
-}
-
-html,
-body {
-  position: relative;
-  height: 100%;
-  background: #222;
-}
-
-.swiper {
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.swiper-slide .slide-container {
-  display: grid;
-  grid-template-columns: 48% 50%;
-  grid-template-rows: 100%;
-  column-gap: 30px;
-  height: 100%;
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-left: 120px;
-  text-align: center;
-  opacity: 0;
-}
-
-.info h1 {
-  font-size: clamp(2.25rem, 3.5vw, 8rem);
-  font-weight: 600;
-  letter-spacing: 2px;
-  width: max-content;
-  margin-bottom: 32px;
-  opacity: 0;
-}
-
-[data-color="purple"] {
-  color: #7385ca;
-}
-
-.info p {
-  font-size: clamp(1.1rem, 2vw, 1.5rem);
-  color: #bfbec1;
-  font-weight: 300;
-  line-height: 1.5;
-  opacity: 0;
-}
-
-.swiper-slide-active .info {
-  opacity: 1;
-}
-
-.swiper-slide-active .info h1,
-.swiper-slide-active .info p {
-  animation: moveDown 0.8s ease-in forwards;
-}
-
-.swiper-slide-active .info h1 {
-  animation-delay: 0.2s;
-}
-
-.swiper-slide-active .info p {
-  animation-delay: 1s;
-}
-
-@keyframes moveDown {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--width);
-  aspect-ratio: 1/1;
-  margin: auto;
-}
-
-.circle {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.circle[data-item="purple"] {
-  border: 1px solid #8092d9;
-}
-
-.circle::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 0;
-  z-index: -1;
-}
-
-.circle[data-item="purple"]::before {
-  background: linear-gradient(
-    to left bottom,
-    #8092d9,
-    #677abf,
-    #4e63a6,
-    #344d8d,
-    #163875
-  );
-}
-
-.animated-circle::before {
-  animation: colorTransition 2s linear forwards;
-}
-
-@keyframes colorTransition {
-  0% {
-    height: 0;
-    top: -50%;
-  }
-  100% {
-    height: 100%;
-    top: 0%;
-  }
-}
-
-.swiper-slide img {
-  display: block;
-  width: calc(var(--width) / 2);
-  filter: drop-shadow(5px 6px 5px rgba(36, 36, 42, 0.5));
-  user-select: none;
-  opacity: 0;
-  z-index: 1;
-}
-
-.swiper-slide-active img {
-  animation: itemMoveDown 0.8s ease-in forwards 1.4s;
-}
-
-@keyframes itemMoveDown {
-  0% {
-    transform: translateY(calc(var(--width) / -5));
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.swiper-pagination-bullet {
-  width: 18px;
-  height: 18px;
-  background-color: #7e7e7e;
-  border-radius: 50%;
-  transition: all 0.6s ease-in-out;
-}
-
-.swiper-pagination-bullet-active {
-  height: 36px;
-  background-color: #717271;
-  border-radius: 14px;
-}
-
-@media (max-width: 1250px) {
-  .info {
-    padding-left: 90px;
-  }
-}
-@media (max-width: 1075px) {
-  :root {
-    --width: 400px;
-  }
-
-  .swiper-slide .slide-container {
-    column-gap: 20px;
-  }
-
-  .info {
-    padding-left: 60px;
-  }
-}
-@media (max-width: 990px) {
-  :root {
-    --width: 360px;
-  }
-
-  .info {
-    padding-left: 30px;
-  }
-}
-@media (max-width: 790px) {
-  .swiper-slide .slide-container {
-    grid-template-columns: 100%;
-    grid-template-rows: 60% 35%;
-    column-gap: 0;
-    grid-template-areas:
-      "item"
-      "info";
-    padding: 30px;
-  }
-
-  .item {
-    grid-area: item;
-  }
-
-  .info {
-    grid-area: info;
-  }
-
-  .info h1 {
-    margin-bottom: 16px;
-    width: unset;
-    line-height: 1.1;
-  }
-
-  .swiper-pagination-bullet {
-    width: 14px;
-    height: 14px;
-  }
-
-  .swiper-pagination-bullet-active {
-    height: 28px;
-  }
-}
-@media (max-width: 485px) {
-  :root {
-    --width: 280px;
-  }
-
-  .info p {
-    line-height: 1.4;
-  }
-}