inHub Dev Log

Dev Log Chapter
DevLog Screenshot

Пре-продакшен, UI-driven подход и рождение inHub

Начата разработка личной веб-площадки, призванной стать центральным хабом для всех программных проектов. На этапе пре-продакшена был сформирован Project Vision с философией «One Mind. Endless Ideas». Был выбран UI-driven подход: проектирование технической архитектуры осознанно было отложено до полного понимания визуальных концептов. Отрисованы макеты Главной страницы в светлой и темной темах, а также продумана базовая навигационная логика с промежуточным хабом проектов. В процессе дизайна площадка получила официальное название inHub и была классифицирована как полноценный самостоятельный продукт, выступающий главным полигоном для освоения стека веб-технологий.

Архитектура без баз данных и выбор Markdown

Проведен детальный разбор логики работы будущего сайта и утверждена контентная архитектура. Принято стратегическое решение отказаться от тяжелых баз данных в пользу концепции Stateless на базе ASP.NET Core (Razor Pages). Для контентных разделов (Dev Log, One Man Army) внедрена система публикации через файловое хранилище .md документов. Планируется, что движок будет парсить блок метаданных YAML Front Matter для извлечения дат и тегов, а затем динамически оборачивать текст в утвержденный дизайн-код. Также зафиксирована раздельная логика маршрутизации: лента Dev Log будет строиться по принципу LIFO (новые посты сверху), а история автора — по принципу FIFO (хронологическое чтение).

DevLog Screenshot
DevLog Screenshot

Мастер-шаблон, SVG-графика и бесшовные темы

Дан старт фазе Production. Развернут базовый проект ASP.NET Core и создан мастер-шаблон _Layout. Ключевой фичей интерфейса стала механика динамического переключения Темной и Светлой тем оформления через CSS Variables без перезагрузки страницы. Для поддержки этой системы все текстовые указатели и растровые иконки были заменены на Inline SVG-графику. Использование свойства fill="currentColor" обеспечило автоматическое перекрашивание иконок при смене темы. Настроена среда горячей перезагрузки (Hot Reload), а базовая типографика выстроена вокруг семейства шрифтов Inter с внедрением тонких начертаний.

Верстка Главной страницы и CSS-маскирование

Сверстан главный экран (Hero Section) на базе Flexbox. В процессе выявилась проблема некорректного масштабирования фонового изображения на ультрашироких мониторах. Решением стала жесткая фиксация размера фона (1440x1080) с привязкой к центру и внедрение комбинированной CSS-маски с функцией calc() для плавного растворения границ изображения в базовом цвете. Для защиты десктопной верстки от деформаций применена блокировка ширины (min-width: 1200px) с активацией скролла. В навигационные карточки добавлены микро-взаимодействия: внешнее свечение и кастомная CSS-анимация @keyframes icon-pop для отклика иконок при наведении.

DevLog Screenshot
DevLog Screenshot

Сетка проектов и физика частиц на HTML5 Canvas

Разработана страница Projects. Архитектурно изменен подход к компоновке: блок InCubation перенесен внутрь общего Flex-контейнера, превратившись в «жидкий» замыкающий модуль (flex-grow), автоматически заполняющий пространство без единого media-запроса. Внутри этого блока развернута фоновая система частиц на базе HTML5 Canvas. Запрограммировано «дыхание вакуума»: броуновское движение точек с таймером, периодически собирающим из хаоса замирающие изометрические структуры кубов. Для карточек проектов реализовано послойное наложение постеров, где цветной слой плавно проявляется через CSS-транзиции при наведении.

Внедрение мультиязычности и отказ от хардкода

Спроектирована и внедрена система локализации интерфейса. Произведен полный отказ от хардкода: элементы UI вынесены в централизованные JSON-словари. Для их обработки написан LocalizationService, инжектируемый в Razor-страницы. Реализован механизм бесшовного переключения языков через глобальный перехватчик (middleware) в Program.cs. Выбранный язык фиксируется в сессии, а смена происходит прозрачно, с сохранением текущей страницы и без сложной серверной маршрутизации. Настроен динамический рендеринг контента с корректной передачей HTML-тегов из JSON-базы в модальные окна.

DevLog Screenshot
DevLog Screenshot

Эволюция галереи и нативный API просмотра

Начата стандартизация страниц проектов. Первоначальная идея горизонтальной карусели для медиа-галереи провалила тесты: смешивание форматов 16:9, 9:16 и видеороликов ломало композицию, а сжатие интерфейсов делало скриншоты нечитаемыми. Концепция была полностью переработана в пользу системы «Сетка категорий + Нативный Лайтбокс». Просмотрщик крупного плана построен на базе HTML-элемента

с использованием браузерного механизма Top Layer API. Это избавило архитектуру от CSS-конфликтов слоев (z-index) и обеспечило корректное наложение модального окна поверх остального контента. Написан JS-модуль для зацикленной навигации с клавиатуры.

DevLog Screenshot
DevLog Screenshot

Глобальная навигация и модуль квантовых ошибок

Завершена реорганизация системы «хлебных крошек» (Breadcrumbs). Логика их формирования перенесена на уровень глобального макета _Layout, что полностью исключило дублирование HTML-кода и рассинхронизацию стилей. Параллельно разработан кастомный модуль обработки серверных исключений (404/500). Через middleware UseStatusCodePagesWithReExecute запросы перенаправляются на единую страницу Error без изменения URL. Внедрена мультистатусная локализация и динамическая иллюстрация с Котом Шрёдингера, меняющаяся в зависимости от активной темы сайта.

Кастомный Markdown-движок и двуязычная архитектура

Реализована архитектура динамического C#-движка для публикации постов. Интегрированы библиотеки Markdig и YamlDotNet для автоматического считывания метаданных (дат, заголовков, массивов скриншотов) из YAML-шапок .md файлов. В MarkdownService настроен механизм парсинга двуязычных секций прямо в теле документов через HTML-комментарии ( и ) с подтяжкой текущего языка из сессии. Для раздела One Man Army разработана «газетная» Z-верстка на основе float с чередованием артов, а для Dev Log создан изолированный легковесный просмотрщик скриншотов (Lightbox).

Контекстная фильтрация и смена хронологии логов

Завершена верстка продуктовых страниц по стандартизированному шаблону. Проведена оптимизация производительности: тяжелые CSS-маски фонов заменены на предварительно обработанные изображения (background-image). Внедрена продуктовая идея контекстной навигации: теперь со страницы проекта можно в один клик перейти в журнал его разработки. Для этого в MarkdownService настроена фильтрация логов по параметру URL, при которой порядок постов автоматически меняется на прямой (\(1 \rightarrow 2 \rightarrow 3\)). Это позволяет читать историю создания продукта как последовательную повесть, сохраняя при этом чистоту архитектуры (KISS) без усложнения главного макета.

Screenshot view