DIGITAL ДЛЯ БИЗНЕСА · АРСЕНИЙ АСЯНОВ
EN RU

Разбор · Личное портфолио

Web Chef Portfolio

Витрина дизайнера и разработчика — одна длинная страница из пяти экранов: обложка, содержание, «Дизайнер», «Разработчик & Программист» и контакты. Работы открываются в каруселях с размытым фоном.

Тип
Личное портфолио
Сроки
16 июня 2026, 5 коммитов
Стек
HTML, CSS, JS в одном файле · Bebas Neue, DM Sans
Ссылки
живая страница ↗
код на GitHub ↗

Обложка, ширина 1440px.

Телефон, 393px.

Содержание на телефоне.

01

Для кого и зачем

Витрина для заказчиков, которым нужны и дизайн, и код. В ней собраны айдентика и визитки для бизнеса из Снежинска, карточки для онлайн-школ, учебные презентации, сайт онлайн-школы на Canva Sites и Telegram-бот на Python.

Задача страницы — сразу развести два направления, «Дизайнер» и «Разработчик & Программист», дать посмотреть работы крупно и привести к контактам: Telegram, ВКонтакте или почта.

02

Что сделано

  1. Обложкаимя крупным шрифтом, вторая половина каждого слова — контуром; фото в круге и плавающие плашки навыков
  2. Содержаниедва раздела во всю ширину; при наведении строку заливает чёрным, стрелка сдвигается
  3. Дизайнерведущая работа «Два Шефа», примеры работ и отдельный блок учебных презентаций
  4. Разработчик & Программистсайт HowToSayDasha, Telegram-бот, проекты на C++
  5. Контакты«Есть задача? Пиши.» и три способа связи
  • УстройствоОдин файл index.html без сборщика: стили, разметка и 22 блока script. Загружен через веб-интерфейс GitHub — 5 коммитов 16 июня 2026.
  • Шрифты и цветBebas Neue для заголовков, DM Sans для текста. Палитра — шесть переменных: фон #F5F4F0, чёрный #0E0E0E, акцент #5252E8, серый, линии и белый.
  • ДвижениеБлоки появляются через IntersectionObserver: сдвиг на 36px и прозрачность за 0,75 с по кривой cubic-bezier(.22,.8,.38,1), с задержками 0,12 / 0,26 / 0,42 с.
  • НавигацияПять точек справа подсвечивают текущий экран; переходы к разделам — плавной прокруткой.

03

Что получилось и что стоит знать

  • Узнаваемый характер из трёх приёмов

    Слова, наполовину залитые и наполовину нарисованные контуром (-webkit-text-stroke). Огромные светло-серые номера разделов «01» и «02». Тёмные обложка и контакты, между которыми лежит светлое содержание. Одна кривая cubic-bezier(.22,.8,.38,1) на всех появлениях и открытиях каруселей, поэтому движение ощущается цельным.

  • Все работы — внутри одного файла на 22,6 МБ

    Все 105 картинок (52 JPEG и 53 PNG) встроены прямо в index.html как base64. Файл весит 22 606 743 байта, со сжатием GitHub Pages по сети уходит около 15 МБ (замер 16 сентября 2026). Браузер скачивает все работы разом, даже если человек не откроет ни одной карусели, а base64 сам по себе примерно на треть тяжелее исходных картинок.

    Что поможет: вынести картинки в отдельные файлы нужного размера и подгружать их по мере прокрутки — первый экран станет лёгким.

  • У шрифтов нет кириллицы

    У Bebas Neue и DM Sans в Google Fonts есть только латиница. Поэтому «02», «HOWTOSAYDASHA» и «&» набраны Bebas Neue, а русские заголовки и текст рисуются системным шрифтом устройства: на Windows это Arial, на телефонах — свой. Отсюда разница между латинскими и русскими словами в одной строке.

  • Двадцать одна копия одной карусели

    У каждой галереи своё модальное окно и свой скрипт: 21 окно с почти одинаковыми функциями открытия, закрытия и перелистывания. Выглядят они одинаково — размытый фон, стрелки, точки, клавиши ← → Esc, — но любую правку, например свайп на телефоне, пришлось бы повторить 21 раз.

  • Доступность и «уменьшить движение»

    Пункты содержания и карточки работ сделаны блоками div с onclick, поэтому до них не добраться клавишей Tab. Плашки на обложке качаются бесконечно, а системную настройку prefers-reduced-motion страница не учитывает.

04

Как проверить

  • Открыть портфолио и пролистать все пять экранов big-portfolio ↗
  • Вес и число картинок — во вкладке «Сеть» инструментов разработчика index.html ↗
  • История загрузки файла коммиты ↗

Связь со мной

Есть задача?
Пиши.