Added navbar, a team page, and an about us page; updated card footers

src/AboutPage.tsx

@@ -0,0 +1,18 @@
+import Starter from './components/Starter';
+import Navbar from './components/Navbar';
+import About from './components/About';
+import Footer from './components/Footer';
+import './TeamPage.css';
+
+function AboutPage() {
+  return (
+    <div className="container-sm">
+      <Starter />
+      <Navbar />
+      <About />
+      <Footer />
+    </div>
+  );
+}
+
+export default AboutPage;

src/Home.tsx

@@ -1,20 +0,0 @@
-import EthLogo from './components/EthLogo';
-import Starter from './components/Starter';
-import Projects from './components/Projects';
-import Team from './components/Team';
-import Footer from './components/Footer';
-import './Home.css';
-
-function Home() {
-
-  return (
-    <div className="Home container-sm">
-      <EthLogo />
-      <Starter />
-      <Projects />
-      <Footer />
-    </div>
-  );
-}
-
-export default Home;

src/HomePage.css

@@ -9,11 +9,3 @@
   gap: 5rem;
 }
 
-a {
-  text-decoration: none;
-  color: black !important;
-}
-
-a:hover {
-  text-decoration: underline;
-}

src/HomePage.test.tsx

@@ -1,6 +1,6 @@
 import 'react';
 import { render, screen } from '@testing-library/react';
-import App from './Home';
+import App from './HomePage';
 
 test('renders learn react link', () => {
   render(<App />);

src/HomePage.tsx

@@ -0,0 +1,18 @@
+import Starter from './components/Starter';
+import Projects from './components/Projects';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
+import './HomePage.css';
+
+function HomePage() {
+  return (
+      <div className="Home container-sm">
+        <Starter />
+        <Navbar />
+        <Projects />
+        <Footer />
+      </div>
+  );
+}
+
+export default HomePage;

src/TeamPage.tsx

@@ -0,0 +1,18 @@
+import Starter from './components/Starter';
+import Navbar from './components/Navbar';
+import Team from './components/Team';
+import Footer from './components/Footer';
+import './TeamPage.css';
+
+function TeamPage() {
+  return (
+    <div className="container-sm">
+      <Starter />
+      <Navbar />
+      <Team />
+      <Footer />
+    </div>
+  );
+}
+
+export default TeamPage;

src/components/About.tsx

@@ -0,0 +1,14 @@
+import './About.css';
+import MagicCard from './MagicCard';
+
+function About() {
+  let cardData = { name: 'About us', description: 'lorem i' };
+
+  return (
+    <div>
+      <MagicCard {...cardData} renderBanner={false} />
+    </div>
+  );
+}
+
+export default About;

src/components/CardSection.css

@@ -2,4 +2,8 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap: 2.5rem;
+}
+
+.CardSectionTitle {
+  text-shadow: -1px 1px 1px rgba(255,255,255,0.66);
 }

src/components/CardSection.tsx

@@ -32,7 +32,7 @@ function CardSection(props: ICardSection) {
 
   return (
     <div className="CardSection">
-      <h1 className="CardSectionTitle mt-5 mb-4">{props.title}</h1>
+      <h1 className="CardSectionTitle mb-4">{props.title}</h1>
       <div className="Cards">{cards}</div>
     </div>
   );

src/components/MagicCard.css

@@ -1,15 +1,30 @@
 .card {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
   border-radius: .35rem;
   box-shadow: var(--box-shadow);
-  border-color: var(--gray);
+}
+
+.card-img-top {
+  border-radius: .2rem;
+}
+
+.card-body {
+  align-self: flex-start;
 }
 
 .card-footer {
-  display:grid;
-  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
-  gap: 1.0rem;
+  display: flex;
+  flex-wrap: wrap;
   background-color: transparent;
-  border-top: 3px solid var(--gray);
+  padding: 1em 0em;
+  border-top: 2px solid var(--gray);
+  align-self: stretch;
+}
+
+.card-footer .btn {
+  padding: .25rem .5rem;
 }
 
 .link {
@@ -23,9 +38,9 @@
 }
 
 .icon {
-  height: 1.5rem;
+  height: 1.35rem;
   padding-block: 0.125rem;
-  padding-inline-end: 0.5rem;
+  padding-inline-end: 0.35rem;
 }
 
 .link-title {

src/components/MagicCard.tsx

@@ -4,7 +4,7 @@ import discord from '../images/discord.svg';
 import twitter from '../images/twitter.svg';
 import telegram from '../images/telegram.svg';
 import './MagicCard.css';
-import ColorHash from 'color-hash'
+import ColorHash from 'color-hash';
 
 export interface MagicCardProps {
   name: string;
@@ -24,37 +24,65 @@ interface Links {
   telegram?: string;
 }
 
-function renderLink(url: string, source: string, icon: string): any {
-  return (
-    <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>
-    </div>
-  );
+function renderLink(url: string, source: string, icon: string, button: boolean = true): any {
+  if (!button) {
+    return (
+      <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>
+      </div>
+    );
+  } else {
+    return (
+      <div className="link" key={url}>
+        <a href={url} target="_blank" rel="noopener noreferrer" className="btn" style={{backgroundColor: `var(--${source})`}}>
+          <img className="icon" src={icon} alt={source} />
+          <div className="link-title">{source}</div>
+        </a>
+      </div>
+    );
+  }
 }
 
 function renderBanner(name: string): any {
-  let hueRange = { min: 45, max: 360 }
-  let colorHashText = new ColorHash({hue: hueRange, lightness: [0.8, 0.9]}).hex(name);
-  let colorHashBG = new ColorHash({hue: hueRange, lightness: [0.35, 0.4], saturation: [0.65, 0.85, 1]}).hex(name);
+  let hueRange = { min: 45, max: 360 };
+  let colorHashText = new ColorHash({ hue: hueRange, lightness: [0.8, 0.9] }).hex(name);
+  let colorHashBG = new ColorHash({
+    hue: hueRange,
+    lightness: [0.35, 0.4],
+    saturation: [0.65, 0.85, 1]
+  }).hex(name);
   return (
-    <svg height="150px" width="350px" style={{backgroundColor: colorHashBG}} className="card-img-top">
-      <text text-anchor="middle" x="50%" y="50%" fill={colorHashText} style={{ fontSize: "2.5rem", fontStyle: "italic"}}>{name}</text>
+    <svg
+      height="150px"
+      width="350px"
+      style={{ backgroundColor: colorHashBG }}
+      className="card-img-top"
+    >
+      <text
+        textAnchor="middle"
+        x="50%"
+        y="58%"
+        fill={colorHashText}
+        style={{ fontSize: '2.5rem', fontStyle: 'italic' }}
+      >
+        {name}
+      </text>
     </svg>
   );
 }
 
 function renderDescription(description: string | string[]): any {
   if (typeof description === 'string') {
-    return (
-      <p className="card-text">{description}</p>
-    );
+    return <p className="card-text">{description}</p>;
   }
   return description.map((text: string, index: number) => {
     return (
-      <p className="card-text" key={index}>{text}</p>
+      <p className="card-text" key={index}>
+        {text}
+      </p>
     );
   });
 }
@@ -82,19 +110,21 @@ function MagicCard(props: MagicCardProps) {
     try {
       if (props.image) {
         return (
-          <img className="card-img-top" src={require(`../images/${props.image}`)} alt={props.name} />
+          <img
+            className="card-img-top"
+            src={require(`../images/${props.image}`)}
+            alt={props.name}
+          />
         );
       } else if (props.renderBanner == true || props.renderBanner == undefined) {
         return renderBanner(props.short_name || props.name);
-      }
-      else {
+      } else {
         return null;
       }
     } catch (e) {
       if (props.renderBanner == true || props.renderBanner == undefined) {
         return renderBanner(props.short_name || props.name);
-      }
-      else {
+      } else {
         return null;
       }
     }
@@ -106,8 +136,8 @@ function MagicCard(props: MagicCardProps) {
       <div className="card-body">
         <h5 className="card-title">{props.name}</h5>
         {renderDescription(props.description)}
-        <div className="card-footer">{links}</div>
       </div>
+      <div className="card-footer">{links}</div>
     </div>
   );
 }

src/components/Navbar.css

@@ -0,0 +1,10 @@
+.nav-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.nav-buttons > * {
+  font-size: 1.3rem;
+}

src/components/Navbar.tsx

@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom'
+import './Navbar.css'
+
+function Navbar() {
+  return (
+    <nav className="nav-buttons mb-5">
+      <Link to="/"  className="btn btn-green btn-shadow">Projects</Link>
+      <Link to="/team" className="btn btn-aqua btn-shadow">Team</Link>
+      <Link to="/about" className="btn btn-pink btn-shadow">About Us</Link>
+    </nav>
+  )
+}
+
+export default Navbar;

src/components/Projects.tsx

@@ -4,7 +4,7 @@ import ProjectData from '../data/Projects.json';
 
 function Projects() {
   return (
-    <CardSection title="Projects" cardData={ProjectData}></CardSection>
+    <CardSection title="Projects" cardData={ProjectData} shuffle={false}></CardSection>
   );
 }
 

src/components/Starter.css

@@ -53,6 +53,7 @@
 .more-info {
   font-weight:500;
   color: var(--gray);
+  text-shadow: -1px 1px 1px rgba(255,255,255,0.35);
 }
 
 .border-dark {

src/components/Starter.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import logo from '../images/pse-logo.svg';
 import arrow from '../images/arrow.svg';
 import discord from '../images/discord.svg';
@@ -9,17 +8,16 @@ function Starter() {
   return (
     <div className="starter">
       <img src={logo} alt="eth pse logo" className="pselogo" />
-
       <div className="intro h-100 p-3 bg-light-purple border border-5 border-dark">
-        <h1 className="pt-3 pb-4">
-          Welcome to Privacy & Scaling Explorations
-        </h1>
+        <h1 className="pt-3 pb-4">Welcome to Privacy & Scaling Explorations</h1>
         <p>
           A multidisciplinary team supported by the Ethereum Foundation. PSE explores new use cases
           for zero knowledge proofs and other cryptographic primitives through research and
           proof-of-concept implementation.
         </p>
-        <p className="pb-2">We facilitate the integration of ZK primitives into decentralized applications.</p>
+        <p className="pb-2">
+          We facilitate the integration of ZK primitives into decentralized applications.
+        </p>
         <button className="btn btn-pink btn-shadow mb-3">We are hiring!</button>
       </div>
       <div className="center">
@@ -30,7 +28,7 @@ function Starter() {
           </a>
         </div>
         <div className="link">
-          <a href="https://discord.gg/g5YTV7HHbh"  className="btn btn-green btn-shadow">
+          <a href="https://discord.gg/g5YTV7HHbh" className="btn btn-green btn-shadow">
             <img src={discord} alt="" className="icon" />
             <div>Discord</div>
           </a>

src/data/Projects.json

@@ -1,4 +1,26 @@
 [
+  {
+    "name": "Test",
+    "short_name": "TEST",
+    "description": "Black Magic",
+    "links": [
+      {
+        "website": "https://discord.gg"
+      },
+      {
+        "twitter": "https://discord.gg/1"
+      },
+      {
+        "telegram": "https://discord.gg/2"
+      },
+      {
+        "discord": "https://discord.gg/3"
+      },
+      {
+        "github": "https://discord.gg/4"
+      }
+    ]
+  },
   {
     "name": "Zkopru",
     "description": "Zkopru is an optimistic rollup that uses zero knowledge proofs to enable private, low-cost transactions with ETH, ERC-20s and NFTs on layer 2.",
@@ -81,7 +103,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",
+    "image": "interep.png",
     "links": [
       {
         "website": "https://interep.link/"

src/index.css

@@ -10,10 +10,32 @@
   --gray: #282A2D;
   --gray-transparent: rgba(40, 42, 45, 0.5);
   --box-shadow: -22px 10px 0px var(--gray);
+
+  --twitter: #1DA1F2;
+  --telegram: #0088cc;
+  --youtube: #FF0000;
+  --github-dark: #171515;
+  --github: #e8eaea;
+  --discord: #7289DA;
+  --website: var(--green);
+}
+
+body {
+  color: var(--gray);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  background: var(--purple);
+  background-attachment: fixed;
+  height: 100vh;
+  font-family: 'Inter', sans-serif;
+  /* background-image: url('./images/pse-deco.png'); */
+  background-repeat: no-repeat;
+  background-position: right -20em bottom 5em;
 }
 
 .bg-light-purple {
-  background-color: var(--light-purple);
+  background-color: var(--light-purple)
 }
 
 .bg-light-pink {
@@ -24,6 +46,10 @@
   background-color: var(--light-aqua)
 }
 
+/*
+  Button Theming
+*/
+
 .btn {
   color: var(--gray);
   font-weight: 500;
@@ -31,6 +57,11 @@
   border: 2px solid var(--gray);
 }
 
+.btn:hover {
+  text-decoration: none;
+  border-color: var(--gray-transparent);
+}
+
 .btn-pink {
   background-color: var(--pink);
 }
@@ -51,20 +82,20 @@
   box-shadow: -5px 3px 0px var(--gray);
 }
 
-body {
-  color: var(--gray);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  background: var(--purple);
-  background-attachment: fixed;
-  height: 100vh;
-  font-family: 'Inter', sans-serif;
-  /* background-image: url('./images/pse-deco.png'); */
-  background-repeat: no-repeat;
-  background-position: right -20em bottom 5em;
+/*
+  Link Theming
+*/
+
+a {
+  text-decoration: none;
+  color: var(--gray) !important;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
+
 @media screen and (max-width: 800px) {
   :root {
     --box-shadow: -12px 5px 0px var(--gray);

src/index.tsx

@@ -1,17 +1,22 @@
 import 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import Home from './Home';
+import HomePage from './HomePage';
+import TeamPage from './TeamPage';
+import AboutPage from './AboutPage';
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import reportWebVitals from './reportWebVitals';
 
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <BrowserRouter>
     <Routes>
-      <Route path="/" element={<Home />} />
+      <Route path="/" element={<HomePage />} />
+      <Route path="/team" element={<TeamPage />} />
+      <Route path="/about" element={<AboutPage />} />
     </Routes>
   </BrowserRouter>
 );