project photos addition

src/assets/css/App.css

@@ -225,12 +225,33 @@ a {
   justify-content: space-around;
 }
 
+.vFlex {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.spaceBetween {
+  justify-content: space-between;
+}
+
 .onRight {
   position: absolute;
   right: 0;
   top: 0;
 }
 
+.bgi {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-y: center;
+  opacity: 0.4;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
 #Vertical {
   margin-left: auto;
   margin-right: auto;
@@ -406,8 +427,23 @@ a {
   background-color: rgba(22, 22, 22, .8);
 }
 
-.project .topBox, .project .bottomBox {
-  padding-left: 1rem;
+.projTitle > * {
+  margin-bottom: 0;
+}
+
+.projBody {
+  position: relative;
+  z-index: 3;
+}
+
+.project .topBox, .project .bottomBox, .project .projTitle {
+  padding: 0 1rem;
+  z-index: inherit;
+}
+
+.backedBody {
+  background-color: #1a1a1a;
+  padding: .25em;
 }
 
 .tab {
@@ -425,18 +461,6 @@ a {
   height: 3rem;
 }
 
-.topBox {
-  padding-left: .5rem;
-  padding-right: 1rem;
-  height: 75%;
-}
-
-.bottomBox {
-  height: auto;
-  padding-left: 0rem;
-  padding-right: 1rem;
-}
-
 .bottomBox a, .placeholding {
   vertical-align: middle;
   display: inline;

src/componets/Project.js

@@ -1,32 +1,44 @@
-import React from 'react'
-import placeholder from '../assets/photos/placeholder.png'
+import React from "react";
+import placeholder from "../assets/photos/placeholder.png";
 
 export default class Project extends React.Component {
   render() {
+    let style = {
+      backgroundImage: "url(" + this.props.bgi + ")",
+    };
     let links = <></>;
     if (this.props.links != null) {
-            this.props.links.forEach(x => {
+      this.props.links.forEach((x) => {
         links = (
           <>
             {links}
             <a href={x[0]}>{x[1]}</a>
           </>
-                )
-            })
-        } else{
-            links = <div className='placeholder'><img alt="no links!" src={placeholder} /></div>
+        );
+      });
+    } else {
+      links = (
+        <div className="placeholder">
+          <img alt="no links!" src={placeholder} />
+        </div>
+      );
     }
     return (
-            <div className={'project'} data-aos='fade-up'>
-                <div className='topBox'>
+      <div className={"project"} data-aos="fade-up">
+        <div className="vFlex">
+          <div className="projTitle">
             <h3>{this.props.title}</h3>
             <p className={this.props.status + " tab"}>⬤</p>
-                    <p className='body'>{this.props.children}</p>
           </div>
-                <div className='bottomBox'>
-                    {links}
+          <div className='projBody vFlex spaceBetween'>
+            <div style={style} className='bgi' />
+            <div className="topBox">
+              <p className="backedBody">{this.props.children}</p>
+            </div>
+            <div className="bottomBox">{links}</div>
           </div>
         </div>
-        )
+      </div>
+    );
   }
 }

src/pages/Projects.js

@@ -3,6 +3,15 @@ import Project from '../componets/Project'
 import github from '../assets/icons/github.svg'
 import globe from '../assets/icons/globe.svg'
 
+import geovisF from '../assets/photos/geovisF.png'
+import chessbed from '../assets/photos/chessbed.png'
+import occupyrit from '../assets/photos/occupyRIT.png'
+import slate from '../assets/photos/slate.png'
+import website from '../assets/photos/website.png'
+import resume from '../assets/photos/resume.png'
+import yugoslavia from '../assets/photos/ceoOfYugo.png'
+import vexbutt from '../assets/photos/vexcodeButtons.jpeg'
+
 export default function Projects() {
   return (
     <div className='foreground'>
@@ -14,10 +23,13 @@ export default function Projects() {
       </div>
       <h3 className='concentratedHead'>Pinned:</h3>
       <ProjectList>
-        <Project status='complete' title='Slate' links={[['https://github.com/asimonson1125/Slate', <img alt='github' src={github} />], ["https://slate.csh.rit.edu/", <img alt='site' src={globe} />]]} >
+        <Project status='complete' title='Slate' bgi={slate} links={[['https://github.com/asimonson1125/Slate', <img alt='github' src={github} />], ["https://slate.csh.rit.edu/", <img alt='site' src={globe} />]]} >
           Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data.  Includes Computer Science House account integration.
         </Project>
-        <Project status='WIP' title='OccupyRIT' links={[['https://github.com/asimonson1125/Occupy-RIT', <img alt='github' src={github} />]]}>
+        <Project status='complete' title='Lower 48 Alt. Energy Map' bgi={geovisF} links={[['https://ritarcgis.maps.arcgis.com/apps/dashboards/17d5bda01edc4a2eb6205a4922d889c9', <img alt='ArcGIS' src={globe} />]]}>
+          ArcGIS Map of the most effective alternative energy sources in the continental United States
+        </Project>
+        <Project status='WIP' title='OccupyRIT' bgi={occupyrit} links={[['https://github.com/asimonson1125/Occupy-RIT', <img alt='github' src={github} />]]}>
           Collects RIT Gym Occupancy data for analysis, determining busiest times.
         </Project>
         <Project status='WIP' title='FinTech' links={[['https://github.com/LukeHorigan/Financial-Management-Assocation-', <img alt='github' src={github} />]]}  >
@@ -26,22 +38,22 @@ export default function Projects() {
       </ProjectList>
       <h3 className='concentratedHead'>All:</h3>
       <ProjectList>
-        <Project status='WIP' title='CSH ImagineRIT2023'>
-          An ongoing project with the Computer Science House using bluetooth tracking to monitor the ImagineRIT event
+      <Project status='complete' title='Lower 48 Alt. Energy Map' bgi={geovisF} links={[['https://ritarcgis.maps.arcgis.com/apps/dashboards/17d5bda01edc4a2eb6205a4922d889c9', <img alt='ArcGIS' src={globe} />]]}>
+          ArcGIS Map of the most effective alternative energy sources in the continental United States
         </Project>
-        <Project status='WIP' title='OccupyRIT' links={[['https://github.com/asimonson1125/Occupy-RIT', <img alt='github' src={github} />]]}>
+        <Project status='WIP' title='OccupyRIT' bgi={occupyrit} links={[['https://github.com/asimonson1125/Occupy-RIT', <img alt='github' src={github} />]]}>
           Collects RIT Gym Occupancy data for analysis, determining busiest times.
         </Project>
-        <Project status='complete' title='Chesscom Embeds' links={[['https://github.com/asimonson1125/chesscom-embed', <img alt='github' src={github} />]]} >
+        <Project status='complete' title='Chesscom Embeds' bgi={chessbed} links={[['https://github.com/asimonson1125/chesscom-embed', <img alt='github' src={github} />]]} >
           A template for creating Chess.com user profile embeds
         </Project>
-        <Project status='complete' title='Resume' links={[['https://github.com/asimonson1125/Resume', <img alt='github' src={github} />]]} >
+        <Project status='complete' title='Resume' bgi={resume} links={[['https://github.com/asimonson1125/Resume', <img alt='github' src={github} />], ["https://asimonson.com/Resume.pdf/", <img alt='site' src={globe} />]]} >
           My Resume, made in LaTeX with a custom design derived by the AltaCV template on OverLeaf.
         </Project>
-        <Project status='WIP' title='Digital Portfolio' links={[['https://github.com/asimonson1125/asimonson1125.github.io', <img alt='github' src={github} />]]} >
-          A personal portfolio site made with React.js.  Might overhaul.
+        <Project status='WIP' title='Digital Portfolio' bgi={website} links={[['https://github.com/asimonson1125/asimonson1125.github.io', <img alt='github' src={github} />], ["https://asimonson.com/", <img alt='site' src={globe} />]]} >
+          A personal portfolio site made with React.js.
         </Project>
-        <Project status='complete' title='Slate' links={[['https://github.com/asimonson1125/Slate', <img alt='github' src={github} />], ["https://slate.csh.rit.edu/", <img alt='site' src={globe} />]]} >
+        <Project status='complete' title='Slate' bgi={slate} links={[['https://github.com/asimonson1125/Slate', <img alt='github' src={github} />], ["https://slate.csh.rit.edu/", <img alt='site' src={globe} />]]} >
           Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data.  Includes Computer Science House account integration.
         </Project>
         <Project status='complete' title='Humans vs. Zombies Bot' links={[['https://github.com/asimonson1125/HvZ-bot', <img alt='github' src={github} />]]} >
@@ -60,14 +72,14 @@ export default function Projects() {
         <Project status='complete' title='Acumen' links={[['https://github.com/asimonson1125/Acumen', <img alt='github' src={github} />]]} >
           A personal Discord bot focused on statistical insight and role management for NationsGame, including NG Rolls Sim accessibility.
         </Project>
-        <Project status='complete' title='NationsGame Rolls Sim' links={[['https://github.com/asimonson1125/NG-Rolls-Simulator', <img alt='github' src={github} />]]} >
+        <Project status='complete' title='NationsGame Rolls Sim' bgi={yugoslavia} links={[['https://github.com/asimonson1125/NG-Rolls-Simulator', <img alt='github' src={github} />]]} >
           A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.<br />
           Unfortunately, NationsGame is now defunct.  Limited screenshots of functionality.
         </Project>
         <Project status='incomplete' title='WallCycle' links={[['https://github.com/asimonson1125/WallCycle', <img alt='github' src={github} />]]} >
           A GNOME extension that cycles through a folder of wallpapers.
         </Project>
-        <Project status='complete' title='VEXcode Button Engine' links={[['https://github.com/asimonson1125/VEXcode-Button-Generator', <img alt='github' src={github} />]]} >
+        <Project status='complete' title='VEXcode Button Engine' bgi={vexbutt} links={[['https://github.com/asimonson1125/VEXcode-Button-Generator', <img alt='github' src={github} />]]} >
           VEXcode button library + examples and template for the VEX V5 brain
         </Project>
         <Project status='complete' title='WinKeylogger' links={[['https://github.com/asimonson1125/WinKeylogger', <img alt='github' src={github} />]]}>