Skip to content

Commit b30c081

Browse files
JS-GitRepoJS-GitRepo
authored
Merge pull request #21 from JS-GitRepo/feature/desktopView
all new features adapted for desktop view
2 parents f490988 + f6fd396 commit b30c081

File tree

15 files changed

+288
-53
lines changed

15 files changed

+288
-53
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,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
6+
asset-manifest.json,1667168598450,91f7aac3fbdef57736484c82663f818f2df6fc43cfd1d43d8df1ca96a87e0a0c
7+
index.html,1667168598436,e1097bb3cb938269c835851ac26bf7cf74dc5242fbbb59c29173d1c2e2350468
8+
static/js/787.cda612ba.chunk.js,1667168598447,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
9+
static/js/main.5b659a05.js.LICENSE.txt,1667168598448,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
10+
static/css/main.ff8022d0.css,1667168598448,10db115528d5c9ea977371a2bd31920d1ba764920dac48f72357f4e651ffc3ec
11+
static/css/main.ff8022d0.css.map,1667168598448,5272036390d6e7877bff03a82d348ca6cd0d2d850d9b9c85deaacf21cc54002e
12+
static/js/787.cda612ba.chunk.js.map,1667168598450,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
13+
static/media/munro.f78662ff4aad4d038806.ttf,1667168598447,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
14+
static/media/animated-14fps.0a0c585671594fb5b8d7.png,1667168598447,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
15+
static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1667168598447,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
16+
static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1667168598447,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
17+
static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1667168598447,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
18+
static/js/main.5b659a05.js,1667168598447,bb87149c94c8b72c9d3c2eebfb1b949cdc4585bf3733ca0bfee2ba3e2480111a
19+
static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1667168598448,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
20+
static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1667168598449,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
21+
static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1667168598450,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
22+
static/js/main.5b659a05.js.map,1667168598450,da09ca863e83fea58443d79df500bb1167d48f6ffa9c0f15251ec5c136344b86

‎src/components/ErrorNotFound.tsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,34 @@
1+
import { useContext, useEffect } from "react";
2+
import { Link, useNavigate } from "react-router-dom";
3+
import { animated } from "react-spring";
4+
import AppContext from "../contexts/AppContext";
15
import "./styles/ErrorNotFound.css";
26

37
const ErrorNotFound = () => {
8+
const navigate = useNavigate();
9+
const { hueRotation } = useContext(AppContext);
10+
411
return (
512
<div className='ErrorNotFound'>
6-
<p>404</p>
7-
<p>NotFound</p>
13+
<div className='content-ctr'>
14+
<h1>404 Not Found</h1>
15+
<p>
16+
Sorry, but that resource wasn't found.
17+
<span className='emoji'>🙁</span>
18+
</p>
19+
<p>
20+
There will soon be a contact form here to provide details of what
21+
might've led you here. There are also some projects that have a
22+
linking structure which is currently WIP.
23+
</p>
24+
<p></p>
25+
</div>
26+
<animated.button style={hueRotation} onClick={() => navigate(-1)}>
27+
Go Back
28+
</animated.button>
29+
<animated.button style={hueRotation} onClick={() => navigate("/landing")}>
30+
Go To Landing
31+
</animated.button>
832
</div>
933
);
1034
};

‎src/components/HVContent.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SetStateAction, useContext, useEffect, useState } from "react";
1+
import { useContext, useEffect, useState } from "react";
22
import { animated, useTransition } from "react-spring";
33
import "./styles/HVContent.css";
44
import Deerfall from "./projects/Deerfall";
@@ -86,7 +86,6 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
8686
ref.current?.scrollIntoView({
8787
behavior: "smooth",
8888
});
89-
console.log("scrollToElement Triggered");
9089
};
9190

9291
// = = = = = USE EFFECTS = = = = =

‎src/components/HVSideNav.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import techIcon from "../img/navIcons/tech.png";
44
import aboutIcon from "../img/navIcons/about.png";
55
import blogIcon from "../img/navIcons/blog.png";
66
import { animated, useSpring } from "react-spring";
7-
import { useEffect, useState } from "react";
7+
import { useContext, useEffect } from "react";
88
import { HueRotation } from "../models/Models";
99
import { useLocation, useNavigate } from "react-router-dom";
10+
import AppContext from "../contexts/AppContext";
1011

1112
interface Props {
1213
hueRotation: HueRotation;
@@ -27,9 +28,10 @@ const HVSideNav = ({
2728
}: Props) => {
2829
const navigate = useNavigate();
2930
const location = useLocation();
31+
const { isMobile } = useContext(AppContext);
3032
const navSizeChange = useSpring({
31-
from: { height: "150px" },
32-
to: { height: "110px" },
33+
from: { height: isMobile ? "150px" : "200px" },
34+
to: { height: isMobile ? "110px" : "135px" },
3335
config: { mass: 1, tension: 200, friction: 15 },
3436
reverse: isPortfolio,
3537
});
@@ -42,7 +44,7 @@ const HVSideNav = ({
4244

4345
useEffect(() => {
4446
navigateToSection("media");
45-
}, [allParams[1]]);
47+
}, [allParams[1], allParams[2]]);
4648

4749
return (
4850
<animated.nav className='HVSideNav' style={navSizeChange}>

‎src/components/projects/Deerfall.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import ProjVideo from "./subComponents/ProjVideo";
21
import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallBanner_AV1.mp4";
32
import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallBanner_H265.mp4";
43
import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallBanner_H264.mp4";
@@ -13,19 +12,23 @@ const Deerfall = ({ isPortfolio }: Props) => {
1312
// - - - - Tech and Skills - - - -
1413
const technologies: string[] = [
1514
"Unreal Engine",
15+
"UE Blueprints",
1616
"C++",
17-
"Blueprints",
1817
"Blender",
1918
];
2019
const skills: string[] = [
2120
"Level Design",
2221
"3D Modeling",
2322
"Textures and Materials",
2423
"Automatic Landscape Materials",
25-
"Locomotion",
24+
"Inverse Kinematics and Locomotion",
2625
"Inventory Systems",
2726
];
28-
const desc: string = "";
27+
const about: string =
28+
"A game that began with the idea of 'Rimworld meets Daggerfall'; a simulation game focused on story generation rather than experiencing a crafted story.";
29+
const links = { github: "n/a", demo: "n/a" };
30+
const techDesc: string =
31+
"Built with Unreal Engine 5 from scratch. Most time up to this point spent learning materials somewhat deeply, and reversing IK / locomotion within the 'Advanced Locomotion v4' UE Plugin.";
2932

3033
return (
3134
<>
@@ -35,12 +38,14 @@ const Deerfall = ({ isPortfolio }: Props) => {
3538
mediaSrc_Fallback2={DeerfallVidH264}
3639
mediaAltTxt={"deerfall videogame project"}
3740
vidPoster={DeerfallPosterJPG}
41+
isVideo={true}
3842
isPortfolio={isPortfolio}
39-
tech={[]}
40-
skills={[]}
43+
tech={technologies}
44+
skills={skills}
4145
title={"deerfall"}
42-
desc={desc}
43-
isVideo={true}
46+
about={about}
47+
techDesc={techDesc}
48+
projLinks={links}
4449
/>
4550
</>
4651
);

‎src/components/projects/MediaMatchup.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,31 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
2525
"Software Engineering",
2626
"Hosting",
2727
];
28-
const desc: string = "A multi-media comparison app with a social twist. ";
28+
const about: string =
29+
"An 'apples to oranges' comparison app where various forms of media battle for your vote. These comparisons pit different categories of media against one another such as film, musical albums, video games, artwork, and television.";
30+
const links = {
31+
github: "https://github.com/JS-GitRepo/MediaMatchup_frontend",
32+
demo: "https://mediamatchup.app",
33+
};
34+
const techDesc: string =
35+
"MediaMatchup leverages 5 REST API's, 4 external and 1 internal, to generate a 'Matchup' on demand. Users are authenticated via Firebase Google Auth and have their Matchup choices saved to MongoDB Atlas Cloud. Users can add friends and view their feeds via MongoDB aggregation.";
2936

3037
return (
3138
<>
3239
<Project
3340
mediaSrc={matchupImg}
3441
mediaSrc_Fallback={matchupImg}
3542
mediaSrc_Fallback2={undefined}
36-
mediaAltTxt={"media matchup web application"}
43+
mediaAltTxt={"media matchup react application"}
3744
vidPoster={undefined}
45+
isVideo={false}
3846
isPortfolio={isPortfolio}
3947
tech={technologies}
4048
skills={skills}
4149
title={"mediamatchup"}
42-
desc={desc}
43-
isVideo={false}
50+
about={about}
51+
techDesc={techDesc}
52+
projLinks={links}
4453
/>
4554
</>
4655
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { animated } from "react-spring";
22

33
interface Props {
44
title: string;
5-
desc: string;
5+
about: string;
66
transStyle: any;
77
blog_ScrollRef: React.MutableRefObject<null>;
88
}
99

10-
const ProjDescBlog = ({ title, desc, transStyle, blog_ScrollRef }: Props) => {
10+
const ProjDescBlog = ({ title, about, transStyle, blog_ScrollRef }: Props) => {
1111
return (
1212
<animated.div
1313
ref={blog_ScrollRef}

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

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,74 @@
1+
import { useContext } from "react";
12
import { animated } from "react-spring";
3+
import AppContext from "../../../contexts/AppContext";
4+
import { ProjectLinks } from "../../../models/Models";
25

36
interface Props {
47
title: string;
5-
desc: string;
8+
about: string;
9+
tech: string[];
10+
skills: string[];
11+
techDesc: string;
12+
projLinks: ProjectLinks;
613
transStyle: any;
714
tech_ScrollRef: React.MutableRefObject<null>;
815
about_ScrollRef: React.MutableRefObject<null>;
916
}
1017

1118
const ProjDescPortfolio = ({
1219
title,
13-
desc,
20+
about,
21+
tech,
22+
skills,
23+
techDesc,
1424
transStyle,
1525
tech_ScrollRef,
1626
about_ScrollRef,
27+
projLinks,
1728
}: Props) => {
29+
const { hueRotation } = useContext(AppContext);
30+
1831
return (
1932
<animated.div
2033
style={transStyle}
2134
className='ProjDescPortfolio full-w-h
2235
'>
2336
<section ref={tech_ScrollRef} className='content-section tech-skills-ctr'>
24-
<p>Tech and Skills</p>
37+
<div className='content-ctr'>
38+
<h1>Technologies Leveraged</h1>
39+
{tech.map((tech, i) => (
40+
<p className='tech-p' key={`technology #${i}`}>
41+
{tech.toUpperCase()}
42+
</p>
43+
))}
44+
<h1>Skills Developed</h1>
45+
{skills.map((skill, i) => (
46+
<p className='skill-p' key={`skill #${i}`}>
47+
{skill}
48+
</p>
49+
))}
50+
</div>
2551
</section>
2652
<section ref={about_ScrollRef} className='content-section about-ctr'>
27-
<p>About Project</p>
53+
<div className='content-ctr'>
54+
<h1>About Project</h1>
55+
<p>{about}</p>
56+
<h1>Technical Description</h1>
57+
<p>{techDesc}</p>
58+
<h1>Links</h1>
59+
<animated.a
60+
className='proj-link'
61+
style={hueRotation}
62+
href={projLinks.github}>
63+
Github
64+
</animated.a>
65+
<animated.a
66+
className='proj-link'
67+
style={hueRotation}
68+
href={projLinks.demo}>
69+
Demo
70+
</animated.a>
71+
</div>
2872
</section>
2973
</animated.div>
3074
);

0 commit comments

Comments
 (0)