Skip to content

Commit 528fdf7

Browse files
JS-GitRepoJS-GitRepo
committed
added navigation functionality as well as project transitions
1 parent d0a54b9 commit 528fdf7

27 files changed

+694
-99
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<link rel="preconnect" href="https://fonts.googleapis.com" />
1414
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1515
<link
16-
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;1,300;1,400&family=Kdam+Thmor+Pro&display=swap"
16+
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;1,100;1,200;1,300;1,400&family=Kdam+Thmor+Pro&family=Noto+Emoji:wght@400;500;600;700&display=swap"
1717
rel="stylesheet"
1818
/>
1919
<link

‎src/App.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1+
/* - - - - - lINKS AND FONTS - - - - - - - - */
2+
@font-face {
3+
font-family: "munro";
4+
src: url("/src/img/munro/munro.ttf");
5+
}
6+
7+
/* - - - - - GENERAL - - - - - - - - */
18
.App {
9+
position: relative;
210
height: 100%;
311
width: 100%;
412
text-align: center;
@@ -7,3 +15,16 @@
715
.material-symbols-outlined {
816
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
917
}
18+
19+
.App .wip-disclaimer {
20+
font-family: "munro";
21+
color: white;
22+
position: absolute;
23+
bottom: 100px;
24+
left: 50%;
25+
transform: translate(-50%);
26+
z-index: 100;
27+
border: solid white 2px;
28+
background-color: rgba(96, 96, 96, 0.348);
29+
padding: 10px;
30+
}

‎src/App.tsx‎

Lines changed: 96 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,110 @@ import {
77
} from "react-router-dom";
88
import LandingPage from "./components/LandingPage";
99
import HomeView from "./components/HomeView";
10+
import { useSpring } from "react-spring";
11+
import { useState } from "react";
1012

1113
function App() {
14+
const [hueFlip, setHueFlip] = useState<boolean>(false);
15+
const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
16+
const [hueDuration, setHueDuration] = useState<number>(4000);
17+
const hueRotation = useSpring({
18+
to: {
19+
filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
20+
},
21+
from: {
22+
filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
23+
},
24+
reset: false,
25+
cancel: bgAnimOff,
26+
reverse: hueFlip,
27+
delay: 2000,
28+
config: { duration: hueDuration, tension: 280, friction: 60 },
29+
onRest: () => setHueFlip(!hueFlip),
30+
});
31+
1232
return (
1333
<div className="App">
1434
<Router>
1535
<Routes>
16-
<Route path="/" element={<LandingPage />} />
17-
<Route path="/landing" element={<LandingPage />} />
18-
<Route path="/landing/:location" element={<LandingPage />} />
19-
<Route path="/landing/:category/:content" element={<LandingPage />} />
20-
<Route path="/home" element={<HomeView />} />
21-
<Route path="/home/:category/:content" element={<HomeView />} />
36+
<Route
37+
path="/"
38+
element={
39+
<LandingPage
40+
hueRotation={hueRotation}
41+
setHueDuration={setHueDuration}
42+
/>
43+
}
44+
/>
45+
<Route
46+
path="/landing"
47+
element={
48+
<LandingPage
49+
hueRotation={hueRotation}
50+
setHueDuration={setHueDuration}
51+
/>
52+
}
53+
/>
54+
<Route
55+
path="/landing/:location"
56+
element={
57+
<LandingPage
58+
hueRotation={hueRotation}
59+
setHueDuration={setHueDuration}
60+
/>
61+
}
62+
/>
63+
<Route
64+
path="/landing/:category/:content"
65+
element={
66+
<LandingPage
67+
hueRotation={hueRotation}
68+
setHueDuration={setHueDuration}
69+
/>
70+
}
71+
/>
72+
<Route
73+
path="/landing/:category/:content/:project"
74+
element={
75+
<LandingPage
76+
hueRotation={hueRotation}
77+
setHueDuration={setHueDuration}
78+
/>
79+
}
80+
/>
81+
<Route
82+
path="/home"
83+
element={
84+
<HomeView
85+
hueRotation={hueRotation}
86+
setHueDuration={setHueDuration}
87+
/>
88+
}
89+
/>
90+
<Route
91+
path="/home/:category/:content"
92+
element={
93+
<HomeView
94+
hueRotation={hueRotation}
95+
setHueDuration={setHueDuration}
96+
/>
97+
}
98+
/>
99+
<Route
100+
path="/home/:category/:content/:project"
101+
element={
102+
<HomeView
103+
hueRotation={hueRotation}
104+
setHueDuration={setHueDuration}
105+
/>
106+
}
107+
/>
22108
</Routes>
23109
</Router>
110+
<div className={"wip-disclaimer"}>
111+
<p>{`[Website Under Construction / Active Development]`}</p>
112+
<p>{`At the moment, some features may be incomplete, buggy, or site-breaking. Please re-visit when able to see how things change and how far they have come since last time!`}</p>
113+
</div>
24114
</div>
25115
);
26116
}

‎src/components/HomeView.css‎

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
/* - - - - RESETS - - - -*/
2+
.HomeViewHeader h1,
3+
.HomeViewHeader h2,
4+
.HomeViewHeader a,
5+
.HomeViewHeader p {
6+
margin: 0px;
7+
padding: 0px;
8+
}
9+
10+
/* - - - - GENERAL - - - -*/
111
.HomeView {
212
position: absolute;
313
display: flex;
@@ -8,36 +18,79 @@
818
width: 100vw;
919
box-sizing: border-box;
1020
/* FONTS */
11-
font-family: "Fira Sans", sans-serif;
21+
font-family: "munro";
22+
font-size: 16px;
1223
font-weight: 300;
13-
font-style: italic;
14-
font-size: 18px;
24+
font-smooth: never;
25+
-webkit-font-smoothing: none;
1526
letter-spacing: 1px;
1627
color: rgb(75, 75, 75);
17-
font-smooth: never;
1828
}
1929

2030
.HomeView h1 {
2131
font-weight: 300;
22-
font-size: 24px;
32+
font-size: 22px;
2333
}
2434

2535
.HomeView h2 {
2636
font-weight: 400;
2737
font-size: 22px;
2838
}
2939

30-
/* - - - - - HomeView Background Image - - - - - */
40+
.HomeView a {
41+
text-decoration: none;
42+
color: rgb(75, 75, 75);
43+
}
44+
45+
.HomeView a:hover {
46+
color: rgb(64, 210, 236);
47+
text-decoration: none;
48+
}
49+
50+
.HomeView .subtitle {
51+
font-size: 14px;
52+
font-weight: 300;
53+
display: none;
54+
}
55+
56+
.HomeView .highlighted-link {
57+
color: rgb(0, 175, 166);
58+
}
59+
60+
.HomeView .emoji {
61+
font-family: "Noto Emoji", sans-serif;
62+
font-style: normal;
63+
font-size: 12px;
64+
}
3165

32-
/* - - - MEDIA QUERIES - - -*/
66+
/* - - - - MEDIA QUERIES - - - -*/
3367
@media only screen and (min-width: 768px) {
3468
.HomeView {
35-
font-weight: 400;
36-
font-size: 1.5vh;
69+
font-size: 18px;
3770
}
3871

3972
.HomeView h1 {
40-
font-weight: 300;
41-
font-size: 2.5vh;
73+
font-weight: 200;
74+
font-size: 24px;
75+
}
76+
77+
.HomeView h2 {
78+
font-weight: 200;
79+
font-size: 26px;
80+
}
81+
82+
.HomeView .subtitle {
83+
display: flex;
84+
justify-content: center;
85+
align-items: center;
86+
font-family: "munro";
87+
font-style: normal;
88+
font-size: 14px;
89+
font-weight: 300px;
90+
}
91+
92+
.HomeView .emoji {
93+
font-size: 10px;
94+
font-weight: 700;
4295
}
4396
}

‎src/components/HomeView.tsx‎

Lines changed: 94 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,106 @@
11
import "./HomeView.css";
2-
import { useLocation, useNavigate } from "react-router-dom";
3-
import { useEffect } from "react";
2+
import { Navigate, useLocation, useNavigate } from "react-router-dom";
3+
import { useEffect, useState } from "react";
44
import HomeViewHeader from "./HomeViewHeader";
55
import HomeViewFooter from "./HomeViewFooter";
66
import HomeViewContent from "./HomeViewContent";
7+
import { SpringValue } from "react-spring";
78

8-
const HomeView = () => {
9-
const currentPath = useLocation().pathname;
9+
interface Props {
10+
hueRotation: {
11+
filter: SpringValue<string>;
12+
};
13+
setHueDuration: React.Dispatch<React.SetStateAction<number>>;
14+
}
15+
16+
const HomeView = ({ hueRotation, setHueDuration }: Props) => {
17+
// - - - - - Titles and Text - - - - -
18+
const [title, setTitle] = useState<string>("Dev Blog");
19+
const [subtitle, setSubtitle] = useState<string>("Welcome! ");
20+
const [subEmoji, setSubEmoji] = useState<string>(" 🙂");
21+
// - - - - - Links - - - - -
22+
const [gameDevLink, setGameDevLink] = useState<string>("");
23+
const [webDevLink, setWebDevLink] = useState<string>("");
24+
const [portfolioLink, setPortfolioLink] = useState<string>("");
25+
const [blogLink, setBlogLink] = useState<string>("");
26+
const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
27+
const [isGameDev, setIsGameDev] = useState<boolean>(true);
1028
const navigate = useNavigate();
29+
const currentPath = useLocation().pathname;
30+
// - - - - - Projects - - - - -
31+
const gameDevProjList = ["Deerfall"];
32+
const webDevProjList = ["MediaMatchup"];
33+
const [currentProject, setCurrentProject] = useState<string>("");
34+
35+
useEffect(() => {
36+
if (currentPath.includes("/gamedev/")) {
37+
setCurrentProject(gameDevProjList[0]);
38+
} else if (currentPath.includes("/webdev/")) {
39+
setCurrentProject(webDevProjList[0]);
40+
}
41+
}, [isGameDev]);
42+
43+
useEffect(() => {
44+
if (currentPath.includes("/gamedev/portfolio")) {
45+
setTitle("GameDev Portfolio");
46+
navigate(`/home/gamedev/portfolio/${currentProject}`);
47+
setWebDevLink(`/home/webdev/portfolio/${currentProject}`);
48+
setBlogLink(`/home/gamedev/blog/${currentProject}`);
49+
setIsPortfolio(true);
50+
setIsGameDev(true);
51+
} else if (currentPath.includes("/gamedev/blog")) {
52+
setTitle("GameDev Blog");
53+
navigate(`/home/gamedev/blog/${currentProject}`);
54+
setWebDevLink(`/home/webdev/blog/${currentProject}`);
55+
setPortfolioLink(`/home/gamedev/portfolio/${currentProject}`);
56+
setIsPortfolio(false);
57+
setIsGameDev(true);
58+
} else if (currentPath.includes("/webdev/portfolio")) {
59+
setTitle("WebDev Portfolio");
60+
navigate(`/home/webdev/portfolio/${currentProject}`);
61+
setGameDevLink(`/home/gamedev/portfolio/${currentProject}`);
62+
setBlogLink(`/home/webdev/blog/${currentProject}`);
63+
setIsPortfolio(true);
64+
setIsGameDev(false);
65+
} else if (currentPath.includes("/webdev/blog")) {
66+
setTitle("WebDev Blog");
67+
navigate(`/home/webdev/blog/${currentProject}`);
68+
setGameDevLink(`/home/gamedev/blog/${currentProject}`);
69+
setPortfolioLink(`/home/webdev/portfolio/${currentProject}`);
70+
setIsPortfolio(false);
71+
setIsGameDev(false);
72+
}
73+
setHueDuration(12000);
74+
}, [currentPath, currentProject]);
1175

1276
return (
1377
<div className="HomeView">
14-
<HomeViewHeader pathname={currentPath} />
15-
<HomeViewContent pathname={currentPath} />
16-
<HomeViewFooter pathname={currentPath} />
78+
<HomeViewHeader
79+
isPortfolio={isPortfolio}
80+
gamedevOrWebdev={isGameDev}
81+
hueRotation={hueRotation}
82+
title={title}
83+
subtitle={subtitle}
84+
subEmoji={subEmoji}
85+
gameDevLink={gameDevLink}
86+
webDevLink={webDevLink}
87+
portfolioLink={portfolioLink}
88+
currentProject={currentProject}
89+
blogLink={blogLink}
90+
/>
91+
<HomeViewContent
92+
pathname={currentPath}
93+
isPortfolio={isPortfolio}
94+
currentProject={currentProject}
95+
/>
96+
<HomeViewFooter
97+
pathname={currentPath}
98+
gamedevOrWebdev={isGameDev}
99+
hueRotation={hueRotation}
100+
gameDevLink={gameDevLink}
101+
webDevLink={webDevLink}
102+
currentProject={currentProject}
103+
/>
17104
</div>
18105
);
19106
};

0 commit comments

Comments
 (0)