Skip to content

Conversation

Copy link

Copilot AI commented Oct 24, 2025

Overview

This PR eliminates significant code duplication across the Jekyll static site, improving maintainability and following DRY (Don't Repeat Yourself) principles.

Changes

1. Layout Inheritance Refactoring

Before: The _layouts/home.html file duplicated the entire HTML boilerplate structure that was already defined in _layouts/default.html:

<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body class="home">
  <!-- content -->
</body>
</html>

After: home.html now properly extends default.html using Jekyll's layout inheritance:

---
layout: default
---
<!-- content only -->

The default.html layout was updated to conditionally apply the "home" body class, maintaining all existing styling.

Impact: Eliminates ~30 lines of duplicate HTML structure and establishes a single source of truth for the base layout.

2. Data-Driven Portfolio Display

Before: The _includes/home-work.html file contained 7 nearly identical blocks of HTML for displaying portfolio projects (165 lines), with each project manually coded:

<div class="home-work-grid__project">
    <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...</p>
    </div>
    <figure class="home-work-grid__project-screenshot"><img src="..." /></figure>
    <!-- Repeated for each screenshot -->
</div>
<!-- Entire block repeated 7 times for different projects -->

After: Implemented a data-driven approach with three components:

  1. _data/projects.yml - Structured YAML data containing all project information:
- id: project-pipelines
  title: "Microsoft: Azure Pipelines"
  role: "Lead & Design Manager (2018 – 2020)"
  description: "Leading a team of 5 designers..."
  screenshots:
    - url: /assets/work/pipelines/pipelines-01.png
      width: 1200px
      height: 440px
      alt: "Adrián Mato - Azure Pipelines"
  1. _includes/project.html - Reusable template for rendering a single project (15 lines)

  2. _includes/home-work.html - Simplified to loop over projects data (28 lines):

{% for project in site.data.projects %}
{% include project.html project=project is_first=forloop.first %}
{% endfor %}

Impact: Reduces portfolio display code from 165 lines to 28 lines. Adding or updating portfolio projects now requires editing YAML data instead of HTML markup.

Benefits

  • Maintainability: Portfolio updates are now as simple as editing structured YAML data
  • Consistency: All projects render using the same template, ensuring consistent markup
  • DRY Compliance: Eliminates 137+ lines of repetitive code
  • Best Practices: Follows Jekyll conventions for separating data from presentation
  • Type Safety: YAML structure provides clear schema for project data

Testing

  • ✅ Code review completed with no issues
  • ✅ Security scan completed (no applicable issues for template/data files)
  • ✅ All existing functionality preserved
  • ✅ YAML syntax validated

Stats

  • Files changed: 5
  • Lines added: 163
  • Lines removed: 170
  • Net change: -7 lines (more concise code)
Original prompt

Find and refactor duplicated code


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Refactor duplicated code in application Refactor duplicated code in layouts and portfolio display Oct 24, 2025
Copilot AI requested a review from adrianmg October 24, 2025 18:13
Copilot finished work on behalf of adrianmg October 24, 2025 18:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants