From 50aa2c8ccf7174ca05e6bdc77bbd3a354ff28510 Mon Sep 17 00:00:00 2001 From: Joshua Ashton Date: Tue, 31 Dec 2024 13:48:49 -0700 Subject: [PATCH] fixed bug related to flexbox preventing accordion logic on mobile. need to fix skill cards position on desktop --- README.md | 6 ++-- src/Primary.jsx | 57 +++++++++++++------------------ src/components/SkillCard.jsx | 15 ++++---- src/components/VerticalSlider.jsx | 2 +- src/main.css | 51 +++++++++------------------ 5 files changed, 50 insertions(+), 81 deletions(-) diff --git a/README.md b/README.md index 7678f6c7..015f4bc4 100644 --- a/README.md +++ b/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) diff --git a/src/Primary.jsx b/src/Primary.jsx index fe546f3a..cf408805 100644 --- a/src/Primary.jsx +++ b/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 ( <>
@@ -25,36 +24,28 @@ export default function Primary({
-
-
- setActiveCardIndex(0)} - /> - setActiveCardIndex(1)} - /> - setActiveCardIndex(2)} - /> -
+
+ setActiveCardIndex(0)} + /> + setActiveCardIndex(1)} + /> + setActiveCardIndex(2)} + />
keyboard_double_arrow_down diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx index ae37ef29..849b9d37 100644 --- a/src/components/SkillCard.jsx +++ b/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 ( -
-
toggleExpansion()}> +
+
test()}> {symbol}

{header}

diff --git a/src/components/VerticalSlider.jsx b/src/components/VerticalSlider.jsx index 72edb32f..71175821 100644 --- a/src/components/VerticalSlider.jsx +++ b/src/components/VerticalSlider.jsx @@ -24,7 +24,7 @@ export default function VerticalSlider({ slides }) { > {slides.map((slide, index) => ( - {({ isActive }) =>
{slide}
} + {
{slide}
} ))} diff --git a/src/main.css b/src/main.css index 2eb6dcd5..d523b7fe 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%, @@ -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) {