suslicke.com
Личный сайт-портфолио разработчика с креативным терминальным интерфейсом и навигацией через команды.
- Next.js
- TypeScript
- Tailwind
- Terminal UI
Задача
Заказчику нужно было портфолио, которое не теряется среди шаблонных сайтов и сразу даёт понять уровень разработчика. Обсудили цель — выделиться и при этом остаться удобным, — целевую аудиторию и то, какие проекты и навыки важно показать в первую очередь. Зафиксировали объём: концепцию, структуру разделов и требование к быстрой загрузке.
Решение
Спроектировали навигацию вокруг командного интерфейса в духе терминала и сразу собрали рабочий прототип в коде, проверяя внешний вид на живой версии. Реализовали сайт на Next.js: переходы по командам (about, skills, experience, projects, contact) и интерактивный челлендж hackme. По ходу разработки показывали прогресс и дорабатывали детали взаимодействия.
Результат
Получился нестандартный терминальный UX, который запоминается и отличает портфолио от типовых решений. Страницы загружаются быстро, а структура остаётся понятной даже тем, кто видит командный интерфейс впервые.
Подход и решения
Главная сложность была в балансе: сохранить эффектную терминальную метафору и при этом не отпугнуть посетителя, который ждёт привычный сайт. Продумали понятные подсказки и резервную навигацию, чтобы командный интерфейс воспринимался как игра, а не как барьер. Отдельное внимание уделили производительности, чтобы анимации и интерактив не замедляли загрузку.
Как мы вели проект
- 01
Обсуждение и требования
Созваниваемся с заказчиком, разбираем цели, аудиторию и ограничения, фиксируем объём работ.
- 02
Проектирование
Продумываем структуру, пользовательские сценарии, архитектуру и выбираем технологии под задачу.
- 03
Прототип в коде
Собираем рабочий прототип сразу в коде и согласуем интерфейс на живой версии, а не на статичных макетах.
- 04
Разработка
Пишем код итерациями, регулярно показываем прогресс и держим заказчика в курсе.
- 05
Тестирование и запуск
Проверяем на устройствах и сценариях, затем выкатываем в продакшен.
- 06
Поддержка и развитие
Остаёмся на связи, сопровождаем продукт и развиваем его дальше.
Технологии
- Next.js
- TypeScript
- Tailwind CSS
Другие кейсы
Хотите так же?
Опишите свой проект — предложим решение, сроки и стоимость без воды и обязательств.