From d58fcd5a64834fb474734f1d1bbce286545ea620 Mon Sep 17 00:00:00 2001 From: Joshua Ashton Date: Tue, 31 Dec 2024 14:09:37 -0700 Subject: [PATCH] fixed bug preventing anything from rendering. --- src/App.jsx | 19 --- src/Primary.jsx | 4 +- src/components/SkillCard.jsx | 8 +- src/main.css | 9 +- src/styles.css | 261 ----------------------------------- 5 files changed, 10 insertions(+), 291 deletions(-) delete mode 100644 src/styles.css diff --git a/src/App.jsx b/src/App.jsx index 092399f5..c405b45c 100644 --- a/src/App.jsx +++ b/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} />, , ]; diff --git a/src/Primary.jsx b/src/Primary.jsx index cf408805..b0995494 100644 --- a/src/Primary.jsx +++ b/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 ( <>
diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx index acb4f130..6fa674c5 100644 --- a/src/components/SkillCard.jsx +++ b/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 (
-
test()}> +
onToggle()}> {symbol}

{header}

- {(initState || isActive) && ( + {isActive && (
    {list.map((item, index) => (
  • {item}
    • diff --git a/src/main.css b/src/main.css index d523b7fe..217415e5 100644 --- a/src/main.css +++ b/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 { diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index a444ea9b..00000000 --- a/src/styles.css +++ /dev/null @@ -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; - } -}