save

Author: cherylqian

src/About.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from "react";
+
+const About = () => {
+  return (
+    <Fragment>
+      <h2>About Us</h2>
+      <p>Some description</p>
+      <h3>Exec</h3>
+      <h3>Contact Us</h3>
+    </Fragment>
+  );
+};
+
+export default About;

src/Footer.js

@@ -2,9 +2,7 @@ import React from "react";
 
 const Footer = () => (
   <footer className="footer">
-    <div className="container">
-      Copyright {"\u00A9 " + new Date().getFullYear()} ACM SIGGRAPH UIUC
-    </div>
+    Copyright {"\u00A9 " + new Date().getFullYear()} ACM SIGGRAPH UIUC
   </footer>
 );
 

src/Header.js

@@ -22,7 +22,7 @@ const Header = () => (
       id="navbarNav"
     >
       <div className="navbar-nav">
-        <NavLink to="/" className="nav-item nav-link">
+        <NavLink exact to="/" className="nav-item nav-link">
           Home
         </NavLink>
         <NavLink to="/projects" className="nav-item nav-link">

src/Navigation.js

@@ -1,16 +1,19 @@
 import React from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
-import App from "./App";
 import Header from "./Header";
 import Footer from "./Footer";
 
+import App from "./App";
+import Projects from "./Projects";
+import About from "./About";
+
 const Navigation = () => (
   <Router basename={process.env.PUBLIC_URL}>
     <div className="container">
       <DefaultLayout exact path="/" component={App} />
-      <DefaultLayout path="/projects" component={Construction} />
-      <DefaultLayout path="/about" component={Construction} />
+      <DefaultLayout path="/projects" component={Projects} />
+      <DefaultLayout path="/about" component={About} />
     </div>
   </Router>
 );

src/Projects.js

@@ -0,0 +1,71 @@
+import React, { Fragment } from "react";
+
+const projects = {
+  current: [
+    {
+      name: "Go Squirrel",
+      description:
+        "A tiny little squirrel is crossing the street, and there comes a car..."
+    },
+    {
+      name: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    },
+    {
+      name: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+  ],
+  past: [
+    {
+      name: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    },
+    {
+      name: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    },
+    {
+      name: "Lorem ipsum",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    }
+  ]
+};
+
+const Project = ({ item }) => {
+  return (
+    <div className="card col m-3">
+      <div className="card-body">
+        <h3 className="card-title">{item.name}</h3>
+        <p className="card-text">{item.description}</p>
+      </div>
+    </div>
+  );
+};
+
+const Projects = () => {
+  console.log(projects);
+  return (
+    <Fragment>
+      <h2>Current</h2>
+      <div className="row mr-3 ml-3">
+        {projects.current.map(item => (
+          <Project item={item} key={item.name} />
+        ))}
+      </div>
+      <h2>Past</h2>
+      <div className="row mr-3 ml-3">
+        {projects.current.map(item => (
+          <Project item={item} key={item.name} />
+        ))}
+      </div>
+    </Fragment>
+  );
+};
+
+export default Projects;