mirror of
https://github.com/olehomelchenko/dataviz-portfolio.git
synced 2026-09-24 20:51:46 +00:00
Initial commit
This commit is contained in:
Oleh Omelchenko
+182
@@ -0,0 +1,182 @@
|
||||
/* Вбудовує графіки у сторінку робіт.
|
||||
*
|
||||
* Цей файл правити не треба. Роботи ви описуєте у файлах теки _works/,
|
||||
* а звідки брати графік, каже їхня «шапка»:
|
||||
* tableau: "адреса з адресного рядка Tableau Public"
|
||||
* spec: "specs/файл.json"
|
||||
*
|
||||
* Блок із помилкою показує підказку і не ламає решту сторінки.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function box(el, kind, title, hint) {
|
||||
var d = document.createElement("div");
|
||||
d.className = "viz-msg viz-msg--" + kind;
|
||||
d.innerHTML = "<b></b><span></span>";
|
||||
d.querySelector("b").textContent = title;
|
||||
d.querySelector("span").textContent = hint || "";
|
||||
el.replaceChildren(d);
|
||||
}
|
||||
|
||||
/* Адреса графіка Tableau Public → адреса, яку можна вбудувати.
|
||||
Приймає і те, що видно в адресному рядку, і готову адресу /views/. */
|
||||
function tableauEmbedUrl(raw) {
|
||||
var url = String(raw).trim().split("?")[0];
|
||||
var m = url.match(/[#!/]*\/(?:viz|views|vizhome)\/([^/]+)\/([^/?#]+)/);
|
||||
if (!m) return null;
|
||||
|
||||
/* tabs=no обов'язковий: без нього рамка показує всі аркуші книги,
|
||||
разом із чернетками, і будь-хто може в них клацнути. */
|
||||
return "https://public.tableau.com/views/" + m[1] + "/" + m[2] +
|
||||
"?:showVizHome=no&:embed=y&:tabs=no&:display_count=no&:toolbar=no";
|
||||
}
|
||||
|
||||
function mountTableau(el) {
|
||||
var raw = el.getAttribute("data-tableau");
|
||||
var src = tableauEmbedUrl(raw);
|
||||
|
||||
if (!src) {
|
||||
box(el, "warn", "Не вдалося прочитати адресу Tableau",
|
||||
"У полі tableau: має бути адреса вигляду " +
|
||||
"public.tableau.com/app/profile/…/viz/Книга/Аркуш. " +
|
||||
"Відкрийте графік на Tableau Public і скопіюйте адресу з адресного рядка.");
|
||||
return;
|
||||
}
|
||||
|
||||
var frame = document.createElement("iframe");
|
||||
frame.className = "viz-frame";
|
||||
frame.src = src;
|
||||
frame.loading = "lazy";
|
||||
frame.title = "Графік Tableau Public";
|
||||
frame.setAttribute("allowfullscreen", "");
|
||||
frame.style.height = (el.getAttribute("data-height") || 620) + "px";
|
||||
|
||||
/* Пряме посилання під рамкою. Усередині рамки Tableau малює власну
|
||||
сторінку помилки, якої ми звідси не бачимо. Посилання дає читачеві
|
||||
шлях до графіка, а автору показує, чи жива адреса. */
|
||||
var link = document.createElement("p");
|
||||
link.className = "viz-link";
|
||||
var a = document.createElement("a");
|
||||
a.href = String(raw).trim();
|
||||
a.target = "_blank";
|
||||
a.rel = "noopener";
|
||||
a.textContent = "Відкрити на Tableau Public";
|
||||
link.appendChild(a);
|
||||
|
||||
el.replaceChildren(frame, link);
|
||||
}
|
||||
|
||||
function mountSpec(el) {
|
||||
var path = el.getAttribute("data-spec");
|
||||
|
||||
if (typeof vegaEmbed !== "function") {
|
||||
box(el, "warn", "Бібліотека Vega-Lite не завантажилась",
|
||||
"Перевірте інтернет і оновіть сторінку.");
|
||||
return;
|
||||
}
|
||||
|
||||
vegaEmbed(el, path, { actions: false, renderer: "svg" })
|
||||
.catch(function (err) {
|
||||
var msg = String(err && err.message || err);
|
||||
var hint = /fetch|load|404|Not Found/i.test(msg)
|
||||
? "Файл " + path + " не знайдено. Перевірте, що він лежить у теці specs/ " +
|
||||
"і що ім'я в полі spec: збігається. Великі й малі літери мають значення."
|
||||
: "Специфікація не читається як JSON. Найчастіша причина — зайва або " +
|
||||
"пропущена кома. Вставте специфікацію у Vega Editor: він покаже, де саме.";
|
||||
box(el, "warn", "Графік не вдалося показати", hint);
|
||||
});
|
||||
}
|
||||
|
||||
/* Підсвічує в бічній панелі ту роботу, яка зараз на екрані. */
|
||||
function followScroll() {
|
||||
var links = document.querySelectorAll(".side-works a");
|
||||
if (!links.length || !("IntersectionObserver" in window)) return;
|
||||
|
||||
var pairs = [];
|
||||
links.forEach(function (a) {
|
||||
var el = document.getElementById(a.getAttribute("href").slice(1));
|
||||
if (el) pairs.push({ a: a, el: el });
|
||||
});
|
||||
|
||||
var seen = new Set();
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) seen.add(e.target); else seen.delete(e.target);
|
||||
});
|
||||
pairs.forEach(function (p) { p.a.classList.remove("here"); });
|
||||
for (var i = 0; i < pairs.length; i++) {
|
||||
if (seen.has(pairs[i].el)) { pairs[i].a.classList.add("here"); break; }
|
||||
}
|
||||
}, { rootMargin: "-20% 0px -70% 0px" });
|
||||
|
||||
pairs.forEach(function (p) { io.observe(p.el); });
|
||||
}
|
||||
|
||||
/* Клік у бічній панелі або адреса з #якорем мають розгортати роботу,
|
||||
навіть якщо читач її згорнув. */
|
||||
function openOnJump() {
|
||||
function openHash() {
|
||||
var id = location.hash.slice(1);
|
||||
if (!id) return;
|
||||
var el = document.getElementById(id);
|
||||
if (el && el.tagName === "DETAILS") el.open = true;
|
||||
}
|
||||
openHash();
|
||||
window.addEventListener("hashchange", openHash);
|
||||
document.querySelectorAll('.side-works a').forEach(function (a) {
|
||||
a.addEventListener("click", function () {
|
||||
var el = document.getElementById(a.getAttribute("href").slice(1));
|
||||
if (el && el.tagName === "DETAILS") el.open = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Одна кнопка: згорнути всі роботи або розгорнути назад. */
|
||||
function foldAll() {
|
||||
var works = document.querySelectorAll("details.work");
|
||||
var side = document.querySelector(".side");
|
||||
if (!works.length || !side) return;
|
||||
|
||||
var btn = document.createElement("button");
|
||||
btn.className = "side-fold";
|
||||
btn.type = "button";
|
||||
side.appendChild(btn);
|
||||
|
||||
function label() {
|
||||
var open = document.querySelectorAll("details.work[open]").length;
|
||||
btn.textContent = open ? "Згорнути всі" : "Розгорнути всі";
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
var open = document.querySelectorAll("details.work[open]").length;
|
||||
works.forEach(function (w) { w.open = open === 0; });
|
||||
label();
|
||||
});
|
||||
|
||||
works.forEach(function (w) { w.addEventListener("toggle", label); });
|
||||
label();
|
||||
}
|
||||
|
||||
function mountAll() {
|
||||
document.querySelectorAll(".viz").forEach(function (el) {
|
||||
try {
|
||||
if (el.hasAttribute("data-tableau")) mountTableau(el);
|
||||
else if (el.hasAttribute("data-spec")) mountSpec(el);
|
||||
else box(el, "todo", "Тут буде графік",
|
||||
"У шапці роботи напишіть tableau: з адресою або spec: з іменем файлу.");
|
||||
} catch (e) {
|
||||
box(el, "warn", "Цей блок не вдалося показати", String(e.message || e));
|
||||
}
|
||||
});
|
||||
followScroll();
|
||||
openOnJump();
|
||||
foldAll();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", mountAll);
|
||||
} else {
|
||||
mountAll();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,412 @@
|
||||
/* Оформлення сторінки портфоліо. Правити не обов'язково —
|
||||
але якщо хочете свої кольори, міняйте змінні в :root нижче. */
|
||||
|
||||
:root {
|
||||
--ink: #1f2a33;
|
||||
--ink-soft: #56646f;
|
||||
--accent: #003964;
|
||||
--line: #e0e6ea;
|
||||
--bg: #ffffff;
|
||||
--bg-soft: #fbfcfd;
|
||||
--warn: #f15b43;
|
||||
--page: 46rem;
|
||||
--bleed: 0rem;
|
||||
}
|
||||
|
||||
/* Пороги рахуються так: розкладка впирається в 66rem, тож блок
|
||||
виступає за неї безпечно, поки ширина вікна ≥ 1008px + 2 × виступ. */
|
||||
@media (min-width: 1200px) { :root { --bleed: 5rem; } }
|
||||
@media (min-width: 1400px) { :root { --bleed: 9rem; } }
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ── розкладка: бічна панель + вміст ───────────────────────────── */
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 15rem minmax(0, 1fr);
|
||||
gap: 2rem;
|
||||
max-width: 66rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.content { min-width: 0; }
|
||||
|
||||
.side {
|
||||
min-width: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: start;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
padding: 3.5rem 0 2rem;
|
||||
}
|
||||
|
||||
.side-name {
|
||||
display: block;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.side-role {
|
||||
margin: 0.3rem 0 1.6rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.side-nav a {
|
||||
display: block;
|
||||
padding: 0.4rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
border-left: 2px solid transparent;
|
||||
padding-left: 0.8rem;
|
||||
margin-left: -0.8rem;
|
||||
}
|
||||
|
||||
.side-nav a:hover { color: var(--accent); }
|
||||
|
||||
.side-nav a.here {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
|
||||
.side-works { margin-top: 1.2rem; }
|
||||
|
||||
/* Рамка-роздільник потрібна тільки тоді, коли вище є список сторінок. */
|
||||
.side-nav + .side-works {
|
||||
padding-top: 1.2rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.side-works a {
|
||||
display: block;
|
||||
padding: 0.35rem 0 0.35rem 0.8rem;
|
||||
margin-left: -0.8rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.35;
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.side-works a:hover { color: var(--accent); }
|
||||
.side-works a.here { color: var(--accent); border-left-color: var(--accent); }
|
||||
|
||||
/* ── шапка ─────────────────────────────────────────────────────── */
|
||||
|
||||
.page-head {
|
||||
padding: 3.5rem 0 2.5rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
margin: 0;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
margin: 0.6rem 0 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* ── головна: заголовок розділу і картки ───────────────────────── */
|
||||
|
||||
.back { margin: 0 0 1.2rem; font-size: 0.9rem; }
|
||||
.back a { color: var(--ink-soft); }
|
||||
.back a:hover { color: var(--accent); }
|
||||
|
||||
.section-title {
|
||||
margin: 2.5rem 0 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||
gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
padding: 1.4rem 1.5rem 1.2rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-soft);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card:hover { border-color: var(--accent); }
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 0.4rem;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.3;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.card-go { font-size: 0.85rem; color: var(--ink-soft); }
|
||||
.card:hover .card-go { color: var(--accent); }
|
||||
|
||||
/* ── роботи ────────────────────────────────────────────────────── */
|
||||
|
||||
main { padding: 0; }
|
||||
|
||||
.work {
|
||||
scroll-margin-top: 1.5rem;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.work:last-of-type { border-bottom: 0; }
|
||||
|
||||
/* Заголовок роботи — він же кнопка «згорнути». */
|
||||
.work > summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.3rem 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.work > summary::-webkit-details-marker { display: none; }
|
||||
|
||||
.work > summary::before {
|
||||
content: "";
|
||||
flex: 0 0 auto;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-right: 2px solid var(--ink-soft);
|
||||
border-bottom: 2px solid var(--ink-soft);
|
||||
transform: rotate(-45deg);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.work[open] > summary::before { transform: rotate(45deg); }
|
||||
.work > summary:hover::before { border-color: var(--accent); }
|
||||
|
||||
.work-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.work-body { padding-top: 0.6rem; }
|
||||
|
||||
/* Пара «було / стало» для розбору однієї роботи. */
|
||||
.ba { margin: 0 0 1.4rem; }
|
||||
|
||||
.ba img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ba figcaption, .ba-label {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
/* Пояснення після назви кроку — звичайним текстом, не капсом. */
|
||||
.ba figcaption span {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ba-label { margin: 0 0 0.5rem; }
|
||||
|
||||
/* Кнопка «згорнути всі» в бічній панелі. */
|
||||
.side-fold {
|
||||
margin-top: 1.2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
font-size: 0.8rem;
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.side-fold:hover { color: var(--accent); }
|
||||
|
||||
.note {
|
||||
margin: 0 0 1.4rem;
|
||||
color: var(--ink-soft);
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
.note b, .note strong { color: var(--ink); font-weight: 600; }
|
||||
.note p { margin: 0 0 0.7rem; }
|
||||
.note p:last-child { margin-bottom: 0; }
|
||||
.note + .viz, .note + .note { margin-top: 1.2rem; }
|
||||
|
||||
/* заголовок розділу, який Jekyll робить із «## Роботи» */
|
||||
h2.section-title { margin: 2.5rem 0 1.2rem; }
|
||||
|
||||
/* Рядок «це приклад» — видимий, але не на місці опису роботи. */
|
||||
.note.swap {
|
||||
margin-top: -0.9rem;
|
||||
padding-left: 0.8rem;
|
||||
border-left: 2px solid var(--line);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Позначка прикладу. Приберете приклад — приберете і її. */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 0.15em 0.5em;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: var(--bg);
|
||||
font-size: 0.6em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card .tag { margin-bottom: 0.5rem; }
|
||||
|
||||
/* Контейнер графіка. Широкий графік прокручується всередині себе,
|
||||
а не розтягує сторінку. */
|
||||
.viz {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Робота на всю ширину: <section class="work wide">.
|
||||
Дашборди Tableau ширші за текстову колонку, і в ній їх обрізає. */
|
||||
/* Ширший блок для дашбордів: вилазить за колонку тексту рівно на
|
||||
--bleed з кожного боку. Класичний трюк «на всю ширину вікна» тут
|
||||
не працює: колонка стоїть праворуч від панелі, тобто не по центру
|
||||
вікна, і центрування зсуває блок за правий край. */
|
||||
/* Кроки розбору виступають так само, як фінальний графік: інакше
|
||||
«до» і «після» різного розміру, і порівняння нечесне. */
|
||||
.work.wide .ba,
|
||||
.work.wide .ba-label,
|
||||
.work.wide .viz,
|
||||
.viz.wide {
|
||||
/* Виступ тільки вправо. Ліворуч стоїть липка бічна панель, і
|
||||
симетричний виступ наїжджав би на неї. */
|
||||
width: calc(100% + var(--bleed));
|
||||
max-width: none; /* інакше .viz{max-width:100%} тримає в колонці */
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.work.wide .ba,
|
||||
.work.wide .ba-label,
|
||||
.work.wide .viz,
|
||||
.viz.wide { width: 100%; }
|
||||
}
|
||||
|
||||
/* vega-embed робить свій контейнер inline-block, і той обгортається
|
||||
під ширину графіка, вилазячи з колонки. Повертаємо блок. */
|
||||
.viz.vega-embed { display: block; }
|
||||
|
||||
.viz-frame {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
|
||||
.viz-link {
|
||||
margin: 0.6rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.viz-link a { color: var(--ink-soft); }
|
||||
.viz-link a:hover { color: var(--accent); }
|
||||
|
||||
/* ── підказки замість графіка ──────────────────────────────────── */
|
||||
|
||||
.viz-msg {
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-soft);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.viz-msg b { display: block; color: var(--accent); margin-bottom: 0.35rem; }
|
||||
.viz-msg span { color: var(--ink-soft); }
|
||||
|
||||
.viz-msg--todo { border: 2px dashed var(--line); }
|
||||
.viz-msg--warn { border: 1px solid var(--warn); border-left-width: 4px; }
|
||||
.viz-msg--warn b { color: var(--warn); }
|
||||
|
||||
/* ── підвал ────────────────────────────────────────────────────── */
|
||||
|
||||
.page-foot {
|
||||
padding: 2.5rem 0 4rem;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.page-foot p { margin: 0; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
/* minmax(0,…), не 1fr: інакше колонка розтягується під найширший
|
||||
вміст — вбудований графік — і сторінка їде вбік. */
|
||||
.layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
|
||||
.side {
|
||||
position: static;
|
||||
max-height: none;
|
||||
padding: 2rem 0 1rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.side-role { margin-bottom: 1rem; }
|
||||
.side-nav { display: flex; gap: 1.2rem; }
|
||||
.side-nav a { border-left: 0; padding-left: 0; margin-left: 0; }
|
||||
.side-nav a.here { border-bottom: 2px solid var(--accent); }
|
||||
.side-works { display: none; }
|
||||
.page-head { padding-top: 2rem; }
|
||||
.page-head h1 { font-size: 1.9rem; }
|
||||
.work { padding: 2rem 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user