Added about informaion and cards. Also Changed theme

About now has cards, and has a dark theme
Other page themes needed to be changed to account for About's theme

src/components/About.js

@@ -1,24 +1,36 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
-import './css/Github.css';
+import './css/About.css';
-import {getRepos} from '../actions';
+import ReactImage from '../img/react.webp';
+import ProfilePic from '../img/profile.webp';
 import Theater from './Theater';
-import space from '../img/space.webp';
+import Card from './Card';
 
-class Github extends React.Component {
+
+class About extends React.Component {
+  componentDidMount () {
+    document.title = "About";
+  }
 
   render() {
     return (
       <div className="About">
-        <h1>About</h1>
+        <Theater title="About" description="This page has information about me and about this site." extraClasses="h-50v" />
-        <p>Hello World</p>
+        <Card title="Build with React" image={ReactImage}>
+          This website is created with <a href="https://reactjs.org/">React</a>, a javascript library for creating user interfaces and webapps.
+          React uses a component based design to help developers create easily re-usable code, and to help streamline the development process.
+          JSX is a part of react which makes it easy to design websites directly in javascript code.
+        </Card>
+
+        <Card title="Camerin Figueroa" image={ProfilePic}>
+          I am a computer science student at Marist College in Poughkeepsie, NY. I'm closing in on my Bachelors Degree in Computer Science.
+          I went to Orange County Community College for my Associates Degree in Computer Science. You can find a few of my projects on my
+          <a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer"> github</a> or look through a list in the
+          <Link to="/github"> Github Page</Link>
+        </Card>
       </div>
     );
   }
 }
 
-const mapStateToProps = (state) => {
+export default About;
-  return { repos: state.github.repos};
-}
-
-export default connect(mapStateToProps, { getRepos })(Github);

src/components/css/About.css

@@ -0,0 +1,8 @@
+.About {
+    background-color: #3F3F4A;
+    color: #AA9AA0
+}
+
+.About .title {
+    color: #BF8D8C !important;
+}

src/components/css/Home.css

@@ -1,18 +1,17 @@
 a:link {
-    color:black;
+    color: #FFFFFF;
     text-decoration: none;
     cursor: pointer;
 }
 
 a:visited {
-    color:black;
+    color: #FFF0F0;
     text-decoration: none;
     cursor: pointer;
 }
 
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;    margin:0;
-    margin:0;
     width: 100vw;
     overflow-x: hidden;
 

src/components/css/Theater.css

@@ -8,6 +8,10 @@
     height:100%;
 }
 
+.theater.h-50v {
+    height:50vw;
+}
+
 .theater-bg {
     
     height: 100%;