Elena Mashitskaya
Built outside workВне работы  /  My own projectСвой проект

The site you're reading, taken apart

Как собран сайт, который вы читаете

Nine pages in two languages, written and built in two days, then rebuilt over the two after that. I wrote every word and made every call about what goes on a page; the code was written by AI agents. This page is the case: what I decided, where I got it wrong, and what I'd take to a team.

Девять страниц на двух языках. Два дня на первую версию и ещё два на переделки. Текст мой, решения о том, что попадает на страницу, тоже; код писали AI-агенты. Здесь — что я решала по дороге, где ошибалась и что из этого пригодилось в работе.

Mine · text, structure, every product callМоё · текст, структура, все продуктовые решения HTML · CSS · nginx · UmamiHTML · CSS · nginx · Umami Live since · September 2026Живёт с · сентября 2026
9pages, each one in two languagesстраниц, каждая на двух языках
2days from empty folder to a link I could sendдня от пустой папки до ссылки, которую не стыдно отправить
33commits, all of them from those four daysкоммита, все за эти четыре дня
0third-party scripts on any pageсторонних скриптов на страницах
How it wentКак это шло

Four days, and half of them were rewrites

Четыре дня, и половина из них на переделки

01
Eight artefactsВосемь артефактов The first version lived as eight separate Claude artefacts. One of those takes an evening, and that is enough to see whether the text works at all.Первая версия жила восемью отдельными артефактами Claude. Такие собираются за вечер, и этого достаточно, чтобы понять, работает текст или нет.
02
The move to a serverПереезд на сервер That hosting lost the language choice between pages, and the shared stylesheet lived as eight copies. Both are structural, so the site moved.На том хостинге язык сбрасывался при каждом переходе, а общие стили лежали восемью копиями. Обойти это нельзя — только переехать.
03
An audit from outsideАудит со стороны A read-through from outside: twenty-odd notes, sorted by one question — does this stop me sending someone the link?Разбор со стороны: два десятка замечаний, отсортированных по одному признаку — мешает ли это дать кому-то ссылку.
04
Twenty of them closedДвадцать из них закрыты Cut into blocks by the kind of edit, not by page, with a stop-point after each. One is still open and it is honest about why.Разложены не по страницам, а по типу правки, с остановкой после каждого блока. Одна находка открыта до сих пор, и причина написана прямо.

The one still open: three demos of my own projects live as private links and won't open for you. The source files are on another laptop. Writing "coming soon" would have been easier than leaving it visible in a backlog with a named blocker.

Что осталось: три демо моих проектов лежат приватными ссылками и у вас не откроются — исходники на другом ноутбуке. Проще было бы написать «скоро будет», но тогда пришлось бы умолчать о причине.

The interesting partСамое интересное

Decisions you only see from inside

Решения, которые видно только изнутри

I set a cache, then walked into it myselfПоставила кеш и сама в него попала
Static files got a thirty-day cache — good for readers, and it meant my next stylesheet edit would reach nobody for a month. I found it the honest way: the browser wouldn't show my own change. Now the deploy script stamps a version onto the filename from the contents, so the label changes only when the code does.Поставила на файлы стилей тридцатидневный кеш: читателю страница открывается мгновенно. И следующая же моя правка не дошла бы до людей ещё месяц. Обнаружила это на себе — браузер упорно показывал старую версию. Теперь при выкладке к файлу дописывается метка, посчитанная от его содержимого: меняется код — меняется метка.
Analytics count actions, not viewsАналитика считает действия, а не просмотры
Views would tell me a number I can't act on. So it counts a case opened, a language switched, a page read to the end — the things that say whether the writing held. It runs on the same server as the site, so nobody else gets the data.Просмотры — цифра, с которой нечего делать. Поэтому я считаю другое: открыли кейс, переключили язык, дочитали страницу до конца. По ним видно, удержал текст человека или нет. Аналитика стоит на том же сервере, так что данные никуда не уходят.
The fonts moved in, and the first attempt was worseШрифты забрала к себе, и с первого раза стало хуже
Loading fonts from Google hands every reader's address to Google. Moving them in doubled the weight instead: I'd taken a separate file per weight, where the original serves one file covering all of them. Rebuilt properly it came out lighter than where it started.Пока шрифты грузятся с сервиса Google, адрес каждого читателя уходит к Google. Перенесла к себе — и вес страниц вырос вдвое: я скачала по файлу на каждое начертание, а сервис отдаёт один файл сразу на все. Пересобрала как надо — вышло легче, чем было изначально.
Printing is a real way to read thisПечать — это тоже способ читать
Someone will save a case as PDF and send it on. Unstyled, that came out with the photo across the text and a decorative squiggle over a paragraph. It took three passes to get right, and the last thing to check was whether the widest chart still fits the paper.Кто-нибудь сохранит кейс в PDF и перешлёт дальше. Без отдельных правил печати фотография ложилась поперёк текста, а нарисованная от руки закорючка — поверх абзаца. Ушло три захода, и в последнюю очередь я проверила, влезает ли в лист самый широкий график.
The numbers from work stay at workРабочие цифры остаются на работе
A portfolio wants scale, and scale usually means revenue. I can't publish my employer's. So the cases show the level a decision sat at — partner terms, build or buy, what we stop — which tells a senior reader more than a figure would anyway.От портфолио ждут масштаба, а масштаб обычно показывают выручкой. Цифры работодателя я публиковать не могу. Поэтому в кейсах виден уровень, на котором принималось решение: условия партнёрств, покупать или строить, что мы закрываем. Опытному читателю это говорит больше, чем сумма.

Everything on this page is checkable on this page. Switch the language in the corner and the address bar keeps it. Narrow the window and the schematics fold into one column. Print it and the layout changes for paper.

Всё это можно проверить прямо здесь. Переключите язык в углу — он не собьётся при переходе на другую страницу. Сузьте окно — схемы свернутся в одну колонку. Отправьте на печать — вёрстка перестроится под лист.

Limits I setГраницы

What I decided not to do

Чего я решила не делать

No framework, no CMSНи фреймворка, ни CMSNine pages that change a few times a year. Anything that generates them would be more machinery than the thing it generates.Девять страниц, которые меняются несколько раз в год. Любой генератор для них оказался бы сложнее самих страниц.
Nobody else's analyticsНикакой чужой аналитикиThe convenient option sends every reader to a third party. On a page about how I work, that would contradict the text.Удобный вариант отдаёт данные о каждом читателе на сторону. На сайте, где я пишу, как работаю, это противоречило бы тексту.
No dark themeБез тёмной темыIt doubles what has to be checked on every page for a preference nobody asked me for. Written down, not forgotten.Тёмная тема удваивает проверки на каждой странице, а просил о ней пока никто. Не забыла — отложила и записала.
What I take from itЧто я отсюда забираю

Same job, no team to hide behind

Та же работа, только спрятаться не за кого

Open it and lookОткрыть и посмотретьThe cache, the fonts, the print layout — each looked right in the code and was wrong in a browser. A page only tells you the truth once you open it.Кеш, шрифты, раскладка для печати — в коде каждое выглядело правильно, а в браузере оказывалось не так. Страница говорит правду, только когда её откроешь.
Writing with agents is a spec problemПисать с агентами — это про спекуThe code came fast. What took the time was deciding what belongs on a page and what counts as done — which is the job I already had.Код появлялся быстро. Время уходило на другое: решить, что попадёт на страницу и что здесь считается готовым. Ровно та работа, которой я занимаюсь и так.
Ship blocked things visiblyПоказывать то, что застрялоOne item is still open with the blocker named, here and in the backlog. A hidden gap gets discovered by the reader; a named one gets discussed.Один пункт до сих пор открыт, и причина названа — и здесь, и в бэклоге. Скрытую дыру рано или поздно найдёт читатель, а названную можно обсудить.

Two days to build it. Two more to make it honest.

Два дня, чтобы собрать. Ещё два, чтобы стало честно.

Nothing here comes from work: the site is entirely mine, built on evenings and weekends. The analytics are self-hosted and record actions on public pages, not people — no accounts, no profiles, nothing shared onward.

С работой сайт не связан никак: он полностью мой и собран по вечерам и выходным. Аналитика записывает действия на публичных страницах, а не людей, — ни аккаунтов, ни профилей, и никому не передаётся.