Переделал сайт под lo-fi: дождь, пластинка и немного музыки

Раньше у меня был космос и матричный дождь из зелёных букв. Выглядело круто, и ровно на третий день мне стало в нём неуютно. Как будто каждый раз заходишь не на сайт, а в терминал посреди ночи.

Захотелось другого. Чтобы страница была как комната, в которой горит лампа, за окном моросит, а на столе крутится пластинка. Так и получился lo-fi.

☕ Что поменялось

Если коротко: всё. Если подробнее, то вот что можно найти.

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

Загрузка тоже стала другой: вместо полоски у меня «ставится пластинка». Показывается один раз за сессию, дальше не мешает.

Ещё есть ночная тема. Тот же сайт, только лампа потише. Кнопка в левом нижнем углу, а если у вас в системе уже стоит тёмная тема, сайт подхватит её сам.

🎧 Музыка, которую можно выключить

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

Дальше всё просто. Громкость раскрывается при наведении на кнопку, клавиша M включает и выключает звук, а музыка продолжает играть, когда вы переходите на другую страницу. И пока она играет, на заднем плане поднимается мягкий спектр, а цветные пятна на фоне чуть пульсируют в такт.

Если анимации вам вообще не нужны, рядом есть кнопка, которая выключает все эффекты. А если в системе стоит «уменьшить движение», сайт и сам успокоится.

🛠 Чем я занимаюсь

Я делаю сайты. Пока это самое короткое и самое честное описание.

• Сайты под ключ. Лендинги, корпоративные сайты, интернет-магазины. От разговора «что вообще нужно» до запуска.
• SEO-база и продвижение. Структура, мета-теги, микроразметка, скорость. Чтобы сайт находили, а не только любовались им.
• Логотип и мини-брендбук. Цвета, шрифты, варианты для соцсетей и сайта.
• Поддержка. Доработки, новые разделы, исправления. Сайт после запуска живёт дальше, и ему нужен кто-то, кому не всё равно.

Работаю без шаблонов и без воды. Спрашиваю, пока не пойму задачу, показываю промежуточный результат и не пропадаю на две недели. Если хочется прикинуть бюджет, на сайте есть калькулятор стоимости, он бесплатный и ни к чему не обязывает. А все услуги подробно расписаны здесь.

🗂 Последние проекты

Пока красил сайт, не забывал и про сами проекты. Вот что в последнее время делал.

KitsuneWatch. Сайт для просмотра аниме, работает как PWA. Токен от API Kodik спрятан на сервере, в браузер не попадает. Сейчас разбираюсь с индексацией в Google, и это отдельная история.

Random Challenge Hub. Рулетка игровых челленджей для стримеров: аукцион, оверлей для OBS, голосование чата. Всё работает в браузере и ничего никуда не отправляет.

Streamer Card. Сайт-визитка стримера на PHP и MySQL с нормальной админкой. Я придумывал её как эксперимент в свободное от заказов время, а потом увлёкся.

«Твой Кореновск». Движок городского новостного портала на PHP: новости, афиша, радио, погода. Самый «взрослый» из проектов, и самый шумный, потому что там живые люди.

Fluent RSS Reader. Пастельный RSS-агрегатор. Ставится как приложение и говорит на семи языках.

JSON/YAML Mind Map Visualizer. Вставляете данные, получаете интерактивную карту. Удобно, когда JSON на пятьсот строк, а голова одна.

Local Notes. Приватные заметки прямо в браузере, с шифрованием и без облака. Про него я уже рассказывал отдельно.

Всё это лежит в разделе «Проекты» на главной, у каждого есть описание и ссылки.

💬 Как со мной связаться

Проще всего написать в Telegram: @PsyGioX. Если интересно просто читать про технологии, игры и всякое интересное, заходите в канал PsyGioX TechVerse.

А сайт приглашаю потрогать самому. Включите музыку, переключите тему, посмотрите, как опускается игла. Если что-то выглядит не так или сломалось, напишите, я сразу посмотрю.

Хорошего вечера. Или утра. Тут как повезёт.