Skip to content

Commit 4e1dd0b

Browse files
authored
Merge pull request #8 from JS-GitRepo/feature/landingIntroduction
Feature/landing introduction
2 parents 706b144 + 59d57f8 commit 4e1dd0b

File tree

7 files changed

+69
-39
lines changed

7 files changed

+69
-39
lines changed

.firebase/hosting.YnVpbGQ.cache

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
favicon.ico,1657132704394,c5bfaf489c76198724beac38fd4b3fca1125bbf8ba0f3ffd9ba9190bf6f53cea
2-
logo192.png,1657132692666,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd15103f852ef107
3-
logo512.png,1657132682614,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
4-
manifest.json,1657132371588,03d105d6225429616e0596db9f20a9c62fc48e2564cd1fc208ea60e6af1a0297
51
robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
6-
asset-manifest.json,1658256627242,72548d569a1d2126e6249404f2a63976222d508f8d5e1b35cfe3b7d8d589898b
7-
index.html,1658256627229,aae59aea4977e79820f1f1b371ad2fc26493afcf030feeda2a58c87b9e3cdfbd
8-
static/css/main.ebddce61.css,1658256627239,0ec11174cf32003f3fc1d5f8c680013e014c534e289584fe24233f1cf3536834
9-
static/js/787.cda612ba.chunk.js,1658256627240,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
10-
static/css/main.ebddce61.css.map,1658256627239,a00085d8d4f12fbcbb2573c8fdaef8d0590d7a2c4b99b21c6237ee612015ff82
11-
static/js/787.cda612ba.chunk.js.map,1658256627242,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
12-
static/js/main.eb68c05d.js.LICENSE.txt,1658256627240,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
13-
static/media/munro.f78662ff4aad4d038806.ttf,1658256627240,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14-
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1658256627239,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15-
static/media/MediaMatchupMain.7061048d09c6103946f4.jpg,1658256627239,cde79e6af32cd09f5eb22edc47cdbf8516b6ce3ee8b5707b9fa5abe2e383c801
16-
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1658256627239,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
17-
static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1658256627239,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
18-
static/js/main.eb68c05d.js,1658256627240,05437fe08b8e26762604aee8dcfe9ad61b4cefbf315c2df4b7b91ab626c9b2c5
19-
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1658256627241,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20-
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1658256627241,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21-
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1658256627242,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22-
static/js/main.eb68c05d.js.map,1658256627241,312d6108f1e23ff83deb5df4dbd439aea87873ba12f288c7516851bfa92fe915
2+
asset-manifest.json,1659574811561,7e4cadfb84521300ef125b174ba5ac73f62d54173b4747b285d0a4c7c5b0a31d
3+
index.html,1659574811549,f58262c0a5753b7769a72b7f80c982600f5fe8fa3612d6fa4e2abd0c0a2dc703
4+
manifest.json,1658782384755,00ed38bd68df8fe063a1fda8efbea33c1e6e5118444b200531d8996998372fa5
5+
static/css/main.75641992.css,1659574811559,0b794e32fb2ebc0e8efc11f008ae6cf6be370ca61aa1746aa7ad00e0c14a6432
6+
static/js/787.cda612ba.chunk.js,1659574811559,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
7+
logo192.png,1658782384754,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd15103f852ef107
8+
favicon.ico,1658782384752,c5bfaf489c76198724beac38fd4b3fca1125bbf8ba0f3ffd9ba9190bf6f53cea
9+
static/css/main.75641992.css.map,1659574811559,aa24d444ed877ec8cb8a9cb834c721cfbf9c0d83e9d9a8805748c608e928ae59
10+
static/js/main.f882a730.js.LICENSE.txt,1659574811559,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
11+
logo512.png,1658782384754,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
12+
static/js/787.cda612ba.chunk.js.map,1659574811561,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
13+
static/media/munro.f78662ff4aad4d038806.ttf,1659574811559,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14+
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1659574811559,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15+
static/media/MediaMatchupMain.7061048d09c6103946f4.jpg,1659574811558,cde79e6af32cd09f5eb22edc47cdbf8516b6ce3ee8b5707b9fa5abe2e383c801
16+
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1659574811559,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
17+
static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1659574811558,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
18+
static/js/main.f882a730.js,1659574811559,84978ed60d244f6cbe7b3887417488ec13a272a103fc5aafab529742ea649082
19+
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1659574811560,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20+
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1659574811561,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21+
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1659574811561,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22+
static/js/main.f882a730.js.map,1659574811561,5c565c85d0c5894330bf4890b141f991d40c3d2803be16f843e0f8d62359c9f2

src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function App() {
2525
reset: false,
2626
cancel: bgAnimOff,
2727
reverse: hueFlip,
28-
delay: 2000,
28+
delay: 1000,
2929
config: { duration: hueDuration, tension: 280, friction: 60 },
3030
onRest: () => setHueFlip(!hueFlip),
3131
});

src/components/LandingPage.css

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
overflow: hidden;
1010
}
1111

12-
.LandingPage .LandingPage-container {
12+
.LandingPage .lp-content-ctr {
1313
/* . . . Positioning . . . */
1414
position: absolute;
1515
display: flex;
@@ -20,16 +20,16 @@
2020
height: 100%;
2121
max-height: 100%;
2222
width: 100%;
23-
z-index: 1;
2423
/* . . . Fonts . . . */
2524
font-family: "munro";
2625
font-weight: 400;
2726
font-size: 16px;
2827
letter-spacing: 4px;
2928
font-smooth: never;
29+
z-index: 1;
3030
}
3131

32-
.LandingPage .bg-img-container {
32+
.LandingPage .bg-img-ctr {
3333
height: 100%;
3434
max-height: 100%;
3535
width: 100vw;
@@ -55,12 +55,23 @@
5555
z-index: 0;
5656
}
5757

58-
.LandingPage-container a {
58+
.LandingPage .lp-content-ctr a {
5959
text-decoration: none;
6060
color: rgb(208, 247, 239);
6161
}
6262

63-
.LandingPage-container .header-container {
63+
.LandingPage .lp-content-ctr .header-ctr {
64+
display: flex;
65+
flex: 1;
66+
align-items: center;
67+
justify-content: center;
68+
box-sizing: border-box;
69+
margin-bottom: 0%;
70+
width: 100%;
71+
z-index: 1;
72+
}
73+
74+
.LandingPage .lp-content-ctr .PersonalIntro {
6475
display: flex;
6576
flex: 1;
6677
align-items: center;
@@ -71,7 +82,13 @@
7182
z-index: 1;
7283
}
7384

74-
.LandingPage-container .link-container {
85+
.LandingPage .lp-content-ctr .PersonalIntro img {
86+
border: 10px ridge rgba(0, 255, 221, 0.767);
87+
padding: 3px;
88+
width: 250px;
89+
}
90+
91+
.LandingPage .lp-content-ctr .nav-ctr {
7592
display: flex;
7693
flex: 1;
7794
flex-direction: row;
@@ -81,13 +98,12 @@
8198
z-index: 1;
8299
}
83100

84-
.LandingPage-container .lp-link h1,
85-
.LandingPage-container .lp-link h2 {
101+
.LandingPage .lp-content-ctr .lp-link h1,
102+
.LandingPage .lp-content-ctr .lp-link h2 {
86103
padding: 30px 20px;
87-
z-index: 1;
88104
}
89105

90-
.LandingPage .HomeView-container {
106+
.LandingPage .HomeView-ctr {
91107
position: absolute;
92108
display: flex;
93109
flex: 1;
@@ -97,7 +113,6 @@
97113
width: 100vw;
98114
height: 100%;
99115
max-height: 100%;
100-
z-index: 0;
101116
}
102117

103118
.LandingPage .hide {

src/components/LandingPage.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import HomeView from "./HomeView";
77
import AuthContext from "../contexts/AuthContext";
88
import pixelBG from "../img/pixelBG_LowRes.png";
99
import pixelFadeBG from "../img/animated-14fps.png";
10+
import PersonalIntro from "./PersonalIntro";
1011

1112
interface Props {
1213
hueRotation: {
@@ -99,10 +100,10 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
99100

100101
return (
101102
<div className={`LandingPage`}>
102-
<div className={`LandingPage-container ${hideLP}`}>
103+
<div className={`lp-content-ctr ${hideLP}`}>
103104
{fadeOut((style: any, item: any) =>
104105
item ? (
105-
<animated.div className={"header-container"} style={style}>
106+
<animated.div className={"header-ctr"} style={style}>
106107
<LandingPageLink
107108
currentDisplay={currentDisplay}
108109
linkText={currentDisplay}
@@ -115,9 +116,10 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
115116
""
116117
)
117118
)}
119+
<PersonalIntro />
118120
{fadeOut((style: any, item: any) =>
119121
item ? (
120-
<animated.div className="link-container" style={style}>
122+
<animated.div className='nav-ctr' style={style}>
121123
<LandingPageLink
122124
currentDisplay={currentDisplay}
123125
linkText={link1Text}
@@ -137,16 +139,16 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
137139
""
138140
)
139141
)}
140-
<div className="bg-img-container">
142+
<div className='bg-img-ctr'>
141143
<animated.img
142144
style={hueRotation}
143145
className={`bg-img`}
144146
src={currBG}
145-
alt=""
147+
alt=''
146148
/>
147149
</div>
148150
</div>
149-
<div className={`HomeView-container ${hideHV}`}>
151+
<div className={`HomeView-ctr ${hideHV}`}>
150152
<HomeView hueRotation={hueRotation} setHueDuration={setHueDuration} />
151153
</div>
152154
</div>

src/components/PersonalIntro.css

Whitespace-only changes.

src/components/PersonalIntro.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import "./PersonalIntro.css";
2+
import headshot from "../img/Headshot-PurpleFlannel.png";
3+
4+
const PersonalIntro = () => {
5+
return (
6+
<div className='PersonalIntro'>
7+
<img src={headshot} alt='jake-headshot-img' />
8+
<p>Hello! I'm Jake</p>
9+
</div>
10+
);
11+
};
12+
13+
export default PersonalIntro;

src/img/Headshot-PurpleFlannel.png

110 KB
Loading

0 commit comments

Comments
 (0)