Веб-разработка

Портфолио · HTML · CSS · JavaScript · Python

Сайты на чистом коде, которые грузятся за секунду

Без конструкторов, без WordPress, без десятка подключённых библиотек. Пять работ ниже — это готовые сайты, которые можно открыть прямо сейчас и потыкать: посчитать смету, записаться к мастеру, собрать корзину.

0
внешних JS-библиотек в проектах
<500 КБ
вес страницы вместе с графикой
360px
минимальная проверенная ширина экрана
5
законченных сайтов в портфолио

Работы

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

Главная страница сайта турагентства «Морская Миля»
Заказ клиента · турагентство

Морская Миля — подбор и расчёт туров

Сайт турагента с живыми ценами: отели и стоимость ночей подтягиваются парсером с сайта туроператора, калькулятор считает вилку цены с учётом сезона и категории отеля. Работает на своём сервере в Docker и обновляется одним git push.

  • Калькулятор тура: направление, отель, даты, гости → честная вилка цены
  • Парсер цен на Python: обновляет каталог отелей по расписанию
  • Сервер на стандартной библиотеке Python, без единой сторонней зависимости
  • Docker, автодеплой с GitHub, HTTPS через Caddy
HTML/CSS/JSPython парсингDocker CI/CD

Действующий сайт клиента — покажу вживую по запросу.

Каталог интернет-магазина кофе «Зерно и Пар»
Демо · интернет-магазин

Зерно и Пар — магазин обжарщика кофе

Каталог из 12 сортов с фильтрами и поиском, карточка товара с выбором веса и помола, корзина с промокодом и оформление заказа в три шага. Корзина переживает перезагрузку страницы.

  • Фильтры по обжарке, способу заваривания и цене + сортировка
  • Быстрый просмотр товара: вес и помол меняют цену вживую
  • Корзина в localStorage, промокод, расчёт доставки
  • Оформление: контакты → доставка → подтверждение, с валидацией
каталогкорзина localStorageвалидация форм
Виджет онлайн-записи на сайте студии красоты «Мята»
Демо · салон красоты

Мята — студия красоты с онлайн-записью

Главное здесь — виджет записи: услуга, мастер, дата, свободное время. Он знает расписание каждого мастера, длительность услуги и уже занятые слоты, поэтому записаться на занятое время просто нельзя.

  • Запись в пять шагов с прогрессом и возвратом назад
  • Календарь на две недели, сетка слотов по расписанию мастера
  • Услуга на 90 минут блокирует три слота подряд
  • Прайс и карточки мастеров предзаполняют виджет
виджет записикалендарь расписаниеa11y
Калькулятор сметы на лендинге ремонта «Прораб Групп»
Демо · ремонт под ключ

Прораб Групп — ремонт квартир под ключ

Классическая связка для строительной ниши: квиз собирает заявку по шагам, калькулятор тут же показывает смету построчно, а слайдер «до/после» продаёт качество работ лучше любого текста.

  • Квиз из пяти шагов с расчётом вилки цены по ответам
  • Калькулятор сметы с детализацией по строкам и доп. работами
  • Слайдер «до/после»: мышь, палец и стрелки на клавиатуре
  • Таймлайн этапов и сравнение пакетов ремонта
квиз-воронкакалькулятор до/послетаблица тарифов
Программа курса и тарифы онлайн-школы «Кодовое слово»
Демо · онлайн-школа

Кодовое слово — курс веб-разработки

Длинная продающая страница, где много данных и всё равно не душно: программа из восьми модулей, три тарифа с пересчётом на рассрочку, отзывы, FAQ и честный таймер набора.

  • Программа-аккордеон: 8 модулей, 54 урока, 6 проектов
  • Тарифы с переключателем «сразу / рассрочка» и таблицей сравнения
  • Таймер до конкретной даты набора, без фальшивого сброса
  • Выбор тарифа подставляется в форму записи
длинный лендингтарифы аккордеонтёмная тема

Что делаю

Беру задачу целиком: от вёрстки до сервера, который принимает заявки.

01

Лендинги и сайты услуг

Одностраничники с квизом, калькулятором и приёмом заявок. Адаптив от 360px, проверка на реальных устройствах.

02

Небольшие магазины

Каталог, фильтры, корзина, оформление заказа. Без тяжёлых CMS — заказчик правит товары в одном понятном файле.

03

Калькуляторы и виджеты записи

Расчёт стоимости, подбор, онлайн-запись с расписанием. То, ради чего клиент чаще всего и заказывает сайт.

04

Telegram-боты

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

05

Парсеры и автоматизация

Сбор цен и данных с сайтов, обновление каталога по расписанию, выгрузки. Python, без ручной работы.

06

Ускорение существующих сайтов

Разбор Core Web Vitals, тяжёлых картинок и лишних скриптов. С отчётом «было / стало» в цифрах.

Как работаю

Без «пришлю через недельку»: этапы, сроки и понятные точки приёмки.

  1. Разбор задачиЗадаю вопросы про бизнес и клиентов, а не про «сколько блоков». На выходе — список секций и функций с ценой.
  2. Прототип и структураСогласуем, что и в каком порядке на странице, до того как написана первая строчка кода.
  3. Вёрстка и логикаПоказываю промежуточный результат по ссылке — правки вносим по ходу, а не в конце.
  4. ПроверкаМобильные, консоль, скорость, доступность с клавиатуры. Отдаю с отчётом, что проверено.
  5. ПередачаИсходники, инструкция «как менять тексты и цены» и две недели правок после сдачи.

Расскажите, что нужно сделать

Отвечу в течение дня: скажу срок, цену и что из этого реально нужно, а без чего можно обойтись. Оценка задачи бесплатная.