Привет! ЯОлег КузьминFrontendРазработчикСанкт-Петербург, Россия

Food Delivery

E-commerce веб-приложение на React (Next.js) - сервис доставки еды (5 страниц: главная, корзина, форма, условия доставки, акции). Внешнее api (dadata.ru) для получения адреса.

•Поиск адреса доставки.

•Добавление, изменение, удаление товаров из корзины.

•Отображение количества товаров и общей стоимости.

•Подсчет минимальной и общей стоимости доставки.

•Заполнение формы заказа, кастомная валидация формы.

•Сохранение данных через Redux.

•Модальные окна (пустая корзина, условия на странице формы).

•Аккордеон на странице условий доставки.

•Адаптивная верстка Perfect Pixel по макету Figma от 320px.

•Проект полностью на React, Redux Toolkit.

•Препроцессор Sass.

•Модули scss для React.

•Cовременный роутинг от Next (App Router).

•Api для поиска адреса доставки (dadata.ru).

•Аккордеон на странице условий доставки на чистом CSS.

•Библиотека Swiper с настройками под разные устройства.

•Библиотека React Transition Group для анимации.

Lead Conveer

Сайт-лэндинг на React+Typescript (Next.js) - создание лидов для бизнеса.

•Слайдер с отображением кликабельной пагинации.

•Модальное окно с навигацией в мобильной версии.

•Воспроизведение видео-роликов.

•Аккордеон с независимыми друг от друга панелями.

•Адаптивная верстка Perfect Pixel по макету Figma от 320px.

•FSD-архитектура проекта.

•Препроцессор Sass.

•Модули scss для React.

•React + Next.js.

•Используется Typescript.

•Библиотеки swiper.js, classnames.

Doors Locks (в разработке)

E-commerce веб-приложение на React+Typescript (Vite) - магазин дверных замков.

•Слайдер с отображением пагинации и стрелок.

•Автоматические переключение слайдов.

•...

•FSD-архитектура проекта.

•Библиотеки swiper.js, react-transition-group.

•Используется Typescript.

•...

Colors

E-commerce веб-приложение на JavaScript и Pug (Webpack) - магазин красок. Внешнее api (mockapi.io) для получения данных.

•Слайдер с отображением пагинации и стрелок.

•Фильтрация по типам товаров.

•Сортировка по убыванию и возрастанию цены.

•Добавление товара в корзину.

•Изменение количества товаров в корзине.

•Расчет стоимости товаров в корзине.

•Удаление товара из корзины.

•Открытие и закрытие модального окна с корзиной.

•Семантическая структура html.

•Шаблонизатор Pug.

•Адаптивная верстка Perfect Pixel по макету Figma.

•Структура файлов, наименование классов в стиле BEM.

•Препроцессор Sass.

•Логика взаимодействия на JavaScript + библиотека Swiper.

•Загрузка данных с внешнего api (mockapi.io).

Frontend Cats

Веб-приложение на React+Typescript (Vite) - бесконечные картинки котиков. Внешнее api (thecatapi.com) для получения данных.

•Добавление в избранное и сохранение на клиенте.

•Просмотр избранного.

•Загрузка новой порции картинок при нажатии на кнопку.

•Бесконечный скролл с загрузкой данных.

•Многофункциональная кнопка взаимодействия с api.

•Отображение заглушки скелетон при загрузке картинки.

•Адаптивная верстка Perfect Pixel от 320px.

•Препроцессор Sass.

•Модули scss для React.

•Загрузка данных с внешнего api (thecatapi.com).

•Обработка ошибок и процесса загрузки данных.

•Используется Typescript.

Mesto Project

Веб-приложение JavaScript на классах ООП (Webpack) - общая галерея фотографий красивых мест от разных пользователей с возможностью получения, добавления, удаления, изменения фото. Используется внешнее api (api.nomoreparties.co).

•Получение карточек, данных пользователя с сервера.

•Добавление и удаление своих карточек. Чужие удалить нельзя.

•Удаление своих карточек. Чужие удалить нельзя.

•Добавление своих лайков и учет количества общих лайков.

•Изменение данных пользователя.

•Модальные окна (карточки, пользователь, нажатие на карточку).

•Кастомная валидация формы.

•Данные удаляются, изменяются, сохраняются на сервере.

•Семантическая структура html.

•Адаптивная верстка Perfect Pixel по макету Figma от 320px.

•Структура файлов, наименование классов в стиле BEM.

•Архитектура приложения через классы ООП.

•Препроцессор Sass.

•Сборка проекта через Webpack.

•Библиотеки Babel, Autoprefixer, Postcss, cssnano, Gh-pages.

•REST api (get, post, delete, patch, put) для изменения данных.

Film Camera Repair

Сайт-лэндинг по ремонту фотоаппаратов.

•Ввод почты и отправка формы.

•Семантическая структура html.

•Адаптивная верстка Perfect Pixel по макету Figma от 320px.

•Структура файлов, наименование классов в стиле BEM.

•Препроцессор Sass.

•Используется Flex.

Russian Travel

Сайт-лэндинг про путешествия.

•Семантическая структура html.

•Адаптивная верстка Perfect Pixel по макету Figma от 320px.

•Структура файлов, наименование классов в стиле BEM.

•Используется Flex, Grid.

•Несколько слоев фона.

How To Learn

Учебный сайт-лэндинг от Яндекс.

•Семантическая структура html.

•Структура файлов, наименование классов в стиле BEM.

•Используется Flex.

•Несколько слоев фона.

•Используются CSS анимации.