About page

src/_includes/head.html

@@ -7,7 +7,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 	<link href="/css/main.css" rel="stylesheet">
 </head>

src/_layouts/default.html

@@ -7,7 +7,9 @@
     {{ content }}
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
     <script type="text/javascript" src="/assets/javascript/bundle.js" charset="utf-8"></script>
 
   </body>

src/_sass/_images.scss

@@ -0,0 +1,22 @@
+.full-screen {
+  min-height: 100vh;
+  min-width: 100vw;
+  height: auto;
+  width: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0;
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #fff;
+  z-index: -100;
+  overflow: auto;
+}
+
+#about-page {
+  background-image: url('http://lorempixel.com/output/cats-q-c-1600-1000-9.jpg');
+}

src/_sass/_layout.scss

@@ -0,0 +1,3 @@
+html, body {
+  height: 100%;
+}

src/_sass/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin background-size($size) {
+  -webkit-background-size: $size;
+  -moz-background-size: $size;
+  -o-background-size: $size;
+  background-size: $size;
+}

src/css/main.scss

@@ -1,4 +1,8 @@
 ---
+# These lines are for Jekyll
 ---
 
-@import "background";
+@import
+  "mixins",
+  "images"
+;

webpack/components/Layout.jsx

@@ -13,14 +13,15 @@ export default class Layout extends React.Component {
   render() {
     return (
       <div className="page-wrap">
-        <Nav />
 
-        <div className="container-fluid">
+
+        <div className="container-fluid p-0 m-0">
+          <Nav />
           <div className="wrapper">
             { this.props.children }
           </div>
         </div>
-        
+
         <Footer />
       </div>
     );

webpack/components/Nav.jsx

@@ -13,7 +13,7 @@ export default class Nav extends React.Component {
     });
 
     return (
-      <nav className="navbar navbar-fixed-top">
+      <nav className="navbar navbar-default">
         <a className="navbar-brand" href="/#/home"> Draw My Life</a>
         <button className="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
           &#9776;

webpack/components/pages/About.jsx

@@ -1,13 +1,26 @@
 import React from 'react';
-import { PageHeader } from 'react-bootstrap-4';
+import { PageHeader, Grid, Row, Col, Image } from 'react-bootstrap-4';
 import { about } from '../../copy/about.js';
 
 export default class About extends React.Component {
   render() {
     return (
-      <div className="container">
-        <PageHeader>{ about.title }</PageHeader>
-        <p>{ about.lorem }</p>
+      <div id="about-page" className="full-screen">
+        <div className="container pt-5">
+          <Grid>
+            <Row>
+              <Col xs={12} sm={7} md={6} mdOffset={1} smOffset={1}>
+                <div className="pt-5">
+                  <PageHeader>{ about.title }</PageHeader>
+                  <p>{ about.lorem }</p>
+
+                  <h2>{ about.subtitle }</h2>
+                  <p>{ about.lorem }</p>
+                </div>
+              </Col>
+            </Row>
+          </Grid>
+        </div>
       </div>
     );
   }