updated project CSS

site/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

site/src/App.css

@@ -90,37 +90,51 @@ a {
   max-height: 20rem;
 }
 .projectList{
-  float:left;
-  background-color: rgba(11, 17, 26, 0.5);
-  border: solid rgba(34, 52, 75, 0.5) .3rem;
-  width: calc(95% - .5rem);
+  padding: 0;
+  display: block;
+  margin-left:auto;
+  margin-right:auto;
+  width: 85rem;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: solid rgba(156,49,45,.2) .3rem;
+  text-align: center;
 }
 .project{
-  background-color: #25282c;
-  display: inline;
-  float: left;
-  padding: .5rem;
-  margin: 2rem;
-  width: 20rem;
+  background-image: radial-gradient(ellipse at top, #ff000036,transparent), radial-gradient(ellipse at bottom,#25282c,transparent), radial-gradient(ellipse at right,#25282c,transparent), radial-gradient(ellipse at left,#25282c,transparent);
+  display: inline-block;
+  text-align: left;
+  margin: 1rem;
+  width: 25rem;
   height: 15rem;
   border: .3rem black solid;
 }
 .project h3{
   border-bottom: black solid .2rem;
 }
+.project p{
+  color:rgb(212, 212, 212);
+}
+.project img{
+  margin-top: auto;
+  height:3rem;
+}
 .topBox{
-  height: 70%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 65%;
 }
 .bottomBox{
   height: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 .bottomBox a{
   vertical-align: middle;
 }
-.project a{
+.project a img, .project a p{
   padding: .5rem;
-  border: solid black .2rem;
-  background-color: rgb(80, 80, 80);
+  filter: invert(18%) sepia(6%) saturate(5428%) hue-rotate(314deg) brightness(95%) contrast(97%);
+
 }
 .footer{
   display: block;
@@ -134,9 +148,16 @@ a {
   margin-right: auto;
   table-layout: fixed;
 }
-.socials td{
-  width:15%;
-}
 .socials img{
   height: 2rem;
+  margin-right: 2rem;
+}
+
+@media screen and (max-width: 1500px){
+  .socials{
+    margin-left: auto;
+  }
+  .projectList{
+    width: 95%;
+  }
 }

site/src/Projects.js

@@ -1,30 +1,31 @@
 import ProjectList from './componets/ProjectList'
 import Project from './componets/Project'
+import github from './assets/github.svg'
 
 export default function Projects(){
     return(
       <>
         <h2>Projects</h2>
         <ProjectList>
-          <Project status='WIP' title='Digital Portfolio' link='https://github.com/asimonson1125/asimonson1125.github.io' linkText='view code'>
+          <Project status='WIP' title='Digital Portfolio' link='https://github.com/asimonson1125/asimonson1125.github.io' linkText={<img alt='github' src={github} />}>
             A personal portfolio site made with React.js
           </Project>
-          <Project status='WIP' title='Slate' link='https://github.com/asimonson1125/Slate' linkText='view code'>
+          <Project status='WIP' title='Slate' link='https://github.com/asimonson1125/Slate' linkText={<img alt='github' src={github} />}>
             Slate is a thing
           </Project>
-          <Project status='WIP' title='Querist' link='https://github.com/asimonson1125/Querist' linkText='view code'>
+          <Project status='WIP' title='Querist' link='https://github.com/asimonson1125/Querist' linkText={<img alt='github' src={github} />}>
             A modular discord bot to manage class discord servers.
           </Project>
-          <Project status='Complete' title='NationsGame Rolls Simulator' link='https://github.com/asimonson1125/NG-Rolls-Simulator' linkText='view code'>
+          <Project status='Complete' title='NationsGame Rolls Simulator' link='https://github.com/asimonson1125/NG-Rolls-Simulator' linkText={<img alt='github' src={github} />}>
             A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
           </Project>
-          <Project status='Complete' title='Humans vs. Zombies Bot' link='https://github.com/asimonson1125/HvZ-bot' linkText='view code'>
+          <Project status='Complete' title='Humans vs. Zombies Bot' link='https://github.com/asimonson1125/HvZ-bot' linkText={<img alt='github' src={github} />}>
             A Discord bot to handle role management and statistics for RIT's Humans vs. Zombies games.
           </Project>
-          <Project status='Incomplete' title='WallCycle' link='https://github.com/asimonson1125/WallCycle' linkText='view code'>
+          <Project status='Incomplete' title='WallCycle' link='https://github.com/asimonson1125/WallCycle' linkText={<img alt='github' src={github} />}>
             A GNOME extension that cycles through a folder of wallpapers
           </Project>
-          <Project status='Complete' title='WinKeylogger' link='https://github.com/asimonson1125/WinKeylogger' linkText='view code'>
+          <Project status='Complete' title='WinKeylogger' link='https://github.com/asimonson1125/WinKeylogger' linkText={<img alt='github' src={github} />}>
             A C++ keylogger for windows based off a udemy course with my custom modifications and powershell script.
           </Project>
         </ProjectList>