Logo

Это портфолио своими руками с нуля

Почему я не стал пользоваться шаблонами и разработал собственный многоязычный сайт

UXfolio был слишком ограничивающим, а Behance хоть и удобен, но не совсем мой формат. Мне нужен был сайт, который будет расти вместе со мной, отражать мою идентичность и показывать настоящее продуктовое мышление и мои навыки в работе – поэтому я сам его спроектировал, задизайнил и написал для него тексты и код.

Portfolio website hero preview
В начале я создал логотип, на это ушло всего несколько часов.

Проект в двух словах

Моя роль

UX/UI-дизайн, UX-райтинг, бренд и логотип, фронтенд, локализация (EN → DE/RU), публикация

Сроки

~1 месяц нерегулярных вечеров после работы

Инструменты

Figma, VS Code, Tailwind, GitHub Pages, HTML/CSS/JS, ChatGPT, Google Docs, CodePen

Идентичность и брендинг UX / UI Контент и ToV Фронтенд Локализация (EN / DE / RU)

Вызовы

Создать профессиональную идентичность, придумать подходящий логотип и собрать адаптивное портфолио без шаблонов и без опыта full-time разработчика. Кроме того, нужно запустить сайт быстро и сделать его простым в обслуживании.

Задача

Создать адаптивный многоязычный сайт, который ясно рассказывает мою историю, показывает кейсы в едином формате и дает мне полный контроль над контентом, кодом и общей средой.

Мои основные достижения

  • Свой стиль и логотип, отражающие голос и работу
  • Универсальный шаблон кейсов для единого сторителлинга
  • Многоязычная структура (EN → DE/RU) заложена с первого дня
  • Быстрый статический стек с Tailwind на GitHub Pages
  • Доступные типографика и дизайн для легкого сканирования

Результаты

  • Сайт, который ощущается личным, внушает доверие и готов к росту
  • Четкий сторителлинг о навыках, процессе и реальных проектах
  • Полный контроль над хостингом, технической стороной и ядром SEO
  • Никакой привязки к провайдеру – всё работает из моего репозитория
  • Адаптивный сайт, которым я владею до последнего символа и пикселя

Процесс

Я подошел к созданию сайта как к небольшому продукту: небольшие блоки, реалистичные ограничения и быстрое обучение. Целью было создать не просто «сайт», а понятную, развивающуюся систему, которая растет вместе с моей работой.

  • Найти голос. Я наметил направления, собрал визуальные референсы и задал тон – простой, уверенный и теплый.
  • Сформировать идентичность. За пару часов я создал логотип и проверил, как он отражает меня и как выглядит в мокапах.
  • Спланировать работу. Далее я набросал в Figma первые страницы  – Главная, Обо мне, Портфолио, Контакты – с упором на десктоп.
  • Проверить ритм. Позже я сделал интерактивные мокапы, чтобы протестировать флоу, отступы и темп чтения до написания кода.
  • Отточить главное. В ходе ревью проработал несколько итераций финального дизайна и выбрал лучшую.
  • Собрать по блокам. С помощью HTML/Tailwind CSS/JS я разбил сайт на компонентные секции и подключил ChatGPT, ускорив разработку.
  • Добавить языки. Сначала все тексты я написал на английском, затем локализовал на DE/RU, сохранив тон и ясность.
  • Выйти в релиз. Опубликовал сайт на GitHub Pages, протестировал вживую и собрал документацию, чтобы будущие правки были проще.
Early Figma concept board showing page map for desktop and mobile
Ранний концепт-борд в Figma: первые страницы для запуска с акцентом на десктоп. Позже я переработал систему кейсов (отступы, пропорции и поля) для более плавного ритма чтения.

Ключевые решения и принципы дизайна

Вместо того чтобы выдавливать из себя раздел «до/после» для этого кейса, я хотел показать решения, которые сформировали этот сайт, и принципы, которые помогли поддержать его цельность – чтобы дизайн оставался ясным, гибким и отражал мою работу.

Принятые решения

  • С нуля и без компромиссов: полный контроль, выше эффективность личный бренд, который отражает меня. Кроме того, это инвестиция в новые навыки.
  • Собственный логотип вместо вордмарка: современный и личный символ с характером, который можно использовать в favicon, соцсетях и печати.
  • Сначала desktop, mobile потом: кейсы чаще читают с компьютера, так что, задав ритм чтения там, я смог сделать мобильные версии чище и быстрее.
  • Локализация вручную: тон, терминология и контекст крайне важны. Живой перевод вызывает больше доверия и в лучше в плане SEO и общего UX.

Принципы дизайна на практике

  • Ясность: четкая иерархия в кейсах: роль, результат и эффект считываются мгновенно.
  • Последовательность: система отступов и типографский ритм держат страницы вместе, а повторяемые блоки выравнивают текст и дизайн.
  • Идентичность: логотип, тон всего портфолио и цветовые решения формируют спокойный, дружелюбный бренд – от хедера до футера.
  • Гибкость: сайт собран как система (Tailwind + модульный контент), поэтому добавлять новые кейсы можно быстро и эффективно.

Результаты

Этот проект во многом изменил мой подход к дизайну и работе в целом. Я научился многим вещам, отточил существующие навыки и осознал всю мощь креативной свободы, когда нет ограничивающих факторов типа пейволов или прихотей площадки:

  • Читаемость. Четкая структура помогает воспринимать даже длинные страницы.
  • Мой бренд. Логотип и тон придают портфолио живой голос.
  • Контроль. Весь контент и код в репозитории без привязок и лишних плагинов.
  • Локализация. Ручной перевод сохраняет нюансы и показывает профессионализм.
  • Эффективность. Легкий билд делает страницы быстрыми и красивыми.
  • Эмпатия к разработчикам. Я на своей шкуре прочувствовал, какого им бывает.
Iteration 2 – reworked Case Studies layout with improved rhythm and spacing
Итерация 2, предпоследний макет – кейсы переработаны, система отступов пересмотрена, всё выверено и готово к переходу в код.
Early component frame showing aligned blocks and tidy structure
Все блоки создавались через систему компонентов, а тексты сразу собирались и переводились на три языка в удобной таблице.

Уроки

Этот проект – не просто упражнение в дизайне, это урок по созданию продукта от начала до конца. Я научился совмещать идентичность, структуру и код, сохраняя ясность и удобство.