Refactor duplicated code in layouts and portfolio display

_data/projects.yml

@@ -0,0 +1,117 @@
+- id: project-pipelines
+  title: "Microsoft: Azure Pipelines"
+  role: "Lead & Design Manager (2018 – 2020)"
+  description: "Leading a team of 5 designers through a major redesign of a 12 years old enterprise product. A new product vision in the CI/CD space for software developers based on a single pipeline experience using YAML."
+  screenshots:
+    - url: /assets/work/pipelines/pipelines-01.png
+      width: 1200px
+      height: 440px
+      alt: "Adrián Mato - Azure Pipelines"
+    - url: /assets/work/pipelines/pipelines-02.png
+      width: 1400px
+      height: 875px
+      alt: "Adrián Mato - Azure Pipelines"
+    - url: /assets/work/pipelines/pipelines-04.png
+      width: 1400px
+      height: 875px
+      alt: "Adrián Mato - Azure Pipelines"
+    - url: /assets/work/pipelines/pipelines-03.png
+      width: 1400px
+      height: 875px
+      alt: "Adrián Mato - Azure Pipelines"
+
+- id: project-microsoft
+  title: "Microsoft: Yammer"
+  role: "Sr. Product Designer (2015 – 2018)"
+  description: "Designing product at the enterprise social network part of Microsoft Office 365. Groups of work, project and files management, social and communication capabilities and more available on mobile, tablet and desktop."
+  screenshots:
+    - url: /assets/work/yammer/yammer-01.webp
+      width: 1200px
+      height: 590px
+      alt: "Adrián Mato - Yammer Office 365"
+    - url: /assets/work/yammer/yammer-04.jpg
+      width: 1200px
+      height: 636px
+      alt: "Adrián Mato - Yammer Office 365"
+      loading: lazy
+      class: h-bradius
+    - url: /assets/work/yammer/yammer-03.webp
+      width: 1200px
+      height: 780px
+      alt: "Adrián Mato - Yammer Office 365"
+      loading: lazy
+    - url: /assets/work/yammer/yammer-02.webp
+      width: 1200px
+      height: 626px
+      alt: "Adrián Mato - Yammer Office 365"
+      loading: lazy
+
+- id: project-fever
+  title: "Fever: a social event discovery tool"
+  role: "Head of Product Design (2013 – 2014)"
+  description: "Leading the product, designing and coordinating the engineering team. People would discover new events based on purchases from friends and other interesting people, avoiding editorial content."
+  screenshots:
+    - url: /assets/work/fever/fever-01.jpg
+      width: 1200px
+      height: 626px
+      alt: "Adrián Mato - Fever"
+      loading: lazy
+    - url: /assets/work/fever/fever-02.webp
+      width: 1200px
+      height: 780px
+      alt: "Adrián Mato - Fever"
+      loading: lazy
+
+- id: project-aplazame
+  title: "Aplazame: deferred online payments made simple"
+  role: "Product Design and Front-End (2014)"
+  description: "Conceptualizing, designing and coding the front-end of an online payment solution that integrates with e-commerce platforms. Deferred payments made easy; you decide when you want to pay and how. Available on mobile, tablet and desktop."
+  screenshots:
+    - url: /assets/work/aplazame/aplazame-01.jpg
+      width: 1200px
+      height: 440px
+      alt: "Adrián Mato - Aplazame"
+      loading: lazy
+    - url: /assets/work/aplazame/aplazame-02.jpg
+      width: 1200px
+      height: 800px
+      alt: "Adrián Mato - Aplazame"
+      loading: lazy
+    - url: /assets/work/aplazame/aplazame-03.webp
+      width: 1200px
+      height: 780px
+      alt: "Adrián Mato - Aplazame"
+      loading: lazy
+
+- id: project-tuenti
+  title: "Tuenti: simplest way of sharing experiences"
+  role: "Senior UI Designer (2012 – 2013)"
+  description: "Designing at the biggest social network in Spain with 14 million users. Including Web, iOS, Android, Windows Phone and PSP. Real-time messages, photos and more, share life with your friends."
+  screenshots:
+    - url: /assets/work/tuenti/tuenti-01.jpg
+      width: 1200px
+      height: 780px
+      alt: "Adrián Mato - Tuenti"
+      loading: lazy
+
+- id: project-pewpew
+  title: "github-pewpew: clean up your GitHub repositories"
+  role: "Personal side project (2021 – 2022)"
+  description: "Designing, coding, and maintaining a CLI tool to clean up unused repositories. It's open-source and published as an npm package. Visit the <a href=\"/pewpew\">website</a> to learn more."
+  screenshots:
+    - url: /assets/work/pewpew/pewpew.webp
+      width: 1200px
+      height: 780px
+      alt: "Adrián Mato - github-pewpew"
+      loading: lazy
+
+- id: project-adrianmatoart
+  title: "adrianmato.art: a creative journey through 3D art"
+  role: "Personal side project (2022)"
+  description: "Designing and coding a project featuring inspiring 3D wallpapers crafted with love using Blender. Available for both Desktop &amp; Mobile. Visit the <a href=\"https://adrianmato.art\">website</a> to learn more."
+  screenshots:
+    - url: /assets/work/adrianmatoart/adrianmatoart.webp
+      width: 1200px
+      height: 780px
+      alt: "Adrián Mato - adrianmato.art"
+      loading: lazy

_includes/home-work.html

@@ -1,144 +1,7 @@
 <section class="home-work-grid">
-    <!-- Project Azure Pipelines -->
-    <div class="home-work-grid__project">
-        <a name="home-work" class="home-work-grid__anchor" id="home-work"></a>
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-pipelines" href="#project-pipelines">Microsoft: Azure Pipelines</a></h2>
-            <h3>Lead & Design Manager (2018 – 2020)</h3>
-            <p>
-                Leading a team of 5 designers through a major redesign of a 12 years old enterprise product.
-                A new product vision in the CI/CD space for software developers based on a single pipeline experience
-                using YAML.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img src="{{"
-                /assets/work/pipelines/pipelines-01.png " | relative_url }}" width="1200px" height="440px"
-                alt="Adrián Mato - Azure Pipelines"></figure>
-        <figure class="home-work-grid__project-screenshot"><img src="{{"
-                /assets/work/pipelines/pipelines-02.png " | relative_url }}" width="1400px" height="875px"
-                alt="Adrián Mato - Azure Pipelines"></figure>
-        <figure class="home-work-grid__project-screenshot"><img src="{{"
-                /assets/work/pipelines/pipelines-04.png " | relative_url }}" width="1400px" height="875px"
-                alt="Adrián Mato - Azure Pipelines"></figure>
-        <figure class="home-work-grid__project-screenshot"><img src="{{"
-                /assets/work/pipelines/pipelines-03.png " | relative_url }}" width="1400px" height="875px"
-                alt="Adrián Mato - Azure Pipelines"></figure>
-    </div>
-    <!-- Project Microsoft Yammer -->
-    <div class="home-work-grid__project">
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-microsoft" href="#project-microsoft">Microsoft: Yammer</a></h2>
-            <h3>Sr. Product Designer (2015 – 2018)</h3>
-            <p>
-                Designing product at the enterprise social network part of Microsoft Office 365.
-                Groups of work, project and files management, social and communication capabilities
-                and more available on mobile, tablet and desktop.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img src="{{"
-                /assets/work/yammer/yammer-01.webp " | relative_url }}" width="1200px" height="590px"
-                alt="Adrián Mato - Yammer Office 365"></figure>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" class="h-bradius" src="{{"
-                /assets/work/yammer/yammer-04.jpg " | relative_url }}" width="1200px" height="636px"
-                alt="Adrián Mato - Yammer Office 365"></figure>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/yammer/yammer-03.webp " | relative_url }}" width="1200px" height="780px"
-                alt="Adrián Mato - Yammer Office 365"></figure>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/yammer/yammer-02.webp " | relative_url }}" width="1200px" height="626px"
-                alt="Adrián Mato - Yammer Office 365"></figure>
-    </div>
-
-    <!-- Project Fever -->
-    <div class="home-work-grid__project">
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-fever" href="#project-fever">Fever: a social event discovery tool</a></h2>
-            <h3>Head of Product Design (2013 – 2014)</h3>
-            <p>
-                Leading the product, designing and coordinating the engineering team. People would discover new events
-                based
-                on purchases from friends and other interesting people, avoiding editorial content.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/fever/fever-01.jpg " | relative_url }}" width="1200px" height="626px"
-                alt="Adrián Mato - Fever"></figure>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/fever/fever-02.webp " | relative_url }}" width="1200px" height="780px"
-                alt="Adrián Mato - Fever"></figure>
-    </div>
-
-    <!-- Project Aplazame -->
-    <div class="home-work-grid__project">
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-aplazame" href="#project-aplazame">Aplazame: deferred online payments made simple</a>
-            </h2>
-            <h3>Product Design and Front-End (2014)</h3>
-            <p>
-                Conceptualizing, designing and coding the front-end of an online payment solution that integrates with
-                e-commerce platforms. Deferred payments made easy; you decide when you want to pay and how.
-                Available on mobile, tablet and desktop.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/aplazame/aplazame-01.jpg " | relative_url }}" width="1200px" height="440px"
-                alt="Adrián Mato - Aplazame"></figure>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/aplazame/aplazame-02.jpg " | relative_url }}" width="1200px" height="800px"
-                alt="Adrián Mato - Aplazame"></figure>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/aplazame/aplazame-03.webp " | relative_url }}" width="1200px" height="780px"
-                alt="Adrián Mato - Aplazame"></figure>
-    </div>
-
-    <!-- Project Tuenti -->
-    <div class="home-work-grid__project">
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-tuenti" href="#project-tuenti">Tuenti: simplest way of sharing experiences</a></h2>
-            <h3>Senior UI Designer (2012 – 2013)</h3>
-            <p>
-                Designing at the biggest social network in Spain with 14 million users. Including Web, iOS, Android,
-                Windows Phone and PSP.
-                Real-time messages, photos and more, share life with your friends.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/tuenti/tuenti-01.jpg " | relative_url }}" width="1200px" height="780px"
-                alt="Adrián Mato - Tuenti"></figure>
-    </div>
-
-    <!-- Project pewpew -->
-    <div class="home-work-grid__project">
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-pewpew" href="#project-pewpew">github-pewpew: clean up your GitHub repositories</a></h2>
-            <h3>Personal side project (2021 – 2022)</h3>
-            <p>
-                Designing, coding, and maintaining a CLI tool to clean up unused repositories. It's open-source and
-                published as an npm package.
-                Visit the <a href="/pewpew">website</a> to learn more.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/pewpew/pewpew.webp " | relative_url }}" width="1200px" height="780px"
-                alt="Adrián Mato - github-pewpew"></figure>
-    </div>
-
-    <!-- Project adrianmato.art -->
-    <div class="home-work-grid__project">
-        <div class="home-work-grid__project-description">
-            <h2><a id="project-adrianmatoart" href="#project-adrianmatoart">adrianmato.art: a creative journey through
-                    3D art</a></h2>
-            <h3>Personal side project (2022)</h3>
-            <p>
-                Designing and coding a project featuring inspiring 3D wallpapers crafted with love using Blender.
-                Available for both Desktop &amp; Mobile.
-                Visit the <a href="https://adrianmato.art">website</a> to learn more.
-            </p>
-        </div>
-        <figure class="home-work-grid__project-screenshot"><img loading="lazy" src="{{"
-                /assets/work/adrianmatoart/adrianmatoart.webp " | relative_url }}" width="1200px" height="780px"
-                alt="Adrián Mato - adrianmato.art"></figure>
-    </div>
+    {% for project in site.data.projects %}
+    {% include project.html project=project is_first=forloop.first %}
+    {% endfor %}
 
     <!-- Still around? -->
     <div class="home-work-grid__project">
@@ -156,9 +19,10 @@ <h3>There is more in my life than Design!</h3>
                         Coco</a>.</li>
                 <li>🎨 I'm not really good at it, but I have fun with <a href='https://adrianmato.art'>3D art</a>.</li>
                 <li>📖 Reading makes me think while keeping me curious.</li>
-                <li>🗺 Talking about curiosity… here's the <a href="{{" /sitemap.xml" | relative_url }}">sitemap</a> of
+                <li>🗺 Talking about curiosity… here's the <a href="{{ "/sitemap.xml" | relative_url }}">sitemap</a> of
                     my site.</li>
             </ul>
         </div>
     </div>
 </section>
+

_includes/project.html

@@ -0,0 +1,15 @@
+<div class="home-work-grid__project">
+    {% if include.is_first %}
+    <a name="home-work" class="home-work-grid__anchor" id="home-work"></a>
+    {% endif %}
+    <div class="home-work-grid__project-description">
+        <h2><a id="{{ include.project.id }}" href="#{{ include.project.id }}">{{ include.project.title }}</a></h2>
+        <h3>{{ include.project.role }}</h3>
+        <p>{{ include.project.description }}</p>
+    </div>
+    {% for screenshot in include.project.screenshots %}
+    <figure class="home-work-grid__project-screenshot">
+        <img {% if screenshot.loading %}loading="{{ screenshot.loading }}" {% endif %}{% if screenshot.class %}class="{{ screenshot.class }}" {% endif %}src="{{ screenshot.url | relative_url }}" width="{{ screenshot.width }}" height="{{ screenshot.height }}" alt="{{ screenshot.alt }}">
+    </figure>
+    {% endfor %}
+</div>

_layouts/default.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 {% include head.html %}
-<body>
+<body{% if page.layout == 'home' %} class="home"{% endif %}>
   {{ content }}
 </body>
 </html>

_layouts/home.html

@@ -1,32 +1,29 @@
-<!DOCTYPE html>
-<html lang="en">
-{% include head.html %}
-<body class="home">
-  <div class="home-intro">
-    <div class="home-intro-bio">
-      <div class="home-intro-bio-desc">
-        <div>
-            <h1>Adrián Mato</h1>
-            <h2>Design Director at GitHub Copilot <span class="ampersand">&amp;</span> startup investor.</h2>
-            <p>
-              For the last 18+ years, I've designed digital products between Madrid, London and now, from
-              San Francisco. I also co-founded and later sold my company Erasmusu.
-            </p>
-            <p>
-              My career started as a Software Developer, but it soon became clear that my true passion was Design.
-              I love combining both skillsets to create products that fulfill a clear purpose.
-            </p>
-        </div>
+---
+layout: default
+---
+<div class="home-intro">
+  <div class="home-intro-bio">
+    <div class="home-intro-bio-desc">
+      <div>
+          <h1>Adrián Mato</h1>
+          <h2>Design Director at GitHub Copilot <span class="ampersand">&amp;</span> startup investor.</h2>
+          <p>
+            For the last 18+ years, I've designed digital products between Madrid, London and now, from
+            San Francisco. I also co-founded and later sold my company Erasmusu.
+          </p>
+          <p>
+            My career started as a Software Developer, but it soon became clear that my true passion was Design.
+            I love combining both skillsets to create products that fulfill a clear purpose.
+          </p>
       </div>
     </div>
-    <svg class="home-intro-scroll" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12 18.23l5.584-5.584 1.365 1.365-8.041 8.04-7.857-7.856 1.377-1.376L10 18.391V1h2v17.23z" fill-rule="evenodd"/>
-    </svg>
   </div>
-  {% include home-navigation.html %}
-  {% include home-work.html %}
+  <svg class="home-intro-scroll" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 18.23l5.584-5.584 1.365 1.365-8.041 8.04-7.857-7.856 1.377-1.376L10 18.391V1h2v17.23z" fill-rule="evenodd"/>
+  </svg>
+</div>
+{% include home-navigation.html %}
+{% include home-work.html %}
 
-  <script type="text/javascript" src="/assets/js/ios.js"></script>
-  <script type="text/javascript" src="/assets/js/s.js"></script>
-</body>
-</html>
+<script type="text/javascript" src="/assets/js/ios.js"></script>
+<script type="text/javascript" src="/assets/js/s.js"></script>