сайт-визитка в стиле «скетч»
одностраничный html-документ без зависимостей
- ручная вёрстка, никаких фреймворков
- чёрно-белая гамма + лёгкие серые оттенки
- адаптив под экраны до 700px
- все иконки и декорации — inline svg
- интерактив: копирование почты, плавный скролл
на сайте реализованы:
| элемент | описание |
|---|---|
| логотип-обезьяна | комбинация окружностей, линий, текстовых меток </> и { } |
| паттерн фона | повторяющаяся линейная градиентная полоса (имитация линованной бумаги) |
| декоративные линии | прерывистые (dashed) и пунктирные (dotted) полосы, волнистые пути |
| «дoodle-underline» | полоса из повторяющихся квадратов |
| карточки с поворотом | каждый блок sketch-card имеет случайный лёгкий наклон, меняющийся при ховере |
| сетка навыков | блоки с иконками и описанием, с разными углами поворота |
| лента тегов | технологические метки с индивидуальным вращением |
| примеры работ | три миниатюры с svg-иконками |
| кнопка скролла | анимированное появление временной метки «⇠ контакты» |
| уведомление о копировании | временное сообщение при клике на email |
- html5
- css3 (flex, grid, трансформации, transition, псевдоэлементы)
- svg (инлайн, до 16 уникальных иконок)
- javascript (только два обработчика: копирование и скролл)
- google fonts:
Indie Flower
достаточно скачать monkeddev.html и открыть в браузере.
никакого сервера не требуется.
- добавить реальные проекты вместо заглушек
- подключить форму обратной связи (без js можно через
mailto:) - сделать переключатель темы (белый / чёрный) — текущий дизайн позволяет
- добавить динамическую генерацию «скетч-линий» через canvas
- email:
monkeddev@inbox.ru— копируется по клику - telegram: @monkeddev
- github: monkedDev
последнее обновление: 2026-05-27