Мій сайт не працював п'ять років. Перезбираю його в портал — показую все
-
1
00:00
П'ять копій одного запису — в прямому ефірі
1 Що робити
Відкриваю старий сайт і шукаю по сторінці: один і той самий запис знаходиться п'ять разів.
-
2
00:48
Дублі не в пошуку, а в розмітці
1 Що робити
Дивлюся код: карусель рендерить кожен блок дублями, і пошуковик бачить сторінку, забиту повторами.
-
3
01:08
Порожній перший екран
1 Що робити
Перший екран без відповіді на питання, чим я корисний і з чим до мене приходити.
-
4
01:22
Розбір «до»: дев'ять ролей, Skills, English 55 %
1 Що робити
Проходжу старий сайт блок за блоком: підзаголовок з дев'яти посад, відсотки навичок, обрив досвіду.
-
5
02:58
Дві вітрини: сайт і канал
1 Що робити
Ставлю поряд блок навичок сайту й опис каналу: дві вітрини говорять про різне.
-
6
03:29
Хто я і чому це не про гарний сайт
1 Що робити
Коротко про себе і про те, що сайт існує заради доказу, а не заради вигляду.
-
7
04:30
Архітектура на дошці: чотири задачі
1 Що робити
Малюю на дошці чотири задачі сайту, під кожну розділ і куди він веде.
-
8
06:54
Стек уголос: чому не генератором сайтів
1 Що робити
FastAPI, сторінки на сервері, Tailwind; чому не генератор статики і не односторінковий застосунок.
-
9
07:55
Три речі до першого промпту
1 Що робити
Контент окремо від верстки, правила проєкту в CLAUDE.md, завдання з архітектури, а не з голови.
-
10
08:59
Перший промпт: каркас
1 Що робити
Віддаю Claude Code каркас порталу: маршрути, читання markdown, базовий шаблон. Спочатку план, потім файли.
2 Промпт
UK · ПромптЗбираємо персональний портал на FastAPI. Ні генератора статики, ні SPA: сторінки рендеряться на сервері через Jinja2. Структура проєкту: app/main.py — застосунок FastAPI app/content.py — читання markdown з content/ і розбір фронтматтера templates/ — Jinja2: base.html і по шаблону на розділ static/css/site.css — зібраний Tailwind (кладемо в репозиторій зібраним) content/ru|uk|en/ — тексти розділів у markdown з YAML-фронтматтером content/works/ — по одному файлу на роботу Що зробити зараз: 1. app/main.py: застосунок FastAPI, StaticFiles змонтовано на /static, Jinja2Templates на templates/. 2. Маршрути. Мова — перший сегмент шляху, російська без префікса: / /uk/ /en/ /how /uk/how /en/how /works /uk/works /en/works /works/{slug} і те саме з префіксами /materials /contact /archive — так само. Один спільний обробник, а не двадцять однакових функцій. 3. app/content.py: читає content/{lang}/{name}.md, розбирає YAML-фронтматтер (title, description, updated), віддає HTML і метадані. Файла немає — віддаємо 404, а не порожню сторінку. 4. templates/base.html: атрибут lang підставляється, title і meta description беруться з фронтматтера, один link на /static/css/site.css. 5. Жодних текстів у шаблонах. Будь-який рядок, який я захочу поправити, живе в content/. У шаблоні тільки розмітка і підстановки. Оформлення зараз не чіпаємо — тільки структура і правильні тексти в правильних місцях. Спочатку покажи план і список файлів, які збираєшся створити. Файли не пиши, поки я не підтверджу.EN · Промпт з екранаСобираем персональный портал на FastAPI. Ни генератора статики, ни SPA: страницы рендерятся на сервере через Jinja2. Структура проекта: app/main.py — приложение FastAPI app/content.py — чтение markdown из content/ и разбор фронтматтера templates/ — Jinja2: base.html и по шаблону на раздел static/css/site.css — собранный Tailwind (кладём в репозиторий собранным) content/ru|uk|en/ — тексты разделов в markdown с YAML-фронтматтером content/works/ — по одному файлу на работу Что сделать сейчас: 1. app/main.py: приложение FastAPI, StaticFiles смонтирован на /static, Jinja2Templates на templates/. 2. Маршруты. Язык — первый сегмент пути, русский без префикса: / /uk/ /en/ /how /uk/how /en/how /works /uk/works /en/works /works/{slug} и то же с префиксами /materials /contact /archive — так же. Один общий обработчик, а не двадцать одинаковых функций. 3. app/content.py: читает content/{lang}/{name}.md, разбирает YAML-фронтматтер (title, description, updated), отдаёт HTML и метаданные. Файла нет — отдаём 404, а не пустую страницу. 4. templates/base.html: атрибут lang подставляется, title и meta description берутся из фронтматтера, один link на /static/css/site.css. 5. Никаких текстов в шаблонах. Любая строка, которую я захочу поправить, живёт в content/. В шаблоне только разметка и подстановки. Оформление сейчас не трогаем — только структура и правильные тексты в правильных местах. Сначала покажи план и список файлов, которые собираешься создать. Файлы не пиши, пока я не подтвержу. -
11
10:49
Розділи: роботи за єдиною схемою
1 Що робити
Кожна робота описана за однією схемою з п'яти частин, «що не вийшло» обов'язкова.
2 Промпт
UK · ПромптРозділ «Роботи». Кожна робота лежить окремим markdown-файлом в content/works/ і описана за однією й тією самою схемою — п'ять частин, завжди в такому порядку: 1. Задача — з чим прийшли 2. Що було до — як це працювало раніше 3. Як влаштовано — з чого зібрано рішення 4. Що вийшло — вимірно, якщо є чим міряти 5. Що не вийшло — обов'язкова частина, пропускати не можна Зроби: - фронтматтер роботи: slug, title, client_type (без назви компанії), period, stack (список), summary — один рядок; - шаблон списку /works: картки в одну колонку, в картці тільки title, summary і period. Нічого більше; - шаблон однієї роботи /works/{slug}: п'ять частин у фіксованому порядку з підзаголовками, внизу — посилання на /contact; - якщо у файлі роботи немає частини «що не вийшло» — збирання сторінки має впасти з зрозумілою помилкою, а не мовчки пропустити розділ. Це правило, а не побажання. Назв компаній, доменів і імен клієнтів у текстах немає і не з'являється. Клієнта описуємо типом: «фінтех-продукт», «виробнича компанія».EN · Промпт з екранаРаздел «Работы». Каждая работа лежит отдельным markdown-файлом в content/works/ и описана по одной и той же схеме — пять частей, всегда в этом порядке: 1. Задача — с чем пришли 2. Что было до — как это работало раньше 3. Как устроено — из чего собрано решение 4. Что получилось — измеримо, если есть чем мерить 5. Что не получилось — обязательная часть, пропускать нельзя Сделай: - фронтматтер работы: slug, title, client_type (без названия компании), period, stack (список), summary — одна строка; - шаблон списка /works: карточки в одну колонку, в карточке только title, summary и period. Ничего больше; - шаблон одной работы /works/{slug}: пять частей в фиксированном порядке с подзаголовками, внизу — ссылка на /contact; - если в файле работы нет части «что не получилось» — сборка страницы должна упасть с понятной ошибкой, а не молча пропустить раздел. Это правило, а не пожелание. Названий компаний, доменов и имён клиентов в текстах нет и не появляется. Клиента описываем типом: «финтех-продукт», «производственная компания». -
12
13:09
Де AI зробив не те: вигадані факти
1 Що робити
Модель під час перекладу додала цифри, яких немає у вихідних матеріалах. Відкочую і дописую правило про факти у файл проєкту.
2 Промпт
UK · ПромптЗроби українську версію розділу «Роботи»: content/uk/works.md і файли робіт у content/works/ з українськими варіантами тексту. Нехай звучить природно для україномовного читача.
EN · Промпт з екранаСделай украинскую версию раздела «Работы»: content/uk/works.md и файлы работ в content/works/ с украинскими вариантами текста. Пусть звучит естественно для украиноязычного читателя.
$## Факты - Цифры, даты, названия, сроки и любые количественные утверждения берутся только из файлов в content/. Ничего не добавлять, не округлять, не обобщать и не «усиливать». - Нет данных для строки — оставить пропуск вида TODO(факт: ...) и спросить меня. Пустое место лучше правдоподобной выдумки. - При переводе переводится ровно то, что написано. Добавлять регалии, количество проектов, годы опыта и отраслевые формулировки — запрещено.
-
13
15:09
Тиха помилка: hreflang «ua» замість «uk»
1 Що робити
Перевіряю мовні посилання вручну: у голові сторінки їх немає, x-default теж.
-
14
15:38
Мови і структура адрес
1 Що робити
Три мови папками в адресі, hreflang плюс x-default, і що свідомо не перекладаємо.
2 Промпт
UK · ПромптМовні версії. Три мови: російська, українська, англійська. Адреси — папками: російська без префікса, /uk/, /en/. Ні піддоменів, ні параметрів в адресі. Зроби: 1. У base.html — блок посилань на мовні версії поточної сторінки (rel="alternate") плюс версія за замовчуванням для випадку, коли мова відвідувача не збіглася з жодною. За замовчуванням — російська версія. Коди мов підстав сам; я перевірю їх окремо. 2. Перемикач мови в шапці: звичайні посилання, без JavaScript. Веде на ту саму сторінку іншою мовою, а не на головну. 3. Перекладаємо не все. Мовні версії є у: першого екрана, «Як я працюю», «Роботи», «Контакт». Їх немає у розділу «Архів» з роликами — вони російською, і українська картка російського ролика нічого не додає. Якщо для сторінки немає версії на запитаній мові — не вигадуй порожню сторінку: веди на російську версію і не став на неї мовне посилання. 4. Перевірка: пройди по всіх маршрутах і виведи таблицю «адреса — мова — чи є переклад — куди веде мовне посилання».
EN · Промпт з екранаЯзыковые версии. Три языка: русский, украинский, английский. Адреса — папками: русский без префикса, /uk/, /en/. Ни поддоменов, ни параметров в адресе. Сделай: 1. В base.html — блок ссылок на языковые версии текущей страницы (rel="alternate") плюс версия по умолчанию для случая, когда язык посетителя не совпал ни с одним. По умолчанию — русская версия. Коды языков подставь сам; я проверю их отдельно. 2. Переключатель языка в шапке: обычные ссылки, без JavaScript. Ведёт на ту же страницу в другом языке, а не на главную. 3. Переводим не всё. Есть языковые версии у: первого экрана, «Как я работаю», «Работы», «Контакт». Их нет у раздела «Архив» с роликами — они на русском, и украинская карточка русского ролика ничего не добавляет. Если для страницы нет версии на запрошенном языке — не выдумывай пустую страницу: веди на русскую версию и не ставь на неё языковую ссылку. 4. Проверка: пройди по всем маршрутам и выведи таблицу «адрес — язык — есть ли перевод — куда ведёт языковая ссылка».
-
15
16:42
Воронка: форма, пошта, канал
1 Що робити
Форма з трьох полів, заявка в базу і в Telegram, пошта на своєму домені, посилання в канал.
2 Промпт
UK · ПромптФорма на /contact. Рівно три поля: задача (багаторядкове), термін (один рядок), контакт (один рядок). Більше полів не додавати — кожне зайве поле коштує відповідей. Зроби: 1. POST /contact — звичайне надсилання форми, без JavaScript. Після надсилання — окрема сторінка «дякуємо», а не спливаюче повідомлення: на неї можна поставити ціль в аналітиці. 2. Заявка зберігається в SQLite (файл data/site.db, таблиця leads: id, задача, термін, контакт, час, мова сторінки, джерело переходу) і одночасно йде повідомленням у мій телеграм через бота. Токен і chat_id — зі змінних оточення, в коді їх немає. Читай їх через os.environ, .env у репозиторій не потрапляє. 3. Якщо телеграм недоступний — заявка все одно збережена в базі, а помилка записана в лог. Втратити заявку через те, що впав бот, не можна. 4. Простий захист від роботів без капчі: приховане поле-принада і перевірка, що форму надіслано не раніше ніж через три секунди після завантаження сторінки. 5. Пошта — на своєму домені, посилання mailto поруч з формою. Посилання на телеграм веде в канал, не в особисті.
EN · Промпт з екранаФорма на /contact. Ровно три поля: задача (многострочное), срок (одна строка), контакт (одна строка). Больше полей не добавлять — каждое лишнее поле стоит ответов. Сделай: 1. POST /contact — обычная отправка формы, без JavaScript. После отправки — отдельная страница «спасибо», а не всплывающее сообщение: на неё можно поставить цель в аналитике. 2. Заявка сохраняется в SQLite (файл data/site.db, таблица leads: id, задача, срок, контакт, время, язык страницы, источник перехода) и одновременно уходит сообщением в мой телеграм через бота. Токен и chat_id — из переменных окружения, в коде их нет. Читай их через os.environ, .env в репозиторий не попадает. 3. Если телеграм недоступен — заявка всё равно сохранена в базе, а ошибка записана в лог. Потерять заявку из-за упавшего бота нельзя. 4. Простая защита от роботов без капчи: скрытое поле-приманка и проверка, что форма отправлена не раньше чем через три секунды после загрузки страницы. 5. Почта — на своём домене, ссылка mailto рядом с формой. Ссылка на телеграм ведёт в канал, не в личку.
-
16
17:21
Чотири події в аналітиці
1 Що робити
Замість лічильника відвідувань чотири події: прийшов з YouTube, дочитав роботу, надіслав форму, пішов у Telegram.
-
17
17:51
Деплой на свій VPS
1 Що робити
Портал стає новим сайтом на сервері: застосунок під службою, сертифікат однією командою.
-
18
18:35
До і після
1 Що робити
Старий і новий сайт поруч: ті самі пошуки по сторінці й розділи нової структури.
-
19
19:49
Де ламається
-
20
20:58
Домашка і що далі
1 Що робити
Пройти свій сайт за чек-листом аудиту, зібрати структуру «після» і рядок першого екрана.