Make the homepage

scripts/build-static.sh

@@ -16,3 +16,6 @@ cp node_modules/materialize-css/dist/js/materialize.min.js static/build/js/mater
 # Install fontawesome
 cp node_modules/@fortawesome/fontawesome-free/css/all.min.css static/build/css/font-awesome.min.css
 cp -r node_modules/@fortawesome/fontawesome-free/webfonts static/build/
+
+# Install images
+cp -r static/src/img static/build/

static/src/scss/index.scss

@@ -1,5 +1,7 @@
 @import "materialize-css/sass/materialize";
 
+$navbar-height: 50px;
+
 body {
   display: flex;
   min-height: 100vh;
@@ -13,3 +15,28 @@ main {
 footer.page-footer {
   padding-top: 0;
 }
+
+.index-jumbotron {
+  @extend .valign-wrapper, .center-align;
+
+  justify-content: center;
+  flex-direction: column;
+
+  color: white;
+
+  @media #{$large-and-up} {
+    height: calc(70vh - #{$navbar-height});
+  }
+
+  @media #{$medium-and-down} {
+    height: calc(100vh - #{$navbar-height});
+  }
+}
+
+.index-recent-content {
+  h2 {
+    @extend .center-align;
+
+    margin-bottom: $element-bottom-margin * 2;
+  }
+}

templates/base.html

@@ -33,9 +33,12 @@
     </header>
 
     <main>
-      <div class="container">
-        {% block content %}{% endblock %}
-      </div>
+
+      {% block main %}
+        <div class="container">
+          {% block content %}{% endblock %}
+        </div>
+      {% endblock %}
     </main>
 
      <footer class="page-footer black">
@@ -55,5 +58,7 @@
         var instances = M.Sidenav.init(elems, {});
       });
     </script>
+
+    {% block extrascripts %}{% endblock %}
   </body>
 </html>

templates/card-list-item.html

@@ -0,0 +1,13 @@
+<div class="row">
+  <div class="card">
+    <div class="card-content">
+      <p>
+        I am a very simple card. I am good at containing small bits of information.
+        I am convenient because I require little markup to use effectively.
+      </p>
+    </div>
+    <div class="card-action">
+      <a href="#">Read More</a>
+    </div>
+  </div>
+</div>

templates/index.html

@@ -1,7 +1,33 @@
+
 {% extends "base.html" %}
 
+{% load static %}
+
 {% block title %}Homepage{% endblock %}
 
-{% block content %}
-Homepage content
+{% block main %}
+  <div class="index-jumbotron parallax-container">
+    <div class="parallax">
+      <img src="{% static 'img/header.jpg' %}" />
+    </div>
+
+    <h1>Jake Howard</h1>
+    <p class="flow-text">Part Developer. Part SysAdmin. Part InfoSec. All Nerd!</p>
+  </div>
+
+  <div class="container index-recent-content">
+    <h2>Recent Content</h2>
+
+    {% include "card-list-item.html" %}
+  </div>
 {% endblock%}
+
+
+{% block extrascripts %}
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('.parallax');
+    var instances = M.Parallax.init(elems, {});
+  });
+</script>
+{% endblock %}