add pong animation

dreamz12345 · Jul 11, 2024 · ecff1b2 · ecff1b2
1 parent b5c2c6e
commit ecff1b2
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/portfolio/src/Assets/0001-1200.mp4 b/portfolio/src/Assets/0001-1200.mp4
diff --git a/portfolio/src/Assets/pong_animation0000-0120.mp4 b/portfolio/src/Assets/pong_animation0000-0120.mp4
diff --git a/portfolio/src/Pages/Home.js b/portfolio/src/Pages/Home.js
@@ -6,6 +6,7 @@ import "./Projects.css";
 import myPhoto from "../Assets/placeholder_portrait4.png";
 import pongSquare from "../Assets/pong_square_size.jpg";
 
+import pongVideo from "../Assets/pong_animation0000-0120.mp4"
 import renderPhoto from "../Assets/TT-SU2_700_samples_transparen_background.png";
 import { NavLink } from "react-router-dom";
 
@@ -32,14 +33,15 @@ const Home = () => {
                         </NavLink>
                     </div>
 
+
 
                         <div className="homeDivOuter">
 
                             <div className="homeDivMid">
                                 <NavLink to="/about">
                                     <div className="homeDivInner">
                                         <span className="boldTxt">About Me</span>
-                                        <span className="homePhotoTxt">CLick here to learn more about me.</span>
+                                        <span className="homePhotoTxt">Click here to learn more about me.</span>
 
                                     </div>
                                 </NavLink>
@@ -49,7 +51,7 @@ const Home = () => {
                                 <NavLink to="/projects">
                                     <div className="homeDivInner">
                                         <span className="boldTxt">Projects</span>
-                                        <img src={pongSquare} alt="projectsPhoto" className="homePhoto"></img>
+                                        <video src={pongVideo} alt="projectsPhoto" className="homePhoto" video loop autoPlay muted />
                                     </div>
                                 </NavLink>
                             </div>
@@ -68,7 +70,7 @@ const Home = () => {
                                 <NavLink to="/projects">
                                     <div className="homeDivInner">
                                         <span className="boldTxt">Contact</span>
-                                        <img src={pongSquare} alt="projectsPhoto" className="homePhoto"></img>
+                                        <video src={pongVideo} alt="projectsPhoto" className="homePhoto" video loop autoPlay muted />
                                     </div>
                                 </NavLink>
                             </div>