Сайты, которые я сделала

Что это за сайт

Я занимаюсь полным циклом продюсирования людей и веб-проектов: от идеи и прототипа до запуска и продвижения. Как я думаю и разбираю процессы — в дневнике о продюсировании.

Для каждого проекта я произвожу текстовый контент (дневник о производстве и упаковке продукта), снимаю и монтирую видео и аудио (дневник о съёмках), а потом упаковываю всё это в форму, которая интересна людям (дневник о маркетинге и продажах).

Эта страница — портфолио. Историю своих сайтов я излагаю не по типам (коммерция, фан, волонтёрство), а по нарастанию технической сложности. Полные описания с годами и статусами — на странице проектов, ниже — этапы со ссылками на нужные блоки.

Этап 1. Чистый HTML, без PHP

Страницы вручную: табличная вёрстка, GIF-кнопки, рисованный дизайн, кодировки вручную. Сюда же относятся свежие проекты, сознательно собранные на простой и надёжной статике.

• Страница на narod.ru — 1999, первый опыт и первая «парадная».
• Домашняя страничка «Изольдочки-Лапочки» — 1999–2002, самиздат, КОИ-8 и windows-1251.
• Детская страничка — 2002–2003, 19 разделов и обмен кнопками с хостингом.
• Studentochka.ru 1.0 и 2.0 — 2002–2003, первый коммерческий: от лендинга до каталога.
• Yagaya.ru — 2021, путеводитель для клиентов: самохост-шрифт, карта-квест через файл координат, 152-ФЗ.
• Wiz-of-web.ru — 2026, этот сайт: HTML5, CSS3, Bootstrap 5 self-host, vanilla JS (ES5), IntersectionObserver.

Этап 2. PHP, внешние стили, первые CMS

Стили вынесены в отдельный файл, появляются PHP-поиск и cms-движки, а с ними — командная работа с дизайнером и художником.

• Studentochka.ru 3.0 — 2003–2026, внешний CSS, собственный PHP-поиск, страницы-макросы в Word, автозамена.
• Рекрутинг и копирайтинг — 2003–2006, мини-hh и услуги копирайтинга.
• Hp-theories.ru — 2004–2010, CMS Xaraya: первая админка, форум, два языка RU/EN.
• Волонтёрский сайт — 2006–2013, PHP, фотомонтаж вместо рисованной графики, структура «нужды — отчёты».

Этап 3. Генераторы, Git, YAML, CI/CD

Контент отделён от разметки: лейауты, инклуды, фронтматтер. Sitemap и RSS генерируются автоматически, старые архивы импортированы скриптами, обновления выкатываются через Git и CI/CD.

• Yagaya-Baba.ru — 2013, Jekyll 4.2.2, Git + GitLab CE (собственный сервер), webpack/yarn, импорт LiveJournal и Дзена, Bootstrap 5 self-host, vanilla JS.
• Smoothness.ru — 2023, тот же стек: Jekyll + Bootstrap 5 + vanilla JS, интеграционный архив рабочих проектов.
• Personal-Myth.ru — 2026, тот же стек: Jekyll + Bootstrap 5 + vanilla JS: теги для контента, JSON-описания дисциплин, TOC с программной генерацией отступов, кастомный виджет Telegram с localStorage.

Этап 4. CRM: архитектура продукта

Квест-карта клиента: ТЗ с моделью данных, матрицей прав и ограничениями скоупа. Всё, кроме кодинга, — моё: архитектура, контент, тестирование.

• Personal-myth.ru (CRM) — 2015, CRM клиентов: профили, анкеты, карта из 15 этапов, комментарии; PHP + Node.js, SQL-база, миграции knex.

Этап 5. Фреймворк и собственный кодинг

Laravel с админкой Nova, блочные Blade-шаблоны, миграции базы, Docker, GitLab CI, тесты. Всё, кроме настройки серверов, — моё, включая кодинг.

• Anna-Ustinova.com — 2026, лендинг репетитора скрипки, AJAX-подгрузка блоков, карусели на CSS scroll-snap, inline-SVG иконки, форма с honeypot.
• Violin.art — 2023, русскоязычная версия на Laravel + Nova, Bootstrap 5, кастомные цвета через CSS Custom Properties.

Как я учусь, ошибаюсь и расту по этапам — в дневнике о разработке веб-сайтов. Отдельная страница о моих компетенциях как разработчика.