Refactor experience, use flexbox

source/_partials/experience-item.html.twig

@@ -0,0 +1,36 @@
+{% set classes = [
+    'experience',
+    company.logo ? 'has-logo',
+    experience.featured ? 'is-featured',
+] %}
+
+<div class="{{ classes|sort|join(' ') }}">
+    <div class="inner">
+        <h2>{{ company.name }}</h2>
+
+        {% if company.website %}
+            <a href="{{ company.website }}" class="experience__website">
+                {{ company.website }}
+            </a>
+        {% endif %}
+
+        <div class="experience__role">
+            {% spaceless %}
+                {{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
+                {% if experience.location %}
+                    ({{ experience.location }})
+                {% endif %}
+            {% endspaceless %}.
+        </div>
+
+        <div class="experience__description">
+            {{ experience.description|raw }}
+        </div>
+    </div>{# /.inner #}
+
+    {% if company.logo %}
+        <div class="experience__logo">
+            <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
+        </div>
+    {% endif %}
+</div>

source/experience.html.twig

@@ -6,7 +6,7 @@ experiences:
       location: Cardiff, Wales
       role: Senior Drupal Developer
       start: May 2016
-      end: ~
+      featured: true
       description: |
           <p>Drupal website development.</p>
 
@@ -14,7 +14,7 @@ experiences:
       location: Remote
       role: 'Web Developer & System Administrator'
       start: 2007
-      end: ~
+      featured: true
       description: |
           <p>Working on Drupal and Symfony development, maintenance and support projects in my spare time.</p>
           <p>Administration of Debian, Ubuntu and CentOS servers, and configuration using Puppet, or more recently, Ansible.</p>
@@ -84,30 +84,8 @@ experiences:
 <h1>Experience</h1>
 
 {% for experience in page.experiences %}
-    {% set company = site.companies[experience.company] %}
-
-    <div class="experience experience--{{ company.logo ? 'with-logo' : 'no-logo' }}">
-        <h2 class="experience__title">{{ company.name }}</h2>
-
-        {% if company.website %}
-            <a href="{{ company.website }}" class="experience__website">{{ company.website }}</a>
-        {% endif %}
-
-        {% if company.logo %}
-            <img class="experience__logo" src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
-        {% endif %}
-
-        <div class="experience__role">
-            {% spaceless %}
-                {{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
-                {% if experience.location %}
-                    ({{ experience.location }})
-                {% endif %}
-            {% endspaceless %}.
-        </div>
-
-        <div class="experience__description">
-            {{ experience.description|raw }}
-        </div>
-    </div>
+    {% include "experience-item" with {
+        experience: experience,
+        company: site.companies[experience.company]
+    } %}
 {% endfor %}