Skip to content

Commit 81b5fed

Browse files
JS-GitRepoJS-GitRepo
committed
side navbar is now functional, has animations, and smooth scrolls to the associated section
1 parent 4b94a7b commit 81b5fed

33 files changed

+444
-287
lines changed

‎.firebase/hosting.YnVpbGQ.cache‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ logo192.png,1658782384754,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd1510
33
logo512.png,1658782384754,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
44
manifest.json,1658782384755,00ed38bd68df8fe063a1fda8efbea33c1e6e5118444b200531d8996998372fa5
55
robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
6-
asset-manifest.json,1666066965842,b98d7748f2593ca71be3514094e362d67650c2c5bc536a2fee5e223d4a1dea50
7-
index.html,1666066965828,2e2d977f5c005a34dfdc0f06e13752a1470a2ec186b51fcad7538e67d7f192b7
8-
static/css/main.b78c790c.css,1666066965840,4c817b2f6f2cbc4a0a186a4ea01dc6484366d0526b5720911f83f325cf7e1547
9-
static/js/787.cda612ba.chunk.js,1666066965840,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
10-
static/js/main.598fef70.js.LICENSE.txt,1666066965840,389af84f5364120c1a9af11313b67a410e2e78bc2556eec2c4507b542075a54b
11-
static/js/787.cda612ba.chunk.js.map,1666066965842,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
12-
static/css/main.b78c790c.css.map,1666066965839,97879dbd3e1bb07c2c9cdbc0a91bf04e8699b12bdfdb3f06de25f4c229deead0
13-
static/media/munro.f78662ff4aad4d038806.ttf,1666066965839,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14-
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1666066965840,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15-
static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1666066965839,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
16-
static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1666066965839,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
17-
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1666066965839,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
18-
static/js/main.598fef70.js,1666066965839,f829529374101438a02efbd5144311f7bd87b60d39c8459929651020d541ed39
19-
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1666066965841,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20-
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1666066965841,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21-
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1666066965842,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22-
static/js/main.598fef70.js.map,1666066965841,c06963706d277aa92ef2b9c15ff3d33ef90e57839a9e62e0dc9d821c5813f816
6+
asset-manifest.json,1666228677731,8587ff0e282d38665e3d4083dfcbd08e0643cf51909f796c5c9d14c1c64886f1
7+
index.html,1666228677719,cbd50d72dddceff54e2292487378050926f41f29cef41a7f86265c9e3d6a1b67
8+
static/css/main.bf399fb6.css,1666228677731,3021a3f58f6e8bcfb460f5f54ba0397e177a665940b1f4654c9be580d29fe755
9+
static/js/787.cda612ba.chunk.js,1666228677730,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
10+
static/css/main.bf399fb6.css.map,1666228677730,f5c6f41cc441d782aa66d992a188e7da8164a1e1dfb53f25373217c03620bc1f
11+
static/js/main.21bc060d.js.LICENSE.txt,1666228677730,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
12+
static/js/787.cda612ba.chunk.js.map,1666228677731,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
13+
static/media/munro.f78662ff4aad4d038806.ttf,1666228677729,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14+
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1666228677729,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15+
static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1666228677729,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
16+
static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1666228677728,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
17+
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1666228677729,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
18+
static/js/main.21bc060d.js,1666228677729,95c8a21bdc62c35b0422ff8e086363c212e9c45e4145040fae1f1cbfdd17d9d5
19+
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1666228677730,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20+
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1666228677731,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21+
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1666228677731,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22+
static/js/main.21bc060d.js.map,1666228677731,12edd3d4f07d0f145b52d5c2d6adc0348e0be01f3e544d785a2294872d08ae90

‎src/components/HVContent.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import "./styles/HVContent.css";
44
import Deerfall from "./projects/Deerfall";
55
import MediaMatchup from "./projects/MediaMatchup";
66
import Introduction from "./Introduction";
7+
import mediaIcon from "../img/navIcons/media.png";
8+
import techIcon from "../img/navIcons/tech.png";
9+
import aboutIcon from "../img/navIcons/about.png";
10+
import blogIcon from "../img/navIcons/blog.png";
11+
import HVSideNav from "./HVSideNav";
712

813
interface Props {
914
project: string;
@@ -67,7 +72,9 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
6772
}, [allParams]);
6873

6974
return (
70-
<div className='HVContent'>
75+
<main className='HVContent'>
76+
{isIntro ? "" : <HVSideNav isPortfolio={isPortfolio} />}
77+
7178
{transitionFade(
7279
(styles, item) =>
7380
item && (
@@ -76,7 +83,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
7683
</animated.div>
7784
)
7885
)}
79-
</div>
86+
</main>
8087
);
8188
};
8289

‎src/components/HVFooter.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const HVFooter = ({ allParams, isIntro }: Props) => {
1414
const { hueRotation } = useContext(AppContext);
1515

1616
return (
17-
<div className='HVFooter'>
18-
<div className='project-nav-ctr'>
17+
<footer className='HVFooter'>
18+
<nav className='project-nav-ctr'>
1919
<div className={isIntro ? "project-nav hidden" : "project-nav"}>
2020
<span className='material-symbols-outlined'>chevron_left</span>
2121
<h2>{allParams[3]}</h2>
@@ -53,7 +53,7 @@ const HVFooter = ({ allParams, isIntro }: Props) => {
5353
</li>
5454
</ul>
5555
</div>
56-
</div>
56+
</nav>
5757

5858
<div className='rights-ctr'>
5959
<p>
@@ -64,7 +64,7 @@ const HVFooter = ({ allParams, isIntro }: Props) => {
6464
}>{`© ${currentYear.getFullYear()} All Rights Reserved`}</animated.span>{" "}
6565
</p>
6666
</div>
67-
</div>
67+
</footer>
6868
);
6969
};
7070

‎src/components/HVHeader.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const HVHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => {
1717

1818
// Some elements in the return will be hidden by media query CSS, to allow UI elements in the header or footer depending on mobile / Desktop. This is why there are some "redundant" elements
1919
return (
20-
<div className='HVHeader'>
20+
<header className='HVHeader'>
2121
<Link className='title-ctr' to={{ pathname: "/landing" }}>
2222
<h1>
2323
{`${isIntro ? "who is " : ""}`}
@@ -77,7 +77,7 @@ const HVHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => {
7777
</ul>
7878
</div>
7979
</div>
80-
<div className={isIntro ? "hidden" : "nav-category-ctr"}>
80+
<nav className={isIntro ? "hidden" : "nav-category-ctr"}>
8181
<ul>
8282
<li>
8383
<NavLink
@@ -98,8 +98,8 @@ const HVHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => {
9898
</NavLink>
9999
</li>
100100
</ul>
101-
</div>
102-
</div>
101+
</nav>
102+
</header>
103103
);
104104
};
105105

‎src/components/HVSideNav.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import "./styles/HVSideNav.css";
2+
import mediaIcon from "../img/navIcons/media.png";
3+
import techIcon from "../img/navIcons/tech.png";
4+
import aboutIcon from "../img/navIcons/about.png";
5+
import blogIcon from "../img/navIcons/blog.png";
6+
import { animated, useSpring } from "react-spring";
7+
import { useContext } from "react";
8+
import AppContext from "../contexts/AppContext";
9+
10+
interface Props {
11+
isPortfolio: boolean;
12+
}
13+
14+
const HVSideNav = ({ isPortfolio }: Props) => {
15+
const { scrollRefs } = useContext(AppContext);
16+
const navSizeChange = useSpring({
17+
from: { height: "150px" },
18+
to: { height: "110px" },
19+
config: { mass: 1, tension: 200, friction: 15 },
20+
reverse: isPortfolio,
21+
});
22+
23+
const handleScroll = (ref: any) => {
24+
ref.current?.scrollIntoView({ behavior: "smooth" });
25+
};
26+
27+
return (
28+
<animated.nav className='HVSideNav' style={navSizeChange}>
29+
{isPortfolio ? (
30+
<ul>
31+
<li>
32+
<img
33+
onClick={() => handleScroll(scrollRefs.media)}
34+
className='nav-icon'
35+
src={mediaIcon}
36+
alt='media navigation icon'
37+
/>
38+
</li>
39+
<li>
40+
<img
41+
onClick={() => handleScroll(scrollRefs.tech)}
42+
className='nav-icon'
43+
src={techIcon}
44+
alt='technologies and skills navigation icon'
45+
/>
46+
</li>
47+
<li>
48+
<img
49+
onClick={() => handleScroll(scrollRefs.about)}
50+
className='nav-icon'
51+
src={aboutIcon}
52+
alt='about project navigation icon'
53+
/>
54+
</li>
55+
</ul>
56+
) : (
57+
<ul>
58+
<li>
59+
<img
60+
onClick={() => handleScroll(scrollRefs.media)}
61+
className='nav-icon'
62+
src={mediaIcon}
63+
alt='media navigation icon'
64+
/>
65+
</li>
66+
<li>
67+
<img
68+
onClick={() => handleScroll(scrollRefs.blog)}
69+
className='nav-icon'
70+
src={blogIcon}
71+
alt='media navigation icon'
72+
/>
73+
</li>
74+
</ul>
75+
)}
76+
</animated.nav>
77+
);
78+
};
79+
80+
export default HVSideNav;

‎src/components/Introduction.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Introduction = () => {
1515
const introP5 = AppConfig.built_using_txt;
1616

1717
return (
18-
<div className='Introduction'>
18+
<section className='Introduction'>
1919
<div className='bg-img-ctr'>
2020
<animated.img
2121
className={`bg-img`}
@@ -42,7 +42,7 @@ const Introduction = () => {
4242
</animated.div>
4343
</div>
4444
</div>
45-
</div>
45+
</section>
4646
);
4747
};
4848

‎src/components/projects/Deerfall.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallBanner_AV1.mp4";
33
import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallBanner_H265.mp4";
44
import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallBanner_H264.mp4";
55
import DeerfallPosterJPG from "../../img/Projects/Deerfall/DeerfallBannerPoster.jpg";
6-
import { animated } from "react-spring";
6+
import Project from "./subComponents/Project";
77

88
interface Props {
99
isPortfolio: boolean;
@@ -28,19 +28,21 @@ const Deerfall = ({ isPortfolio }: Props) => {
2828
const desc: string = "";
2929

3030
return (
31-
<animated.div className='Deerfall media-ctr'>
32-
<ProjVideo
33-
vidSrc={DeerfallVidH265}
34-
vidSrc_Fallback={DeerfallVidAV1}
35-
vidSrc_Fallback2={DeerfallVidH264}
31+
<>
32+
<Project
33+
mediaSrc={DeerfallVidH265}
34+
mediaSrc_Fallback={DeerfallVidAV1}
35+
mediaSrc_Fallback2={DeerfallVidH264}
36+
mediaAltTxt={"deerfall videogame project"}
37+
vidPoster={DeerfallPosterJPG}
3638
isPortfolio={isPortfolio}
37-
tech={technologies}
38-
skills={skills}
39-
title={"Deerfall"}
39+
tech={[]}
40+
skills={[]}
41+
title={"deerfall"}
4042
desc={desc}
41-
vidPoster={DeerfallPosterJPG}
43+
isVideo={true}
4244
/>
43-
</animated.div>
45+
</>
4446
);
4547
};
4648

‎src/components/projects/MediaMatchup.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import ProjImage from "./subComponents/ProjImage";
22
// import mediaMatchupMainAVIF from "../../img/Projects/MediaMatchup/MediaMatchupMain.avif";
33
// import mediaMatchupMainJPG from "../../img/Projects/MediaMatchup/MediaMatchupMain.jpg";
44
import matchupImg from "../../img/Projects/MediaMatchup/ST4vsArt.jpg";
5-
import { animated } from "react-spring";
5+
import Project from "./subComponents/Project";
66

77
interface Props {
88
isPortfolio: boolean;
@@ -28,18 +28,21 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
2828
const desc: string = "A multi-media comparison app with a social twist. ";
2929

3030
return (
31-
<animated.div className='MediaMatchup media-ctr'>
32-
<ProjImage
33-
imgSrc={matchupImg}
34-
imgSrc_Fallback={matchupImg}
31+
<>
32+
<Project
33+
mediaSrc={matchupImg}
34+
mediaSrc_Fallback={matchupImg}
35+
mediaSrc_Fallback2={undefined}
36+
mediaAltTxt={"media matchup web application"}
37+
vidPoster={undefined}
3538
isPortfolio={isPortfolio}
36-
imgAltTxt={"MediaMatchup Demo"}
3739
tech={technologies}
3840
skills={skills}
39-
title={"Media Matchup"}
41+
title={"mediamatchup"}
4042
desc={desc}
43+
isVideo={false}
4144
/>
42-
</animated.div>
45+
</>
4346
);
4447
};
4548

‎src/components/projects/subComponents/ProjDescBlog.css‎

Whitespace-only changes.

‎src/components/projects/subComponents/ProjDescBlog.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import { animated } from "react-spring";
2-
import "./ProjDescBlog.css";
32

43
interface Props {
54
title: string;
65
desc: string;
76
transStyle: any;
7+
blog_ScrollRef: React.MutableRefObject<null>;
88
}
99

10-
const ProjDescBlog = ({ title, desc, transStyle }: Props) => {
10+
const ProjDescBlog = ({ title, desc, transStyle, blog_ScrollRef }: Props) => {
1111
return (
12-
<animated.div style={transStyle} className='ProjDescBlog'>
13-
<p>Blog functionality is currently WIP!</p>
14-
<p>Coming Soon</p>
12+
<animated.div
13+
ref={blog_ScrollRef}
14+
style={transStyle}
15+
className='ProjDescBlog full-w-h'>
16+
<section className='content-section blog-ctr'>
17+
Blog posts will someday live here!
18+
</section>
1519
</animated.div>
1620
);
1721
};

0 commit comments

Comments
 (0)