Personal Bio Website with Custom Audio Player

Стильный персональный landing page с кастомным аудиоплеером, 3D эффектами и интерактивными элементами.

📌 О проекте

Личный проект-визитка с уникальным дизайном и интерактивными элементами. Разработан для демонстрации frontend навыков и создания запоминающегося онлайн-присутствия.

Концепция: Минималистичный тёмный дизайн с акцентами свечения, плавными анимациями и функциональным аудиоплеером.

🛠️ Технологии

• HTML5 — семантическая разметка, видео-бэкграунд
• CSS3 — продвинутые эффекты:
  • CSS анимации (keyframes)
  • Шумовая текстура с двойной анимацией
  • Свечения и тени (drop-shadow, box-shadow)
  • Backdrop-filter blur для стекломорфизма
  • 3D трансформации (perspective, rotateX/Y)
  • Адаптивный дизайн (медиа-запросы)
• JavaScript (Vanilla JS) — полный функционал:
  • Кастомный аудиоплеер с управлением
  • 3D эффект при наведении
  • Счётчик просмотров (localStorage)
  • Typewriter анимация в заголовке вкладки
  • Интерактивные tooltips
  • Интро-экран с анимацией

✨ Уникальные особенности

🎵 Кастомный аудиоплеер

• Полный контроль — play/pause, прогресс, громкость, время
• Визуальная обратная связь — анимированный прогресс-бар
• Адаптивный дизайн — перестраивается на мобильных
• Персистентность — сохранение состояния громкости

🎮 Интерактивность

• 3D эффект карточки — реагирует на движение мыши
• Анимированное интро — плавное появление
• Динамический title — typewriter эффект
• Умные tooltips — появляются при наведении

🎨 Визуальный дизайн

• Видео-фон с наложением шумовой текстуры
• Свечения и тени — создают глубину
• Стекломорфизм — прозрачные элементы с blur
• Минималистичная типографика — шрифт Inter

🚀 Запуск проекта

Проект статический. Чтобы посмотреть его локально:

1. Склонируй репозиторий:

   git clone https://github.com/bukabtw/fakecrime-bio.git

2. Открой файл index.html в любом современном браузере.

Или посмотри демо: GitHub Pages (будет доступно после настройки)

📁 Структура проекта

📸 Скриншоты

Адаптивная версия для мобильных

Интро-экран с анимацией

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

Шумовая текстура с анимацией

body::before {
    background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
    animation: bg-animation 0.2s infinite;
    opacity: 0.9;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    /* ... остальная анимация */
}

Кастомный аудиоплеер

// Полный контроль над аудио
audio.addEventListener('timeupdate', () => {
    const progress = (audio.currentTime / audio.duration) * 100;
    progressBarFill.style.width = `${progress}%`;
    progressThumb.style.left = `${progress}%`;
});

🎯 Что демонстрирует этот проект

• Глубокое понимание CSS — анимации, трансформации, фильтры
• Работу с медиа — видео, аудио, изображения
• Кастомные UI компоненты — нестандартный аудиоплеер
• Интерактивность — 3D эффекты, tooltips, анимации
• Внимание к деталям — микровзаимодействия, состояния

🔗 Ссылки

• Демо (GitHub Pages): Посмотреть работающий сайт

🎨 Дизайн-решения

• Цветовая палитра: Тёмная тема (#282828) с акцентами #655e5d
• Типографика: Inter — современный геометрический шрифт
• Иконки: Монохромные SVG с эффектом свечения
• Анимации: Плавные transition и keyframe анимации

---

👨‍💻 Автор

Кирилл Букарев
Frontend-разработчик

📫 Контакты:

• Telegram: @bukabtw
• Email: bukarev.k11@gmail.com
• GitHub: bukabtw

Личный проект, демонстрирующий навыки frontend разработки и дизайна.