Added Github section in About

This will replace section in navbar

src/components/About.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import './css/About.css';
 import Theater from './subcomponents/Theater';
 import Card from './subcomponents/Card';
+import GithubRepos from './subcomponents/GithubRepos';
 
 
 class About extends React.Component {
@@ -35,13 +36,18 @@ class About extends React.Component {
           at the end of this semester.
         </Card>
 
-        <Card title="Camerin Figueroa" image={"/img/profile.webp"}>
+        <Card title="Camerin Figueroa" image="/img/profile.webp">
           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 of projects on this website
           at the <Link to="/github"> Github Page</Link>. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>. You can also find more
           social media below, just click the image and it'll bring you to the selected website.
         </Card>
 
+        <Card title="Github" image="/img/github.webp" link="/github">
+          You can access a list of github repositories that I've created directly on this site.
+          <GithubRepos style={{width: "50vw"}} username="RaspberryProgramming"/>
+        </Card>
+
 
 
         <div className="social">

src/components/Navigation.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import {toggleContactModal} from '../actions'
 import './css/Navigation.css';
-import { HouseDoor, FileEarmarkPerson, Github, Envelope, Book } from 'react-bootstrap-icons';
+import { HouseDoor, FileEarmarkPerson, Lightbulb, Envelope, Book } from 'react-bootstrap-icons';
 import ContactModal from './subcomponents/ContactModal';
 
 const Navigation = (props) => {
@@ -13,9 +13,9 @@ const Navigation = (props) => {
         Home
         <HouseDoor />
       </Link>
-      <Link to="/github">
+      <Link to="/bai">
-        Github
+        Blank AI
-        <Github />
+        <Lightbulb />
       </Link>
       <Link to="/articles">
         Articles

src/components/css/Card.css

@@ -12,11 +12,13 @@
     color: #3D3D3D;
 }
 
-.card .content {
+.card .content-box {
     text-align:left;
     font-size:xx-large;
     margin-right: 2rem;
     margin-top: 2rem;
+    max-height: 80vh;
+    overflow: hidden;
 }
 
 .card img {
@@ -30,7 +32,7 @@
     border-color: #A5B2A4;
     border-radius: 5px;
     padding: 2px;
-    height: 10rem;
+    max-height: 10rem;
     width: 10rem;
     margin: auto;
     background-color: #FAFAFF

src/components/subcomponents/Card.js

@@ -15,8 +15,11 @@ const Card = (props) => {
     return (
         <div className="card">
             <div>
-                <div className="title">{props.title}</div>
+                {props.link ?
-                <div className="content">
+                    <a href={props.link} className="title">{props.title}</a>
+                    :<div className="title">{props.title}</div>
+                }
+                <div className="content-box">
                     {props.children}
                 </div>
             </div>