diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache new file mode 100644 index 0000000..ad8e21b --- /dev/null +++ b/.firebase/hosting.YnVpbGQ.cache @@ -0,0 +1,19 @@ +favicon.ico,1657132704394,c5bfaf489c76198724beac38fd4b3fca1125bbf8ba0f3ffd9ba9190bf6f53cea +logo192.png,1657132692666,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd15103f852ef107 +logo512.png,1657132682614,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff +manifest.json,1657132371588,03d105d6225429616e0596db9f20a9c62fc48e2564cd1fc208ea60e6af1a0297 +robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 +asset-manifest.json,1657829112988,c1ab03361ac5d599a6733ea4b8b22d5f7c572ac44a8debdff100121604b380e6 +index.html,1657829112988,1590ef6a3edd9c0754ba55a664db46790700c563cb3cbd95f684ced2c71dea5a +static/css/main.d819203b.css,1657829112997,b194d80e43401a1c1f169ae74dc6730e1121a55c29e441fc044041af2effd374 +static/css/main.d819203b.css.map,1657829112998,2ec85b58f0e75cf4fe776dfe211fc58dcd592908aa00127adbe4dc997c5d0829 +static/js/787.cda612ba.chunk.js,1657829112997,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7 +static/js/main.6ecde0db.js.LICENSE.txt,1657829112997,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c +static/js/787.cda612ba.chunk.js.map,1657829112998,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6 +static/media/munro.f78662ff4aad4d038806.ttf,1657829112997,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38 +static/media/animated-14fps.0a0c585671594fb5b8d7.png,1657829112997,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8 +static/media/DeerfallBannerPoster.da9b95c64930f253bad0.avif,1657829112997,97801686c427e88a0435c83da7e8169cc9f89c3fb7773de869092077d7a1304c +static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1657829112997,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6 +static/js/main.6ecde0db.js,1657829112997,d61dd4a72ef55459fa4f9ccd16e57c23d99de34f752cc8a56df93b2467155478 +static/media/DeerfallProRes_AV1.d420aebda0fdbb533e69.mp4,1657829112999,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d +static/js/main.6ecde0db.js.map,1657829112999,c8b1c30b9bad68c42870d38ad52e4208d2b24563a9997cf39541bd4034a3a18f diff --git a/.firebase/hosting.cHVibGlj.cache b/.firebase/hosting.cHVibGlj.cache new file mode 100644 index 0000000..b1760ba --- /dev/null +++ b/.firebase/hosting.cHVibGlj.cache @@ -0,0 +1,6 @@ +favicon.ico,1650942576689,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 +index.html,1657069816534,85e97b54f14b4e67090bc2c53166e388b8cd1120e54e06b4c4ebba4df594ef06 +logo192.png,1650942577000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b +logo512.png,1650942577052,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331 +manifest.json,1650942576755,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a +robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..b467f0b 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 90c9a5c..a71a3a4 100644 --- a/public/index.html +++ b/public/index.html @@ -31,12 +31,11 @@ Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - JSDotDev + jakesnyder.dev @@ -44,10 +43,8 @@ diff --git a/public/logo192.png b/public/logo192.png index fc44b0a..fabd716 100644 Binary files a/public/logo192.png and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png index a4e47a6..22fd910 100644 Binary files a/public/logo512.png and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..7d1ebc5 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -4,7 +4,7 @@ "icons": [ { "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", + "sizes": "64x64 32x32 16x16", "type": "image/x-icon" }, { diff --git a/src/App.css b/src/App.css index fe61fe9..ea9f031 100644 --- a/src/App.css +++ b/src/App.css @@ -8,6 +8,7 @@ .App { position: relative; height: 100%; + max-height: 100%; width: 100%; text-align: center; } @@ -16,15 +17,42 @@ font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; } +.App .emoji { + font-family: "Noto Emoji", sans-serif; + font-style: normal; +} + .App .wip-disclaimer { font-family: "munro"; color: white; position: absolute; - bottom: 100px; + bottom: 12%; left: 50%; transform: translate(-50%); z-index: 100; border: solid white 2px; background-color: rgba(96, 96, 96, 0.348); - padding: 10px; + padding: 0px 10px; + width: 90%; +} + +.App .wip-disclaimer h2 { + margin: 10px; + font-size: 16px; + font-style: normal; + font-weight: 400; +} + +.App .wip-disclaimer p { + margin: 10px; + font-size: 14px; +} + +/* - - - - MEDIA QUERIES - - - - */ +@media only screen and (min-width: 768px) { + .App .wip-disclaimer { + bottom: 100px; + padding: 10px; + width: 80%; + } } diff --git a/src/App.tsx b/src/App.tsx index 13c79df..b1badc6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -108,8 +108,11 @@ function App() {
-

{`[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!`}

+

+ 🛠 Website Under Construction{" "} + 🛠 +

+

{`Some features may be incomplete, buggy, or site-breaking. Feel free to explore and please re-visit soon!`}

); diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx index b5fce23..3422515 100644 --- a/src/components/HomeView.tsx +++ b/src/components/HomeView.tsx @@ -14,11 +14,14 @@ interface Props { } const HomeView = ({ hueRotation, setHueDuration }: Props) => { - // - - - - - Titles and Text - - - - - + // - - - - GENERAL STATES - - - - + const [firstRender, setFirstRender] = useState(true); + // - - - - - TITLES AND TEXT - - - - - + const [currentProject, setCurrentProject] = useState("Deerfall"); const [title, setTitle] = useState("Dev Blog"); const [subtitle, setSubtitle] = useState("Welcome! "); const [subEmoji, setSubEmoji] = useState(" 🙂"); - // - - - - - Links - - - - - + // - - - - - LINKS - - - - - const [gameDevLink, setGameDevLink] = useState(""); const [webDevLink, setWebDevLink] = useState(""); const [portfolioLink, setPortfolioLink] = useState(""); @@ -27,10 +30,9 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => { const [isGameDev, setIsGameDev] = useState(true); const navigate = useNavigate(); const currentPath = useLocation().pathname; - // - - - - - Projects - - - - - + // - - - - - PROJECTS - - - - - const gameDevProjList = ["Deerfall"]; const webDevProjList = ["MediaMatchup"]; - const [currentProject, setCurrentProject] = useState(""); useEffect(() => { if (currentPath.includes("/gamedev/")) { @@ -42,29 +44,37 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => { useEffect(() => { if (currentPath.includes("/gamedev/portfolio")) { + if (currentPath.includes("home/")) { + navigate(`/home/gamedev/portfolio/${currentProject}`); + } 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")) { + if (currentPath.includes("home/")) { + navigate(`/home/gamedev/blog/${currentProject}`); + } 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")) { + if (currentPath.includes("home/")) { + navigate(`/home/webdev/portfolio/${currentProject}`); + } 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")) { + if (currentPath.includes("home/")) { + navigate(`/home/webdev/blog/${currentProject}`); + } setTitle("WebDev Blog"); - navigate(`/home/webdev/blog/${currentProject}`); setGameDevLink(`/home/gamedev/blog/${currentProject}`); setPortfolioLink(`/home/webdev/portfolio/${currentProject}`); setIsPortfolio(false); diff --git a/src/components/HomeViewFooter.css b/src/components/HomeViewFooter.css index 4c01b2b..2374545 100644 --- a/src/components/HomeViewFooter.css +++ b/src/components/HomeViewFooter.css @@ -43,7 +43,8 @@ } .HomeViewFooter .project-nav-type-cat a { - margin: 6px; + font-size: 18px; + margin: 4px; } .HomeViewFooter .rights-ctr { diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css index 514a51b..417c7c6 100644 --- a/src/components/LandingPage.css +++ b/src/components/LandingPage.css @@ -4,6 +4,7 @@ .LandingPage { position: relative; height: 100%; + max-height: 100%; width: 100%; overflow: hidden; } @@ -17,6 +18,7 @@ justify-content: center; box-sizing: border-box; height: 100%; + max-height: 100%; width: 100%; z-index: 1; /* . . . Fonts . . . */ @@ -28,17 +30,19 @@ } .LandingPage .bg-img-container { + height: 100%; + max-height: 100%; + width: 100vw; display: flex; align-items: center; /* vertical */ justify-content: center; /* horizontal */ position: absolute; - width: 100vw; - height: 100vh; z-index: 0; } .LandingPage .bg-img { - height: 100vh; + height: 100%; + max-height: 100%; min-width: 100%; object-fit: cover; /* . . . Image Rendering . . . */ @@ -91,7 +95,8 @@ justify-content: center; box-sizing: border-box; width: 100vw; - height: 100vh; + height: 100%; + max-height: 100%; z-index: 0; } diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 0afbc60..f4ba095 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import "./LandingPage.css"; import LandingPageLink from "./LandingPageLink"; -import { animated, SpringValue, useSpring, useTransition } from "react-spring"; +import { animated, SpringValue, useTransition } from "react-spring"; import HomeView from "./HomeView"; import AuthContext from "../contexts/AuthContext"; import pixelBG from "../img/pixelBG_LowRes.png"; diff --git a/src/components/projects/Deerfall.tsx b/src/components/projects/Deerfall.tsx index de7dc19..5b89ba9 100644 --- a/src/components/projects/Deerfall.tsx +++ b/src/components/projects/Deerfall.tsx @@ -1,22 +1,15 @@ -import ProjectContents from "./ProjectContents"; -import DeerfallVid from "../../img/MainBanner-H264.mp4"; -import { useEffect, useState } from "react"; -import { animated, config, useTransition } from "react-spring"; +import ProjVideo from "./ProjVideo"; +import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallBanner_AV1.mp4"; +import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallBanner_H265.mp4"; +import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallBanner_H264.mp4"; +import DeerfallPosterJPG from "../../img/Projects/Deerfall/DeerfallBannerPoster.jpg"; +import { animated } 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", @@ -32,14 +25,20 @@ const Deerfall = ({ isPortfolio }: Props) => { "Locomotion", "Inventory Systems", ]; + const desc: string = ""; return ( - ); diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx index 284954f..33ee9dc 100644 --- a/src/components/projects/MediaMatchup.tsx +++ b/src/components/projects/MediaMatchup.tsx @@ -1,21 +1,13 @@ -import ProjectImage from "./ProjectImage"; -import mediaMatchupMain from "../../img/Projects/MediaMatchup/MediaMatchupMain.png"; -import { animated, config, useTransition } from "react-spring"; -import { useEffect, useState } from "react"; +import ProjImage from "./ProjImage"; +import mediaMatchupMainAVIF from "../../img/Projects/MediaMatchup/MediaMatchupMain.avif"; +import mediaMatchupMainJPG from "../../img/Projects/MediaMatchup/MediaMatchupMain.jpg"; +import { animated } from "react-spring"; 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", @@ -32,15 +24,19 @@ const MediaMatchup = ({ isPortfolio }: Props) => { "Software Engineering", "Hosting", ]; + const desc: string = ""; return ( - ); diff --git a/src/components/projects/ProjectBlogDesc.css b/src/components/projects/ProjDescBlog.css similarity index 100% rename from src/components/projects/ProjectBlogDesc.css rename to src/components/projects/ProjDescBlog.css diff --git a/src/components/projects/ProjDescBlog.tsx b/src/components/projects/ProjDescBlog.tsx new file mode 100644 index 0000000..5605c47 --- /dev/null +++ b/src/components/projects/ProjDescBlog.tsx @@ -0,0 +1,12 @@ +import "./ProjDescBlog.css"; + +interface Props { + title: string; + desc: string; +} + +const ProjDescBlog = ({ title, desc }: Props) => { + return
{title}
; +}; + +export default ProjDescBlog; diff --git a/src/components/projects/ProjectContents.css b/src/components/projects/ProjDescPortfolio.css similarity index 100% rename from src/components/projects/ProjectContents.css rename to src/components/projects/ProjDescPortfolio.css diff --git a/src/components/projects/ProjDescPortfolio.tsx b/src/components/projects/ProjDescPortfolio.tsx new file mode 100644 index 0000000..c3f04d1 --- /dev/null +++ b/src/components/projects/ProjDescPortfolio.tsx @@ -0,0 +1,18 @@ +import "./ProjDescPortfolio.css"; + +interface Props { + title: string; + desc: string; +} + +const ProjDescPortfolio = ({ title, desc }: Props) => { + return ( +
+ {title} +
+ ); +}; + +export default ProjDescPortfolio; diff --git a/src/components/projects/ProjectImage.css b/src/components/projects/ProjImage.css similarity index 100% rename from src/components/projects/ProjectImage.css rename to src/components/projects/ProjImage.css diff --git a/src/components/projects/ProjImage.tsx b/src/components/projects/ProjImage.tsx new file mode 100644 index 0000000..1629080 --- /dev/null +++ b/src/components/projects/ProjImage.tsx @@ -0,0 +1,45 @@ +import ProjDescBlog from "./ProjDescBlog"; +import "./ProjImage.css"; +import ProjDescPortfolio from "./ProjDescPortfolio"; + +interface Props { + imgSrc: string; + imgSrc_Fallback: string; + isPortfolio: boolean; + imgAltTxt: string; + tech: string[]; + skills: string[]; + title: string; + desc: string; +} + +const ProjImage = ({ + imgSrc, + imgSrc_Fallback, + isPortfolio, + imgAltTxt, + tech, + skills, + title, + desc, +}: Props) => { + return ( +
+
+ + + {imgAltTxt} + +
+
+ {isPortfolio ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default ProjImage; diff --git a/src/components/projects/ProjectPortfolioDesc.css b/src/components/projects/ProjVideo.css similarity index 100% rename from src/components/projects/ProjectPortfolioDesc.css rename to src/components/projects/ProjVideo.css diff --git a/src/components/projects/ProjVideo.tsx b/src/components/projects/ProjVideo.tsx new file mode 100644 index 0000000..3ba3e29 --- /dev/null +++ b/src/components/projects/ProjVideo.tsx @@ -0,0 +1,48 @@ +import ProjDescBlog from "./ProjDescBlog"; +import ProjDescPortfolio from "./ProjDescPortfolio"; +import "./ProjVideo.css"; + +interface Props { + vidSrc: string; + vidSrc_Fallback: string; + vidSrc_Fallback2: string; + vidPoster: string; + isPortfolio: boolean; + tech: string[]; + skills: string[]; + title: string; + desc: string; +} + +const ProjVideo = ({ + vidSrc, + vidSrc_Fallback, + vidSrc_Fallback2, + vidPoster, + isPortfolio, + tech, + skills, + title, + desc, +}: Props) => { + return ( +
+
+ +
+
+ {isPortfolio ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default ProjVideo; diff --git a/src/components/projects/ProjectBlogDesc.tsx b/src/components/projects/ProjectBlogDesc.tsx deleted file mode 100644 index 85e03d8..0000000 --- a/src/components/projects/ProjectBlogDesc.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import "./ProjectBlogDesc.css"; - -const ProjectBlogDesc = () => { - return
ProjectBlogDesc works
; -}; - -export default ProjectBlogDesc; diff --git a/src/components/projects/ProjectContents.tsx b/src/components/projects/ProjectContents.tsx deleted file mode 100644 index 2f1e086..0000000 --- a/src/components/projects/ProjectContents.tsx +++ /dev/null @@ -1,27 +0,0 @@ -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.tsx b/src/components/projects/ProjectImage.tsx deleted file mode 100644 index 2d26f68..0000000 --- a/src/components/projects/ProjectImage.tsx +++ /dev/null @@ -1,32 +0,0 @@ -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.tsx b/src/components/projects/ProjectPortfolioDesc.tsx deleted file mode 100644 index 3627863..0000000 --- a/src/components/projects/ProjectPortfolioDesc.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import "./ProjectPortfolioDesc.css"; - -const ProjectPortfolioDesc = () => { - return ( -
- ProjectPortfolioDesc works -
- ); -}; - -export default ProjectPortfolioDesc; diff --git a/src/img/MainBanner-H264.mp4 b/src/img/MainBanner-H264.mp4 deleted file mode 100644 index 22130b3..0000000 Binary files a/src/img/MainBanner-H264.mp4 and /dev/null differ diff --git a/src/img/Projects/Deerfall/DeerfallBannerPoster.avif b/src/img/Projects/Deerfall/DeerfallBannerPoster.avif new file mode 100644 index 0000000..569ba6c Binary files /dev/null and b/src/img/Projects/Deerfall/DeerfallBannerPoster.avif differ diff --git a/src/img/Projects/Deerfall/DeerfallBannerPoster.jpg b/src/img/Projects/Deerfall/DeerfallBannerPoster.jpg new file mode 100644 index 0000000..88eec54 Binary files /dev/null and b/src/img/Projects/Deerfall/DeerfallBannerPoster.jpg differ diff --git a/src/img/Projects/Deerfall/DeerfallBanner_AV1.mp4 b/src/img/Projects/Deerfall/DeerfallBanner_AV1.mp4 new file mode 100644 index 0000000..ae555ff Binary files /dev/null and b/src/img/Projects/Deerfall/DeerfallBanner_AV1.mp4 differ diff --git a/src/img/Projects/Deerfall/DeerfallBanner_H264.mp4 b/src/img/Projects/Deerfall/DeerfallBanner_H264.mp4 new file mode 100644 index 0000000..3f25bc0 Binary files /dev/null and b/src/img/Projects/Deerfall/DeerfallBanner_H264.mp4 differ diff --git a/src/img/Projects/Deerfall/DeerfallBanner_H265.mp4 b/src/img/Projects/Deerfall/DeerfallBanner_H265.mp4 new file mode 100644 index 0000000..1ef5d46 Binary files /dev/null and b/src/img/Projects/Deerfall/DeerfallBanner_H265.mp4 differ diff --git a/src/img/Projects/MediaMatchup/MediaMatchupMain.avif b/src/img/Projects/MediaMatchup/MediaMatchupMain.avif new file mode 100644 index 0000000..02cea30 Binary files /dev/null and b/src/img/Projects/MediaMatchup/MediaMatchupMain.avif differ diff --git a/src/img/Projects/MediaMatchup/MediaMatchupMain.jpg b/src/img/Projects/MediaMatchup/MediaMatchupMain.jpg new file mode 100644 index 0000000..40d8ef3 Binary files /dev/null and b/src/img/Projects/MediaMatchup/MediaMatchupMain.jpg differ diff --git a/src/img/Projects/MediaMatchup/MediaMatchupMain.png b/src/img/Projects/MediaMatchup/MediaMatchupMain.png deleted file mode 100644 index d8e1cce..0000000 Binary files a/src/img/Projects/MediaMatchup/MediaMatchupMain.png and /dev/null differ