From 6aa318fd497fafc6020808c6547d4dc9b4b4f00b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Oct 2025 19:15:27 +0000 Subject: [PATCH 1/4] Initial plan From 4b0104a6433d97e1dc32c1b34a36e5385a522116 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Oct 2025 19:25:46 +0000 Subject: [PATCH 2/4] Refactor duplicated code in layouts and stylesheets - Consolidate HTML boilerplate by making home.html extend default.html - Add support for body_class parameter in default layout - Create reusable CSS placeholders for common transition patterns - Create reusable CSS placeholder for brand color hover state - Replace 6 duplicate transition declarations with @extend - Replace 4 duplicate hover color declarations with @extend - Reduce code duplication and improve maintainability Co-authored-by: adrianmg <589285+adrianmg@users.noreply.github.com> --- _layouts/default.html | 2 +- _layouts/home.html | 54 +++++++++++++++++++++---------------------- _sass/_base.scss | 19 +++++++++++++++ _sass/_layout.scss | 26 ++++++++------------- 4 files changed, 56 insertions(+), 45 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index db3ffd9..2a1a2fb 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,7 +1,7 @@ {% include head.html %} - + {{ content }} \ No newline at end of file diff --git a/_layouts/home.html b/_layouts/home.html index aad54ed..47eb9f4 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,32 +1,30 @@ - - -{% include head.html %} - -
-
-
-
-

Adrián Mato

-

Design Director at GitHub Copilot & startup investor.

-

- 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. -

-

- 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. -

-
+--- +layout: default +body_class: home +--- +
+
+
+
+

Adrián Mato

+

Design Director at GitHub Copilot & startup investor.

+

+ 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. +

+

+ 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. +

- - -
- {% include home-navigation.html %} - {% include home-work.html %} + + + +
+{% include home-navigation.html %} +{% include home-work.html %} - - - - + + diff --git a/_sass/_base.scss b/_sass/_base.scss index 8e63ba0..3650885 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -176,3 +176,22 @@ a { .h-bradius { border-radius: .1rem; } + +/** + * Common placeholders for repeated patterns + */ +%transition-slow { + transition: all var(--base-trans-slow) ease-in-out; +} + +%transition-base { + transition: all var(--base-trans) ease-in-out; +} + +%transition-mid { + transition: all var(--base-trans-mid) ease-in-out; +} + +%hover-brand-color:hover { + color: var(--brand-color); +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 59f91e3..99a7af3 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -94,11 +94,8 @@ pre { text-decoration: none; padding: 2rem 1.4rem; position: relative; - transition: all var(--base-trans-slow) ease-in-out; -} - -.home-navigation a:hover { - color: var(--brand-color); + @extend %transition-slow; + @extend %hover-brand-color; } @keyframes home-intro-desc-animation { @@ -114,7 +111,7 @@ pre { fill: var(--text-color); visibility: hidden; opacity: 0; - transition: all var(--base-trans) ease-in-out; + @extend %transition-base; position: fixed; bottom: 5.2rem; right: 4.8rem; @@ -189,7 +186,8 @@ pre { color: var(--title-color); text-decoration: none; outline: none; - transition: all var(--base-trans-slow) ease-in-out; + @extend %transition-slow; + @extend %hover-brand-color; } } @@ -203,10 +201,6 @@ pre { color: var(--text-color); } -.home-work-grid__project-description a:hover { - color: var(--brand-color); -} - .home-work-grid__project-screenshot { margin-bottom: 11.2rem; } @@ -262,7 +256,7 @@ pre { position: relative; text-decoration: none; font-weight: 500; - transition: all var(--base-trans) ease-in-out; + @extend %transition-base; } .post a:before { @@ -272,7 +266,7 @@ pre { bottom: 0; left: 0; right: 0; - transition: all var(--base-trans) ease-in-out; + @extend %transition-base; } .post a:hover:before { @@ -312,8 +306,8 @@ pre { display: none; } -.post a:hover { - color: var(--brand-color); +.post a { + @extend %hover-brand-color; } .post ol li { @@ -426,7 +420,7 @@ pre { padding: 1.6rem 0; overflow: hidden; text-overflow: ellipsis; - transition: all var(--base-trans-mid) ease-in-out; + @extend %transition-mid; } .blog-list-item a:before { From 3c19fbf6310cf964f03c1f319484a8f2f3506722 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Oct 2025 19:29:30 +0000 Subject: [PATCH 3/4] Extract duplicated time calculation into helper function - Create getCurrentTime() helper to eliminate code duplication - Replace two identical time calculation expressions with function call - Improve code maintainability and readability in scrollToItem function Co-authored-by: adrianmg <589285+adrianmg@users.noreply.github.com> --- assets/js/s.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/assets/js/s.js b/assets/js/s.js index dbd33f9..4b34a10 100644 --- a/assets/js/s.js +++ b/assets/js/s.js @@ -38,10 +38,15 @@ // HELPERS + // HELPERS: Get current time in milliseconds + function getCurrentTime() { + return "now" in window.performance ? performance.now() : new Date().getTime(); + } + // HELPERS: scrolling function from A -> B (modified from: https://bit.ly/2H3JKMV) function scrollToItem(destination, duration = 500, extraPadding) { const start = window.pageYOffset; - const startTime = "now" in window.performance ? performance.now() : new Date().getTime(); + const startTime = getCurrentTime(); const documentHeight = Math.max( document.body.scrollHeight, @@ -71,8 +76,7 @@ } function scroll() { - const now = - "now" in window.performance ? performance.now() : new Date().getTime(); + const now = getCurrentTime(); const time = Math.min(1, (now - startTime) / duration); const timeFunction = 0.5 * (1 - Math.cos(Math.PI * time)); From 5ef9cb4c0dfc7c8c2308ae4c44f02215e04f64ab Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Oct 2025 19:31:27 +0000 Subject: [PATCH 4/4] Fix comment formatting for consistency Co-authored-by: adrianmg <589285+adrianmg@users.noreply.github.com> --- assets/js/s.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/s.js b/assets/js/s.js index 4b34a10..f63e581 100644 --- a/assets/js/s.js +++ b/assets/js/s.js @@ -38,12 +38,12 @@ // HELPERS - // HELPERS: Get current time in milliseconds + // Get current time in milliseconds function getCurrentTime() { return "now" in window.performance ? performance.now() : new Date().getTime(); } - // HELPERS: scrolling function from A -> B (modified from: https://bit.ly/2H3JKMV) + // scrolling function from A -> B (modified from: https://bit.ly/2H3JKMV) function scrollToItem(destination, duration = 500, extraPadding) { const start = window.pageYOffset; const startTime = getCurrentTime();