Меня зовут Михаил, я веб-разработчик из Самары. Моя специализация — создание корпоративных сайтов, веб-приложений, лендингов и интернет-магазинов.

С 2022 года я работаю с современным фреймворком React и его расширением Next.js, создавая удобные, производительные и элегантные веб-продукты. Мой путь в веб-разработке начался в 2021 году с изучения HTML, CSS и JavaScript, что стало прочной основой для моего профессионального роста.

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

Я окончил 11 классов, колледж связи ПГУТИ, и в данный момент учусь в Поволжском государственном университете телекоммуникаций и информатики на факультете информационных систем и технологий. Моя специальность — сети связи и системы коммутации, обучение проходит в очно-заочной форме.

Я искренне люблю свое дело и стремлюсь развиваться как профессионал. В университете я являюсь активным участником студенческой жизни: принимаю участие в мероприятиях, состою в профкоме, нахожусь на посту председателя факультета информатики и вычислительной техники. А так-же, активно выступаю в качестве волонтера.

Для меня важно находить простые решения сложных задач, объединяя технологии и пользовательский опыт.

Образование

Неоконченное высшее

Мой стек

Инструменты, которыми я владею

• HTML
• CSS
• Js
• Figma
• ReactJs
• NextJs
• WebSocket
• MySQL
• Git
• Flex
• Bootstrap
• Sass
• Jquery
• Node js
• Adobe Photoshop
• Adobe Illustrator
• Adobe Premiere pro
• Blender

И этот список постоянно увеличивается

Пара слов о выполненных проектах

САТЭКО

Был выполнен заказ по созданию сайта для транспортной компании:САТЭКОДизайн и разработку. Все делал сам.
GitHub показать не могу, т.к там используются ключи к базе данных и админ панели. Это был мой первый многостраничный сайт написанный на ReactJs. После него я как раз таки пересел на NextJS ради серверного рендеринга и удобного роутера. На этом сайте тоже реализована админ панель на которой можно размещать либо удалять записи с вакансиями, а на странице Вакансии реализовано получение вакансий с базы данных. Организована функциональность форм, анимации. Данные с формы отправляются на эл. почту

МЕРА БИТУМ

Заказ по созданию сайта. Дизайн, верстка, функциональность форм. NextJsМЕРА

Домик в городе

Заказ по созданию сайта. Букинга загородных домовснятьдомвсамареДизайн был создан заказчиком через конструктор сайтов tilda. Был мной перенесен на React.
База данных: firebase, админ панель, рандомная загрузка карточек товара на главной странице, сортировка. Написан на чистом React

Пет-проект

Время от времени веду свой пет проект приложения такси, на NextJs. Бд mysql, сообщение между приложениями по ws, карты и маршрут - geoapify, расчет маршрута. Настроено pwa, приложение на android собрано через cordova. Аутентификация проходит по коду, отправленному на Email: Код генерируется на сервере и сохраняется в кратковременную бд Redis на 5 минут, затем отправляется на Email. Далее авторизация проходит записью JWT в куки и ls. Срок жизни куки 7дней. Информация о заказах приходит в зашифрованном виде, с помощью алгоритма aes-256-cbcGitHub

Тренировочные проекты

Мой первый проект интернет магазина на NextJs. Изначально подключал базу данных через готовый fetch api, использовал для этого сервис mockapi.io Он довольно сырой, некоторых страниц там нет.

Имеется еще один интернет магазин Здесь ситуация уже получше В этот проект я подключил уже базу данных mysql через rest api и настройке роутов. БД стоит на бесплатном хосте, поэтому периодически возможна долгая загрузка либо слет бд. Так-же написал админ панель, находится по адресу /admin в которой можно изменять статус заказа.
По большей части упор в этих проектах был сделан на функциональность. Реализована система аккаунтов, т.е у каждого пользователя свои данные, свои элементы в корзине. Это, практически первые шаги моей разработки в среде NextJS

WebGL 3D сцены

Погружение и изучение мира 3D графики в браузере, с помощью технологии WebGL Использовал библиотеку THREE.js. Для управления сценой заюзал @react-three/drei и @react-three/fiber для отрисовки сцены

• 📦 Структура сцен:
  • Использовано одно Canvas, внутри которого динамически рендерятся 3 сцены:
    • Телефон
    • Машина
    • Пассажир
    Каждая сцена обернута в <a.group> с анимацией scale и rotation.

🔁 Анимация и прокрутка:
Использован ScrollControls и useScroll из drei.
По значению прокрутки (scroll.offset * 3) определяется текущая сцена.
Переход между сценами происходит через useSpring.

📱 Адаптация под экран:
Отслеживается window.innerWidth с помощью useEffect.
Модифицируется camera.fov и позиционирование объектов в зависимости от ширины экрана.

📜 Прокрутка:
Сначала заблокирована прокрутка body (overflow: hidden), пока пользователь не доскроллит до конца 3D-сцен.
После — overflowY: scroll возвращается для обычной HTML-прокрутки.

🧠 Поведение элементов:
Использованы <Html> и <Text> внутри 3D-сцен.
Для некоторых элементов добавлена анимация появления/исчезновения (motion.div).
Применены Billboard и OrthographicCamera для фиксации объектов.