Added footer to app, updated projects with logos

src/App.tsx

@@ -1,6 +1,7 @@
 import EthLogo from './EthLogo';
 import Starter from './Starter';
 import Projects from './Projects';
+import Footer from './Footer';
 import './App.css';
 
 
@@ -12,6 +13,7 @@ function App() {
       <EthLogo />
       <Starter />
       <Projects />
+      <Footer />
     </div>
   );
 }

src/EthLogo.css

@@ -3,4 +3,10 @@
   max-width: 5vh;
   bottom: 1rem;
   left: 1rem;
-}
+}
+
+@media screen and (max-width: 800px) {
+  .eth-diamond-logo {
+    display: none
+  }
+}

src/ProjectCard.css

@@ -1,6 +1,6 @@
 .card {
   border-radius: .35rem;
-  box-shadow: -22px 10px 0px var(--gray);
+  box-shadow: var(--box-shadow);
   border-color: var(--gray);
 }
 

src/ProjectCard.tsx

@@ -8,7 +8,8 @@ import './ProjectCard.css'
 export interface ProjectProps {
   name: string;
   description: string;
-  links: Links[];
+  image?: string;
+  links?: Links[];
 }
 
 interface Links {
@@ -21,8 +22,8 @@ interface Links {
 
 function renderLink(url: string, source: string, icon: string): any {
   return (
-    <div className="link" key={url}>
-      <a href={url}>
+    <div className="link" key={url} >
+      <a href={url} target="_blank" rel="noopener noreferrer">
         <img className="icon" src={icon} alt={source} />
         <div className="link-title">{source}</div>
       </a>
@@ -31,7 +32,7 @@ function renderLink(url: string, source: string, icon: string): any {
 }
 
 function ProjectCard(props: ProjectProps) {
-  let links = props.links.map((link) => {
+  let links = props.links ? props.links.map((link) => {
     if (link.github) {
       return renderLink(link.github, 'github', github);
     } else if (link.website) {
@@ -45,10 +46,24 @@ function ProjectCard(props: ProjectProps) {
     } else {
       return null;
     }
-  });
+  }) : null;
+
+  let img = (() => {
+    try {
+      if (props.image) {
+        return (<img className="card-img-top" src={require(`./images/${props.image}`)} alt={props.name} />);
+      }
+      else {
+        return null;
+      }
+    } catch (e) {
+      return null;
+    }
+  })();
 
   return (
     <div className="card border border-5 border-dark p-3">
+      {img}
       <div className="card-body">
         <h5 className="card-title">{props.name}</h5>
         <p className="card-text">{props.description}</p>

src/Projects.json

@@ -80,6 +80,7 @@
   {
     "name": "Interep",
     "description": "Private reputation and identity system allowing services to verify that users belong to a certain group or meet certain reputation criteria without revealing their identities. Users can anonymously export reputation from platforms such as Twitter and Github.",
+    "image":"interep.png",
     "links": [
       {
         "website": "https://interep.link/"
@@ -131,6 +132,7 @@
   {
     "name": "COCO",
     "description": "Collaborative content curation using a double-or-nothing challenge mechanism.",
+    "image": "coco.png",
     "links": [
       {
         "website": "https://www.cocoverse.club/"
@@ -155,6 +157,7 @@
   {
     "name": "TLS Notary",
     "description": "Black Magic",
+    "image": "tlsn.png",
     "links": [
       {
         "github": "https://github.com/tlsnotary/tlsn"

src/index.css

@@ -1,6 +1,5 @@
 :root {
-  --light-purple: #CFC4FB;
-  --light-purple2: rgb(195, 181, 250);
+  --light-purple: rgb(195, 181, 250);
   --green: #A6E275;
   --aqua: #53D3E0;
   --light-aqua: #CBF2F6;
@@ -8,10 +7,12 @@
   --light-pink: #FFE1DE;
   --gold: #FFE94D;
   --gray: #282A2D;
+  --gray-transparent: rgba(40, 42, 45, 0.5);
+  --box-shadow: -22px 10px 0px var(--gray);
 }
 
 .bg-light-purple {
-  background-color: var(--light-purple2);
+  background-color: var(--light-purple);
 }
 
 .bg-light-pink {
@@ -22,18 +23,37 @@
   background-color: var(--light-aqua)
 }
 
+.btn-pink {
+  background-color: var(--pink);
+  color: black;
+  font-weight: 500;
+  margin: 0.25rem;
+  border: 2px solid var(--gray);
+}
+
+.btn-shadow {
+  box-shadow: -5px 3px 0px var(--gray);
+}
+
 body {
   color: black;
-  background: rgb(195, 181, 250);
+  background: var(--light-purple);
   background-attachment: fixed;
   height: 100vh;
   font-family: 'Inter', sans-serif;
-  background-image: url('./images/pse-deco.png');
+  /* background-image: url('./images/pse-deco.png'); */
   background-repeat: no-repeat;
   background-position: right -20em bottom 5em;
 }
 
 @media screen and (max-width: 800px) {
+  :root {
+    --box-shadow: -12px 5px 0px var(--gray);
+  }
+  body {
+    margin-inline: 1rem;
+  }
+
   .starter {
     padding-block: 1rem;
     gap: 1rem;