WIP

app/config/sculpin_site.yml

@@ -87,31 +87,50 @@ packagist:
     url: https://packagist.org/users/opdavies
 
 skills:
-    ansible:         { title: Ansible,         image: ~ }
-    behat:           { title: Behat,           image: ~ }
-    compass:         { title: Compass,         image: compass.png }
-    composer:        { title: Composer,        image: ~ }
-    docker:          { title: Docker,          image: ~ }
-    drupal:          { title: Drupal,          image: drupal.png }
-    drupal-commerce: { title: Drupal Commerce, image: drupal-commerce.png }
-    git:             { title: Git,             image: git.png }
-    grunt:           { title: Grunt,           image: ~ }
-    gulp:            { title: Gulp,            image: ~ }
-    jekyll:          { title: Jekyll,          image: ~ }
-    jenkins:         { title: Jenkins,         image: jenkins.png }
-    laravel:         { title: Laravel,         image: ~ }
-    less:            { title: Less,            image: less.png }
-    linux:           { title: Linux,           image: ~ }
-    php:             { title: PHP,             image: php.png }
-    phpunit:         { title: PHPUnit,         image: ~ }
-    puppet:          { title: Puppet,          image: ~ }
-    sass:            { title: Sass,            image: sass.png }
-    silex:           { title: Silex,           image: ~ }
-    simpletest:      { title: SimpleTest,      image: ~ }
-    svn:             { title: Subversion,      image: svn.jpg }
-    symfony:         { title: Symfony,         image: ~ }
-    twig:            { title: Twig,            image: ~ }
-    vagrant:         { title: Vagrant,         image: ~ }
+    0:
+        - { name: Drupal,          image: drupal.png }
+        - { name: Drupal Commerce, image: drupal-commerce.png }
+        - { name: PHP,             image: php.png }
+        - { name: Composer,        image: composer.png }
+        - { name: Symfony,         image: symfony.png }
+        - { name: Silex,           image: silex.png }
+        - { name: Sculpin,         image: sculpin.png }
+        - { name: Twig,            image: twig.png }
+        - { name: Jekyll,          image: jekyll.png }
+        - { name: PHPUnit,         image: phpunit.png }
+        - { name: SimpleTest,      image: simpletest.png }
+        - { name: Behat,           image: behat.png }
+        - { name: Gulp,            image: gulp.png }
+        - { name: Bower,           image: bower.png }
+        - { name: NPM,             image: npm.png }
+        - { name: Sass,            image: sass.png }
+        - { name: jQuery,          image: jquery.gif }
+        - { name: Git,             image: git.png }
+        - { name: Linux,           image: linux.png }
+        - { name: Debian,          image: debian.png }
+        - { name: Ubuntu,          image: ubuntu.png }
+        - { name: CentOS,          image: centos.png }
+        - { name: Vagrant,         image: vagrant.png }
+        - { name: Docker,          image: docker.png }
+        - { name: Nginx,           image: nginx.png }
+        - { name: MySQL,           image: mysql.png }
+        - { name: MariaDB,         image: mariadb.png }
+        - { name: Ansible,         image: ansible.png }
+        - { name: Puppet,          image: puppet.png }
+        - { name: Fabric,          image: fabric.png }
+        - { name: Jenkins,         image: jenkins.png }
+    1:
+        - { name: Ubercart,        image: ubercart.png }
+        - { name: WordPress,       image: wordpress.png }
+        - { name: Subversion,      image: svn.jpg }
+        - { name: Grunt,           image: grunt.png }
+        - { name: Less,            image: less.png }
+        - { name: Compass,         image: compass.png }
+        - { name: Apache,          image: apache.png }
+        - { name: Apache Solr,     image: solr.png }
+    2:
+        - { name: Laravel,         image: laravel.png }
+        - { name: Lumen,           image: lumen.png }
 
 speakerdeck:
     url: https://speakerdeck.com/opdavies

assets/sass/base/_layout.sass

@@ -9,3 +9,9 @@
 
 .flex
     flex: 1
+
+.flex-wrap
+    flex-wrap: wrap
+
+.list-style-none
+    list-style: none

assets/sass/base/_typography.sass

@@ -1,3 +1,3 @@
 @each $value in 'left' 'center' 'right'
-    .is-#{$value}
+    .text-#{$value}
         text-align: #{$value}

assets/sass/main.sass

@@ -10,3 +10,14 @@
 @import 'components/badges'
 @import 'components/footer'
 @import 'components/meetups'
+
+.skills-list
+    margin: 1em 0
+    padding: 0
+
+.skill
+    margin: 0 10px 15px 0
+
+.skill-image
+    height: 40px
+    width: auto

source/_partials/skills-list.twig

@@ -0,0 +1,11 @@
+<ul class="skills-list is-flex flex-wrap list-style-none">
+    {% for skill in skills %}
+        <li class="skill">
+            <img
+                class="skill-image"
+                src="/assets/images/skills/originals/{{ skill.image }}"
+                title="{{ skill.name }}"
+                alt="{{ skill.name }} logo">
+        </li>
+    {% endfor %}
+</ul>

source/_partials/skills.twig

@@ -0,0 +1,13 @@
+<h2>Skills</h2>
+
+<p>I regularly use:</p>
+
+{% include 'skills-list' with { skills: site.skills[0] } %}
+
+<p>I am also familiar with:</p>
+
+{% include 'skills-list' with { skills: site.skills[1] } %}
+
+<p>I would like to do more:</p>
+
+{% include 'skills-list' with { skills: site.skills[2] } %}

source/_views/default.twig

@@ -41,6 +41,7 @@
                             {% include 'badges' %}
                             {% include 'availability' %}
                             {% include 'posts/latest' %}
+                            {% include 'skills' %}
                         {% endblock %}
                     </div>
                 {% endblock %}