admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): add mp-card--reflect variant (full-bleed image, mirror, progressive blur+tint), apply to Portfolio block + specimen

Browse Source
This commit is contained in:
Hermes committed 2026-09-16 17:36:54 +02:00
1 parent 49ea1238eb
commit fa4a3d91aa
11 files changed
+167 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/partials/projects-section-mp.en.html
+13 -7
View File
@@ -3,7 +3,7 @@
<h2 class="section__title">Portfolio</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}ai-platform-primo-rpa/" aria-label="AI platform — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -26,7 +26,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}lunacy/" aria-label="Graphics editor Lunacy — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -49,7 +49,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}manu-game-maker/" aria-label="MANU game engine — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -72,7 +72,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -95,7 +95,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -117,7 +117,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-distribution-concept/" aria-label="Task distribution service concept — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -140,7 +140,7 @@
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack mp-card--bleed" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
<a class="mp-card mp-card--link mp-card--reflect" href="{{casesPrefix}}task-tracker/" aria-label="Task tracker for a back-office system — open case">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
@@ -164,4 +164,10 @@
</li>
</ol>
</div>
<script>
document.querySelectorAll('.mp-card--reflect').forEach(function (c) {
var i = c.querySelector('.mp-card__image');
if (i) c.style.setProperty('--card-cover', 'url("' + i.src + '")');
});
</script>
</section>