Обновление сайта nikonorow.ru | 2026

Продолжаю развивать свой сайт nikonorow.ru — это уже четвёртая статья о жизни сайта. Три предыдущих охватывают запуск сайта-портфолио, переход с Elementor на собственную тему в 2022 году и масштабный редизайн с добавлением новых разделов в 2023-м. Посмотреть как выглядел сайт до последних изменений можно — здесь.

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

Функциональные изменения (доработки) сайта

• Оглавление (TOC) на страницах статей. Скрипт автоматически сканирует заголовки h2 и h3 в тексте материала и строит интерактивный блок навигации прямо внутри страницы. При прокрутке текущий раздел подсвечивается — за счёт IntersectionObserver. На мобильных устройствах блок свёрнут по умолчанию и раскрывается кликом. Оглавление не отображается, если подходящих заголовков меньше двух — в таком случае оно не отображается.
• Время чтения в карточках статей. Оценка времени выводится во все карточки: в разделах, в архивах тегов и на страницах конкретных статей. В архивах (каталоге статей) расположена в одной строке с кнопкой «ЧИТАТЬ ДАЛЕЕ» — по правому краю, с той же иконкой, что и внутри поста. На странице статьи расположена под заголовком в начале страницы.
• Бесконечная прокрутка на главной странице. Новые статьи теперь подгружаются автоматически при достижении конца ленты — никаких кнопок. Реализовано на IntersectionObserver; пагинация работает через WP_Query с корректным offset, что исключает повторы и пропуски. Момент загрузки сопровождается CSS-анимацией с точками.
• Lazy loading изображений. Задействована нативная ленивая загрузка картинок WordPress — браузер запрашивает изображения только по мере их приближения к видимой области экрана. Это ускоряет первоначальную отрисовку страниц и снижает лишний трафик.
• PWA (Progressive Web App). Сайт теперь можно установить как приложение — на смартфоне, планшете или компьютере. Добавлены файл манифеста, иконки 192х192 и 512х512 px и Service Worker с кешированием ресурсов. SW обслуживается через отдельный PHP-обработчик напрямую, без редиректов — браузеры требуют именно такого поведения при регистрации воркера. Файл воркера написан на JavaScript и размещён в assets/js/sw.js.
• Индикатор прогресса чтения. Тонкая трехпиксельная полоска закреплена по нижнему краю шапки сайта и заполняется слева направо по мере прокрутки страницы. Технически всё просто: JavaScript слушает событие scroll, вычисляет отношение прокрученного расстояния к полной высоте страницы и записывает результат в процентах как ширину элемента #nBar. Но именно благодаря градиентной заливке -от фиолетового (#8b3ffd) к лаймовому (#bfff00) — этот крошечный элемент оживляет всю шапку и даёт читателю интуитивное ощущение, сколько материала ещё впереди.

Визуальные изменения сайта

Дизайн сайта теперь, с одной стороны, построен на глубокой тёмной палитре: фоновые слои уходят в насыщенный тёмно-фиолетовый (#1a0a2e), карточки и панели выполнены в более светлом мид-пёрпл (#2a1050) с тонкими полупрозрачными обводками. С другой стороны, весь интерфейс держится на двух акцентных цветах — электрическом фиолетовом (#8b3ffd) и кислотно-лаймовом (#bfff00): первый используется для интерактивных элементов, ссылок и свечений, второй вспыхивает в деталях — иконках, индикаторах, hover-эффектах. Типографика сочетает связку из двух шрифтов; все переходы плавные, используются элементы отсылающие некоторыми моментами к глассморфизму.

Общая атмосфера сайта — темный космос с фиолетовым свечением. Тени у карточек объемные и многослойные, с лёгким цветным ореолом, а не просто серым размытием. Фоновые блоки используют полупрозрачность и backdrop-blur, создавая эффект глубины без визуального перегруза. На мобильных устройствах сетка перестраивается — не просто сужается, а переосмысливается: текстовые блоки расширяются до краёв, отступы пересчитываются, элементы управления укрупняются. В результате сайт одинаково хорошо читается и на большом мониторе, и на экране смартфона.

На главной странице (на фоне) присутствует пик горного массива, затем идет затемнение к низу экрана. При создании визуала я закладывал идею верхушки айсберга, ведь главная страница еще мало о чем говорит, вся глубина — внутри статей.

Другие изменения

Огромное количество контента — на сайте опубликовано целых 110 статей различной направленности: от обзоров на тему гик культуры (музыки или, например, видеоигр) до впечатлений по работе с различными нейросетями. Благодаря ведению моего сайта мои работы заполонили русскоязычный интернет, каждый раз приятно удивляюсь, когда вижу свою работу из раздела «Арт» у кого-то на обложке, аватарке и так далее.

Дата глобального обновления: апрель 2026 год

Поделитесь публикацией