Портфолио и кейсы фрилансеров по fullstack-разработке

Сайт-визитка разработчика с портфолио, блогом и админкой — ydy.su Личный сайт fullstack-разработчика, сделанный под ключ: от дизайна до запуска на сервере. Контент полностью управляется из своей админки. Что сделано: — Дизайн всех страниц и админки — сразу в HTML, адаптивная вёрстка. — Фронтенд на Angular 22 с серверным рендерингом (SSR): страницы приходят готовыми, быстро открываются и хорошо индексируются. — Портфолио: список проектов с фильтром, страницы кейсов с оглавлением и галереей. — Блог: темы и теги, фильтр и пагинация, подсветка кода, переход к соседним заметкам. — Админка: редакторы главной, проектов и постов, черновики, порядок проектов, визуальный редактор текста и Markdown, загрузка картинок с автоматическим сжатием в WebP. — Безопасный вход: cookie-сессия, защита от перебора пароля. — Бэкенд на NestJS + PostgreSQL + Prisma, проверка данных на Zod. — Единый контракт API (OpenAPI): типы для фронта и бэка генерируются из него, расхождения ловит компилятор. — Около 400 автотестов (юнит и e2e). — Деплой на VPS: nginx, HTTPS (Let's Encrypt), systemd, обновление одной командой. — Документация: архитектура, решения, API, деплой. Стек: Angular 22, TypeScript, SCSS, SSR, NestJS, PostgreSQL, Prisma, Zod, Vitest, nginx.

Уставные документы, дизайн-система, проекты и аналитика фонда собраны в одном месте, и по ним построен граф связей. Людям он не нужен, читать его никто не будет. Он нужен ИИ-агентам. Агент по такому графу за несколько секунд понимает, чем живёт организация: находит нужный документ и то, что лежит с ним рядом, вместо перебора тысяч файлов. Спрашиваю, где документ, который делали весной, и получаю путь, а не совет поискать. Туда же подключены доступы к рабочим системам фонда, из которых собирается панель аналитики.

Анонс двух потоков школы молодого врача в квадрате для ленты и вертикали 4:5. Композиция держится на рукописном знаке «шмв», который переходит в коня с врачами. В карточке остаются заголовок, номера потоков и даты, остальное уходит в подпись к посту. Из этой пары потом вырос весь визуальный язык сайта школы. Плюс анонсы событий и лекций, новости для соцсетей и плакат-призыв «Сдать тест на ВИЧ». Десятки буклетов, лифлетов и афиш я сделал для фонда без штатного дизайнера. Маскот фонда, красный конь и фигуры-человечки, нарисован до меня: это готовая айдентика фонда.

Три письма под разные аудитории фонда: реактивация уснувших доноров, приглашение разовых жертвователей на подписку и отчёт регулярным. Инфографика на живых цифрах фонда, вёрстка под почтовые клиенты. Письма длинные, поэтому на обложке показано только начало, целиком они в файлах.

Человеку трудно найти на сайте то, что нужно ему прямо сейчас. Представьте: человек только узнал, что у него положительный ВИЧ-статус, заходит на главную и не понимает, куда нажать. Там есть статьи, есть миссия и цели фонда, а страницы «чем мы можем помочь» просто нет. Редизайн про это. Главная собрана по принципу «одна страница, три маршрута»: для того, кому нужна помощь, для донора и для читателя. Стало понятнее, куда идти человеку, которому нужна помощь, и прозрачнее, чем фонд занимается и куда уходят деньги. Заодно обновил устаревший интерфейс и собрал дизайн-систему: взял существующую и дополнил тем, чего не хватало. Бренд-систему фонда перевёл в веб.

Почти вся аналитика фонда в одном месте: деньги, доноры, трафик сайта, охваты сервисов. Раньше за каждой цифрой надо было идти в свою систему и сводить руками. Данные подтягиваются сами из банков, платёжной системы, внутренней CRM, Яндекс Метрики и Google Search Console. К банкам доступ только на чтение: панель умеет смотреть и не умеет двигать деньги. На скриншотах рабочая система, суммы скрыты.

Фонд не мог посчитать, что дают его тестирования и консультации: анкета была одна на все случаи, а случаи разные. На выезде у консультанта есть пара минут, а форма перед ним та же, что на очной консультации в офисе. Я развёл сценарии. У выездов появилась своя короткая анкета, своя таблица и свой отчёт, и по отчётам наконец видно результат работы. Отдельно сделал учёт аптечки, которого не было вообще: он жил в Google-таблицах, и никто не знал, сколько терапии есть на самом деле. Теперь координатор вносит поступления, а тот, кто выдаёт, выбирает препарат из списка, и упаковки списываются сами. Если человеку нужно выдать несколько таблеток, а не всю упаковку, она открывается и остаток считается по таблеткам. Заодно обновил интерфейс и закрыл вход: раньше CRM была открыта любому, кто знал адрес, теперь вход через Telegram и только для своих. Всё вместе две недели, дальше поддерживаю. На скриншотах рабочая система, анкета пустая, на локальном стенде.

Школа набирает потоки с 2018 года, а её сайт устарел. Главная беда была не в виде, а в том, что сотрудники ничего не могли в нём поменять сами: любая правка шла через программиста. Я пересобрал сайт с нуля и сделал к нему админку для обычных людей. Добавить спикера, опубликовать отзыв, поправить информацию для участников, открыть регистрацию на поток, посмотреть заявки. Всё это за неделю, от нуля до выката. Отдельно занялся поиском. Раньше страницы школы почти не индексировались: люди не находили её ни по названию, ни по запросам про обучение работе с ВИЧ. Теперь находят. И ускорил загрузку: сжал тяжёлые фотографии с занятий так, что на глаз качество то же, а страницы открываются быстро. Дизайн тоже мой. Визуальный язык взял из кампании набора: серо-голубой медицинский фон, красная роспись «шмв», фигуры врачей и документальные фото занятий. Красный оставил единственным сигналом действия, чтобы кнопка заявки читалась на любой странице.

Задача Продавец на Wildberries раз в неделю получает отчёт о реализации: XLSX на 84 колонки и до сотен тысяч строк. В кабинете видна сумма к перечислению, но не видна прибыль по каждому товару. Её считают вручную в Excel, а готовые сервисы просят API-ключ от кабинета. Решение https://statsvod.ru/ считает прибыль по каждому товару прямо из отчёта, без API-ключей: - браузер разбирает файл на месте, отчёт никуда не отправляется; - себестоимость учитывает даты: каждая продажа считается по цене своего дня; - на дашборде прибыль по товарам, ABC-анализ и выгрузка в Excel; - итог сверяется с отчётом до копейки тремя способами. Технические решения Потоковый парсер XLSX. Распакованный лист на 400 тыс. строк весит около гигабайта. Парсер читает его потоком в Web Worker и держит ключи товаров номерами до конца разбора. 400 тыс. строк разбираются за 4,5 секунды, каталог на 5000 товаров укладывается в 100 МБ. Сквозное шифрование себестоимости. Из пароля выводятся два ключа (PBKDF2 и HKDF): ключ шифрования остаётся в браузере, на сервер уходит только доказательство входа. Справочник шифруется AES-GCM, и даже полная утечка базы не раскрывает ни одной цены. Моя роль Всё делал один: продукт, архитектуру, фронтенд, бэкенд и инфраструктуру. Подробнее: https://ydy.su/portfolio/stat-svod https://ydy.su/blog/400-tysyach-strok-excel-v-brauzere-i-server-kotoryy-nichego-ne-znaet

Авторский фантастический 3D-концепт модульного космокорабля. Разработаны геометрия корпуса, кабины, крыльев и двигательных модулей, цветовое решение и студийная подача. Сборка показана целиком и с разнесёнными узлами, чтобы было видно устройство модели. Сохранены редактируемая сцена Blender и геометрическая сборка GLB. Демонстрационная работа для визуального портфолио.