Алексей Пудочев

Frontend разработчик

UI UX дизайнер

pixel perfect

Mobile-first

iphone
macbook

Молниеносная загрузка

fast_load

Чистый код

<ul>

<li>Семантичный Html</li>

<li>Современный стек</li>

<li>Высокая производительность</li>

</ul>

Быстрая разработка

Месяцы

Недели

Проекты

Небольшая подборка моих работ

Next.js, tailwind css, graphcms

Catalyst

cover of project

Сайт для консалтингового агентства

Разработка под ключ многостраничного сайта. Дизайн в стиле glassmorphism, высокая производительность, возможность самостоятельного создания новых страниц через cms, прием заявок на почту

Посмотреть

Наполняется заказчиком

Дизайн

Перед мной стояла задача сделать дизайн одновременно современным и строгим. Одним из последних трендов является glassmorphism.

1_neYOcbYpPcvHoX0leSjH7w.png

Особенность в том, что элементы интерфейса похожи на матовые стекла, то есть просвечивают ниже лежащий контент.

Для сохранения сдержанности и премиальности цветовая гамма была сокращена вплоть до двух цветов: оружейный металл и изумруд.

pallette.jpg

Разработка

Было важно набрать высокие показатели в метрике Google Lighthouse. Для их достижения я выбрал фреймворк next.js. Он позволяет реализовать статическую генерацию (SSG). То есть при изменении контента происходит сборка, которая преобразует js код в html, из-за чего достигается очень высокая скорость загрузки. Для данного кейса такой подход максимально релевантен, так как контент меняется не часто.

Group 38.jpg

Немного бекенда

Next.js также предоставляет возможность писать серверную логику прямо в клиенте. Конечно для больших проектов это не совсем уместно. Но написать немного логики в короткий срок самое то. В данном проекте эта функция была использована при написания api для отправки электронной почты. Нужно это для сборка заявок на корпоративную почту.

Управление контентом

Заказчик хотел изменять контент самостоятельно, для этого я выбрал graphcms. Она обладает приятным интерфейсом и не требует отдельного хостинга. Но при этом предоставляет и бесплатный тариф, которого более чем хватило для данного проекта.

С помощью cms можно управлять как спектром услуг, который отображается на главной странице, так и страничным наполнением впринципе.

Screenshot 2022-06-20 191153.png

Gatsby, React, Strapi

Premium73

cover of project

Лендинги для стоматологии

Несколько страниц с возможностью сбора заявок на почту и аналитические сервисы

Посмотреть

Наполняется заказчиком

Оптимизация

Этот проект был имеет высокие показатели метрик Google Lighthouse. Это дает высокие позиции в поисковиках и большую конверсию. Достигнуто это было с помощью JAM Stack. То есть есть Headless CMS, в которой можно управлять контентом и клиентская часть, которая генерируется в статический html каждый раз при изменении контента.

Благодаря этому удалось достичь таких показателей:

image 12.webp