Описание проекта: Интерактивное веб-резюме в стиле Киберпанк

Введение

Этот проект представляет собой современное интерактивное веб-резюме, разработанное для демонстрации профессиональных навыков и опыта. Он создан как одностраничное
приложение (SPA), которое динамически загружает данные из JSON-файла и отображает их в привлекательном интерфейсе. Проект ориентирован на простоту использования,
быстродействие и адаптивность, что делает его идеальным для размещения на личном сайте или портфолио. Особый акцент сделан на киберпанк-стиле, который подчеркивает
технологичность и футуристичность.

Технологии

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

• HTML5: Структура страницы с семантическими элементами для лучшей доступности.

• CSS3: Кастомные стили с использованием Flexbox и Grid для адаптивного дизайна. Поддержка темной темы и анимаций.

• JavaScript (ES6+): Чистый JavaScript для логики приложения, включая асинхронную загрузку данных, обработку событий и манипуляцию DOM.

• JSON: Для хранения данных резюме (опыт работы, образование, навыки и контакты).

• Git: Версионирование кода с использованием GitLab CI для автоматизации развертывания.

Интересные решения

Проект включает несколько нестандартных решений, которые делают его функциональным и удобным:

• Асинхронная загрузка данных: Данные резюме загружаются из файла resume.json с помощью Fetch API. Реализована обработка ошибок и состояние загрузки, что
  обеспечивает надежность.

• Поддержка темной темы: Автоматическое применение темной темы с возможностью кастомизации через CSS-переменные. Тема сохраняется в localStorage.

• Плавная прокрутка и навигация: Реализована плавная прокрутка к разделам с помощью JavaScript, улучшающая пользовательский опыт.

• Поддержка печати: Специальные стили и скрипты для корректного отображения резюме при печати, включая показ всех элементов и анимаций.

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

• Адаптивность: Дизайн адаптируется под разные экраны, включая мобильные устройства, с использованием медиа-запросов.

• Безопасность: Экранирование HTML для предотвращения XSS-атак при рендеринге данных.

Стилистика и CSS эффекты для темы Киберпанк

Стилистика проекта сочетает минимализм и современность с элементами киберпанк-эстетики. Основная тема — темная, с акцентами на контрастные цвета (темно-синий,
зеленый, неоновые оттенки). Фон включает изображения городских пейзажей и эффекты дождя, что добавляет атмосферности. Шрифты и иконки подобраны для читаемости и
профессионального вида. В целом, дизайн подчеркивает технологичность и креативность, делая резюме не просто списком фактов, а интерактивным портфолио.

Разбор CSS эффектов для Киберпанк-темы

Киберпанк-эффекты реализованы через комбинацию CSS-переменных, градиентов, анимаций и фильтров. Вот как это устроено:

1. CSS-переменные для цветовой палитры:

   • В файле theme.css определены переменные, такие как --bg: #0b0f14 (темный фон), --text: #e6f1ff (светлый текст), --accent-cyan: #00e5ff (неоновый
     голубой), --accent-magenta: #ff2aa1 (неоновый розовый) и --accent-amber: #ffb300 (янтарный).

   • Эти переменные позволяют легко менять цвета по всему проекту, сохраняя киберпанк-стиль с неоновыми акцентами.

2. Стеклянные панели (Glassmorphism):

   • Класс .glass использует background: var(--panel) (полупрозрачный белый), border: 1px solid var(--panel-border) и backdrop-filter: blur(12px) saturate(200%) brightness(0.8).

   • Это создает эффект прозрачных панелей с размытием фона, типичный для киберпанк-дизайна. Добавляется box-shadow: var(--glow) для неонового свечения.

3. Градиенты и неоновые эффекты:

   • Градиенты используются в --gradient-primary: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta)) для акцентов.

   • Класс .gradient-text применяет градиент к тексту с помощью -webkit-background-clip: text и -webkit-text-fill-color: transparent, создавая неоновый эффект
     на заголовках.

   • Эффект .neon-glow добавляет text-shadow с несколькими слоями для имитации свечения.

4. Анимации и динамика:

   • Анимация .energy-pulse использует @keyframes pulse для пульсации элементов, имитируя “энергию” в киберпанк-стиле.

   • Эффект .scan-lines создает линии сканирования с помощью background: linear-gradient и анимации, добавляя футуристический вид.

   • Глитч-эффект .glitch использует псевдоэлементы с анимациями для имитации цифровых помех.

5. Фоновые эффекты:

   • В base.css фоновая картинка города накладывается с помощью background: url("../assets/images/backgrounds/bg-city-landscape.png").

   • Дождевой оверлей добавляется через ::after с background: url("../assets/images/overlays/rain-tile.png") и анимацией @keyframes rain-fall для движения
     капель.

   • Адаптация под ориентацию экрана через медиа-запросы @media (max-aspect-ratio: 3/4).

6. Интерактивные элементы:

   • Кнопки и ссылки используют transition: all 0.3s ease для плавных изменений при наведении, с добавлением transform: translateY(-2px) и box-shadow для
     эффекта подъема.

   • Темная тема переключается через атрибут data-theme на корневом элементе, что позволяет мгновенно менять всю палитру.

Эти эффекты создают атмосферу футуристического города, где элементы “оживают” с неоновыми бликами и анимациями, подчеркивая технологическую направленность резюме.

Заключение

Да просто решил, что надоело унылое стандартное резюме.
Что я, не разработчик чтоли?
Захотел красиво!
Даешь киберпанк!