cleaning it as I go...

Author: messerc

404.html

@@ -4,25 +4,6 @@
     <meta charset="utf-8">
     <title>Single Page Apps for GitHub Pages</title>
     <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // https://github.com/rafrex/spa-github-pages
-      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-      // ----------------------------------------------------------------------
-      // This script takes the current url and converts the path and query
-      // string into just a query string, and then redirects the browser
-      // to the new url with only a query string and hash fragment,
-      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
-      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
-      // Note: this 404.html file must be at least 512 bytes for it to work
-      // with Internet Explorer (it is currently > 512 bytes)
-
-      // If you're creating a Project Pages site and NOT using a custom domain,
-      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
-      // This way the code will only replace the route part of the path, and not
-      // the real directory in which the app resides, for example:
-      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
-      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
-      // Otherwise, leave segmentCount as 0.
       var segmentCount = 0;
 
       var l = window.location;

build/bundle.js

@@ -6,6 +6,7 @@
     <title>Christopher Messer</title>
     <meta name="description" content="A brief about me page">
     <link rel="stylesheet" href="https://bootswatch.com/sandstone/bootstrap.min.css">
+    <link rel="stylesheet" href="main.css">
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages

index.html

@@ -0,0 +1,25 @@
+.video {
+  max-width: 95%;
+  min-height: 140px;
+  border: 2px solid rgb(235, 235, 235);
+  box-shadow: 3px 1px 1px rgb(205, 205, 205);
+  transition: 0.2s all;
+}
+
+.video:hover {
+  opacity: 0.8;
+  cursor: pointer;
+}
+
+.route-container {
+  margin-top: 60px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+
+.work-row {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgb(235, 235, 235);
+}

main.css

@@ -3,13 +3,20 @@ import s from '../styles/app.style.js'
 
 export const Work = () => {
   return (
-    <div className="row">
-      <div className="col-xs-10 col-xs-offset-1">
-      <h3>Featured Project: twitchmine </h3>
-      <video style={s.gif} autoPlay loop>
+    <div className="row route-container">
+      <div className="row work-row">
+      <div className="col-sm-5 col-sm-offset-1">
+      <video className="video" autoPlay loop>
         <source src="http://i.imgur.com/m1BfwNm.mp4" type="video/mp4" />
       </video>
       </div>
+      <div className="col-sm-5">
+        <h3>twitchmine</h3>
+        <h5 className="text-muted">featured project: co-creator and front-end designer </h5>
+        <p style={s.pText}>This is my baby. I didn't use this project solely as a way to learn how to code, I learned how to code to build this site. I put nearly a year into this project from start to finish, from initial thoughts to 1.0 launch.</p>
+        <p style={s.pText}>One key note is that I worked with a long-time friend and professional developer throughout the duration of this project to make my vision a reality. On top of gaining better fundamentals with React, Redux, and Data Visualization / Design, I learned how to code with someone else and go through code reviews. These were the most valuable lessons learned in the months of developing this.</p>
+      </div>
+      </div>
     </div>
   )
 }

src/components/Work.js

@@ -24,13 +24,23 @@ s.img = {
 };
 
 s.gif = {
-  maxWidth: '500px',
-  border: '3px solid white',
-  boxShadow: '3px 1px 1px rgb(200, 200, 200)'
+  maxWidth: '95%',
+  minHeight: '140px',
+  border: '1px solid red'
 }
 
 s.container = {
   textAlign: 'center'
 }
 
+s.pText = {
+  fontSize: '12px'
+}
+
+s.routeContainer = {
+  marginTop: '60px',
+  paddingLeft: '5px',
+  paddingRight: '5px'
+}
+
 export default s;