От нуля к смелости: Создание и редизайн моего портфолио

astro blogging github pages design
• Nafty

История создания моего портфолио с нуля, его забвения на годы, и полного редизайна в смелом необруталистском стиле.

Логотипы Astro, Github Pages и Preact

Начало

В 2023 году я решил, что пора создать нормальное портфолио. Как и многие разработчики, я хотел место для демонстрации проектов, обмена мыслями и онлайн-присутствия. Я выбрал Astro за скорость и удобство разработки, добавил Preact для интерактивных компонентов и задеплоил всё на GitHub Pages.

Первая версия была функциональной, но безопасной. В ней были основы:

  • Простое переключение темной/светлой темы
  • Базовая интернационализация (Английский/Русский)
  • Карусель для постов блога
  • Стандартные карточки

Оно работало. Оно было… нормально.

Забытое портфолио

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

Но знаете, что сложнее, чем начать? Начать заново.

Катализатор перемен

Наконец, я больше не мог это терпеть. Я открыл сайт однажды и подумал: “Это ужасно. Макет ужасный. Контента почти нет. Переключатель темы сломан. Это нужно полностью переделать.”

И я сделал то, что делает любой разработчик перед лицом грязного старого проекта — решил переписать его с нуля.

Большой редизайн: Идём на смелость

На этот раз я хотел что-то другое. Никаких больше безопасных, обычных сайтов-портфолио. Я выбрал необруталистский дизайн:

Дизайнерские решения

1. Жирные границы везде

  • Границы 4px на всём
  • Жёсткие тени (без размытия)
  • Острые углы с минимальным закруглением
  • Высокий контраст между элементами

2. Розовый акцентный цвет

  • Светлый режим: Яркий #ff006e
  • Тёмный режим: Светлее #ff1a8c для лучшего контраста
  • Используется стратегически для CTA и состояний hover

3. Массивные, интерактивные элементы

  • Кнопки со смещёнными тенями, которые сдвигаются при наведении
  • Карточки, которые “выпрыгивают” при взаимодействии
  • Крупная, жирная типографика (шрифт Space Grotesk)
  • Щедрые отступы и паддинги

4. Современный технологический стек

  • Обновление до Astro v4
  • Удалил старый astro-i18next в пользу встроенного i18n
  • Добавил TailwindCSS для быстрой стилизации
  • Заменил багованную карусель на Preact на CSS scroll-snap

Что было исправлено

Переключатель темы: Полностью переписал логику. Теперь он правильно переключается между тёмной и светлой темами с первого клика, синхронизируется с localStorage и учитывает системные предпочтения.

Навигация: Создал правильное доступное мобильное меню с ARIA-атрибутами. Больше никакого дёрганого поведения гамбургера.

Макет: Теперь всё дышит. Добавил правильную систему контейнеров, последовательные отступы и липкий хедер, который не давит.

Типографика: Огромные, жирные заголовки. Правильные высоты строк. Читабельный основной текст. Всё прекрасно масштабируется от мобильных до десктопов.

Отображение контента: Заменил бесконечную карусель на чистую сетку карточек. Намного лучше UX.

Технические детали

Я сохранил современность и поддерживаемость:

// Чистый i18n роутинг
i18n: { 
  locales: ["en", "ru"], 
  defaultLocale: "en" 
}

// Tailwind для быстрой стилизации
class="px-6 py-3 bg-[var(--accent)] font-bold 
      border-4 border-[var(--border)] rounded-lg 
      shadow-[4px_4px_0_0_var(--border)] 
      hover:shadow-[2px_2px_0_0_var(--border)] 
      transition-all"

CSS кастомные свойства для тем:

:root {
  --bg: #fafafa;
  --fg: #0a0a0a;
  --accent: #ff006e;
  --border: #0a0a0a;
}

html.dark {
  --bg: #0a0a0a;
  --fg: #fafafa;
  --accent: #ff1a8c;
  --border: #fafafa;
}

Полная русская локализация

На этот раз я действительно закончил русскую версию. Каждая страница — главная, блог, обо мне, теги — полностью переведена и соответствует английской версии как по дизайну, так и по функциональности.

Чему я научился

1. Выпускайте сейчас, улучшайте позже — Моя первая версия простояла неиспользованной, потому что я ждал “идеала”. Лучше выпустить что-то и улучшать.

2. Смелый дизайн делает вас запоминающимся — Обычные портфолио сливаются. Отличительный стиль (даже если поляризующий) лучше, чем скучный.

3. Не переусложняйте — Я удалил сложную карусель на Preact и заменил её на CSS. Проще часто лучше.

4. Переключатели тем удивительно сложны — Правильно сделать тёмный режим со всеми крайними случаями требует больше усилий, чем кажется.

5. Доступность важна — Правильные ARIA-метки, навигация с клавиатуры и управление фокусом делают сайт лучше для всех.

Результат

Теперь у меня есть портфолио, которое:

  • Действительно представляет меня — Смелое, техническое, немного экстра
  • Отлично работает — Все функции работают как ожидается
  • Хорошо выступает — Быстрая загрузка, плавные взаимодействия
  • Поддерживается — Чистый код, современный стек, легко обновлять

Самое главное, я горжусь им делиться. Больше никакой неловкости при отправке ссылки.

Что дальше

Теперь, когда фундамент прочен, я могу сосредоточиться на том, что важно: создании контента. Больше постов в блоге о моих проектах, технических глубоких погружениях и экспериментах.

Портфолио — это не продукт, это платформа. И теперь платформа готова.

Уроки для коллег-разработчиков:

  • Не позволяйте вашему портфолио гнить
  • Смелый дизайн побеждает безопасный и скучный
  • Современные инструменты (Astro v4, Tailwind) делают переписывание быстрее
  • Иногда нужно начать заново, чтобы двигаться вперёд

Есть фидбек? Найдите меня на GitHub или напишите на sapkovich.vladislav@gmail.com.

А теперь пора писать следующий пост… 🚀

← Назад к блогу