Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 5.52 KB

README.md

File metadata and controls

79 lines (51 loc) · 5.52 KB

Роман Пуртов — маркетолог и продюсер

Роман Пуртов

Одностраничный сайт, или «сайт-визитка». Здесь представлены ссылки на портфолио, резюме, контакты, социальные сети, блог и проекты — аналог Taplink, но с рядом современных возможностей и динамических функций.

Основные возможности

  • Динамический перевод (RU/EN):
    Переключение языков реализовано с помощью JavaScript. Тексты на странице, мета-теги и атрибут <html lang="..."> обновляются автоматически без изменения URL. Язык по умолчанию определяется настройками браузера.

  • Тёмная/светлая тема:
    Удобное переключение между светлым и тёмным режимами с анимацией. Выбранная тема сохраняется в localStorage и применяется при последующих посещениях.

  • Динамический фон:
    При загрузке сайта происходит обращение к API Unsplash, которое подбирает случайное изображение в жанре «лес, лесные массивы». Это позволяет сделать фон уникальным при каждом посещении.

  • Динамический счётчик дней:
    В описании Романа динамически рассчитывается количество дней с определенной даты, что отражает активность по созданию сайтов и написанию кода.

  • Анимации и preload:
    Плавное появление карточек (fade-in) и предзагрузка градиентов для эффектного отображения hover-эффектов. Также реализована загрузочная оверлей-анимация для улучшения восприятия при переключениях и загрузке фонового изображения.

  • Адаптивный дизайн:
    Сайт корректно отображается на различных устройствах благодаря современным методикам вёрстки и использованию CSS (с элементами Tailwind CSS).

Технологии

  • HTML5 — структурная разметка сайта.
  • CSS3 — стилизация, анимации и адаптивный дизайн (с элементами Tailwind CSS).
  • JavaScript — динамический перевод, переключение темы, загрузочный оверлей, динамический фон, расчёт дней с начала активности, а также интеграция аналитики.
  • Font Awesome — использование иконок для визуального оформления.
  • Unsplash API — получение случайного фонового изображения.

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

  1. Клонирование репозитория:

    git clone https://github.com/baslie/baslie.github.io.git

  2. Запуск сайта:

    Перейдите в директорию проекта и откройте файл index.html в вашем браузере (можно использовать локальный HTTP-сервер для корректного отображения всех функций).

Дополнительная информация

  • Локальное сохранение настроек:
    Выбранный язык и тема сохраняются в localStorage, что обеспечивает постоянство настроек между сессиями.

  • SEO-оптимизация:
    Помимо обновления мета-тегов при переключении языка, сайт корректно формирует атрибут lang для HTML, что способствует лучшей индексации.

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

Контакты

Если у вас возникли вопросы, предложения или замечания, вы можете связаться со мной: