Skip to content

Commit fbc5bbd

Browse files
JS-GitRepoJS-GitRepo
committed
react spring useTransition functionality changed to better assist dynamic 'portfolio' and 'blog' features in each component. Most functional changes inside of HVContent.tsx and visual changes elsewhere.
1 parent c6f2b32 commit fbc5bbd

28 files changed

+376
-208
lines changed

‎.firebase/hosting.YnVpbGQ.cache‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ logo192.png,1658782384754,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd1510
33
logo512.png,1658782384754,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
44
manifest.json,1658782384755,00ed38bd68df8fe063a1fda8efbea33c1e6e5118444b200531d8996998372fa5
55
robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
6-
asset-manifest.json,1666066390769,197558e8f3debe75580bf71b5ffdf8356fc6b873f346c63804c4199b57250c47
7-
index.html,1666066390755,26b2da7e1815dbd1fc2f51d9af91c0d24b2ea6e7b94fcb3ecf4567662abe5e11
8-
static/js/787.cda612ba.chunk.js,1666066390768,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
9-
static/css/main.f959d21f.css,1666066390766,78862ebdbc9e2a7d52f6d1f577291bf277fac6cf8d19456ec83f1a8865ac2c8c
10-
static/js/main.39bce487.js.LICENSE.txt,1666066390766,389af84f5364120c1a9af11313b67a410e2e78bc2556eec2c4507b542075a54b
11-
static/css/main.f959d21f.css.map,1666066390766,7fb96260116881514400a52e77540a380df01e478f7aa86389d1892385a38233
12-
static/js/787.cda612ba.chunk.js.map,1666066390769,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
13-
static/media/munro.f78662ff4aad4d038806.ttf,1666066390766,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14-
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1666066390766,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15-
static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1666066390766,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
16-
static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1666066390765,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
17-
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1666066390765,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
18-
static/js/main.39bce487.js,1666066390765,b4b8f83319b3d4732178f9026f31904ab8e8cd3f6c5878e908e20c8da6a2b956
19-
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1666066390768,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20-
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1666066390768,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21-
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1666066390769,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22-
static/js/main.39bce487.js.map,1666066390768,48b4e36ae6c9de5af7b455ba71ee23a7c02b6dc6c99bc285f703905632e19994
6+
asset-manifest.json,1666066965842,b98d7748f2593ca71be3514094e362d67650c2c5bc536a2fee5e223d4a1dea50
7+
index.html,1666066965828,2e2d977f5c005a34dfdc0f06e13752a1470a2ec186b51fcad7538e67d7f192b7
8+
static/css/main.b78c790c.css,1666066965840,4c817b2f6f2cbc4a0a186a4ea01dc6484366d0526b5720911f83f325cf7e1547
9+
static/js/787.cda612ba.chunk.js,1666066965840,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
10+
static/js/main.598fef70.js.LICENSE.txt,1666066965840,389af84f5364120c1a9af11313b67a410e2e78bc2556eec2c4507b542075a54b
11+
static/js/787.cda612ba.chunk.js.map,1666066965842,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
12+
static/css/main.b78c790c.css.map,1666066965839,97879dbd3e1bb07c2c9cdbc0a91bf04e8699b12bdfdb3f06de25f4c229deead0
13+
static/media/munro.f78662ff4aad4d038806.ttf,1666066965839,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14+
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1666066965840,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15+
static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1666066965839,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
16+
static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1666066965839,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
17+
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1666066965839,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
18+
static/js/main.598fef70.js,1666066965839,f829529374101438a02efbd5144311f7bd87b60d39c8459929651020d541ed39
19+
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1666066965841,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20+
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1666066965841,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21+
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1666066965842,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22+
static/js/main.598fef70.js.map,1666066965841,c06963706d277aa92ef2b9c15ff3d33ef90e57839a9e62e0dc9d821c5813f816

‎src/App.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import "./App.css";
22
import { Route, Routes } from "react-router-dom";
33
import HomeView from "./components/HomeView";
4-
import WIPDisclaimer from "./components/WIPDisclaimer";
54
import ErrorNotFound from "./components/ErrorNotFound";
65

76
// 9-28-22
@@ -27,7 +26,6 @@ function App() {
2726
<Route path='404NotFound' element={<ErrorNotFound />} />
2827
<Route path='*' element={<ErrorNotFound />} />
2928
</Routes>
30-
<WIPDisclaimer />
3129
</div>
3230
);
3331
}

‎src/components/HVContent.tsx‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,76 @@ import { animated, useTransition } from "react-spring";
33
import "./styles/HVContent.css";
44
import Deerfall from "./projects/Deerfall";
55
import MediaMatchup from "./projects/MediaMatchup";
6-
import { useNavigate } from "react-router-dom";
7-
import Introduction from "./projects/Introduction";
6+
import Introduction from "./Introduction";
87

98
interface Props {
10-
currentContent: string | undefined;
9+
project: string;
1110
isIntro: boolean;
11+
allParams: string[];
1212
}
1313

14-
const HVContent = ({ currentContent, isIntro }: Props) => {
15-
// - - - - States - - - -
16-
// toggleQueue false = projQueue1, toggleQueue true = projQueue2
17-
const [toggleQueue, setToggleQueue] = useState(false);
18-
const navigate = useNavigate();
19-
// - - - - Projects - - - -
14+
const HVContent = ({ project, isIntro, allParams }: Props) => {
15+
// - - - - STATES - - - -
16+
const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
17+
// - - - - PROJECTS - - - -
2018
const allProjList = {
2119
intro: <Introduction />,
22-
deerfall: <Deerfall isPortfolio={true} />,
23-
mediamatchup: <MediaMatchup isPortfolio={true} />,
20+
deerfall: <Deerfall isPortfolio={isPortfolio} />,
21+
mediamatchup: <MediaMatchup isPortfolio={isPortfolio} />,
2422
};
2523
const gameDevProjList = {
26-
deerfall: <Deerfall isPortfolio={true} />,
24+
deerfall: <Deerfall isPortfolio={isPortfolio} />,
2725
};
2826
const webDevProjList = {
29-
mediamatchup: <MediaMatchup isPortfolio={true} />,
27+
mediamatchup: <MediaMatchup isPortfolio={isPortfolio} />,
3028
};
31-
const [currProjArray, setCurrProjArray] = useState<JSX.Element[]>([]);
32-
// - - - - Transitions - - - -
33-
const transition = useTransition(currProjArray, {
29+
const [localProject, setLocalProject] = useState<string>("");
30+
const [show, setShow] = useState<boolean>(true);
31+
// - - - - TRANSITIONS - - - -
32+
const transitionFade = useTransition(show, {
3433
from: { opacity: 0 },
3534
enter: { opacity: 1 },
3635
leave: { opacity: 0 },
3736
config: { duration: 300 },
38-
exitBeforeEnter: true,
37+
// exitBeforeEnter: true,
3938
});
4039

40+
const checkAndSetProjComp = () => {
41+
if (isIntro) {
42+
setLocalProject("intro");
43+
} else {
44+
setLocalProject(project);
45+
}
46+
};
47+
48+
// - - - - - USE EFFECTS - - - - -
49+
// Hide Project when it is Changed, then set the new project once hidden
50+
useEffect(() => {
51+
setShow(false);
52+
setTimeout(() => checkAndSetProjComp(), 310);
53+
}, [project, isIntro]);
54+
55+
// Once the new project is set, fade back in to display it
56+
useEffect(() => {
57+
setShow(true);
58+
}, [localProject]);
59+
60+
// Check and set isPortfolio whenever params change
4161
useEffect(() => {
42-
if (currentContent && !isIntro) {
43-
setCurrProjArray([eval(`allProjList.${currentContent}`)]);
44-
} else if (isIntro) {
45-
setCurrProjArray([eval("allProjList.intro")]);
62+
if (allParams[1] === "portfolio") {
63+
setIsPortfolio(true);
64+
} else {
65+
setIsPortfolio(false);
4666
}
47-
}, [currentContent, isIntro]);
67+
}, [allParams]);
4868

4969
return (
5070
<div className='HVContent'>
51-
{transition(
71+
{transitionFade(
5272
(styles, item) =>
5373
item && (
5474
<animated.div className={`media-ctr`} style={styles}>
55-
{item}
75+
{allProjList[localProject as keyof typeof allProjList]}
5676
</animated.div>
5777
)
5878
)}

‎src/components/HomeView.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const HomeView = ({}: Props) => {
1414
// - - - - - NAVIGATION - - - - -
1515
const location = useLocation();
1616
const navigate = useNavigate();
17-
// Valid URL Parameter Options to check against
17+
// - - - - - URL PARAMS - - - - -
1818
let { landingOrHome, category1, gameOrWeb, project } = useParams();
1919
const param1_Opts = ["landing", "home"];
2020
const param2_Opts = ["portfolio", "blog", "introduction", "intro"];
@@ -31,7 +31,7 @@ const HomeView = ({}: Props) => {
3131
param4,
3232
]);
3333
const paramStateSet = [setParam1, setParam2, setParam3, setParam4];
34-
// check if this is the landing page
34+
// - - - - - LANDING PAGE - - - - -
3535
const [isLanding, setIsLanding] = useState<boolean>(false);
3636
const [isIntro, setIsIntro] = useState<boolean>(false);
3737
// - - - - CONTEXT - - - -
@@ -126,7 +126,11 @@ const HomeView = ({}: Props) => {
126126
allParams={allParamsArray}
127127
isIntro={isIntro}
128128
/>
129-
<HVContent currentContent={param4} isIntro={isIntro} />
129+
<HVContent
130+
project={param4}
131+
isIntro={isIntro}
132+
allParams={allParamsArray}
133+
/>
130134
<HVFooter allParams={allParamsArray} isIntro={isIntro} />
131135
</div>
132136
);

‎src/components/projects/Introduction.tsx‎ renamed to ‎src/components/Introduction.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useContext } from "react";
22
import { animated } from "react-spring";
3-
import AppContext from "../../contexts/AppContext";
4-
import headshot from "../../img/Headshot-PurpleFlannel.png";
5-
import pixelBG from "../../img/pixelBG_LowRes.png";
6-
import AppConfig from "../../AppConfig.json";
7-
import "./Introduction.css";
3+
import AppContext from "../contexts/AppContext";
4+
import headshot from "../img/Headshot-PurpleFlannel.png";
5+
import pixelBG from "../img/pixelBG_LowRes.png";
6+
import AppConfig from "../AppConfig.json";
7+
import "./styles/Introduction.css";
88

99
const Introduction = () => {
1010
const { hueRotation, hueRotation_Inv } = useContext(AppContext);

‎src/components/LandingPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import pixelBG from "../img/pixelBG_LowRes.png";
77
import pixelFadeBG from "../img/animated-14fps.png";
88
import AppContext from "../contexts/AppContext";
99
import AppConfig from "../AppConfig.json";
10+
import WIPDisclaimer from "./WIPDisclaimer";
1011

1112
interface Props {
1213
setIsLanding: React.Dispatch<React.SetStateAction<boolean>>;
@@ -125,6 +126,7 @@ const LandingPage = ({ setIsLanding }: Props) => {
125126
pathName={link2Path}
126127
isH1={false}
127128
/>
129+
{/* <WIPDisclaimer /> */}
128130
</animated.div>
129131
) : (
130132
""

‎src/components/projects/Deerfall.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ProjVideo from "./ProjVideo";
1+
import ProjVideo from "./subComponents/ProjVideo";
22
import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallBanner_AV1.mp4";
33
import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallBanner_H265.mp4";
44
import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallBanner_H264.mp4";
@@ -28,7 +28,7 @@ const Deerfall = ({ isPortfolio }: Props) => {
2828
const desc: string = "";
2929

3030
return (
31-
<animated.div className="Deerfall media-ctr">
31+
<animated.div className='Deerfall media-ctr'>
3232
<ProjVideo
3333
vidSrc={DeerfallVidH265}
3434
vidSrc_Fallback={DeerfallVidAV1}

‎src/components/projects/MediaMatchup.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ProjImage from "./ProjImage";
1+
import ProjImage from "./subComponents/ProjImage";
22
// import mediaMatchupMainAVIF from "../../img/Projects/MediaMatchup/MediaMatchupMain.avif";
33
// import mediaMatchupMainJPG from "../../img/Projects/MediaMatchup/MediaMatchupMain.jpg";
44
import matchupImg from "../../img/Projects/MediaMatchup/ST4vsArt.jpg";
@@ -25,7 +25,7 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
2525
"Software Engineering",
2626
"Hosting",
2727
];
28-
const desc: string = "";
28+
const desc: string = "A multi-media comparison app with a social twist. ";
2929

3030
return (
3131
<animated.div className='MediaMatchup media-ctr'>

‎src/components/projects/ProjDescBlog.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/components/projects/ProjDescPortfolio.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)