Одностраничный сайт, или «сайт-визитка». Здесь представлены ссылки на портфолио, резюме, контакты, социальные сети, блог и проекты — аналог Taplink, но с рядом современных возможностей и динамических функций.
-
Динамический перевод (RU/EN):
Переключение языков реализовано с помощью JavaScript. Тексты на странице, мета-теги и атрибут<html lang="...">обновляются автоматически без изменения URL. Язык по умолчанию определяется настройками браузера. -
Тёмная/светлая тема:
Удобное переключение между светлым и тёмным режимами с анимацией. Выбранная тема сохраняется вlocalStorageи применяется при последующих посещениях. -
Фоновое видео:
При загрузке сайта воспроизводится фоновое видео из папкиvideos/. Во время загрузки видео используется превью-изображениеimages/bg.jpg. Реализована поддержка всех современных браузеров и мобильных устройств. -
Динамический счётчик дней:
В описании Романа динамически рассчитывается количество дней с определенной даты, что отражает активность по созданию сайтов и написанию кода. -
Анимации и preload:
Плавное появление карточек (fade-in) и предзагрузка градиентов для эффектного отображения hover-эффектов. Также реализован звездный фон для темной темы. -
Адаптивный дизайн:
Сайт корректно отображается на различных устройствах благодаря современным методикам вёрстки и использованию CSS (с элементами Tailwind CSS).
- HTML5 — структурная разметка сайта с поддержкой видео.
- CSS3 — стилизация, анимации и адаптивный дизайн (с элементами Tailwind CSS).
- JavaScript — динамический перевод, переключение темы, управление видео, расчёт дней с начала активности, а также интеграция аналитики.
- Font Awesome — использование иконок для визуального оформления.
- Lenis — создание кроссбраузерного SmoothScroll.
-
Клонирование репозитория:
git clone https://github.com/baslie/baslie.github.io.git -
Запуск сайта:
Перейдите в директорию проекта и откройте файл
index.htmlв вашем браузере (можно использовать локальный HTTP-сервер для корректного отображения всех функций).
-
Локальное сохранение настроек:
Выбранный язык и тема сохраняются вlocalStorage, что обеспечивает постоянство настроек между сессиями. -
SEO-оптимизация:
Помимо обновления мета-тегов при переключении языка, сайт корректно формирует атрибутlangдля HTML, что способствует лучшей индексации. -
Производительность:
Реализована предзагрузка градиентов для карточек и оптимизированное воспроизведение фонового видео с fallback на статическое изображение. -
Кроссбраузерность:
Фоновое видео поддерживается во всех современных браузерах с автоматическим fallback на изображение при отсутствии поддержки.
Если у вас возникли вопросы, предложения или замечания, вы можете связаться со мной:
- Телефон: +7 952 679-77-76
- Почта: [email protected]
- Telegram: @roman_purtow
- WhatsApp: +7 952 679-77-76
- Instagram: @roman.purtow
- ВКонтакте: @roman.purtow
- YouTube: @roman-purtow
- GitHub: @baslie