Собственное портфолио
MOLYN
Персональное портфолио и система управления контентом для услуг по дизайну и разработке сайтов.
- Сайты под ключ
- Дизайн
- Разработка
- Запуск
Задача
Создать собственное портфолио MOLYN с нуля и превратить его из простой витрины работ в полноценный коммерческий сайт: с понятным позиционированием, кейсами, услугами, стоимостью, процессом и прямыми каналами связи. Я проектировал и разрабатывал сайт самостоятельно, поэтому одновременно нужно было выстроить визуальную систему, техническую архитектуру и удобный способ обновлять публичный контент без постоянных правок компонентов.
Решение
Главную страницу построил как последовательный маршрут: первый экран, работы, коммерческий CTA, специализация, услуги, результат, стоимость, процесс, информация обо мне, FAQ и контакты. В основе визуального направления — система Quiet Confidence: сдержанная палитра, крупная типографика, ясная иерархия, два уровня контейнеров и спокойная motion-система. Контент отделён от интерфейса: тексты, цены, проекты, порядок, видимость и медиа управляются через админку, а дизайн и логика компонентов остаются в коде.
Реализация
Проект собран на Next.js с App Router, TypeScript и Tailwind CSS. Контент проходит через JSON и Zod-валидацию, админка работает с тем же источником данных, а медиа поддерживают загрузку в Vercel Blob. В интерфейсе реализованы полноэкранный Hero с WebGL-фоном Grainient, typewriter, morphing Header, мобильное fullscreen-меню, интерактивный стек услуг, карточки стоимости, scroll-reveal и отдельные страницы кейсов. Отдельно проработаны адаптивность, reduced motion, keyboard navigation, доступность, SEO, canonical, robots, sitemap и production workflow на Vercel.
Результат
Получился самостоятельный продукт, который одновременно работает как портфолио, описание услуг и система управления контентом. Сайт показывает реальные работы, объясняет форматы сотрудничества и стоимость, описывает процесс и ведёт к прямому контакту. Ключевой публичный контент можно обновлять через админку, а новые проекты добавлять в существующую систему без пересборки основной дизайн-архитектуры. Проект продолжает развиваться итерациями, при этом базовая визуальная система и структура остаются едиными.
Планируете похожий проект?
Обсудить проект