Reimplemented navbar design using flex; removed experience route;

refactored some list renderers

src/components/Navbar/index.css

@@ -12,9 +12,11 @@
   border-radius: 2px;
   color: white;
   float: right;
-  margin: 5px;
-  padding: 5px 10px;
+  height: auto;
+  margin: 7px 5px 2px 100%;
+  padding: 5px 10px 5px 10px;
   transition: box-shadow 0.1s;
+  width: auto;
 }
 
 .navbar-button-closed {
@@ -26,22 +28,24 @@
 }
 
 .navbar-menu {
+  display: flex;
+  height: auto;
+  justify-content: space-around;
   margin: auto;
-  min-width: 840px;
-  width: 52.5%;
+  min-width: 800px;
+  width: 51%;
 }
 
 .navbar-menu-button {
   border-radius: 3px;
   color: white;
-  float: left;
-  margin: 1% 2.5%;
+  flex: 1 1 auto;
+  margin: 7px 10px;
   overflow: hidden;
-  padding: 7px 0;
+  padding: 8px;
   text-decoration: none;
   text-overflow: ellipsis;
   transition: background-color 0.2s, box-shadow 0.1s;
-  width: 20%;
 }
 
 .navbar-menu-button:hover {
@@ -65,14 +69,14 @@
   }
 
   .navbar-menu {
-    margin: auto;
+    flex-direction: column;
+    height: auto;
     min-width: 0;
-    width: 75%;
+    width: 80%;
   }
   .navbar-menu-button {
+    height: auto;
     margin: 5px 0;
-    padding: 5px 0;
-    width: 100%;
   }
 
   .navbar-menu-button:hover {

src/components/Project/index.js

@@ -5,20 +5,22 @@ import ClearButton from "../../components/ClearButton"
 
 import "./index.css"
 
+type Badge = {
+  imgUrl: string,
+  linkUrl: string,
+  alt: string
+}
+
 type Props = {
   title: string,
   children: string,
   repoUrl: string,
-  badges: Array<{ imgUrl: string, linkUrl: string, alt: string }>
+  badges: Array<Badge>
 }
 
 class Project extends React.PureComponent<Props> {
-  badges: Array<React.Element<string>>
-
-  constructor(props: Props) {
-    super(props)
-
-    this.badges = this.props.badges.map((badge, index) => (
+  renderBadges = (badges: Array<Badge>) => {
+    return this.props.badges.map((badge, index) => (
       <a className="project-badge" href={badge.linkUrl} key={index}>
         <img src={badge.imgUrl} alt={badge.alt} />
       </a>
@@ -29,7 +31,7 @@ class Project extends React.PureComponent<Props> {
     return (
       <div className="project-container">
         <h4>{this.props.title}</h4>
-        {this.badges}
+        {this.renderBadges(this.props.badges)}
         <p>{this.props.children}</p>
         <ClearButton href={this.props.repoUrl}>Repository</ClearButton>
       </div>