← Все проекты

Лендинги

Одностраничные сайты с упором на скорость, доступность и SEO. От голого стека без единой зависимости до вёрстки по дизайн-макету на Bootstrap — с реальными результатами PageSpeed по каждому.

Лендинг

Одностраничник для бизнеса

РольПроектирование структуры и текстов, вёрстка, фронтенд, бэкенд формы, оптимизация, SEO
СтекHTML5 · CSS3 · JavaScript · PHP — без фреймворков

Лендинг частного автоинструктора в Москве. Одностраничник на чистом стеке с акцентом на доверие: структура, тексты и блоки выстроены так, чтобы снять страх новичка за рулём. Технически выжат по максимуму — 100 / 100 баллов Performance в PageSpeed (десктоп и мобайл), 100 по доступности и 100 по SEO.

Открыть сайт

Вёрстка и стек

  • Чистый HTML5 / CSS3 / JS без фреймворков и сборщиков.
  • Адаптивная вёрстка; декоративные фоны секций через background-size: cover.
  • Все изображения в WebP с явными размерами → CLS = 0.
  • Тексты с упором на доверие: для начинающих, после неудачного опыта в автошколе, восстановление навыков после перерыва.

Форма заявки

Контактная форма с серверной обработкой на PHP — отправка через AJAX без перезагрузки страницы.

  • Honeypot-поле для отсечки ботов (скрытое поле, невидимое человеку).
  • Валидация на клиенте и на сервере.
  • Отправка заявки в мессенджер владельцу.

Производительность (PageSpeed 100 / 100)

Страница доведена до 100 баллов Performance и на десктопе, и на мобильных.

  • Критический CSS встроен в head — убран render-blocking запрос за стилем.
  • Шрифт Inter переведён на самохостинг: woff2-сабсет только под кириллицу, font-display: optional — ноль запросов к Google Fonts и ноль поздней перерисовки заголовков.
  • Hero-портрет в WebP, пережат и помечен fetchpriority=high (LCP-элемент).
  • Декоративные фоны секций ужаты (один тяжёлый фон был 579 КБ → 92 КБ), preconnect, defer на скриптах.

SEO и микроразметка

  • Schema.org / JSON-LD: LocalBusiness с адресом (PostalAddress).
  • Keyword-first title, корректная иерархия заголовков, Open Graph, canonical.
  • Осмысленные alt, семантические лендмарки.

Доступность (Accessibility 100)

  • Контраст доведён до WCAG AA по всем элементам: кнопки, ссылки, подписи полей формы, футер.
  • Лендмарк main, корректные label у полей формы, aria-метки.
  • Достаточные зоны нажатия и фокус-навигация.

Чем интересен проект

  • Эталон «выжатого» лендинга: 100 по всем трём метрикам Lighthouse сразу — встречается нечасто.
  • Самохостинг шрифта и инлайн CSS убирают сторонние зависимости из критического пути рендеринга.
  • Полный цикл: структура и тексты → вёрстка → форма на PHP → оптимизация → SEO.
Лендинг

Лендинг для бизнеса

РольВёрстка по макету, фронтенд, оптимизация производительности, SEO
СтекHTML5 · CSS3 · JavaScript — без фреймворков, библиотек и сборщиков

Одностраничный сайт ремонтной компании «FORMA» — ремонт квартир под ключ в Санкт-Петербурге. Собран на голом стеке: семантический HTML, нативный CSS и немного ванильного JavaScript, без единого фреймворка, библиотеки или сборщика. Главная цель — максимальная скорость и аккуратный мобильный UX. Страница доведена до 100 баллов PageSpeed на десктопе и 95 на мобильных при нулевом сдвиге макета (CLS = 0).

Открыть сайт

Вёрстка и стек

Чистый фронтенд без зависимостей. Шрифты — системный стек, поэтому страница не делает ни одного запроса к сторонним шрифтовым сервисам.

  • Семантическая разметка: лендмарк main, осмысленные секции, корректная иерархия заголовков.
  • Адаптивная mobile-first вёрстка на flex/grid с проработанным мобильным UX.
  • Интерактив (плавный скролл, навигация) на ванильном JS — без jQuery.
  • Кроссбраузерность и отзывчивость на всех брейкпоинтах.

Производительность

Скорость заложена в архитектуру страницы, а не прикручена постфактум.

  • Критический CSS встроен прямо в head — нет render-blocking запроса за внешним стилем.
  • Hero-фон загружается приоритетно через preload + fetchpriority=high — это LCP-элемент.
  • Все изображения переведены в WebP, у каждого явные width/height → сдвиг макета CLS = 0.
  • Скрипт с defer, чтобы не блокировать парсинг документа.

SEO и микроразметка

  • Schema.org / JSON-LD: HomeAndConstructionBusiness с перечнем услуг (Service), предложений (Offer) и областью обслуживания.
  • Keyword-first title, корректная иерархия H1–H3, осмысленные alt-тексты.
  • Open Graph, canonical, аккуратные метатеги.
  • Семантические лендмарки для доступности и индексации.

Доступность

  • Контраст по WCAG AA — тёмный текст на акцентных кнопках.
  • Семантические лендмарки и рабочие якоря навигации.
  • Осмысленные alt и доступные контактные ссылки (телефон, мессенджеры).

Чем интересен проект

  • Демонстрация того, что на голом стеке без единой зависимости собирается быстрый, доступный и SEO-готовый лендинг.
  • Производительность как приоритет: инлайн критического CSS и приоритизация LCP дают 100 / 95 в PageSpeed.
  • Полный цикл одним человеком: макет → вёрстка → оптимизация → SEO.
Лендинг

Лендинг онлайн-школы

РольВёрстка по дизайн-макету, фронтенд, интерактив, оптимизация, доступность
СтекHTML5 · CSS3 · JavaScript · Bootstrap 4 · jQuery

Лендинг онлайн-курса акварельной живописи «Петербург сквозь года». В отличие от остальных работ, собран по готовому дизайн-макету на сетке Bootstrap 4 с интерактивом на jQuery — показывает работу с популярным фреймворком и «живыми» элементами интерфейса. Акцент на атмосферном оформлении: кастомный декоративный шрифт в заголовках, акварельные коллажи, адаптивная подача.

Открыть сайт

Вёрстка и стек

Адаптивная вёрстка по готовому дизайн-макету на сетке Bootstrap 4.

  • Респонсив-сетка container / row / col на всех брейкпоинтах.
  • Фиксированный навбар с мобильным бургер-меню.
  • Кастомный декоративный шрифт BERNIER в заголовках — самохостинг woff2 (сабсет только под заглавную кириллицу: 2.19 МБ OTF → 123 КБ).
  • Акварельные коллажи и фоновые изображения через background-size: cover.

Интерактив (jQuery)

  • Аккордеон в блоке «Частые вопросы».
  • Переключатель валют ₽ / $ в карточках тарифов.
  • Раскрывающийся список красок (дропдаун).
  • Плавный скролл по якорям навигации.

Производительность и изображения

Со страницы вычищено около 530 КБ лишнего веса.

  • Все изображения переведены в WebP: hero-коллаж, тарифы, иконки, логотип.
  • Адаптивный hero через srcset — мобильным отдаётся версия полегче.
  • Декоративный шрифт пересабсечен под используемые глифы (2.19 МБ → 123 КБ).
  • Явные width/height, fetchpriority на hero, preconnect к CDN.
  • PageSpeed: 97 на десктопе, 82 на мобильных — потолок мобайла держит сторонний Bootstrap + jQuery, это сознательный компромисс для демо вёрстки по макету.

Доступность

  • Лендмарк main, aria-метки на бургер-кнопке.
  • Контраст фирменных оранжевого и синего доведён до WCAG AA.
  • Корректная иерархия заголовков и alt-тексты.
  • Accessibility 95 в Lighthouse.

Чем интересен проект

  • Показывает работу не только на голом стеке, но и с фреймворком: вёрстка по чужому макету на Bootstrap + jQuery.
  • Атмосферное оформление с кастомным шрифтом, аккуратно оптимизированным по весу.
  • «Живые» интерактивные элементы без тяжёлого JS-фреймворка.