Skip to content

Commit d5cbd99

Browse files
JS-GitRepoJS-GitRepo
committed
nav changes almost complete; UI modified heavily and intro added.
1 parent f44d3cd commit d5cbd99

File tree

8 files changed

+110
-59
lines changed

8 files changed

+110
-59
lines changed

‎src/App.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@ function App() {
2222
<Route
2323
path='/:landingOrHome'
2424
element={<HomeViewContent currentContent={"Deerfall"} />}>
25-
<Route
26-
path='introduction'
27-
element={<HomeViewContent currentContent={"Deerfall"} />}
28-
/>
2925
<Route
3026
path=':category1'
3127
element={<HomeViewContent currentContent={"Deerfall"} />}>

‎src/components/HomeView.tsx‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import HomeViewHeader from "./HomeViewHeader";
55
import HomeViewFooter from "./HomeViewFooter";
66
import AppContext from "../contexts/AppContext";
77
import AppConfig from "../AppConfig.json";
8+
import LandingPage from "./LandingPage";
89

910
interface Props {}
1011

@@ -19,11 +20,19 @@ const HomeView = ({}: Props) => {
1920
const param3_Opts = ["gamedev", "webdev"];
2021
const param4_Opts = AppConfig.projectURL_Params;
2122
// useStates for Interfacing with URL Params
22-
const [param1, setParam1] = useState("home");
23-
const [param2, setParam2] = useState("portfolio");
24-
const [param3, setParam3] = useState("gamedev");
25-
const [param4, setParam4] = useState("deerfall");
26-
const [paramObj, setParamObj] = useState({ param1, param2, param3, param4 });
23+
const [param1, setParam1] = useState<string>("home");
24+
const [param2, setParam2] = useState<string>("portfolio");
25+
const [param3, setParam3] = useState<string>("gamedev");
26+
const [param4, setParam4] = useState<string>("deerfall");
27+
const [allParamsObj, setAllParamsObj] = useState<any>({
28+
param1,
29+
param2,
30+
param3,
31+
param4,
32+
});
33+
const setParamsArray = [setParam1, setParam2, setParam3, setParam4];
34+
// check if this is the landing page
35+
const [isLanding, setIsLanding] = useState<boolean>(false);
2736
// - - - - CONTEXT - - - -
2837
const { hueRotation, setHueDuration } = useContext(AppContext);
2938
// - - - - - TITLES AND TEXT - - - - -
@@ -39,7 +48,12 @@ const HomeView = ({}: Props) => {
3948
const checkURL = () => {
4049
let URLSegments = [landingOrHome, category1, gameOrWeb, project];
4150
let paramArray = [param1_Opts, param2_Opts, param3_Opts, param4_Opts];
42-
let setParamsArray = [setParam1, setParam2, setParam3, setParam4];
51+
if (location.pathname === "/") {
52+
navigate("/landing");
53+
setIsLanding(true);
54+
} else if (location.pathname === "/landing") {
55+
setIsLanding(true);
56+
}
4357
for (let i = 0; i < URLSegments.length; i++) {
4458
if (URLSegments[i]) {
4559
let found = paramArray[i].find((item) => item === URLSegments[i]);
@@ -52,28 +66,40 @@ const HomeView = ({}: Props) => {
5266
}
5367
};
5468

69+
// - - - - - useEffects - - - - -
5570
useEffect(() => {
56-
setParamObj({ param1, param2, param3, param4 });
71+
setAllParamsObj({ param1, param2, param3, param4 });
5772
}, [param1, param2, param3, param4]);
5873

5974
useEffect(() => {
60-
checkURL();
61-
62-
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
63-
setHueDuration(AppConfig.hueAnimDuration_Slow);
75+
if (!isLanding) {
76+
checkURL();
77+
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
78+
setHueDuration(AppConfig.hueAnimDuration_Slow);
79+
}
6480
}
81+
console.log(category1);
6582
}, [location]);
6683

84+
// - - - - - JSX - - - - -
6785
return (
6886
<div className='HomeView'>
87+
{isLanding ? (
88+
<LandingPage
89+
setIsLanding={setIsLanding}
90+
setParamsArray={setParamsArray}
91+
/>
92+
) : (
93+
""
94+
)}
6995
<HomeViewHeader
7096
subtitle={subtitle}
7197
subEmoji={subEmoji}
7298
currentContent={currentContent}
73-
paramObj={paramObj}
99+
allParamsObj={allParamsObj}
74100
/>
75101
<Outlet />
76-
<HomeViewFooter currentContent={"deerfall"} paramObj={paramObj} />
102+
<HomeViewFooter currentContent={"deerfall"} allParamsObj={allParamsObj} />
77103
</div>
78104
);
79105
};

‎src/components/HomeViewFooter.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import "./styles/HomeViewFooter.css";
66

77
interface Props {
88
currentContent: string;
9-
paramObj: {
9+
allParamsObj: {
1010
param1: string;
1111
param2: string;
1212
param3: string;
1313
param4: string;
1414
};
1515
}
1616

17-
const HomeViewFooter = ({ currentContent, paramObj }: Props) => {
17+
const HomeViewFooter = ({ currentContent, allParamsObj }: Props) => {
1818
const currentYear = new Date();
1919
const { hueRotation } = useContext(AppContext);
2020

@@ -31,7 +31,7 @@ const HomeViewFooter = ({ currentContent, paramObj }: Props) => {
3131
<ul>
3232
<li>
3333
<NavLink
34-
to={`/home/portfolio/${paramObj.param3}`}
34+
to={`/${allParamsObj.param1}/portfolio/${allParamsObj.param3}`}
3535
className={({ isActive }) =>
3636
isActive ? "highlighted-link" : ""
3737
}>
@@ -40,7 +40,7 @@ const HomeViewFooter = ({ currentContent, paramObj }: Props) => {
4040
</li>
4141
<li>
4242
<NavLink
43-
to={`/home/blog/${paramObj.param3}`}
43+
to={`/${allParamsObj.param1}/blog/${allParamsObj.param3}`}
4444
className={({ isActive }) =>
4545
isActive ? "highlighted-link" : ""
4646
}>
@@ -49,7 +49,7 @@ const HomeViewFooter = ({ currentContent, paramObj }: Props) => {
4949
</li>
5050
<li>
5151
<NavLink
52-
to={`/home/introduction`}
52+
to={`/${allParamsObj.param1}/introduction`}
5353
className={({ isActive }) =>
5454
isActive ? "highlighted-link" : ""
5555
}>

‎src/components/HomeViewHeader.tsx‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useContext } from "react";
1+
import { useContext, useEffect, useState } from "react";
22
import { Link, NavLink } from "react-router-dom";
33
import { animated } from "react-spring";
44
import AppContext from "../contexts/AppContext";
@@ -8,7 +8,7 @@ interface Props {
88
subtitle: string;
99
subEmoji: string;
1010
currentContent: string;
11-
paramObj: {
11+
allParamsObj: {
1212
param1: string;
1313
param2: string;
1414
param3: string;
@@ -20,20 +20,35 @@ const HomeViewHeader = ({
2020
subtitle,
2121
subEmoji,
2222
currentContent,
23-
paramObj,
23+
allParamsObj,
2424
}: Props) => {
2525
// GENERAL
2626
const { hueRotation } = useContext(AppContext);
27+
const [isIntro, setIsIntro] = useState<boolean>(false);
28+
29+
useEffect(() => {
30+
if (allParamsObj.param2 === "introduction") {
31+
setIsIntro(true);
32+
} else {
33+
setIsIntro(false);
34+
}
35+
}, [allParamsObj.param2]);
2736

2837
// Some elements in the return will be hidden by media query CSS, to allow UI elements in the header or footer depending on mobile / Desktop. This is why there are some "redundant" elements
2938
return (
3039
<div className='HomeViewHeader'>
3140
<Link className='title-ctr' to={{ pathname: "/" }}>
3241
<h1>
33-
{`jake's `}
42+
{`${isIntro ? "who is " : ""}`}
43+
<animated.span
44+
style={isIntro ? hueRotation : {}}
45+
className={isIntro ? "highlighted-link" : ""}>
46+
jake
47+
{`${isIntro ? "?" : "'s"} `}
48+
</animated.span>
3449
<animated.span style={hueRotation} className='highlighted-link'>
35-
{`${paramObj.param3}`}
36-
{` ${paramObj.param2}`}
50+
{isIntro ? "" : `${allParamsObj.param3}`}
51+
{isIntro ? "" : ` ${allParamsObj.param2}`}
3752
</animated.span>
3853
</h1>
3954
<p className='subtitle'>
@@ -51,12 +66,12 @@ const HomeViewHeader = ({
5166

5267
<div className='project-nav-type-cat'>
5368
<NavLink
54-
to={`/home/${paramObj.param2}/gamedev`}
69+
to={`/${allParamsObj.param1}/${allParamsObj.param2}/gamedev`}
5570
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
5671
<animated.p style={hueRotation}>gamedev</animated.p>
5772
</NavLink>
5873
<NavLink
59-
to={`/home/${paramObj.param2}/webdev`}
74+
to={`/${allParamsObj.param1}/${allParamsObj.param2}/webdev`}
6075
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
6176
<animated.p style={hueRotation}>webdev</animated.p>
6277
</NavLink>
@@ -67,7 +82,7 @@ const HomeViewHeader = ({
6782
<ul>
6883
<li>
6984
<NavLink
70-
to={`/home/${paramObj.param2}/gamedev`}
85+
to={`/${allParamsObj.param1}/${allParamsObj.param2}/gamedev`}
7186
className={({ isActive }) =>
7287
isActive ? "highlighted-link" : ""
7388
}>
@@ -76,7 +91,7 @@ const HomeViewHeader = ({
7691
</li>
7792
<li>
7893
<NavLink
79-
to={`/home/${paramObj.param2}/webdev`}
94+
to={`/${allParamsObj.param1}/${allParamsObj.param2}/webdev`}
8095
className={({ isActive }) =>
8196
isActive ? "highlighted-link" : ""
8297
}>

‎src/components/LandingPage.tsx‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@ import { useLocation, useNavigate } from "react-router-dom";
33
import "./styles/LandingPage.css";
44
import LandingPageLink from "./LandingPageLink";
55
import { animated, useTransition } from "react-spring";
6-
import HomeView from "./HomeView";
76
import AuthContext from "../contexts/AuthContext";
87
import pixelBG from "../img/pixelBG_LowRes.png";
98
import pixelFadeBG from "../img/animated-14fps.png";
109
import AppContext from "../contexts/AppContext";
1110
import AppConfig from "../AppConfig.json";
1211

13-
interface Props {}
12+
interface Props {
13+
setIsLanding: React.Dispatch<React.SetStateAction<boolean>>;
14+
setParamsArray: React.Dispatch<React.SetStateAction<string>>[];
15+
}
1416

15-
const LandingPage = ({}: Props) => {
17+
const LandingPage = ({ setIsLanding, setParamsArray }: Props) => {
1618
// - - - - - LINK FUNCTIONALITY - - - - -
1719
const [currentDisplay, setCurrentDisplay] = useState<string>("");
1820
const [firstRender, setFirstRender] = useState<boolean>(true);
@@ -58,13 +60,14 @@ const LandingPage = ({}: Props) => {
5860
setFirstRender(false);
5961
} else if (
6062
// If current path is 'complete', transition to HomeView
61-
currentPath.endsWith("/portfolio") ||
62-
currentPath.endsWith("/blog")
63+
currentPath.endsWith("/gamedev") ||
64+
currentPath.endsWith("/webdev")
6365
) {
6466
setCurrBG(pixelFadeBG);
6567
setIsActivePage(false);
6668
setHideHV("");
67-
setTimeout(() => setHideLP("hide"), 2000);
69+
setTimeout(() => setIsLanding(false), 1500);
70+
setParamsArray[0]("home");
6871
setHueDuration(AppConfig.hueAnimDuration_Slow);
6972
}
7073

@@ -77,24 +80,27 @@ const LandingPage = ({}: Props) => {
7780
setHueDuration(4000);
7881
} else if (currentPath === "/landing") {
7982
setCurrentDisplay("jakesnyder.dev");
80-
setLink1Text("Web Dev");
81-
setLink1Path("/landing/webdev");
82-
setLink2Text("Game Dev");
83-
setLink2Path("/landing/gamedev");
84-
setHueDuration(AppConfig.hueAnimDuration);
85-
} else if (currentPath === "/landing/webdev") {
86-
setCurrentDisplay("Web Development");
83+
setParamsArray[0]("landing");
8784
setLink1Text("Portfolio");
88-
setLink1Path("/landing/webdev/portfolio");
85+
setLink1Path("/landing/portfolio");
8986
setLink2Text("Blog");
90-
setLink2Path("/landing/webdev/blog");
87+
setLink2Path("/landing/blog");
9188
setHueDuration(AppConfig.hueAnimDuration);
92-
} else if (currentPath === "/landing/gamedev") {
93-
setCurrentDisplay("Game Development");
94-
setLink1Text("Portfolio");
95-
setLink1Path("/landing/webdev/portfolio");
96-
setLink2Text("Blog");
97-
setLink2Path("/landing/gamedev/blog");
89+
} else if (currentPath === "/landing/portfolio") {
90+
setParamsArray[1]("portfolio");
91+
setCurrentDisplay("Portfolio");
92+
setLink1Text("Web Dev");
93+
setLink1Path("/landing/portfolio/webdev");
94+
setLink2Text("Game Dev");
95+
setLink2Path("/landing/portfolio/gamedev");
96+
setHueDuration(AppConfig.hueAnimDuration);
97+
} else if (currentPath === "/landing/blog") {
98+
setParamsArray[1]("blog");
99+
setCurrentDisplay("Blog");
100+
setLink1Text("Web Dev");
101+
setLink1Path("/landing/blog/webdev");
102+
setLink2Text("Game Dev");
103+
setLink2Path("/landing/blog/gamedev");
98104
setHueDuration(AppConfig.hueAnimDuration);
99105
}
100106
}, [currentPath]);
@@ -146,9 +152,6 @@ const LandingPage = ({}: Props) => {
146152
/>
147153
</div>
148154
</div>
149-
<div className={`HomeView-ctr ${hideHV}`}>
150-
<HomeView />
151-
</div>
152155
</div>
153156
);
154157
};

‎src/components/styles/LandingPage.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22

33
/* - - - - - - - SPECIFICS - - - - - - - - - - */
44
.LandingPage {
5-
position: relative;
5+
position: absolute;
66
height: 100%;
77
max-height: 100%;
88
width: 100%;
99
overflow: hidden;
10+
z-index: 5;
1011
}
1112

1213
.LandingPage .lp-content-ctr {
@@ -23,7 +24,7 @@
2324
/* . . . Fonts . . . */
2425
font-family: "munro";
2526
font-weight: 400;
26-
font-size: 16px;
27+
font-size: 18px;
2728
letter-spacing: 4px;
2829
font-smooth: never;
2930
z-index: 1;
@@ -100,9 +101,18 @@
100101

101102
.LandingPage .lp-content-ctr .lp-link h1,
102103
.LandingPage .lp-content-ctr .lp-link h2 {
104+
font-weight: 600;
103105
padding: 30px 20px;
104106
}
105107

108+
.LandingPage .lp-content-ctr .lp-link h1 {
109+
font-size: 32px;
110+
}
111+
112+
.LandingPage .lp-content-ctr .lp-link h2 {
113+
font-size: 26px;
114+
}
115+
106116
.LandingPage .HomeView-ctr {
107117
position: absolute;
108118
display: flex;

‎src/components/styles/LandingPageLink.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎src/components/styles/WIPDisclaimer.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
font-family: "munro";
33
color: white;
44
position: absolute;
5-
bottom: 12%;
5+
bottom: 45%;
66
left: 50%;
77
transform: translate(-50%);
88
z-index: 100;

0 commit comments

Comments
 (0)