Сайт использует cookie и localStorage для аналитики. Продолжая использование, вы даёте согласие. Подробнее
Главная Все проекты Что сделано Блоки сайта Telegram — @mbdezi
← все проекты WEB PROJECT 01 ● LIVE

okuname
Сайт-визитка разработчика

Персональный сайт в ретро-киберпанк эстетике. Анимированный терминал, canvas fluid-фон, WIN95 интерфейс-элементы — всё написано с нуля, без единого фреймворка.

HTML5 CSS3 Vanilla JS Canvas API Press Start 2P Pixel-дизайн SEO Responsive
Features

Что реализовано

CANVAS FLUID ФОН

Анимированный фон с blob-частицами на Canvas API. Реагирует на движение мыши, рассчитывается на сниженном DPI для производительности.

  • 26 независимых blob-частиц
  • Реакция на движение курсора
  • Compositing через screen-blend
  • DPR-aware рендер 0.68x

WIN95 ТЕРМИНАЛ

Анимированный терминал с typewriter-эффектом в стилистике Win95. Автоматически переключается между двумя версиями кода с плавным стиранием.

  • Посимвольная анимация набора
  • Подсветка синтаксиса Python
  • Автоцикл с эффектом стирания
  • Мигающий курсор

PIXEL LAYER

Плавающие pixel-частицы поверх контента. Создают атмосферу ретро-геймерского интерфейса. Анимируются независимо через CSS animation.

  • 22 независимых пикселя
  • Случайное расположение и задержка
  • Twinkle + float анимации
  • Фиксированный z-index слой

АДАПТИВНАЯ СЕТКА

Все секции адаптируются под мобильные. Используется clamp() для fluid-типографики и responsive grid без медиа-запросов там, где возможно.

  • Fluid typography через clamp()
  • CSS Grid с auto-fill
  • Мобильная навигация
  • Тест на реальных устройствах

SEO ОПТИМИЗАЦИЯ

Полная базовая SEO-оптимизация: мета-теги, Open Graph, robots.txt, семантическая разметка и оптимизация скорости загрузки.

  • Полный набор meta-тегов
  • Open Graph для соцсетей
  • Семантический HTML5
  • Preconnect для шрифтов

POPUP СИСТЕМА

Системный Win95-стиль диалог появляется через 5 секунд с конверсионным CTA. Закрывается крестиком или по клику на ссылку.

  • Задержка 5000ms
  • CSS transition анимация
  • Закрытие по клику
  • Analytics tracking

Блоки сайта

Из чего состоит сайт

Сайт-визитка разработчика — это не просто «страница обо мне». Каждый блок решает конкретную задачу: привлечь, объяснить, убедить и конвертировать посетителя в клиента.

HERO-СЕКЦИЯ

Первый экран — главный. Кто ты, что делаешь, как связаться. Анимированный заголовок, статус-бар «Доступен для заказов», кнопки CTA. Удерживает внимание с первых секунд.

ТЕРМИНАЛ WIN95

Интерактивный виджет в стилистике ретро-ОС. Анимированный вывод кода — показывает экспертизу без лишних слов. Живой символ курсора, циклическая смена версий кода.

БЛОК СТАТИСТИКИ

Четыре ключевых цифры: боты в продакшне, дни до прототипа, аптайм, поддержка. Мгновенно передаёт доверие через факты, без воды и самовосхваления.

КАРТОЧКИ УСЛУГ

Два формата работы с переключателем периодов подписки и динамическим расчётом цены. Glow-эффект при наведении, бейджи скидок, детальный список включённого.

ПОРТФОЛИО-ПРОЕКТЫ

Сетка проектов с тегами технологий, кратким описанием задачи и ссылкой на подробный кейс. Широкая карточка для главного проекта, CTA для новых клиентов.

ЧАT И CTA-БЛОК

Имитация диалога в Discord — показывает как проходит общение с клиентом. Рядом — призыв к действию с кнопками Telegram и Discord. Превращает интерес в заявку.

НУЖЕН ПОХОЖИЙ САЙТ?

Визитка, лендинг или корпоративный сайт — напиши, обсудим задачу. Без бриф-документов на старте.

Написать в Telegram ← К проектам