Skip to content

Commit 6fd0362

Browse files
JS-GitRepoJS-GitRepo
committed
made major changes to header, syncing content with URL rather than programatically
1 parent 5948a61 commit 6fd0362

File tree

12 files changed

+185
-118
lines changed

12 files changed

+185
-118
lines changed

‎src/App.tsx‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,58 @@
11
import "./App.css";
2-
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
2+
import { Route, Router, Routes } from "react-router-dom";
33
import LandingPage from "./components/LandingPage";
44
import HomeView from "./components/HomeView";
55
import WIPDisclaimer from "./components/WIPDisclaimer";
6+
import HomeViewHeader from "./components/HomeViewHeader";
7+
import ErrorNotFound from "./components/ErrorNotFound";
68

9+
// 9-28-22
10+
// Refactoring routes, and general way this 'web app' works. Making HomeView the default route, with a 'modal' over it which will be Landing Page. Instead of all this weird routing form Landing Page to Homeview, landing page will be an overlay that exists within HomeView, that is only present when the user is at /landing. Thinking of actually making the LandingPage an option for "HomeViewContent" that steels the entire viewport, so that HomeView is always there behind it.
11+
12+
// This would effectively make "App" into what is currently HomeView, and turn HomeView into HomeViewContent which can then be routed between
13+
14+
// jakesnyder.dev/:landingOrHome/:category1/:gameOrWeb/:project
15+
// jakesnyder.dev/:landingOrHome/:category1/introduction
716
function App() {
817
return (
918
<div className='App'>
10-
<Router>
11-
<Routes>
12-
<Route path='/' element={<LandingPage />} />
13-
<Route path='/landing' element={<LandingPage />} />
14-
<Route path='/landing/:location' element={<LandingPage />} />
15-
<Route path='/landing/:category/:content' element={<LandingPage />} />
16-
<Route
17-
path='/landing/:category/:content/:project'
18-
element={<LandingPage />}
19-
/>
20-
<Route path='/home' element={<HomeView />} />
21-
<Route path='/home/:category/:content' element={<HomeView />} />
22-
<Route
23-
path='/home/:category/:content/:project'
24-
element={<HomeView />}
25-
/>
26-
</Routes>
27-
</Router>
19+
<Routes>
20+
<Route path='/' element={<HomeView />}>
21+
<Route path='/:landingOrHome' element={<HomeView />}>
22+
<Route path='introduction' element={<HomeView />} />
23+
<Route path=':category1' element={<HomeView />}>
24+
<Route path=':gameOrWeb' element={<HomeView />}>
25+
<Route path=':project' element={<HomeView />} />
26+
</Route>
27+
</Route>
28+
</Route>
29+
</Route>
30+
<Route path='404NotFound' element={<ErrorNotFound />} />
31+
<Route path='*' element={<ErrorNotFound />} />
32+
</Routes>
2833
<WIPDisclaimer />
2934
</div>
3035
);
3136
}
3237

38+
// <Route path='/' element={<LandingPage />} />
39+
// <Route path='/landing' element={<LandingPage />}>
40+
// <Route path='/landing/:category' element={<LandingPage />} />
41+
// <Route
42+
// path='/landing/:category/:content'
43+
// element={<LandingPage />}
44+
// />
45+
// <Route
46+
// path='/landing/:category/:content/:project'
47+
// element={<LandingPage />}
48+
// />
49+
// </Route>
50+
// <Route path='/home' element={<HomeView />}>
51+
// <Route path='/home/:category/:content' element={<HomeView />} />
52+
// <Route
53+
// path='/home/:category/:content/:project'
54+
// element={<HomeView />}
55+
// />
56+
// </Route>
57+
3358
export default App;

‎src/AppConfig.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2-
"hueAnimDuration": 4000,
3-
"hueAnimDuration_Slow": 10000
2+
"hueAnimDuration": 7000,
3+
"hueAnimDuration_Slow": 10000,
4+
"projectURL_Params": ["deerfall", "mediamatchup"]
45
}

‎src/components/ErrorNotFound.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import "./styles/ErrorNotFound.css";
2+
3+
const ErrorNotFound = () => {
4+
return (
5+
<div className='ErrorNotFound'>
6+
<p>404</p>
7+
<p>NotFound</p>
8+
</div>
9+
);
10+
};
11+
12+
export default ErrorNotFound;

‎src/components/HomeView.tsx‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const HomeView = ({}: Props) => {
1313
// - - - - GENERAL STATES - - - -
1414
const { hueRotation, setHueDuration } = useContext(StyleContext);
1515
// - - - - - TITLES AND TEXT - - - - -
16-
const [currentProject, setCurrentProject] = useState<string>("Deerfall");
16+
const [currentContent, setCurrentContent] = useState<string>("Deerfall");
1717
const [title, setTitle] = useState<string>("Dev Blog");
1818
const [subtitle, setSubtitle] = useState<string>("Welcome! ");
1919
const [subEmoji, setSubEmoji] = useState<string>(" 🙂");
@@ -33,45 +33,47 @@ const HomeView = ({}: Props) => {
3333
useEffect(() => {
3434
if (currentPath.includes("/gamedev/portfolio")) {
3535
if (currentPath.includes("home/")) {
36-
navigate(`/home/gamedev/portfolio/${currentProject}`);
36+
navigate(`/home/gamedev/portfolio/${currentContent}`);
3737
}
3838
setTitle("GameDev Portfolio");
39-
setWebDevLink(`/home/webdev/portfolio/${currentProject}`);
40-
setBlogLink(`/home/gamedev/blog/${currentProject}`);
39+
setWebDevLink(`/home/webdev/portfolio/${currentContent}`);
40+
setBlogLink(`/home/gamedev/blog/${currentContent}`);
4141
setIsPortfolio(true);
4242
setIsGameDev(true);
4343
} else if (currentPath.includes("/gamedev/blog")) {
4444
if (currentPath.includes("home/")) {
45-
navigate(`/home/gamedev/blog/${currentProject}`);
45+
navigate(`/home/gamedev/blog/${currentContent}`);
4646
}
4747
setTitle("GameDev Blog");
48-
setWebDevLink(`/home/webdev/blog/${currentProject}`);
49-
setPortfolioLink(`/home/gamedev/portfolio/${currentProject}`);
48+
setWebDevLink(`/home/webdev/blog/${currentContent}`);
49+
setPortfolioLink(`/home/gamedev/portfolio/${currentContent}`);
5050
setIsPortfolio(false);
5151
setIsGameDev(true);
5252
} else if (currentPath.includes("/webdev/portfolio")) {
5353
if (currentPath.includes("home/")) {
54-
navigate(`/home/webdev/portfolio/${currentProject}`);
54+
navigate(`/home/webdev/portfolio/${currentContent}`);
5555
}
5656
setTitle("WebDev Portfolio");
57-
setGameDevLink(`/home/gamedev/portfolio/${currentProject}`);
58-
setBlogLink(`/home/webdev/blog/${currentProject}`);
57+
setGameDevLink(`/home/gamedev/portfolio/${currentContent}`);
58+
setBlogLink(`/home/webdev/blog/${currentContent}`);
5959
setIsPortfolio(true);
6060
setIsGameDev(false);
6161
} else if (currentPath.includes("/webdev/blog")) {
6262
if (currentPath.includes("home/")) {
63-
navigate(`/home/webdev/blog/${currentProject}`);
63+
navigate(`/home/webdev/blog/${currentContent}`);
6464
}
6565
setTitle("WebDev Blog");
66-
setGameDevLink(`/home/gamedev/blog/${currentProject}`);
67-
setPortfolioLink(`/home/webdev/portfolio/${currentProject}`);
66+
setGameDevLink(`/home/gamedev/blog/${currentContent}`);
67+
setPortfolioLink(`/home/webdev/portfolio/${currentContent}`);
6868
setIsPortfolio(false);
6969
setIsGameDev(false);
7070
}
7171
if (currentPath.includes("/gamedev/")) {
72-
setCurrentProject(gameDevProjList[0]);
72+
setCurrentContent(gameDevProjList[0]);
7373
} else if (currentPath.includes("/webdev/")) {
74-
setCurrentProject(webDevProjList[0]);
74+
setCurrentContent(webDevProjList[0]);
75+
} else if (currentPath.includes("/introduction/")) {
76+
setCurrentContent("Introduction");
7577
}
7678

7779
if (hueRotation != AppConfig.hueAnimDuration_Slow) {
@@ -82,30 +84,27 @@ const HomeView = ({}: Props) => {
8284
return (
8385
<div className='HomeView'>
8486
<HomeViewHeader
85-
isPortfolio={isPortfolio}
86-
gamedevOrWebdev={isGameDev}
87-
hueRotation={hueRotation}
88-
title={title}
8987
subtitle={subtitle}
9088
subEmoji={subEmoji}
9189
gameDevLink={gameDevLink}
9290
webDevLink={webDevLink}
93-
portfolioLink={portfolioLink}
94-
currentProject={currentProject}
95-
blogLink={blogLink}
91+
currentContent={currentContent}
9692
/>
9793
<HomeViewContent
9894
pathname={currentPath}
9995
isPortfolio={isPortfolio}
100-
currentProject={currentProject}
96+
currentContent={currentContent}
10197
/>
10298
<HomeViewFooter
10399
pathname={currentPath}
104100
gamedevOrWebdev={isGameDev}
105101
hueRotation={hueRotation}
106102
gameDevLink={gameDevLink}
107103
webDevLink={webDevLink}
108-
currentProject={currentProject}
104+
currentContent={currentContent}
105+
portfolioLink={portfolioLink}
106+
blogLink={blogLink}
107+
isPortfolio={isPortfolio}
109108
/>
110109
</div>
111110
);

‎src/components/HomeViewContent.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import MediaMatchup from "./projects/MediaMatchup";
77
interface Props {
88
pathname: string;
99
isPortfolio: boolean;
10-
currentProject: string;
10+
currentContent: string;
1111
}
1212

13-
const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
13+
const HomeViewContent = ({ pathname, isPortfolio, currentContent }: Props) => {
1414
// - - - - States - - - -
1515
// toggleQueue false = projQueue1, toggleQueue true = projQueue2
1616
const [toggleQueue, setToggleQueue] = useState(false);
@@ -36,8 +36,8 @@ const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
3636
});
3737

3838
useEffect(() => {
39-
setCurrProjArray([eval(`allProjList.${currentProject}`)]);
40-
}, [currentProject]);
39+
setCurrProjArray([eval(`allProjList.${currentContent}`)]);
40+
}, [currentContent]);
4141

4242
return (
4343
<div className='HomeViewContent'>

‎src/components/HomeViewFooter.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link } from "react-router-dom";
1+
import { Link, NavLink } from "react-router-dom";
22
import { animated, SpringValue } from "react-spring";
33
import "./styles/HomeViewFooter.css";
44

@@ -7,7 +7,10 @@ interface Props {
77
gamedevOrWebdev: boolean;
88
gameDevLink: string;
99
webDevLink: string;
10-
currentProject: string;
10+
portfolioLink: string;
11+
blogLink: string;
12+
isPortfolio: boolean;
13+
currentContent: string;
1114
hueRotation: {
1215
filter: SpringValue<string>;
1316
};
@@ -19,7 +22,10 @@ const HomeViewFooter = ({
1922
hueRotation,
2023
gameDevLink,
2124
webDevLink,
22-
currentProject,
25+
currentContent,
26+
portfolioLink,
27+
blogLink,
28+
isPortfolio,
2329
}: Props) => {
2430
const currentYear = new Date();
2531

@@ -28,25 +34,30 @@ const HomeViewFooter = ({
2834
<div className='project-nav-ctr'>
2935
<div className='project-nav'>
3036
<span className='material-symbols-outlined'>chevron_left</span>
31-
<h2>{currentProject}</h2>
37+
<h2>{currentContent}</h2>
3238
<span className='material-symbols-outlined'>chevron_right</span>
3339
</div>
3440

3541
<div className='project-nav-type-cat'>
36-
<Link
37-
to={gameDevLink}
38-
className={gamedevOrWebdev ? "highlighted-link" : ""}>
39-
<animated.p style={gamedevOrWebdev ? hueRotation : {}}>
40-
Game Dev
42+
<NavLink
43+
to={portfolioLink}
44+
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
45+
<animated.p style={isPortfolio ? hueRotation : {}}>
46+
Portfolio
4147
</animated.p>
42-
</Link>
43-
<Link
44-
to={webDevLink}
45-
className={gamedevOrWebdev ? "" : "highlighted-link"}>
46-
<animated.p style={gamedevOrWebdev ? {} : hueRotation}>
47-
Web Dev
48+
</NavLink>
49+
<NavLink
50+
to={blogLink}
51+
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
52+
<animated.p style={isPortfolio ? {} : hueRotation}>Blog</animated.p>
53+
</NavLink>
54+
<NavLink
55+
to={blogLink}
56+
className={({ isActive }) => (isActive ? "highlighted-link" : "")}>
57+
<animated.p style={isPortfolio ? {} : hueRotation}>
58+
Intro
4859
</animated.p>
49-
</Link>
60+
</NavLink>
5061
</div>
5162
</div>
5263

0 commit comments

Comments
 (0)