Initial commit

README.md

@@ -0,0 +1,331 @@
+# Портфоліо · шаблон
+
+Сайт для ваших робіт із курсу «Візуалізація даних». Хто відкриє
+посилання, одразу бачить самі роботи — без проміжних сторінок.
+Вбудовує графіки й дашборди з **Tableau Public** і специфікації
+**Vega-Lite**.
+
+Одна робота — це **один файл** у теці `_works/`. Пишете звичайним
+текстом. HTML не потрібен ніде.
+
+Установлювати нічого не треба. Усе робиться в браузері.
+
+> **Сайт публічний.** Його бачить будь-хто в інтернеті, і ваше ім'я
+> стоїть на ньому. Беріть навчальні або відкриті дані. Якщо графік
+> зроблено на робочих даних, заберіть назви клієнтів і справжні суми
+> або візьміть інший графік. У Tableau Public вимкніть **Allow
+> Access**: інакше книгу з даними можна завантажити.
+
+---
+
+## Крок 1. Зробіть із шаблону свій репозиторій
+
+1. Угорі натисніть зелену кнопку **Use this template**.
+2. Виберіть **Create a new repository**.
+3. У полі **Repository name** напишіть `dataviz-portfolio`.
+4. Виберіть **Public**. Приватний репозиторій не публікується.
+5. Натисніть **Create repository**.
+
+Далі ви працюєте у своєму репозиторії, не в цьому.
+
+## Крок 2. Увімкніть публікацію
+
+1. У своєму репозиторії відкрийте вкладку **Settings**.
+2. Зліва виберіть **Pages**.
+3. У полі **Source** виберіть `Deploy from a branch`.
+4. У полі **Branch** виберіть `main` і теку `/ (root)`.
+5. Натисніть **Save**.
+6. Зачекайте одну-дві хвилини й оновіть **Settings → Pages**.
+
+Угорі з'явиться адреса вашого сайту:
+
+```
+https://ВАШ-ЛОГІН.github.io/dataviz-portfolio/
+```
+
+Відкрийте її. Сайт уже працює: дві роботи-приклади і список робіт
+у бічній панелі.
+
+## Крок 3. Підпишіть сайт своїм іменем
+
+Ім'я стоїть в одному місці — у файлі `_config.yml`.
+
+1. Відкрийте `_config.yml`.
+2. Замініть `title`, `role` і `tagline`.
+3. Натисніть **Commit changes**.
+
+```yaml
+title: "Олена Ковальчук"
+role: "Аналітик даних"
+tagline: "Роботи з курсу «Візуалізація даних» KSE, 2026."
+```
+
+Через хвилину сайт оновиться сам.
+
+Лапки навколо тексту обов'язкові. Якщо в тексті потрібні лапки,
+беріть «такі».
+
+---
+
+## Як додати роботу
+
+Одна робота — один файл у теці `_works/`.
+
+1. Відкрийте теку `_works`.
+2. Натисніть **Add file → Create new file**.
+3. Напишіть ім'я файлу латиницею, з `.md` на кінці: `03-facets.md`.
+4. Вставте текст нижче і замініть його своїм.
+5. Натисніть **Commit changes**.
+
+Робота з **Tableau Public**:
+
+```markdown
+---
+title: "Назва роботи"
+card: "Один рядок для картки на головній."
+tableau: "https://public.tableau.com/app/profile/ваш.профіль/viz/Книга/Аркуш"
+---
+
+**Питання:** на яке питання відповідає графік.
+
+**Рішення:** що ви вирішили і чому.
+
+**Що видно:** що з цього побачив читач.
+```
+
+Робота з **Vega-Lite**:
+
+```markdown
+---
+title: "Назва роботи"
+card: "Один рядок для картки на головній."
+spec: "specs/my-chart.json"
+---
+
+**Питання:** на яке питання відповідає графік.
+```
+
+Файл специфікації покладіть у теку `specs`: **Add file → Upload
+files** → перетягніть файл → **Commit changes**. Ім'я файлу —
+латиницею, без пробілів.
+
+Роботи стоять на сторінці за іменем файлу, за абеткою. Тому ставте
+число попереду: `01-`, `02-`, `03-`. Пункт у бічній панелі
+з'являється сам.
+
+Найсильнішу роботу ставте першою. Її побачать усі, решту —
+не обов'язково.
+
+### Що можна написати в шапці
+
+| Поле | Навіщо |
+|---|---|
+| `title` | заголовок роботи. Обов'язкове |
+| `card` | короткий опис. Знадобиться, якщо додасте окрему головну |
+| `tableau` | адреса графіка з адресного рядка Tableau Public |
+| `spec` | ім'я файлу специфікації в теці `specs` |
+| `before` | картинка «було» над графіком. Для розборів «до/після» |
+| `steps` | кілька картинок-спроб перед графіком. Для розборів у кілька кроків |
+| `wide: true` | графік на всю ширину сторінки. Для дашбордів |
+| `height: 1150` | висота рамки в пікселях. Для дашбордів |
+
+Кожна робота на сторінці згортається: читач може закрити зайве й
+лишити тільки те, що хоче роздивитись. За замовчуванням усі роботи
+розгорнуті. У бічній панелі є кнопка «Згорнути всі».
+
+Текст під шапкою — звичайний Markdown. `**жирний**`, списки,
+посилання працюють.
+
+### Перед тим як вбудовувати графік Tableau
+
+1. Відкрийте свій графік на Tableau Public.
+2. Натисніть шестерню у верхньому правому куті.
+3. Вимкніть **Show Sheets**.
+
+Інакше поруч із графіком видно всі аркуші книги, зокрема чернетки.
+У тому самому меню вимкніть **Allow Access**, якщо графік зроблено на
+робочих даних.
+
+### Дашборд ширший за графік
+
+Дашборд вищий і ширший за окремий графік, тому в текстовій колонці
+його обріже. Найпростіший шлях — виправити розмір у Tableau:
+
+1. Відкрийте дашборд у Tableau.
+2. У полі **Size** виберіть **Automatic**.
+
+Якщо розмір змінити не можна, допишіть у шапку роботи два рядки:
+
+```yaml
+wide: true
+height: 1150
+```
+
+Висоту підберіть на око. Якщо низ дашборда обрізаний, збільшуйте
+число, поки дашборд не вміститься.
+
+### Розбір «до / стало»
+
+Найсильніша робота в портфоліо — не картинка, а хід думки. Покладіть
+скріншот вихідного графіка в теку `specs` (або в будь-яку іншу) і
+допишіть у шапку:
+
+```yaml
+before: "specs/vacancies-before.png"
+```
+
+Над графіком з'явиться картинка з підписом «Було», під нею — ваш
+графік із підписом «Стало».
+
+Якщо спроб було кілька, покажіть їх усі — так видно хід думки, а не
+тільки результат:
+
+```yaml
+steps:
+  - img: "specs/step1.png"
+    label: "Спроба 1"
+    note: "два ряди окремо"
+  - img: "specs/step2.png"
+    label: "Спроба 2"
+    note: "подвійна вісь"
+final_label: "Що вийшло"
+```
+
+Кожна спроба має пояснити, **чому** вона не підійшла. Тупик без
+діагнозу — просто чернетка; тупик із діагнозом — доказ, що ви
+розуміли, що робите.
+
+У шаблоні є два готові розбори: «Скільки кандидатів на одну вакансію»
+(`_works/01-candidates-per-vacancy.md`) і «Чи заробляємо ми на цьому
+обороті» (`_works/02-margin-case.md`). Подивіться, як він
+побудований, і напишіть свій за тією ж рамкою:
+
+- **Питання** — на що читач хотів відповіді;
+- **Що не працювало** — чому попередній графік не відповідав;
+- **Рішення** — що ви зробили і чому саме так;
+- **Що я відкинув** — варіант, який ви розглянули й не взяли. Один
+  такий абзац доводить, що рішення було свідоме;
+- **Що стало видно** — конкретна знахідка, з числом;
+- **Що я б ще змінив** — те, що лишилось слабким. Робота, яка
+  вдає завершеність, читається як навчальна вправа.
+
+Один такий розбір у портфоліо коштує більше, ніж п'ять акуратних
+графіків без пояснень.
+
+---
+
+## Як додати ще одну сторінку
+
+Наприклад, `about.md` — про себе.
+
+1. Натисніть **Add file → Create new file**. Ім'я — `about.md`.
+2. Вставте текст:
+
+   ```markdown
+   ---
+   heading: "Про мене"
+   ---
+
+   Аналітик у ритейлі. Тут коротко про досвід і контакти.
+   ```
+
+3. Натисніть **Commit changes**.
+
+   Щоб вставити графік на такій сторінці, напишіть один рядок:
+
+   ```liquid
+   {% include viz.html tableau="https://public.tableau.com/app/profile/…/viz/Книга/Аркуш" %}
+   ```
+
+   або `{% include viz.html spec="specs/my-chart.json" %}`.
+
+4. Відкрийте `_config.yml` і допишіть сторінку в список `nav`:
+
+   ```yaml
+   nav:
+     - name: "Про мене"
+       file: "about.html"
+   ```
+
+5. Натисніть **Commit changes**.
+
+У полі `file` пишіть ім'я з `.html`, навіть якщо файл має `.md`.
+Поки список `nav` порожній, у бічній панелі немає розділу сторінок.
+Щойно ви додасте першу сторінку, поруч з'явиться і посилання
+«Роботи» на головну.
+
+---
+
+## Якщо щось не показується
+
+Спершу подивіться на вкладку **Actions** у своєму репозиторії.
+Зелена галочка — сайт зібрано. Червоний хрестик — у якомусь файлі
+помилка, і сайт лишився таким, яким був до неї.
+
+| Що бачите | Що робити |
+|---|---|
+| Червоний хрестик в **Actions** | Відкрийте останній запис і прочитайте рядок з `Error:`. Найчастіше — лапки або відступ у шапці роботи |
+| «Не вдалося прочитати адресу Tableau» | Відкрийте графік на Tableau Public і скопіюйте адресу з адресного рядка заново |
+| У рамці англійське «Where's the viz?» | Адресу прочитано, графіка за нею немає. Ви перейменували, приховали або видалили книгу чи аркуш |
+| «Файл … не знайдено» | Перевірте, що файл лежить у теці `specs`, а ім'я в полі `spec:` збігається |
+| «Специфікація не читається як JSON» | Вставте специфікацію у Vega Editor. Він покаже, де зайва або пропущена кома |
+| Дашборд обрізаний | Виберіть **Size → Automatic** у Tableau або допишіть `wide: true` і `height:` |
+| Робота не з'явилась | Перевірте, що файл лежить у теці `_works` і має `.md` на кінці |
+| Роботи стоять не в тому порядку | Вони йдуть за іменем файлу. Перейменуйте: `01-`, `02-`, `03-` |
+| Сайт не оновився | Зачекайте хвилину й оновіть сторінку через `Ctrl`/`Cmd` + `Shift` + `R` |
+
+### Якщо не виходить — спитайте ШІ
+
+Скопіюйте текст нижче в ChatGPT, Claude або Gemini. Він описує, як
+влаштований сайт, тому модель відповідатиме по суті, а не навмання.
+Свою проблему допишіть у кінці.
+
+```text
+Допоможи розібратися з моїм сайтом-портфоліо. Відповідай українською,
+покроково, і пам'ятай: я працюю тільки через сайт github.com у
+браузері, без командного рядка і без програм на комп'ютері.
+
+Як влаштований сайт:
+- Це GitHub Pages з Jekyll. Репозиторій публічний, гілка main, тека
+  публікації — корінь.
+- Налаштування сайту в _config.yml: title, role, tagline, footer і
+  список сторінок nav (у кожної name і file).
+- Головна сторінка — index.md, вона показує всі роботи одразу.
+  Розмітка одна: _layouts/default.html.
+- Кожна робота портфоліо — окремий файл у теці _works/. У його шапці
+  між --- стоять поля: title, card, а також tableau (адреса графіка
+  Tableau Public) або spec (ім'я файлу в теці specs/). Необов'язкові
+  поля: wide: true і height (число).
+- Текст роботи під шапкою — звичайний Markdown.
+- Кожна робота на сторінці — це <details class="work">, тобто її можна
+  згорнути. Розгорнуті за замовчуванням.
+- На вільній сторінці графік вставляється через {% include viz.html %}.
+- Файли специфікацій Vega-Lite лежать у теці specs/.
+- Оформлення в assets/style.css, вбудовування графіків — у
+  assets/embed.js. Ці два файли я не змінюю.
+- Сторінка сама збирає список робіт і бічну панель.
+
+Що мені треба:
+[опишіть, що ви робили, що очікували побачити і що побачили насправді]
+
+Текст помилки з вкладки Actions, якщо він є:
+[вставте сюди]
+```
+
+Якщо модель радить встановити Ruby, Jekyll, Node або запустити щось
+у терміналі — скажіть їй, що ви працюєте тільки в браузері на
+github.com, і попросіть інший шлях.
+
+---
+
+## Що в теці
+
+| Файл або тека | Навіщо |
+|---|---|
+| `_config.yml` | ім'я, підпис, список сторінок |
+| `_works/` | ваші роботи, по одному файлу на кожну |
+| `specs/` | файли специфікацій Vega-Lite |
+| `index.md` | сторінка з роботами. Її бачать першою |
+| `_layouts/default.html` | спільна розмітка сторінок. Правити не треба |
+| `assets/style.css` | оформлення. Кольори — у змінних на початку файлу |
+| `assets/embed.js` | вбудовує графіки. Правити не треба |