377 lines
23 KiB
HTML
377 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta
|
|
name="description"
|
|
content="Кейс: работа над интерфейсом Lunacy в Icons8 — сценарии, итерации UI и скриншоты процесса."
|
|
/>
|
|
<title>Lunacy — кейс</title>
|
|
{{> head-links}}
|
|
<style>
|
|
.case-article {
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
}
|
|
.case-article h2 {
|
|
margin: 2rem 0 0.75rem;
|
|
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.case-article h3 {
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.case-article .section__prose {
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text);
|
|
}
|
|
.case-article img,
|
|
.case-article video {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin: 0.75rem 0 1rem;
|
|
}
|
|
.case-article ul,
|
|
.case-article ol {
|
|
margin: 0.5rem 0 1rem 1.25rem;
|
|
padding: 0;
|
|
}
|
|
.case-article li {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
.case-article a:not(.btn) {
|
|
color: var(--accent);
|
|
}
|
|
.case-media-gallery__item img {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
|
var d = document.documentElement;
|
|
var m = t.mode;
|
|
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
|
var eff =
|
|
m === "system"
|
|
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light"
|
|
: m;
|
|
d.dataset.theme = eff;
|
|
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
|
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
|
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
|
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
|
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
|
if (l !== null) {
|
|
var L = Number(l);
|
|
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
|
}
|
|
var rad = t.radius;
|
|
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
|
d.dataset.radius = rad;
|
|
} else {
|
|
d.dataset.radius = "medium";
|
|
}
|
|
var f = t.font;
|
|
if (f === "onest") f = "geologica";
|
|
if (f === "anonymous") f = "mono";
|
|
if (f === "merriweather" || f === "mono" || f === "geologica") {
|
|
d.dataset.font = f;
|
|
} else {
|
|
d.dataset.font = "merriweather";
|
|
}
|
|
var mb = t.meshBg;
|
|
if (mb === "off") {
|
|
d.dataset.meshBg = "off";
|
|
} else {
|
|
d.dataset.meshBg = "on";
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
{{> header-case}}
|
|
{{> fab-stack}}
|
|
<main id="case-main" class="section section--tight">
|
|
<div class="section__inner case-article" data-case-sequential-images>
|
|
<p class="hero__eyebrow">Icons8 · desktop</p>
|
|
<h1 class="case-page__h1">Графический редактор Lunacy</h1>
|
|
<p class="section__prose">
|
|
Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и
|
|
визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов).
|
|
</p>
|
|
<p class="section__prose">
|
|
Продукт: <a href="https://icons8.com/lunacy" target="_blank" rel="noopener noreferrer">icons8.com/lunacy</a>
|
|
</p>
|
|
|
|
<h2 id="obzor">Обзор</h2>
|
|
<p class="section__prose">Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.</p>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Обзор приложения Lunacy"
|
|
data-src="../assets/lunacy/Lunacy_app_overview.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption>Обзор окна Lunacy.</figcaption>
|
|
</figure>
|
|
<p class="section__prose">Дальше — отдельные сценарии и итерации интерфейса в том порядке, в каком удобнее читать по смыслу и по именам файлов.</p>
|
|
|
|
<h2 id="blob-holst">Blob: настройки на холсте</h2>
|
|
<p class="section__prose">Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.</p>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Настройки blob на холсте"
|
|
data-src="../assets/lunacy/blob_settings_on_canvas.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>blob_settings_on_canvas</code></figcaption>
|
|
</figure>
|
|
<p class="section__prose">Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.</p>
|
|
|
|
<h2 id="compare">Компоненты и сравнение</h2>
|
|
<p class="section__prose">Сравнение компонентов и индикатор обновлений в панели.</p>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Модальное окно сравнения компонентов"
|
|
data-src="../assets/lunacy/compare_components_modal_window.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>compare_components_modal_window</code></figcaption>
|
|
</figure>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Индикатор обновления компонентов в панели"
|
|
data-src="../assets/lunacy/components_update_indicator_location_panel.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>components_update_indicator_location_panel</code></figcaption>
|
|
</figure>
|
|
<p class="section__prose">Два связанных экрана: поиск расхождений и отображение статуса обновлений рядом с навигацией по панели.</p>
|
|
|
|
<h2 id="prototype">Прототип в панели</h2>
|
|
<p class="section__prose">Создание прототипа на холсте и состояния панели для режима прототипа.</p>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Модальное окно: создать прототип на холсте"
|
|
data-src="../assets/lunacy/modal_window_for_prototype_create_on_canvas.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>modal_window_for_prototype_create_on_canvas</code></figcaption>
|
|
</figure>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Модальное окно: состояния панели прототипа"
|
|
data-src="../assets/lunacy/modal_window_for_prototype_panel_states.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>modal_window_for_prototype_panel_states</code></figcaption>
|
|
</figure>
|
|
<p class="section__prose">Оба кадра — про увязку прототипа с холстом и с набором состояний панели.</p>
|
|
|
|
<h2 id="shadow-pro">Shadow Pro: настройки</h2>
|
|
<p class="section__prose">Блок Shadow Pro: панель, идеи, модалки с авто-включением и выключением.</p>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Shadow Pro: панель настроек"
|
|
data-src="../assets/lunacy/shadow_pro_settings_panel.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>shadow_pro_settings_panel</code></figcaption>
|
|
</figure>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Shadow Pro: идеи"
|
|
data-src="../assets/lunacy/shadow_pro_settings_ideas.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>shadow_pro_settings_ideas</code></figcaption>
|
|
</figure>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Shadow Pro: модалка, авто включено"
|
|
data-src="../assets/lunacy/shadow_pro_settings_modal_auto_on.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>shadow_pro_settings_modal_auto_on</code></figcaption>
|
|
</figure>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Shadow Pro: модалка, авто выключено"
|
|
data-src="../assets/lunacy/shadow_pro_settings_modal_auto-off.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>shadow_pro_settings_modal_auto-off</code></figcaption>
|
|
</figure>
|
|
<p class="section__prose">Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.</p>
|
|
|
|
<h2 id="blob-panel-versions">Панель настроек blob: версии v1–v9</h2>
|
|
<p class="section__prose">
|
|
Итерации панели по именам файлов <code>blob_settings_panel_v1</code> … <code>v9</code>. Сетка на ширине текста, три колонки на
|
|
широком экране; при сужении окна число колонок уменьшается автоматически.
|
|
</p>
|
|
<figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
|
|
<div class="case-media-gallery__grid">
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v1" data-src="../assets/lunacy/blob_settings_panel_v1.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v2" data-src="../assets/lunacy/blob_settings_panel_v2.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v3" data-src="../assets/lunacy/blob_settings_panel_v3.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v4" data-src="../assets/lunacy/blob_settings_panel_v4.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v5" data-src="../assets/lunacy/blob_settings_panel_v5.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v6" data-src="../assets/lunacy/blob_settings_panel_v6.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v7" data-src="../assets/lunacy/blob_settings_panel_v7.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v8" data-src="../assets/lunacy/blob_settings_panel_v8.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v9" data-src="../assets/lunacy/blob_settings_panel_v9.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
</div>
|
|
<figcaption>Девять версий подряд: читать слева направо, сверху вниз.</figcaption>
|
|
</figure>
|
|
<p class="section__prose">Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.</p>
|
|
|
|
<h2 id="slider-versions">Слайдер: версии v1–v18 и кадр 14</h2>
|
|
<p class="section__prose">
|
|
Порядок по именам: <code>slider_v1</code> … <code>slider_v13</code>, затем <code>slider_14</code> (в ассете без суффикса <code>v</code>),
|
|
затем <code>slider_v15</code> … <code>slider_v18</code>.
|
|
</p>
|
|
<figure class="case-media case-media-gallery" style="--case-gallery-cols: 4">
|
|
<div class="case-media-gallery__grid">
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v1" data-src="../assets/lunacy/slider_v1.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v2" data-src="../assets/lunacy/slider_v2.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v3" data-src="../assets/lunacy/slider_v3.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v4" data-src="../assets/lunacy/slider_v4.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v5" data-src="../assets/lunacy/slider_v5.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v6" data-src="../assets/lunacy/slider_v6.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v7" data-src="../assets/lunacy/slider_v7.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v8" data-src="../assets/lunacy/slider_v8.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v9" data-src="../assets/lunacy/slider_v9.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v10" data-src="../assets/lunacy/slider_v10.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v11" data-src="../assets/lunacy/slider_v11.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v12" data-src="../assets/lunacy/slider_v12.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v13" data-src="../assets/lunacy/slider_v13.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider 14" data-src="../assets/lunacy/slider_14.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v15" data-src="../assets/lunacy/slider_v15.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v16" data-src="../assets/lunacy/slider_v16.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v17" data-src="../assets/lunacy/slider_v17.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
<div class="case-media-gallery__item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v18" data-src="../assets/lunacy/slider_v18.webp" loading="lazy" decoding="async" data-image-viewer />
|
|
</div>
|
|
</div>
|
|
<figcaption>Восемнадцать вариантов слайдера плюс отдельный кадр <code>slider_14</code> между v13 и v15.</figcaption>
|
|
</figure>
|
|
<p class="section__prose">Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.</p>
|
|
|
|
<h2 id="sliders-all">Слайдеры: общий кадр</h2>
|
|
<p class="section__prose">Сводный экран по слайдерам — после ряда по версиям.</p>
|
|
<figure class="case-media case-media--wide">
|
|
<img
|
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
|
alt="Все слайдеры: общий вид"
|
|
data-src="../assets/lunacy/sliders_all_set.webp"
|
|
loading="lazy"
|
|
decoding="async"
|
|
data-image-viewer
|
|
/>
|
|
<figcaption><code>sliders_all_set</code></figcaption>
|
|
</figure>
|
|
<p class="section__prose">Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.</p>
|
|
</div>
|
|
</main>
|
|
|
|
{{> projects-section-mp}}{{> projects-section}}
|
|
{{> contact-section}}
|
|
{{> footer-spacer}}
|
|
{{> footer}}
|
|
{{> cookie-notice}}
|
|
{{> nav-more-floating}}
|
|
|
|
</body>
|
|
</html>
|