Skip to content

Commit fbc5bbd

Browse files
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)