Dynamically generate project data on index

project/pages/views/core.py

@@ -1,4 +1,7 @@
 from project.common.views import CustomTemplate
+from django.conf import settings
+from json import load
+import os.path
 
 
 class IndexView(CustomTemplate):
@@ -6,6 +9,11 @@ class IndexView(CustomTemplate):
     html_title = "Homepage"
     body_class = "index"
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context['projects'] = load(open(os.path.join(settings.BASE_DIR, 'data/projects.json')))
+        return context
+
 
 class NoJavascriptView(CustomTemplate):
     template_name = 'core/no-js.html'

static/src/less/homepage.less

@@ -1,5 +1,6 @@
 @blueprint-logo: url(http://ultimatestorytellingblueprint.com/wp-content/uploads/2014/07/Blueprint-Background1.jpg);
-.index {
+
+body.index {
   #header {
     height: 100vh;
     background: #232323;
@@ -104,53 +105,10 @@
       }
     }
   }
-  #project-images-main {
-    background: @blueprint-logo;
-    background-size: cover;
-    background-attachment: fixed;
-    @media screen and (max-width: @screen-xs-max) {
-      background-attachment: initial;
-    }
-    .container {
-      text-align: center;
-      margin-top: 25px;
-      margin-bottom: 15px;
-      h1 {
-        margin-top: 0;
-        margin-bottom: 30px;
-        color: white;
-        font-size: 40px;
-      }
-      .see-more {
-        color: white;
-      }
-      .row {
-        margin-bottom: 20px;
-        & > div {
-          background-size: cover;
-          background-position: center;
-        }
 
-        .custom-pc {
+  #project-thumbnails {
-          background-image: url(https://c1.staticflickr.com/1/557/18747807580_d01e8e877a_c.jpg);
+    img {
-        }
+      max-width: 90%;
-
-        .bsod-enabler {
-          background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/Windows_XP_BSOD.png);
-        }
-
-        .yoga-pal {
-          background-image: url(http://www.lenovo.com/images/gallery/1060x596/lenovo-laptop-convertible-yoga-2-pro-orange-front-1.jpg);
-        }
-
-        .attack-on-blocks {
-          background-image: url(https://c1.staticflickr.com/1/33/49012397_1fbe7855e3_b.jpg);
-        }
-
-        .dotfile-automator {
-          background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Dell_Inspiron_One_23_Touch_AIO_Desktop_PC.png);
-        }
-      }
     }
   }
 }

templates/index.html

@@ -22,7 +22,7 @@
       <div class="container">
         <div class="row">
           <div class="col-sm-6 col-xs-12 feed">
-            <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/RealOrangeOne" data-widget-id="600774030069760003">Tweets by @RealOrangeOne</a>
+            <h5>Twitter widget broken - repair coming soon!</h5>
           </div>
           <div class="col-sm-6 twitter-icon hidden-xs">
             <a href="https://twitter.com/RealOrangeOne" class="no-color-change">
@@ -32,9 +32,22 @@
         </div>
       </div>
     </div>
-    <script>
-      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
-    </script>
     <navbar></navbar>
-    <div class="container-fluid" id="project-images-main"></div>
+    <div class="container-fluid" id="project-thumbnails">
+      <div class="row">
+        <div class="container">
+          {% for key, project in projects.items %}
+            <div class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <img src="{{ project.image }}" alt="{{ key }} image">
+                <div class="caption">
+                  <h3>{{ project.title }}</h3>
+                  <p>...</p>
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
 {% endblock %}