Skip to content

Commit 5bc0f22

Browse files
JS-GitRepoJS-GitRepo
committed
finished landing to home transions as well as landing animations
1 parent 69b01e4 commit 5bc0f22

28 files changed

+595
-235
lines changed

‎package-lock.json‎

Lines changed: 153 additions & 153 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"react-dom": "^18.0.0",
1717
"react-router-dom": "^6.3.0",
1818
"react-scripts": "5.0.1",
19-
"react-spring": "^9.4.5-beta.1",
19+
"react-spring": "^9.4.5",
2020
"typescript": "^4.6.3",
2121
"web-vitals": "^2.1.4"
2222
},

‎public/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@
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=VT323&display=swap"
16+
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;1,300;1,400&family=Kdam+Thmor+Pro&display=swap"
1717
rel="stylesheet"
1818
/>
19+
<link
20+
rel="stylesheet"
21+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
22+
/>
1923
<!--
2024
manifest.json provides metadata used when your web app is installed on a
2125
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎src/App.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
.App {
2+
height: 100%;
3+
width: 100%;
24
text-align: center;
35
}
6+
7+
.material-symbols-outlined {
8+
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
9+
}

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ function App() {
1616
<Route path="/" element={<LandingPage />} />
1717
<Route path="/landing" element={<LandingPage />} />
1818
<Route path="/landing/:location" element={<LandingPage />} />
19-
<Route path="/landing/:location/:content" element={<LandingPage />} />
19+
<Route path="/landing/:category/:content" element={<LandingPage />} />
2020
<Route path="/home" element={<HomeView />} />
21-
<Route path="/home/:location/:content" element={<HomeView />} />
21+
<Route path="/home/:category/:content" element={<HomeView />} />
2222
</Routes>
2323
</Router>
2424
</div>

‎src/components/HomeView.css‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,40 @@
44
flex-direction: column;
55
justify-content: center;
66
align-items: center;
7-
height: 100vh;
7+
height: 100%;
88
width: 100vw;
9-
border: dashed black 10px;
109
box-sizing: border-box;
11-
/* z-index: 1; */
10+
/* FONTS */
11+
font-family: "Fira Sans", sans-serif;
12+
font-weight: 300;
13+
font-style: italic;
14+
font-size: 18px;
15+
letter-spacing: 1px;
16+
color: rgb(75, 75, 75);
17+
font-smooth: never;
18+
}
19+
20+
.HomeView h1 {
21+
font-weight: 300;
22+
font-size: 24px;
23+
}
24+
25+
.HomeView h2 {
26+
font-weight: 400;
27+
font-size: 22px;
1228
}
1329

1430
/* - - - - - 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+ */
31+
32+
/* - - - MEDIA QUERIES - - -*/
33+
@media only screen and (min-width: 768px) {
34+
.HomeView {
35+
font-weight: 400;
36+
font-size: 1.5vh;
37+
}
38+
39+
.HomeView h1 {
40+
font-weight: 300;
41+
font-size: 2.5vh;
42+
}
2643
}

‎src/components/HomeView.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import "./HomeView.css";
22
import { useLocation, useNavigate } from "react-router-dom";
3-
import { useEffect, useState } from "react";
3+
import { useEffect } from "react";
4+
import HomeViewHeader from "./HomeViewHeader";
5+
import HomeViewFooter from "./HomeViewFooter";
6+
import HomeViewContent from "./HomeViewContent";
47

58
const HomeView = () => {
69
const currentPath = useLocation().pathname;
710
const navigate = useNavigate();
811

9-
useEffect(() => {}, []);
10-
1112
return (
1213
<div className="HomeView">
13-
<p>HomeView works</p>
14+
<HomeViewHeader pathname={currentPath} />
15+
<HomeViewContent pathname={currentPath} />
16+
<HomeViewFooter pathname={currentPath} />
1417
</div>
1518
);
1619
};

‎src/components/HomeViewContent.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.HomeViewContent {
2+
position: relative;
3+
display: flex;
4+
width: 100vw;
5+
height: 100%;
6+
justify-content: center;
7+
align-items: center;
8+
overflow: hidden;
9+
}
10+
11+
.HomeViewContent video {
12+
/* position: absolute; */
13+
height: 100%;
14+
object-fit: cover;
15+
min-width: 100%;
16+
}
17+
18+
@media only screen and (min-width: 768px) {
19+
.HomeViewContent video {
20+
height: 110%;
21+
}
22+
}

‎src/components/HomeViewContent.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import "./HomeViewContent.css";
2+
import bannerVid from "../img/MainBanner-H264.mp4";
3+
4+
interface Props {
5+
pathname: string;
6+
}
7+
8+
const HomeViewContent = ({ pathname }: Props) => {
9+
return (
10+
<div className="HomeViewContent">
11+
<video autoPlay loop muted playsInline>
12+
<source src={bannerVid} type="video/mp4" />
13+
</video>
14+
</div>
15+
);
16+
};
17+
18+
export default HomeViewContent;

‎src/components/HomeViewFooter.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/* - - - RESETS - - -*/
2+
.HomeViewFooter h1,
3+
.HomeViewFooter h2,
4+
.HomeViewFooter a,
5+
.HomeViewFooter p {
6+
margin: 0px;
7+
padding: 0px;
8+
}
9+
10+
/* - - - GENERAL - - -*/
11+
.HomeViewFooter {
12+
display: flex;
13+
flex-direction: row;
14+
align-items: center;
15+
justify-content: center;
16+
background-color: rgb(255, 255, 255);
17+
width: 100vw;
18+
height: 100px;
19+
font-size: 16px;
20+
font-weight: 300;
21+
}
22+
23+
.HomeViewFooter h2 {
24+
font-weight: 400;
25+
}
26+
27+
.HomeViewFooter .project-nav-ctr {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
}
33+
34+
.HomeViewFooter .project-nav {
35+
display: flex;
36+
flex-direction: row;
37+
align-items: center;
38+
}
39+
40+
.HomeViewFooter .project-nav-type-cat {
41+
display: flex;
42+
justify-content: center;
43+
}
44+
45+
.HomeViewFooter .project-nav-type-cat a {
46+
margin: 6px;
47+
}
48+
49+
/* - - - MEDIA QUERIES - - -*/
50+
51+
@media only screen and (min-width: 768px) {
52+
.HomeViewFooter {
53+
height: 80px;
54+
}
55+
56+
.HomeViewFooter .project-nav-ctr {
57+
display: none;
58+
}
59+
}

0 commit comments

Comments
 (0)