diff --git a/public/index.html b/public/index.html index 5b171d8..90c9a5c 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ (false); + const [bgAnimOff, setBgAnimOff] = useState(false); + const [hueDuration, setHueDuration] = useState(4000); + const hueRotation = useSpring({ + to: { + filter: "hue-rotate(130deg) saturate(80%) sepia(30%)", + }, + from: { + filter: "hue-rotate(0deg) saturate(100%) sepia(0%)", + }, + reset: false, + cancel: bgAnimOff, + reverse: hueFlip, + delay: 2000, + config: { duration: hueDuration, tension: 280, friction: 60 }, + onRest: () => setHueFlip(!hueFlip), + }); + return (
- } /> - } /> - } /> - } /> - } /> - } /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> +
+

{`[Website Under Construction / Active Development]`}

+

{`At the moment, some features may be incomplete, buggy, or site-breaking. Please re-visit when able to see how things change and how far they have come since last time!`}

+
); } diff --git a/src/components/HomeView.css b/src/components/HomeView.css index 268cc44..59e44b0 100644 --- a/src/components/HomeView.css +++ b/src/components/HomeView.css @@ -1,3 +1,13 @@ +/* - - - - RESETS - - - -*/ +.HomeViewHeader h1, +.HomeViewHeader h2, +.HomeViewHeader a, +.HomeViewHeader p { + margin: 0px; + padding: 0px; +} + +/* - - - - GENERAL - - - -*/ .HomeView { position: absolute; display: flex; @@ -8,18 +18,18 @@ width: 100vw; box-sizing: border-box; /* FONTS */ - font-family: "Fira Sans", sans-serif; + font-family: "munro"; + font-size: 16px; font-weight: 300; - font-style: italic; - font-size: 18px; + font-smooth: never; + -webkit-font-smoothing: none; letter-spacing: 1px; color: rgb(75, 75, 75); - font-smooth: never; } .HomeView h1 { font-weight: 300; - font-size: 24px; + font-size: 22px; } .HomeView h2 { @@ -27,17 +37,60 @@ font-size: 22px; } -/* - - - - - HomeView Background Image - - - - - */ +.HomeView a { + text-decoration: none; + color: rgb(75, 75, 75); +} + +.HomeView a:hover { + color: rgb(64, 210, 236); + text-decoration: none; +} + +.HomeView .subtitle { + font-size: 14px; + font-weight: 300; + display: none; +} + +.HomeView .highlighted-link { + color: rgb(0, 175, 166); +} + +.HomeView .emoji { + font-family: "Noto Emoji", sans-serif; + font-style: normal; + font-size: 12px; +} -/* - - - MEDIA QUERIES - - -*/ +/* - - - - MEDIA QUERIES - - - -*/ @media only screen and (min-width: 768px) { .HomeView { - font-weight: 400; - font-size: 1.5vh; + font-size: 18px; } .HomeView h1 { - font-weight: 300; - font-size: 2.5vh; + font-weight: 200; + font-size: 24px; + } + + .HomeView h2 { + font-weight: 200; + font-size: 26px; + } + + .HomeView .subtitle { + display: flex; + justify-content: center; + align-items: center; + font-family: "munro"; + font-style: normal; + font-size: 14px; + font-weight: 300px; + } + + .HomeView .emoji { + font-size: 10px; + font-weight: 700; } } diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx index cbea80d..b5fce23 100644 --- a/src/components/HomeView.tsx +++ b/src/components/HomeView.tsx @@ -1,19 +1,106 @@ import "./HomeView.css"; -import { useLocation, useNavigate } from "react-router-dom"; -import { useEffect } from "react"; +import { Navigate, useLocation, useNavigate } from "react-router-dom"; +import { useEffect, useState } from "react"; import HomeViewHeader from "./HomeViewHeader"; import HomeViewFooter from "./HomeViewFooter"; import HomeViewContent from "./HomeViewContent"; +import { SpringValue } from "react-spring"; -const HomeView = () => { - const currentPath = useLocation().pathname; +interface Props { + hueRotation: { + filter: SpringValue; + }; + setHueDuration: React.Dispatch>; +} + +const HomeView = ({ hueRotation, setHueDuration }: Props) => { + // - - - - - Titles and Text - - - - - + const [title, setTitle] = useState("Dev Blog"); + const [subtitle, setSubtitle] = useState("Welcome! "); + const [subEmoji, setSubEmoji] = useState(" 🙂"); + // - - - - - Links - - - - - + const [gameDevLink, setGameDevLink] = useState(""); + const [webDevLink, setWebDevLink] = useState(""); + const [portfolioLink, setPortfolioLink] = useState(""); + const [blogLink, setBlogLink] = useState(""); + const [isPortfolio, setIsPortfolio] = useState(true); + const [isGameDev, setIsGameDev] = useState(true); const navigate = useNavigate(); + const currentPath = useLocation().pathname; + // - - - - - Projects - - - - - + const gameDevProjList = ["Deerfall"]; + const webDevProjList = ["MediaMatchup"]; + const [currentProject, setCurrentProject] = useState(""); + + useEffect(() => { + if (currentPath.includes("/gamedev/")) { + setCurrentProject(gameDevProjList[0]); + } else if (currentPath.includes("/webdev/")) { + setCurrentProject(webDevProjList[0]); + } + }, [isGameDev]); + + useEffect(() => { + if (currentPath.includes("/gamedev/portfolio")) { + setTitle("GameDev Portfolio"); + navigate(`/home/gamedev/portfolio/${currentProject}`); + setWebDevLink(`/home/webdev/portfolio/${currentProject}`); + setBlogLink(`/home/gamedev/blog/${currentProject}`); + setIsPortfolio(true); + setIsGameDev(true); + } else if (currentPath.includes("/gamedev/blog")) { + setTitle("GameDev Blog"); + navigate(`/home/gamedev/blog/${currentProject}`); + setWebDevLink(`/home/webdev/blog/${currentProject}`); + setPortfolioLink(`/home/gamedev/portfolio/${currentProject}`); + setIsPortfolio(false); + setIsGameDev(true); + } else if (currentPath.includes("/webdev/portfolio")) { + setTitle("WebDev Portfolio"); + navigate(`/home/webdev/portfolio/${currentProject}`); + setGameDevLink(`/home/gamedev/portfolio/${currentProject}`); + setBlogLink(`/home/webdev/blog/${currentProject}`); + setIsPortfolio(true); + setIsGameDev(false); + } else if (currentPath.includes("/webdev/blog")) { + setTitle("WebDev Blog"); + navigate(`/home/webdev/blog/${currentProject}`); + setGameDevLink(`/home/gamedev/blog/${currentProject}`); + setPortfolioLink(`/home/webdev/portfolio/${currentProject}`); + setIsPortfolio(false); + setIsGameDev(false); + } + setHueDuration(12000); + }, [currentPath, currentProject]); return (
- - - + + +
); }; diff --git a/src/components/HomeViewContent.css b/src/components/HomeViewContent.css index 0046772..af349a9 100644 --- a/src/components/HomeViewContent.css +++ b/src/components/HomeViewContent.css @@ -1,3 +1,4 @@ +/* - - - - GENERAL - - - -*/ .HomeViewContent { position: relative; display: flex; @@ -8,13 +9,23 @@ overflow: hidden; } +.HomeViewContent .media-ctr { + height: 100%; + width: 100%; +} + .HomeViewContent video { - /* position: absolute; */ height: 100%; object-fit: cover; min-width: 100%; } +.HomeViewContent img { + height: 100%; + object-fit: cover; + width: 100%; +} +/* - - - - MEDIA QUERIES - - - -*/ @media only screen and (min-width: 768px) { .HomeViewContent video { height: 110%; diff --git a/src/components/HomeViewContent.tsx b/src/components/HomeViewContent.tsx index ca1b55a..467a0b7 100644 --- a/src/components/HomeViewContent.tsx +++ b/src/components/HomeViewContent.tsx @@ -1,16 +1,68 @@ +import { useEffect, useState } from "react"; +import { animated, config, useTransition } from "react-spring"; import "./HomeViewContent.css"; -import bannerVid from "../img/MainBanner-H264.mp4"; +import Deerfall from "./projects/Deerfall"; +import MediaMatchup from "./projects/MediaMatchup"; interface Props { pathname: string; + isPortfolio: boolean; + currentProject: string; } -const HomeViewContent = ({ pathname }: Props) => { +const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => { + // - - - - States - - - - + // toggleQueue false = projQueue1, toggleQueue true = projQueue2 + const [toggleQueue, setToggleQueue] = useState(false); + // - - - - Projects - - - - + const gameDevProjList = { + Deerfall: , + }; + const webDevProjList = { + MediaMatchup: , + }; + const [projQueue1, setProjQueue1] = useState( + + ); + const [projQueue2, setProjQueue2] = useState( + + ); + // - - - - Transitions - - - - + const transitions = useTransition(toggleQueue, { + from: { opacity: 0 }, + enter: { opacity: 1 }, + leave: { opacity: 0 }, + config: { duration: 300 }, + exitBeforeEnter: true, + }); + + const checkQueue = (project: JSX.Element) => { + if (toggleQueue === true) { + setProjQueue2(project); + setToggleQueue(!toggleQueue); + } else { + setProjQueue1(project); + setToggleQueue(!toggleQueue); + } + }; + + useEffect(() => { + if (currentProject === "Deerfall") { + checkQueue(gameDevProjList.Deerfall); + } else if (currentProject === "MediaMatchup") { + checkQueue(webDevProjList.MediaMatchup); + } + }, [currentProject]); + return (
- + {transitions((styles, item) => + item ? ( + {projQueue1} + ) : ( + {projQueue2} + ) + )}
); }; diff --git a/src/components/HomeViewFooter.css b/src/components/HomeViewFooter.css index aa6c3a6..4c01b2b 100644 --- a/src/components/HomeViewFooter.css +++ b/src/components/HomeViewFooter.css @@ -10,14 +10,13 @@ /* - - - GENERAL - - -*/ .HomeViewFooter { display: flex; - flex-direction: row; + flex-direction: column; align-items: center; justify-content: center; - background-color: rgb(255, 255, 255); + background-color: rgb(240, 240, 240); width: 100vw; height: 100px; font-size: 16px; - font-weight: 300; } .HomeViewFooter h2 { @@ -40,12 +39,17 @@ .HomeViewFooter .project-nav-type-cat { display: flex; justify-content: center; + align-items: center; } .HomeViewFooter .project-nav-type-cat a { margin: 6px; } +.HomeViewFooter .rights-ctr { + font-size: 10px; +} + /* - - - MEDIA QUERIES - - -*/ @media only screen and (min-width: 768px) { @@ -56,4 +60,8 @@ .HomeViewFooter .project-nav-ctr { display: none; } + + .HomeViewFooter .rights-ctr { + font-size: 14px; + } } diff --git a/src/components/HomeViewFooter.tsx b/src/components/HomeViewFooter.tsx index 8b8faf8..21427a0 100644 --- a/src/components/HomeViewFooter.tsx +++ b/src/components/HomeViewFooter.tsx @@ -1,24 +1,64 @@ +import { Link } from "react-router-dom"; +import { animated, SpringValue } from "react-spring"; import "./HomeViewFooter.css"; interface Props { pathname: string; + gamedevOrWebdev: boolean; + gameDevLink: string; + webDevLink: string; + currentProject: string; + hueRotation: { + filter: SpringValue; + }; } -const HomeViewFooter = ({ pathname }: Props) => { +const HomeViewFooter = ({ + pathname, + gamedevOrWebdev, + hueRotation, + gameDevLink, + webDevLink, + currentProject, +}: Props) => { + const currentYear = new Date(); + return (
chevron_left -

Deerfall

+

{currentProject}

chevron_right
- Game Dev - Web Dev + + + Game Dev + + + + + Web Dev + +
+ +
+

+ {`© ${currentYear.getFullYear()} All Rights Reserved`}{" "} +

+
); }; diff --git a/src/components/HomeViewHeader.css b/src/components/HomeViewHeader.css index ac4b77f..1661326 100644 --- a/src/components/HomeViewHeader.css +++ b/src/components/HomeViewHeader.css @@ -1,20 +1,12 @@ -/* - - - RESETS - - -*/ -.HomeViewHeader h1, -.HomeViewHeader h2, -.HomeViewHeader a, -.HomeViewHeader p { - margin: 0px; - padding: 0px; -} - /* - - - GENERAL - - -*/ .HomeViewHeader { display: flex; flex-direction: row; justify-content: space-around; - background-color: rgb(255, 255, 255); - width: 100vw; - height: 80px; + background-color: rgb(240, 240, 240); + width: 100%; + height: 100px; + text-decoration: none; } .HomeViewHeader h1 { @@ -25,7 +17,7 @@ display: flex; flex-direction: column; justify-content: center; - width: 120px; + width: 175px; } .HomeViewHeader .project-nav-ctr { @@ -44,6 +36,7 @@ .HomeViewHeader .project-nav-type-cat { display: flex; justify-content: center; + align-items: center; } .HomeViewHeader .project-nav-type-cat a { @@ -71,15 +64,12 @@ /* - - - MEDIA QUERIES - - -*/ @media only screen and (min-width: 768px) { .HomeViewHeader { - justify-content: space-between; + justify-content: space-around; + height: 100px; } .HomeViewHeader .title-ctr { - width: 230px; - } - - .HomeViewHeader .nav-ctr { - width: 230px; + width: 200px; } .HomeViewHeader .project-nav-ctr { @@ -88,4 +78,12 @@ align-items: center; justify-content: center; } + + .HomeViewHeader .nav-ctr { + width: 200px; + } + + .HomeViewHeader .nav-ctr ul li { + margin: 0px 10px; + } } diff --git a/src/components/HomeViewHeader.tsx b/src/components/HomeViewHeader.tsx index 25cb2b7..46b2675 100644 --- a/src/components/HomeViewHeader.tsx +++ b/src/components/HomeViewHeader.tsx @@ -1,38 +1,98 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import { animated, SpringValue } from "react-spring"; import "./HomeViewHeader.css"; interface Props { - pathname: string; + title: string; + subtitle: string; + subEmoji: string; + gameDevLink: string; + webDevLink: string; + portfolioLink: string; + blogLink: string; + isPortfolio: boolean; + gamedevOrWebdev: boolean; + currentProject: string; + hueRotation: { + filter: SpringValue; + }; } -const HomeViewHeader = ({ pathname }: Props) => { - const [title, setTitle] = useState("Dev Blog"); - const [subtitle, setSubtitle] = useState("Welcome! 😊"); - +const HomeViewHeader = ({ + title, + subtitle, + subEmoji, + gameDevLink, + webDevLink, + portfolioLink, + blogLink, + isPortfolio, + gamedevOrWebdev, + currentProject, + hueRotation, +}: Props) => { // 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 return (
-
-

{`Jake's ${title}`}

-
+ +

+ {`Jake's `} + + {title} + +

+

+ {subtitle} + {subEmoji} +

+
chevron_left -

Deerfall

+

{currentProject}

chevron_right
- Game Dev - Web Dev + + + Game Dev + + + + + Web Dev + +
    -
  • Portfolio
  • -
  • Blog
  • +
  • + + + Portfolio + + +
  • +
  • + + + Blog + + +
diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css index aaac2e3..514a51b 100644 --- a/src/components/LandingPage.css +++ b/src/components/LandingPage.css @@ -1,8 +1,3 @@ -/* - - - - - lINKS AND FONTS - - - - - - - - */ -@font-face { - font-family: "munro"; - src: url("/src/img/munro/munro.ttf"); -} /* - - - - - - - RESETS - - - - - - - - - - */ /* - - - - - - - SPECIFICS - - - - - - - - - - */ diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 187202f..0afbc60 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -2,13 +2,20 @@ import { useContext, useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import "./LandingPage.css"; import LandingPageLink from "./LandingPageLink"; -import { animated, useSpring, useTransition } from "react-spring"; +import { animated, SpringValue, useSpring, useTransition } from "react-spring"; import HomeView from "./HomeView"; import AuthContext from "../contexts/AuthContext"; import pixelBG from "../img/pixelBG_LowRes.png"; import pixelFadeBG from "../img/animated-14fps.png"; -const LandingPage = () => { +interface Props { + hueRotation: { + filter: SpringValue; + }; + setHueDuration: React.Dispatch>; +} + +const LandingPage = ({ hueRotation, setHueDuration }: Props) => { // - - - - - LINK FUNCTIONALITY - - - - - const [currentDisplay, setCurrentDisplay] = useState(""); const [firstRender, setFirstRender] = useState(true); @@ -25,8 +32,6 @@ const LandingPage = () => { const [hideHV, setHideHV] = useState("hide"); const [isActivePage, setIsActivePage] = useState(true); const [currBG, setCurrBG] = useState(pixelBG); - const [hueFlip, setHueFlip] = useState(false); - const [bgAnimOff, setBgAnimOff] = useState(false); // - - - - - BG TRANSITION - - - - - const transDuration = 500; @@ -44,27 +49,15 @@ const LandingPage = () => { config: { duration: transDuration }, }, }); - const bgHueRotation = useSpring({ - to: { - filter: "hue-rotate(130deg) saturate(80%) sepia(30%)", - }, - from: { - filter: "hue-rotate(0deg) saturate(100%) sepia(0%)", - }, - reset: false, - cancel: bgAnimOff, - reverse: hueFlip, - delay: 2000, - config: { duration: 4000, tension: 280, friction: 60 }, - onRest: () => setHueFlip(!hueFlip), - }); // - - - - - useEffects - - - - - + useEffect(() => { setCurrentPathContext(currentPath); if (firstRender) { setFirstRender(false); } else if ( + // If current path is 'complete', transition to HomeView currentPath.endsWith("/portfolio") || currentPath.endsWith("/blog") ) { @@ -72,19 +65,23 @@ const LandingPage = () => { setIsActivePage(false); setHideHV(""); setTimeout(() => setHideLP("hide"), 2000); - setTimeout(() => setBgAnimOff(true), 2000); + setHueDuration(12000); } - }, [currentPath]); - useEffect(() => { if (currentPath === "/") { navigate("/landing"); + setCurrBG(pixelBG); + setIsActivePage(true); + setHideHV("hide"); + setHideLP(""); + setHueDuration(4000); } else if (currentPath === "/landing") { setCurrentDisplay("jakesnyder.dev"); setLink1Text("Web Dev"); setLink1Path("/landing/webdev"); setLink2Text("Game Dev"); setLink2Path("/landing/gamedev"); + setHueDuration(4000); } else if (currentPath === "/landing/webdev") { setCurrentDisplay("Web Development"); setLink1Text("Portfolio"); @@ -142,7 +139,7 @@ const LandingPage = () => { )}
{
- +
); diff --git a/src/components/projects/Deerfall.tsx b/src/components/projects/Deerfall.tsx new file mode 100644 index 0000000..de7dc19 --- /dev/null +++ b/src/components/projects/Deerfall.tsx @@ -0,0 +1,48 @@ +import ProjectContents from "./ProjectContents"; +import DeerfallVid from "../../img/MainBanner-H264.mp4"; +import { useEffect, useState } from "react"; +import { animated, config, useTransition } from "react-spring"; + +interface Props { + isPortfolio: boolean; +} + +const Deerfall = ({ isPortfolio }: Props) => { + // - - - - Transition - - - - + // const transitions = useTransition(transition, { + // from: { opacity: 0 }, + // enter: { opacity: 1 }, + // update: { opacity: 0 }, + // leave: { opacity: 0 }, + // config: config.molasses, + // }); + + // - - - - Tech and Skills - - - - + const technologies: string[] = [ + "Unreal Engine", + "C++", + "Blueprints", + "Blender", + ]; + const skills: string[] = [ + "Level Design", + "3D Modeling", + "Textures and Materials", + "Automatic Landscape Materials", + "Locomotion", + "Inventory Systems", + ]; + + return ( + + + + ); +}; + +export default Deerfall; diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx new file mode 100644 index 0000000..284954f --- /dev/null +++ b/src/components/projects/MediaMatchup.tsx @@ -0,0 +1,49 @@ +import ProjectImage from "./ProjectImage"; +import mediaMatchupMain from "../../img/Projects/MediaMatchup/MediaMatchupMain.png"; +import { animated, config, useTransition } from "react-spring"; +import { useEffect, useState } from "react"; + +interface Props { + isPortfolio: boolean; +} + +const MediaMatchup = ({ isPortfolio }: Props) => { + // - - - - Transitions - - - - + // const transitions = useTransition(transition, { + // from: { opacity: 0 }, + // enter: { opacity: 1 }, + // leave: { opacity: 0 }, + // reverse: transition, + // config: config.molasses, + // }); + // - - - - Tech and Skills - - - - + const technologies: string[] = [ + "JavaScript", + "Mongo DB", + "Express JS", + "React JS", + "Node JS", + "REST API", + "Firebase", + ]; + const skills: string[] = [ + "Web Development", + "Web Design", + "Software Engineering", + "Hosting", + ]; + + return ( + + + + ); +}; + +export default MediaMatchup; diff --git a/src/components/projects/ProjectBlogDesc.css b/src/components/projects/ProjectBlogDesc.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/projects/ProjectBlogDesc.tsx b/src/components/projects/ProjectBlogDesc.tsx new file mode 100644 index 0000000..85e03d8 --- /dev/null +++ b/src/components/projects/ProjectBlogDesc.tsx @@ -0,0 +1,7 @@ +import "./ProjectBlogDesc.css"; + +const ProjectBlogDesc = () => { + return
ProjectBlogDesc works
; +}; + +export default ProjectBlogDesc; diff --git a/src/components/projects/ProjectContents.css b/src/components/projects/ProjectContents.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/projects/ProjectContents.tsx b/src/components/projects/ProjectContents.tsx new file mode 100644 index 0000000..2f1e086 --- /dev/null +++ b/src/components/projects/ProjectContents.tsx @@ -0,0 +1,27 @@ +import ProjectBlogDesc from "./ProjectBlogDesc"; +import ProjectPortfolioDesc from "./ProjectPortfolioDesc"; +import "./ProjectContents.css"; + +interface Props { + vidSrc: string; + isPortfolio: boolean; + tech: string[]; + skills: string[]; +} + +const ProjectVideo = ({ vidSrc, isPortfolio, tech, skills }: Props) => { + return ( +
+
+ +
+
+ {isPortfolio ? : } +
+
+ ); +}; + +export default ProjectVideo; diff --git a/src/components/projects/ProjectImage.css b/src/components/projects/ProjectImage.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/projects/ProjectImage.tsx b/src/components/projects/ProjectImage.tsx new file mode 100644 index 0000000..2d26f68 --- /dev/null +++ b/src/components/projects/ProjectImage.tsx @@ -0,0 +1,32 @@ +import ProjectBlogDesc from "./ProjectBlogDesc"; +import "./ProjectImage.css"; +import ProjectPortfolioDesc from "./ProjectPortfolioDesc"; + +interface Props { + imgSrc: string; + isPortfolio: boolean; + imgAltTxt: string; + tech: string[]; + skills: string[]; +} + +const ProjectImage = ({ + imgSrc, + isPortfolio, + imgAltTxt, + tech, + skills, +}: Props) => { + return ( +
+
+ {imgAltTxt} +
+
+ {isPortfolio ? : } +
+
+ ); +}; + +export default ProjectImage; diff --git a/src/components/projects/ProjectPortfolioDesc.css b/src/components/projects/ProjectPortfolioDesc.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/projects/ProjectPortfolioDesc.tsx b/src/components/projects/ProjectPortfolioDesc.tsx new file mode 100644 index 0000000..3627863 --- /dev/null +++ b/src/components/projects/ProjectPortfolioDesc.tsx @@ -0,0 +1,13 @@ +import "./ProjectPortfolioDesc.css"; + +const ProjectPortfolioDesc = () => { + return ( +
+ ProjectPortfolioDesc works +
+ ); +}; + +export default ProjectPortfolioDesc; diff --git a/src/components/projects/TechItem.css b/src/components/projects/TechItem.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/projects/TechItem.tsx b/src/components/projects/TechItem.tsx new file mode 100644 index 0000000..7b06275 --- /dev/null +++ b/src/components/projects/TechItem.tsx @@ -0,0 +1,7 @@ +import "./TechItem.css"; + +const TechItem = () => { + return
  • Tech Item Works
  • ; +}; + +export default TechItem; diff --git a/src/img/NotoEmoji-Regular.ttf b/src/img/NotoEmoji-Regular.ttf new file mode 100644 index 0000000..fc2cb2c Binary files /dev/null and b/src/img/NotoEmoji-Regular.ttf differ diff --git a/src/img/Projects/MediaMatchup/MediaMatchupMain.png b/src/img/Projects/MediaMatchup/MediaMatchupMain.png new file mode 100644 index 0000000..d8e1cce Binary files /dev/null and b/src/img/Projects/MediaMatchup/MediaMatchupMain.png differ