Skip to content

Commit 69b01e4

Browse files
JS-GitRepoJS-GitRepo
committed
main transitions complete
1 parent 2f388a3 commit 69b01e4

17 files changed

+159
-81
lines changed

‎src/App.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import "./App.css";
2-
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
2+
import {
3+
BrowserRouter as Router,
4+
Route,
5+
Routes,
6+
useLocation,
7+
} from "react-router-dom";
38
import LandingPage from "./components/LandingPage";
49
import HomeView from "./components/HomeView";
510

@@ -12,8 +17,8 @@ function App() {
1217
<Route path="/landing" element={<LandingPage />} />
1318
<Route path="/landing/:location" element={<LandingPage />} />
1419
<Route path="/landing/:location/:content" element={<LandingPage />} />
15-
<Route path="/home" element={<LandingPage />} />
16-
<Route path="/home/:location/:content" element={<LandingPage />} />
20+
<Route path="/home" element={<HomeView />} />
21+
<Route path="/home/:location/:content" element={<HomeView />} />
1722
</Routes>
1823
</Router>
1924
</div>

‎src/components/HomeView.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,19 @@
88
width: 100vw;
99
border: dashed black 10px;
1010
box-sizing: border-box;
11+
/* z-index: 1; */
12+
}
13+
14+
/* - - - - - HomeView Background Image - - - - - */
15+
.HomeView {
16+
background: grey;
17+
background-position: center;
18+
background-size: auto 100vh;
19+
image-rendering: optimizeSpeed; /* */
20+
image-rendering: -moz-crisp-edges; /* Firefox */
21+
image-rendering: -o-crisp-edges; /* Opera */
22+
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
23+
image-rendering: pixelated; /* Chrome as of 2019 */
24+
image-rendering: optimize-contrast; /* CSS3 Proposed */
25+
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
1126
}

‎src/components/HomeView.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import "./HomeView.css";
2+
import { useLocation, useNavigate } from "react-router-dom";
3+
import { useEffect, useState } from "react";
24

35
const HomeView = () => {
4-
return <div className="HomeView">HomeView works</div>;
6+
const currentPath = useLocation().pathname;
7+
const navigate = useNavigate();
8+
9+
useEffect(() => {}, []);
10+
11+
return (
12+
<div className="HomeView">
13+
<p>HomeView works</p>
14+
</div>
15+
);
516
};
617

718
export default HomeView;

‎src/components/LandingPage.css‎

Lines changed: 51 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,54 +7,90 @@
77

88
/* - - - - - - - SPECIFICS - - - - - - - - - - */
99
.LandingPage {
10+
position: relative;
11+
height: 100vh;
12+
width: 100vw;
13+
}
14+
15+
.LandingPage .LandingPage-container {
16+
/* . . . Positioning . . . */
17+
position: absolute;
1018
display: flex;
1119
flex-direction: column;
1220
align-items: center;
1321
justify-content: center;
1422
box-sizing: border-box;
1523
height: 100vh;
1624
width: 100vw;
17-
/* font-family: "VT323", monospace; */
25+
z-index: 1;
26+
/* . . . Background . . . */
27+
background-position: center;
28+
backdrop-filter: hue-rotate(190);
29+
-webkit-backdrop-filter: hue-rotate(190);
30+
background-size: auto 100vh;
31+
image-rendering: -moz-crisp-edges; /* Firefox */
32+
image-rendering: -o-crisp-edges; /* Opera */
33+
image-rendering: -webkit-optimize-contrast; /* Chrome / Safari */
34+
image-rendering: pixelated; /* Chrome as of 2019 */
35+
image-rendering: optimize-contrast; /* CSS3 Proposed */
36+
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
37+
/* . . . Fonts . . . */
1838
font-family: "munro";
1939
font-weight: 400;
20-
font-size: 16px;
40+
font-size: 18px;
2141
letter-spacing: 4px;
2242
font-smooth: never;
2343
}
2444

25-
.LandingPage a {
45+
.LandingPage .static-bg {
46+
background-image: url("/src/img/pixelBG_LowRes.png");
47+
}
48+
49+
.LandingPage .fade-bg {
50+
background-image: url("/src/img/animated-14fps-delay.png");
51+
z-index: 2;
52+
}
53+
54+
.LandingPage-container a {
2655
text-decoration: none;
2756
color: rgb(208, 247, 239);
2857
}
2958

30-
.LandingPage .header-container {
59+
.LandingPage-container .header-container {
3160
display: flex;
3261
flex: 1;
3362
align-items: center;
3463
justify-content: center;
3564
box-sizing: border-box;
3665
margin-bottom: 0%;
3766
width: 100%;
38-
background-image: url("/src/img/pixelBGWide.png");
39-
background-origin: content-box;
40-
background-size: auto 100vh;
4167
}
4268

43-
.LandingPage .link-container {
69+
.LandingPage-container .link-container {
4470
display: flex;
4571
flex: 1;
4672
flex-direction: row;
4773
justify-content: space-evenly;
4874
box-sizing: border-box;
49-
/* margin-top: 80px; */
5075
width: 100%;
51-
background-image: url("/src/img/pixelBGWide.png");
52-
background-origin: content-box;
53-
background-size: auto 100vh;
54-
background-position: 0% -100%;
5576
}
5677

57-
.LandingPage .lp-link h1,
58-
.LandingPage .lp-link h2 {
78+
.LandingPage-container .lp-link h1,
79+
.LandingPage-container .lp-link h2 {
5980
padding: 40px;
6081
}
82+
83+
.LandingPage .HomeView-container {
84+
position: absolute;
85+
display: flex;
86+
flex: 1;
87+
align-items: center;
88+
justify-content: center;
89+
box-sizing: border-box;
90+
width: 100vw;
91+
height: 100vh;
92+
}
93+
94+
.LandingPage .hide {
95+
display: none;
96+
}

‎src/components/LandingPage.tsx‎

Lines changed: 58 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,56 @@
1-
import { useEffect, useState } from "react";
1+
import { useContext, useEffect, useState } from "react";
22
import { useLocation, useNavigate } from "react-router-dom";
33
import "./LandingPage.css";
44
import LandingPageLink from "./LandingPageLink";
55
import { animated, useTransition } from "react-spring";
66
import HomeView from "./HomeView";
7+
import AuthContext from "../contexts/AuthContext";
78

89
const LandingPage = () => {
9-
// - - - - - STATES / FUNCTIONALITY - - - - -
10+
// - - - - - LINK FUNCTIONALITY - - - - -
1011
const [currentDisplay, setCurrentDisplay] = useState<string>("");
11-
const [isActivePage, setIsActivePage] = useState<boolean>(true);
1212
const [firstRender, setFirstRender] = useState<boolean>(true);
1313
const [link1Text, setLink1Text] = useState<string>("");
1414
const [link1Path, setLink1Path] = useState<string>("");
1515
const [link2Text, setLink2Text] = useState<string>("");
1616
const [link2Path, setLink2Path] = useState<string>("");
17+
const { currentPathContext, setCurrentPathContext } = useContext(AuthContext);
1718
const currentPath = useLocation().pathname;
1819
const navigate = useNavigate();
20+
21+
// - - - - - BG TRANSITION - - - - -
22+
const [hideLP, setHideLP] = useState<string>("");
23+
const [hideHV, setHideHV] = useState<string>("hide");
24+
const [isActivePage, setIsActivePage] = useState<boolean>(true);
25+
const [bgImgClass, setBgImgClass] = useState<string>("static-bg");
1926
const transDuration = 200;
20-
const transitionUp = useTransition(isActivePage, {
27+
const fadeOut = useTransition(isActivePage, {
2128
initial: {
2229
opacity: 1,
23-
marginBottom: "0%",
2430
config: { duration: transDuration },
2531
},
2632
from: {
2733
opacity: 1,
28-
marginBottom: "0%",
29-
config: { duration: transDuration },
30-
},
31-
leave: {
32-
opacity: 0.5,
33-
marginBottom: "100%",
34-
config: { duration: transDuration },
35-
},
36-
});
37-
const transitionDown = useTransition(isActivePage, {
38-
initial: {
39-
opacity: 1,
40-
marginTop: "0%",
4134
config: { duration: transDuration },
4235
},
43-
from: { opacity: 1, marginTop: "0%", config: { duration: transDuration } },
4436
leave: {
45-
opacity: 0.5,
46-
marginTop: "100%",
37+
opacity: 0,
4738
config: { duration: transDuration },
4839
},
4940
});
5041

5142
useEffect(() => {
43+
setCurrentPathContext(currentPath);
5244
if (firstRender) {
5345
setFirstRender(false);
5446
} else if (
5547
currentPath.endsWith("/gamedev") ||
5648
currentPath.endsWith("/webdev")
5749
) {
5850
setIsActivePage(false);
51+
setHideHV("");
52+
setTimeout(() => setBgImgClass("fade-bg"), 100);
53+
setTimeout(() => setHideLP("hide"), 2000);
5954
}
6055
}, [currentPath]);
6156

@@ -80,50 +75,53 @@ const LandingPage = () => {
8075
setLink1Path("/landing/blog/webdev");
8176
setLink2Text("Game Dev");
8277
setLink2Path("/landing/blog/gamedev");
83-
} else if (currentPath === "/home/:location/:content") {
84-
console.log("made it here");
8578
}
8679
}, [currentPath]);
8780

8881
return (
8982
<div className="LandingPage">
90-
{transitionUp((style, item) =>
91-
item ? (
92-
<animated.div className={"header-container"} style={style}>
93-
<LandingPageLink
94-
currentDisplay={currentDisplay}
95-
linkText={currentDisplay}
96-
pathName={"/"}
97-
className={"lp-link"}
98-
isH1={true}
99-
/>
100-
</animated.div>
101-
) : (
102-
<HomeView />
103-
)
104-
)}
105-
{transitionDown((style, item) =>
106-
item ? (
107-
<animated.div className="link-container" style={style}>
108-
<LandingPageLink
109-
currentDisplay={currentDisplay}
110-
linkText={link1Text}
111-
pathName={link1Path}
112-
className={"lp-link"}
113-
isH1={false}
114-
/>
115-
<LandingPageLink
116-
currentDisplay={currentDisplay}
117-
linkText={link2Text}
118-
pathName={link2Path}
119-
className={"lp-link"}
120-
isH1={false}
121-
/>
122-
</animated.div>
123-
) : (
124-
""
125-
)
126-
)}
83+
<div className={`LandingPage-container ${bgImgClass} ${hideLP}`}>
84+
{fadeOut((style, item) =>
85+
item ? (
86+
<animated.div className={"header-container"} style={style}>
87+
<LandingPageLink
88+
currentDisplay={currentDisplay}
89+
linkText={currentDisplay}
90+
pathName={"/"}
91+
className={"lp-link"}
92+
isH1={true}
93+
/>
94+
</animated.div>
95+
) : (
96+
""
97+
)
98+
)}
99+
{fadeOut((style, item) =>
100+
item ? (
101+
<div className="link-container">
102+
<LandingPageLink
103+
currentDisplay={currentDisplay}
104+
linkText={link1Text}
105+
pathName={link1Path}
106+
className={"lp-link"}
107+
isH1={false}
108+
/>
109+
<LandingPageLink
110+
currentDisplay={currentDisplay}
111+
linkText={link2Text}
112+
pathName={link2Path}
113+
className={"lp-link"}
114+
isH1={false}
115+
/>
116+
</div>
117+
) : (
118+
""
119+
)
120+
)}
121+
</div>
122+
<div className={`HomeView-container ${hideHV}`}>
123+
<HomeView />
124+
</div>
127125
</div>
128126
);
129127
};

‎src/contexts/AuthContext.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { User } from "firebase/auth";
2-
import { createContext } from "react";
2+
import { createContext, useState } from "react";
33

44
export interface AuthContextModel {
55
user: User | null;
6+
currentPathContext: string;
7+
setCurrentPathContext: any;
68
}
79

810
const defaultValue: AuthContextModel = {
911
user: null,
12+
currentPathContext: "",
13+
setCurrentPathContext: null,
1014
};
1115

1216
const AuthContext = createContext(defaultValue);

‎src/contexts/AuthContextProvider.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import { ReactNode, useEffect, useState } from "react";
44
import { auth } from "../firebaseConfig";
55
import UserAccount from "../models/UserAcount";
66
import { createNewUser, getUserById } from "../services/userService";
7+
import { useLocation } from "react-router-dom";
78

89
interface Props {
910
children: ReactNode;
1011
}
1112

1213
const AuthContextProvider = ({ children }: Props) => {
1314
const [user, setUser] = useState<User | null>(null);
15+
const [currentPathContext, setCurrentPathContext] = useState<string>("");
1416

1517
const generateDateInfo = () => {
1618
const currentDate: Date = new Date();
@@ -33,6 +35,10 @@ const AuthContextProvider = ({ children }: Props) => {
3335
});
3436
}, []);
3537

38+
useEffect(() => {
39+
console.log(currentPathContext);
40+
}, [currentPathContext]);
41+
3642
useEffect(() => {
3743
if (user) {
3844
getUserById(user.uid).then((response) => {
@@ -50,7 +56,10 @@ const AuthContextProvider = ({ children }: Props) => {
5056
}, [user]);
5157

5258
return (
53-
<AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
59+
<AuthContext.Provider
60+
value={{ user, currentPathContext, setCurrentPathContext }}>
61+
{children}
62+
</AuthContext.Provider>
5463
);
5564
};
5665

‎src/img/MainBanner24fps1080p-3Mbps.mp4‎

20.3 MB
Binary file not shown.

‎src/img/animated-12fps-delay.png‎

45.6 KB
Loading

‎src/img/animated-12fps.png‎

45.6 KB
Loading

0 commit comments

Comments
 (0)