Merge pull request #2 from jbrennan414/v2

improve images

src/components/Projects.css

@@ -1,10 +1,24 @@
 .side-projects { 
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
     margin: 20px;
 }
 
+.side-projects:hover {
+    border: .5px solid white;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
 img {
     width: 128px;
-    height: 72px
+    height: 72px;
+    padding: 0 20px 0 0;
+}
+
+.job-title {
+    margin: 0px;
+    font-family: "Roboto";
+    font-size: 14px;
 }

src/components/Projects.jsx

@@ -1,46 +1,58 @@
 import './Projects.css'
-import logo from '../assets/img/ski-bunks.jpg'; // with import
-
+import skiBunksLogo from '../assets/img/ski-bunks.jpg'; 
+import skiScraperLogo from '../assets/img/skiscraper.jpg';
+import wildRydesLogo from '../assets/img/wildrydes.png';
+import findMyFourteenerLogo from '../assets/img/findmyfourteener.png';
 
 
 function Projects() {
 
+    const handleClick = (project) => {
+        window.open(project.link, "_blank");
+    }
+
     const projects = [
         {
+            id: "skibunks",
             title: "SkiBunks 🏔️",
-            description: "This is a projesdjofdjwaofiewoaifje;waofijew;aoifjew;oajfew;aoijfew;oaijfewa;oijct",
-            // image: skibunks,
-            link: ""
+            description: `SkiBunks is a rental reservation system I built for my buddies 
+                and I, in our ski house during the winter of 2023/24`,
+            image: skiBunksLogo,
+            link: "https://www.youtube.com/watch?v=qRyWRSH-Dkk"
         },
         {
+            id: "skiscraper",
             title: "SkiScraper ⛷️", 
-            description: "This is a projesdjofdjwaofiewoaifje;waofijew;aoifjew;oajfew;aoijfew;oaijfewa;oijct",
-            image: "",
-            link: ""
+            description: `This was a passion project I worked on with a colleague after my ski 
+                pass began requiring reservations to ski. This bot scraped reservation sites 
+                and would send me a Telegram message if I had an available spot`,
+            image: skiScraperLogo,
+            link: "https://www.youtube.com/watch?v=4CnmTISvu3A"
         }, 
         {
+            id: "wildrydes",
             title: "WildRydes 🦄",
-            description: "This was an AWS tutorial to learn the basics of a full stack app on AWS. If you need to book a unicorn reservation, this is the app for you.",
-            image: "",
-            link:""
+            description: `This was an AWS tutorial to learn the basics of a full stack app on AWS. 
+            If you need to book a unicorn reservation, this is the app for you.`,
+            image: wildRydesLogo,
+            link:"https://master.d3su1632stz2i2.amplifyapp.com/"
         },
         {
+            id: "findmyfourteener",
             title: "FindMyFourteener 🏔️",
             description: "Do you live in Denver and need to hike a 14'er? This is the site for you!",
-            image: "",
-            link: ""
+            image: findMyFourteenerLogo,
+            link: "https://findmyfourteener.com"
         },
-
-
     ]
 
     return (
         <div>
             {projects.map((project, i) => (
-                <div key={i} className="side-projects">
-                    <img src={logo} />
+                <div key={i} className="side-projects" onClick={() => handleClick(project)} >
+                    <img src={project.image} />
                     <div>
-                        <p className="my-title">{project.title}</p>
+                        <p className="job-title">{project.title}</p>
                         <p className="job-description">{project.description}</p>
                     </div>
                 </div>