No Focus

Стильный и атмосферный лендинг, посвященный проблеме концентрации внимания. Проект демонстрирует навыки Pixel Perfect верстки и умение создавать сложные визуальные интерфейсы без использования фреймворков.

UI/UX и Дизайн-система

Проект акцентирует внимание на визуальной составляющей и типографике. Реализована продвинутая система темизации:

• Темизация на CSS Variables: Все цвета вынесены в переменные, что позволяет мгновенно переключать палитры без перерисовки DOM.
• 3 режима отображения: Светлая (День), Темная (Неон) и Автоматическая (синхронизация с системными настройками ОС через prefers-color-scheme).
• UX: Состояние темы сохраняется в LocalStorage, запоминая выбор пользователя при повторном визите.

Техническая реализация

В отличие от SPA-проектов, здесь упор сделан на фундаментальные веб-технологии и семантику:

• Semantic HTML5: Корректное использование тегов (<article>, <section>, <aside>) для доступности (a11y) и SEO.
• Modern CSS: Использование Grid Layout и Flexbox для построения адаптивных сеток. Верстка полностью отзывчива и корректно отображается на любых устройствах.
• BEM Methodology: Стили организованы по методологии БЭМ, что обеспечивает модульность и легкость поддержки кода.
• Vanilla JS: Вся логика переключения тем и интерактива написана на чистом JavaScript без зависимостей, что обеспечивает максимальную производительность и мгновенную загрузку (Lighthouse 100/100).

Этот проект — доказательство того, что я уделяю внимание не только сложной логике, но и качеству верстки, доступности и визуальной эстетике.