fixed bug preventing anything from rendering.
This commit is contained in:
Joshua Ashton
-19
@@ -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} />,
|
||||
];
|
||||
|
||||
+2
-2
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
+6
-3
@@ -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 {
|
||||
|
||||
-261
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user