working on projects page

dreamz12345 · Sep 9, 2024 · ddeeaad · ddeeaad
1 parent 1dfdec5
commit ddeeaad
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git a/portfolio/src/Pages/Home.css b/portfolio/src/Pages/Home.css
@@ -159,6 +159,19 @@
 
 }
 
+.homePhotoFit {
+
+    width: 33vmax;
+    height: 33vmax;
+    object-fit: contain;
+    border: 0.14vmax solid cornflowerblue;
+    border-radius: 2vmax;
+    margin-top: 1rem;
+    background: rgb(18, 18, 23);
+
+}
+
+
 .pongPhoto {
     object-fit: fill;
     width: 30rem;
@@ -176,6 +189,8 @@
 
 
 
+
+
 @media screen and (max-width:1050px) {
     .helloText{white-space: break-spaces;}
 }

diff --git a/portfolio/src/Pages/Projects.css b/portfolio/src/Pages/Projects.css
@@ -105,9 +105,11 @@
 }
 
 .technologiesUsedPhoto{
-    width: 3rem;
-    margin-top: 1rem;
-    margin-left: 1rem;
+    max-width: 1.7vmax;
+    margin-top: 1vmax;
+    margin-left: 1vmax;
+    display: inline;
+
 }
 
 .arduinoPhoto {

diff --git a/portfolio/src/Pages/Projects.js b/portfolio/src/Pages/Projects.js
@@ -1,12 +1,14 @@
 import Footer from "../Components/Footer/Footer";
 import Navbar from "../Components/Navbar/Navbar";
 import ScrollToTop from "../Components/scrollToTop";
-import "./Projects.css"
+import "./Projects.css";
+import "./About.css";
 import pongSquare from "../Assets/pong_square_size.jpg";
 import pythonLogo from "../Assets/python-logo-only.png";
 import arduinoLogo from "../Assets/arduino-logo.png";
 import cplusplusLogo from "../Assets/c++-logo.png";
 import GitHubLogo from "../Assets/GitHub_Logo_White.png"
+import pongVideo from "../Assets/pong_animation0000-0120.mp4"
 
 import placeholderPhoto from "../Assets/myPhoto.jpg";
 import { NavLink } from "react-router-dom";
@@ -25,6 +27,61 @@ const Projects = () => {
                 <Navbar />
                 <div className="pageContent">
 
+                <div className="aboutMidDiv">
+                        <span className="aboutTitleText">Projects</span>
+
+                    </div>
+
+                <div className="homeDivOuter">
+
+                <div className="homeDivMid">
+
+                                    <a className="homeDivInner" href={github_link}>
+                                        <span className="boldTxt">All of my Projects</span>
+                                        <img src={GitHubLogo} alt="projectsPhoto" className="homePhotoFit"></img>
+
+                                    </a>
+
+                            </div>
+
+                            <div className="homeDivMid">
+                                <NavLink to="/projects">
+                                    <div className="homeDivInner">
+                                        <div className="projectsTechnologiesUsed">
+                                        <span className="boldTxt">Pong</span>
+                                        <img src={pythonLogo} alt="projectsPhoto" className="technologiesUsedPhoto"></img>
+                                        </div>
+                                        <video src={pongVideo} alt="projectsPhoto" className="homePhoto" loop autoPlay muted />
+                                    </div>
+                                </NavLink>
+                            </div>
+
+                            <div className="homeDivMid">
+                                <NavLink to="/hobbies">
+                                    <div className="homeDivInner">
+                                        <span className="boldTxt">Hobbies</span>
+                                        <img src={pongVideo} alt="projectsPhoto" className="homePhoto"></img>
+                                    </div>
+                                </NavLink>
+                            </div>
+
+
+                            <div className="homeDivMid">
+                                <NavLink to="/projects">
+                                    <div className="homeDivInner">
+                                        <span className="boldTxt">Contact</span>
+                                        <video src={pongVideo} alt="projectsPhoto" className="homePhoto" video loop autoPlay muted />
+                                    </div>
+                                </NavLink>
+                            </div>
+
+
+
+
+</div>
+
+
+
                 <div className="projectsLinksDiv">
                         <a href={github_link} className="projectsLink">
                             <div className="projectsPhotoDivRight">