.

_data/work_skills.json

@@ -0,0 +1,14 @@
+[
+    {
+        "title":"Full Stack",
+        "desc":"Applications from the ground up"
+    },
+    {
+        "title":"Embedded",
+        "desc":"High-performance software on small-scale computers"
+    },
+    {
+        "title":"Control Systems",
+        "desc":"Precise and dynamic planning and execution"
+    }
+]

_sass/site/dev/software-landing.scss

@@ -1,3 +1,7 @@
+#raw-content-wrapper {
+  overflow: hidden;
+}
+
 #software-hero {
   position: relative;
   background: rgb(18, 23, 19);
@@ -6,13 +10,13 @@
     rgba(18, 23, 19, 1) 0%,
     rgba(20, 20, 12, 1) 100%
   );
-  height: 80vh;
+  height: 100vh;
 
   img {
     position: absolute;
     top: 0;
     right: 0;
-    height: 80vh;
+    height: 100vh;
   }
 
   #content {
@@ -42,7 +46,7 @@
 
     #align-wrapper {
       position: absolute;
-      top: 35vh;
+      top: 40vh;
       margin-left: 10vw;
       @media (min-width: 843px) {
         margin-left: 5vw;
@@ -55,6 +59,7 @@
       h1 {
         width: max-content;
         color: white;
+        font-weight: bolder;
         margin: 0;
         text-transform: uppercase;
       }
@@ -63,8 +68,8 @@
 }
 
 #software-experience {
-  background-color: var(--color-dark-purple);
+  background-color: var(--color-dark-blue);
-  min-height: 100vh;
+  min-height: 80vh;
 
   .content {
     color: white;
@@ -72,6 +77,7 @@
 
     h1 {
       text-transform: uppercase;
+      font-weight: bolder;
     }
 
     .work-experience-list {
@@ -93,11 +99,79 @@
 
       &:hover {
         cursor: pointer;
-        border-color: var(--color-red);
+        border-color: var(--color-orange);
-        color: var(--color-red);
+        color: var(--color-orange);
         transition: color 0.1s cubic-bezier(0, 0, 0.58, 1),
           border 0.1s cubic-bezier(0, 0, 0.58, 1);
       }
     }
   }
 }
+
+#software-skills-showcase {
+  background-color: var(--color-dark-blue);
+  min-height: 60vh;
+
+  .content {
+    color: white;
+    padding-top: 10vh;
+
+    h1 {
+      text-transform: uppercase;
+      font-weight: bolder;
+    }
+
+    .skill-heading {
+      @media (max-width: 993px) {
+        order: -1;
+      }
+    }
+
+    .skill-list {
+      @media (max-width: 993px) {
+        padding-top: 10px;
+        -ms-flex: none !important;
+        flex: none !important;
+        max-width: none !important;
+        width: 100%;
+      }
+    }
+
+    .skill-item {
+      background-color: unset;
+      border-color: white;
+      padding: 10px;
+
+      h4,
+      h5 {
+        text-align: right;
+      }
+
+      .skill-reveal {
+        hr {
+          background-color: white;
+        }
+        text-align: right;
+        overflow-y: hidden;
+        max-height: 0;
+        transition: max-height 1.4s cubic-bezier(0, 0, 0.58, 1);
+      }
+    }
+  }
+}
+
+#software-projects {
+  background-color: var(--color-dark-blue);
+  min-height: 80vh;
+  color: white;
+
+  h1 {
+    text-transform: uppercase;
+    font-weight: bolder;
+  }
+
+  .home-project {
+    background-color: unset;
+	border-color:white;
+  }
+}

beta/software.html

@@ -1,6 +1,8 @@
 ---
 title: Software
 layout: raw_page
+uses:
+- masonry
 ---
 
 <div id="software-hero">
@@ -26,7 +28,6 @@ layout: raw_page
                         Etiam maximus velit at mauris viverra inte</h3>
                 </div>
                 <div class="col-7 work-experience-list">
-                    <!-- <ul class="list-group"> -->
                     {% for job in site.data.work_experience %}
                     <li class="card work-experience-item" onclick="document.location='{{job.url}}';">
                         <div class="d-flex w-100 justify-content-between">
@@ -36,10 +37,88 @@ layout: raw_page
                         <h5>{{job.employer}}</h5>
                     </li><br>
                     {% endfor %}
-                    <!-- </ul> -->
                 </div>
             </div>
         </div>
 
     </div>
-</div>
+</div>
+
+<div id="software-skills-showcase">
+    <div class="container">
+        <div class="content">
+            <div class="row">
+                <div class="col-7 skill-list">
+                    {% for skill in site.data.work_skills %}
+                    <li class="card skill-item">
+                        <h4>{{skill.title}}</h4>
+                        <h5>{{skill.desc}}</h5>
+                    </li><br>
+                    {% endfor %}
+                </div>
+                <div class="col skill-heading">
+                    <h1>Skills</h1>
+                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus a augue id egestas.
+                        Etiam maximus velit at mauris viverra inte</h3>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<div id="software-projects">
+    <div class="container">
+
+        <h1>Projects</h1>
+
+        <div class="row" id="project-grid">
+
+            {% for project in site.data.projects %}
+            <div class="col-sm-4 project-item">
+                <div class="card home-project">
+                    {% if project.hero %}
+                    <img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}" loading="auto">
+                    {% endif %}
+                    <div class="card-body" {% if project.archived %}data-toggle="tooltip" data-placement="top"
+                        title="No longer actively maintained" {% endif %}>
+                        <h5 class="card-title"><strong>{{project.title}} {% if project.archived %}<span
+                                    class="badge badge-secondary">Archived</span>{% endif %}</strong></h5>
+                        <p class="card-text">{{project.description}}</p>
+
+                        {% for text_btn in project.text_buttons %}
+                        <a href="{{text_btn.url}}" class="btn btn-{{text_btn.color}}">{{text_btn.text}}</a>
+                        {% endfor %}
+
+                        {% for icon_btn in project.icon_buttons %}
+                        <a href="{{icon_btn.url}}" class="btn btn-dark"><i class="{{icon_btn.icon}}"></i></a>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+
+        </div>
+
+    </div>
+</div>
+
+<!-- Project grid -->
+<script>
+
+    function orderProjectGrid() {
+        $('#project-grid').masonry({
+            // options
+            itemSelector: '.project-item',
+            // columnWidth: 500,
+            transitionDuration: '0s'
+        });
+    }
+
+
+    // re-order in 2 seconds in case anything was still lazy-loading
+    setTimeout(orderProjectGrid, 1000);
+    setTimeout(orderProjectGrid, 1500);
+    setTimeout(orderProjectGrid, 2000);
+    setTimeout(orderProjectGrid, 5000);
+</script>