Skip to content

Commit 7cf5d7a

Browse files
JS-GitRepoJS-GitRepo
committed
fixed project transitions and bug where they broke on refresh
1 parent 1a0d3fa commit 7cf5d7a

File tree

6 files changed

+52
-58
lines changed

6 files changed

+52
-58
lines changed

‎.firebase/hosting.YnVpbGQ.cache‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@ logo192.png,1657132692666,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd1510
33
logo512.png,1657132682614,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
44
manifest.json,1657132371588,03d105d6225429616e0596db9f20a9c62fc48e2564cd1fc208ea60e6af1a0297
55
robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
6-
asset-manifest.json,1657829112988,c1ab03361ac5d599a6733ea4b8b22d5f7c572ac44a8debdff100121604b380e6
7-
index.html,1657829112988,1590ef6a3edd9c0754ba55a664db46790700c563cb3cbd95f684ced2c71dea5a
8-
static/css/main.d819203b.css,1657829112997,b194d80e43401a1c1f169ae74dc6730e1121a55c29e441fc044041af2effd374
9-
static/css/main.d819203b.css.map,1657829112998,2ec85b58f0e75cf4fe776dfe211fc58dcd592908aa00127adbe4dc997c5d0829
10-
static/js/787.cda612ba.chunk.js,1657829112997,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
11-
static/js/main.6ecde0db.js.LICENSE.txt,1657829112997,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
12-
static/js/787.cda612ba.chunk.js.map,1657829112998,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
13-
static/media/munro.f78662ff4aad4d038806.ttf,1657829112997,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14-
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1657829112997,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15-
static/media/DeerfallBannerPoster.da9b95c64930f253bad0.avif,1657829112997,97801686c427e88a0435c83da7e8169cc9f89c3fb7773de869092077d7a1304c
16-
static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1657829112997,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
17-
static/js/main.6ecde0db.js,1657829112997,d61dd4a72ef55459fa4f9ccd16e57c23d99de34f752cc8a56df93b2467155478
18-
static/media/DeerfallProRes_AV1.d420aebda0fdbb533e69.mp4,1657829112999,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
19-
static/js/main.6ecde0db.js.map,1657829112999,c8b1c30b9bad68c42870d38ad52e4208d2b24563a9997cf39541bd4034a3a18f
6+
asset-manifest.json,1657842408037,eed5815e0f120c929419a0a49027dfb6c638065ddc3353951882ea82ab840cd3
7+
index.html,1657842408024,07edab849c13e9762b332e2a03e94615922bb32e9385cd707346db09e98ef28a
8+
static/css/main.d819203b.css,1657842408035,b194d80e43401a1c1f169ae74dc6730e1121a55c29e441fc044041af2effd374
9+
static/js/787.cda612ba.chunk.js,1657842408035,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
10+
static/css/main.d819203b.css.map,1657842408035,2ec85b58f0e75cf4fe776dfe211fc58dcd592908aa00127adbe4dc997c5d0829
11+
static/js/main.f584dbc6.js.LICENSE.txt,1657842408035,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
12+
static/js/787.cda612ba.chunk.js.map,1657842408037,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
13+
static/media/munro.f78662ff4aad4d038806.ttf,1657842408035,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14+
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1657842408035,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15+
static/media/MediaMatchupMain.7061048d09c6103946f4.jpg,1657842408034,cde79e6af32cd09f5eb22edc47cdbf8516b6ce3ee8b5707b9fa5abe2e383c801
16+
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1657842408035,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
17+
static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1657842408034,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
18+
static/js/main.f584dbc6.js,1657842408035,7f62aa0f0a5abbe7904bf71bd97a8c17dcaebd6e2751a45e3c3b92930adc8a7b
19+
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1657842408036,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20+
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1657842408037,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21+
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1657842408037,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22+
static/js/main.f584dbc6.js.map,1657842408037,82c514ea374b8cfcfd9061eedd1c1742e69d448d582d730176bb94aa527694e8

‎src/components/HomeView.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,6 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => {
3434
const gameDevProjList = ["Deerfall"];
3535
const webDevProjList = ["MediaMatchup"];
3636

37-
useEffect(() => {
38-
if (currentPath.includes("/gamedev/")) {
39-
setCurrentProject(gameDevProjList[0]);
40-
} else if (currentPath.includes("/webdev/")) {
41-
setCurrentProject(webDevProjList[0]);
42-
}
43-
}, [isGameDev]);
44-
4537
useEffect(() => {
4638
if (currentPath.includes("/gamedev/portfolio")) {
4739
if (currentPath.includes("home/")) {
@@ -80,11 +72,18 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => {
8072
setIsPortfolio(false);
8173
setIsGameDev(false);
8274
}
75+
if (currentPath.includes("/gamedev/")) {
76+
setCurrentProject(gameDevProjList[0]);
77+
} else if (currentPath.includes("/webdev/")) {
78+
setCurrentProject(webDevProjList[0]);
79+
}
80+
console.log(currentPath);
81+
8382
setHueDuration(12000);
84-
}, [currentPath, currentProject]);
83+
}, [currentPath]);
8584

8685
return (
87-
<div className="HomeView">
86+
<div className='HomeView'>
8887
<HomeViewHeader
8988
isPortfolio={isPortfolio}
9089
gamedevOrWebdev={isGameDev}

‎src/components/HomeViewContent.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,11 @@
1717
.HomeViewContent video {
1818
height: 100%;
1919
object-fit: cover;
20+
margin-left: 50%;
21+
transform: translateX(-50%);
2022
min-width: 100%;
2123
}
24+
2225
.HomeViewContent img {
2326
height: 100%;
2427
object-fit: cover;

‎src/components/HomeViewContent.tsx‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from "react";
2-
import { animated, config, useTransition } from "react-spring";
2+
import { animated, useTransition } from "react-spring";
33
import "./HomeViewContent.css";
44
import Deerfall from "./projects/Deerfall";
55
import MediaMatchup from "./projects/MediaMatchup";
@@ -15,53 +15,35 @@ const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
1515
// toggleQueue false = projQueue1, toggleQueue true = projQueue2
1616
const [toggleQueue, setToggleQueue] = useState(false);
1717
// - - - - Projects - - - -
18+
const allProjList = {
19+
Deerfall: <Deerfall isPortfolio={isPortfolio} />,
20+
MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
21+
};
1822
const gameDevProjList = {
1923
Deerfall: <Deerfall isPortfolio={isPortfolio} />,
2024
};
2125
const webDevProjList = {
2226
MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
2327
};
24-
const [projQueue1, setProjQueue1] = useState<JSX.Element>(
25-
<Deerfall isPortfolio={isPortfolio} />
26-
);
27-
const [projQueue2, setProjQueue2] = useState<JSX.Element>(
28-
<Deerfall isPortfolio={isPortfolio} />
29-
);
28+
const [currProjArray, setCurrProjArray] = useState<JSX.Element[]>([]);
3029
// - - - - Transitions - - - -
31-
const transitions = useTransition(toggleQueue, {
30+
const transition = useTransition(currProjArray, {
3231
from: { opacity: 0 },
3332
enter: { opacity: 1 },
3433
leave: { opacity: 0 },
3534
config: { duration: 300 },
3635
exitBeforeEnter: true,
3736
});
3837

39-
const checkQueue = (project: JSX.Element) => {
40-
if (toggleQueue === true) {
41-
setProjQueue2(project);
42-
setToggleQueue(!toggleQueue);
43-
} else {
44-
setProjQueue1(project);
45-
setToggleQueue(!toggleQueue);
46-
}
47-
};
48-
4938
useEffect(() => {
50-
if (currentProject === "Deerfall") {
51-
checkQueue(gameDevProjList.Deerfall);
52-
} else if (currentProject === "MediaMatchup") {
53-
checkQueue(webDevProjList.MediaMatchup);
54-
}
39+
setCurrProjArray([eval(`allProjList.${currentProject}`)]);
5540
}, [currentProject]);
5641

5742
return (
58-
<div className="HomeViewContent">
59-
{transitions((styles, item) =>
60-
item ? (
61-
<animated.div style={styles}>{projQueue1}</animated.div>
62-
) : (
63-
<animated.div style={styles}>{projQueue2}</animated.div>
64-
)
43+
<div className='HomeViewContent'>
44+
{transition(
45+
(styles, item) =>
46+
item && <animated.div style={styles}>{item}</animated.div>
6547
)}
6648
</div>
6749
);

‎src/components/projects/Deerfall.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@ const Deerfall = ({ isPortfolio }: Props) => {
2828
const desc: string = "";
2929

3030
return (
31-
<animated.div className="Deerfall">
31+
<animated.div className="Deerfall media-ctr">
3232
<ProjVideo
33-
vidSrc={DeerfallVidAV1}
33+
vidSrc={DeerfallVidH265}
34+
vidSrc_Fallback={DeerfallVidAV1}
35+
vidSrc_Fallback2={DeerfallVidH264}
3436
isPortfolio={isPortfolio}
3537
tech={technologies}
3638
skills={skills}
3739
title={"Deerfall"}
3840
desc={desc}
3941
vidPoster={DeerfallPosterJPG}
40-
vidSrc_Fallback={DeerfallVidH265}
41-
vidSrc_Fallback2={DeerfallVidH264}
4242
/>
4343
</animated.div>
4444
);

‎src/components/projects/ProjVideo.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.ProjVideo {
2+
height: 100%;
3+
}
4+
5+
.ProjVideo .video-ctr {
6+
height: 100%;
7+
}

0 commit comments

Comments
 (0)