iNewHomes — это средний по масштабу, но сложный в деталях проект. Он стал одним из моих любимых благодаря тому, что была возможность и достаточно времени проработать каждую мелочь. В команде с дизайнером мы пробовали разные варианты отображения компонентов, тестировали, переделывали, и, в итоге, создали красивый и удобный интерфейс, в котором доведено до ума всё, начиная от индикаторов загрузки и заканчивая сложной страницей поиска.
Отдельного внимания заслуживает адаптив сайта. Например, страница поиска, упомянутая выше, имеет сложную разметку из фиксированных элементов на десктопах, и нескольких переключаемых слоёв на смартфонах. Сама же форма поиска, когда активна, скрывает все остальные элементы сайта, и забирает страничный скроллбар для использования в своей выпадайке.
Также проект свёрстан под SPA: сайт покрыт контент‑плейсхолдерами и индикаторами загрузки. Проработаны состояния переходов.
<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Предпросмотр вёрстки https://shchukin.github.io/inewhomes-css/production
</aside>
Редкий проект с отдельной мобильной и десктопной версиями. Я организовал сборку и написал код таким образом что основная масса кода глобальна, а разные версии проекта наследую и дополняют этот код.
Так же проект представляет интерес нестандартной структурой страницы и тем что выполнен в тёмных тонах.
<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Предпросмотр вёрстки https://shchukin.github.io/gameslooper-css/public
</aside>
Развитие идеи глобальной кодовой базы до библиотеки компонентов. На протяжении нескольких лет компания создаёт проекты в едином стиле, что позволяет дополнять и многократно использовать компоненты из библиотеки.
Здесь интересны плавающие компоненты, глубокая проработка адаптива и элементы SPA.
<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Предпросмотр вёрстки https://shchukin.github.io/ege-css/production
</aside>
Увлёкшись тайским языком я обнаружил, что область образования сильно отстаёт по технологиям. Я не смог найти даже табличку с алфавитом. И сделал её сам. Но вместо PDF-документа для печати. Получилось интерактивный дашборд с несколькими вариантами отображения страницы, массой настроек, включая мультиязычность, возможностью выбора транскрипций, многочисленными подсказками, и, самое важное — озвучкой носителем языка.
Это некоммерческий пет-проект, на котором, за исключением озвучки нэйтивом, всю работу проделал я сам. Во-первых это, конечно, всё что касается тайского языка, структуры и подачи материала, мультиязычности и перевода. Во-вторых техническая сторона: дизайн, вёрстка, работа с аудио, деплой, тестирование.
<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Ссылка на проект https://thai-alphabet.com
</aside>