Артем Остапенко

Сайт-портфолио
веб-разработчика

Обо мне

  • Html
  • Css
  • Sass
  • Git
  • JavaScript
  • Vue.JS
  • Three.js
  • BEM
  • npm

Стек технологий

Что я могу Вам предложить?

Создание веб-сайтов и веб-приложений

Landing Page

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

Сайт визитка

Отличное решение для правильного позиционирования Вашего бренда.

3D сцены

Создание 2D и 3D сцен, симуляций, анимаций или демонстраций на основе JS, WebGL, Three.js.

Что включает в себя продакшн продукта?

Адаптивность

Ваш сайт будет корректно отображаться на экранах всех смартфонов, планшетов и ПК. Все для удобство Ваших клиентов.

Кроссбраузерность

Ваш сайт будет правильно отображаться во всех современных браузерах и на различных операционных системах.

Анимация

Анимации, интересные итерактивные элементы, 3D модели на сайте повышают интерес к вашему продукту и доверие потенциальных клиентов к Вашем бизнесу. А доверие приносит прибыль!

Последние проекты

BuildingInspection

Работа front-end разработчиком в команде компании Maricano Digital над SPA "Building Inspections" на VueJS.

Исходные данные: ТЗ, Backend API.

Объем выполненной работы:

  • Разработка новых компонент, добавление и улучшение функциональности приложения, командная работа github, Bootstrap.
  • Работа с Vuex, Router, LocalStorage, URLs
  • Работа с API, разработка UI для отображения/добавления/редактирования/удаления данных, реализация поиска/пагинации, всплываюшие окна, i18n
  • Создание модальных окон, аккордеонов, таблиц
  • Валидация данных, OAuth, Google ReCapture

Результат работы: Single Page Application

EarthGlobe

Интрерактивная анимация главного экрана с 3D сценой

Исходные данные: Дизайн-макет, ТЗ.

Объем выполненной работы:

  • Создание трехметной сцены на three.js: модель планеты Земля с двойной прозрачностью, автоматически вращается. Планета интерактивная: можно крутить в разные стороны, задана инерция. На внешней стороне шара расположены кликабельные асинхронно пульсирующие точки обозначающие города.
  • Программирование взаимодействия интерфейса и 3D модели, создание анимаций. На экране расположены плашки со странами с анимацией при нажатии. Запрограммировано взаимодействие точек на карте земного шара с информацией на экране и наоборот.
  • Создание адаптива.

Результат работы: Главный экран с анимаиями и 3D сценой.

Перейти на сайт
Evraz

3D Landing Page

Исходные данные: Дизайн-макет, ТЗ.

Объем выполненной работы:

  • Создание трехметной сцены для лендинга: пользователь движется железной дорогой по холмистой местности к городу возможнотей. Цвета и окружение серо-стальные, что соответствует направлению компании. По ходу следования пользователя появляются тексты, цитаты, картинки и другая инфографика. Фотографии кликабельные, их можно развернуть в модальном окне.
  • Программирование остановок, на которых появляется верстка. На остановках есть её подробное описание, истории персонажей, которые разворачиваются при повороте камеры направо, слайдер с картинками слева. Перед остановками есть дополнительные экраны с информацией. Лендинг также содержит множество интерактивных элементов: слайдеры, модальные окна, меню, переходы на остановки, интерактивная карта пути и прочие.
  • Адаптивная,кроссбраузерная верстка.

Результат работы: 3D Landing page.

Перейти на сайт
Brookfield

Верстка сайта на Vue.JS

Исходные данные: Дизайн-макет, ТЗ.

Объем выполненной работы:

  • Адаптивная,кроссбраузерная верстка лендинга. Для каждого экрана и отдельных повторяющихся элементов был создан компоненент на Vue.JS CLI.
  • Программирование интерактивных элементов: создание бургера, мобильного меню, формы подписки в модальном окне, двух видов слайдеров, аккордеона часто задаваемых вопросов.

Результат работы: Landing page.

Перейти на сайт
PadPlacement

Веб симуляция проводимости человеческим телом электричеста и обучения корректному расположению медицинского пада на тело для медицинских работников

Исходные данные: 3D модель тела человека, лампочки, картинка с устройством наложения, фон.

Объем выполненной работы:

  • Создана 3D сцена с телом человека, которая выполняет две обучающие функции для медицинского персонала. При движении мышкой создается проекция наложения медицинского пада на тело. К подбородку человека закреплен электрод (подразумевается). Чем дальше положение пада на теле от подбородка, тем меньше светится лампочка. Это свечение связано с проводимостью телом человека электричества и изменением сопротивления. При нажатии на кнопку мыши пад фиксируется на теле. Причем, если он находится в окрестности правильного места, то фиксируется на нем и появляется сообщение об успешном расположении. Для создания проекта использовалась библиотека Three.js (WebGL), шейдеры свечения (GLSL) и JavaScript.

Результат работы: Обучающая веб симуляция.

Перейти на сайт
pandaSwap

Создание главного экрана с интерактивной анимацией

Исходные данные: Макет главного экрана в Figma.

Объем выполненной работы:

  • кроссбраузерная верстка (HTML+BEM+CSS+SASS), создание адаптивности под все типы экранов (ПК, планшеты, мобильные телефоны);
  • программирование движения интерактивных элементов: панд и бамбука на JavaScript;

Результат работы: Главный экран с интерактивными элементами.

Перейти на сайт
Calibration

Веб симуляция калибровки медицинского оборудования

Исходные данные: 3D модель устройства, картинка с траекторией калибровки, фон.

Объем выполненной работы:

  • Создана 3D сцена с устройством и три уровня для обучения медицинского персонала: тренировка, практика и экзамен. Устройство жестко зафиксировано в нижней точке и свободно двигается в верхней, описывая некоторую траекторию движения. Цель симулятора - натренировать медицинского работника повторять эту траеторию с требуемой точностью. Правильная траектория парсится из картинки и используется для тренировки и прохождения экзамена. Для создания проекта использовалась библиотека Three.js (WebGL) и JavaScript.

Результат работы: Обучающая веб симуляция.

Перейти на сайт
ChooseVideoScene

3D Сцена с видео текстурами

Исходные данные: 3D модель сцены с телевизорами.

Объем выполненной работы:

  • Создана 3D сцена с телевизорами, на экранах которых загружается видео. Для создания проекта использовалась библиотека Three.js (WebGL) и JavaScript.

Результат работы: 3D Сцена с видео текстурами

Перейти на сайт
Textures-0

Интерактивная система моделирования течений жидкости

Исходные данные: численные схемы.

Объем выполненной работы:

  • Создание классовой структуры проекта, программирование алгоритма и написание шейдерных програм для моделирования течения жидкости и обтеканий тел с использованием текстур. Проект написан на чистом JavaScript и WebGL API (без использования любых сторонних библиотек).

Результат работы: Интерактивная система для моделирования течений жидкостей.

Перейти на сайт
dosport-0

< Верстка сайта спортивных площадок />

Исходные данные: дизайн-макет в Figma.

Объем выполненной работы:

  • кроссбраузерная верстка HTML5+BEM+CSS3(SASS);
  • адаптивность под все типы экранов (ПК, планшеты, мобильные телефоны) и программирование интерактивных элементов: кнопки, слайдер;

Результат работы: адаптивная и кроссбраузерная верстка сайта.

Перейти на сайт
void-0

# Верстка сайта разработки мобильных приложений и веб-сервисов

Исходные данные: дизайн-макет в Figma.

Объем выполненной работы:

  • кроссбраузерная верстка HTML5+BEM+CSS3(SASS);
  • адаптивность под все типы экранов (ПК, планшеты, мобильные телефоны) и программирование интерактивных элементов: кнопки, слайдеры;

Результат работы: адаптивная и кроссбраузерная верстка сайта.

Перейти на сайт
swippingMesh-0

Интерактивная анимация движения частиц

Исходные данные: техническое задание о разроботке анимации, которая имитирует движение жидкости.

Объем выполненной работы:

  • Создание классовой структуры для описания системы частиц и программирования её движения на чистом JavaScript (без использования любых сторонних библиотек). Для устранения задержки визуализации при большом количестве частиц, их прорисовка реализована при помощи WebGL API.

Результат работы: Браузерное решение для интерактивного взаимодействия с системой частиц, которая имитирует движение жидкости.

Перейти на сайт
kvpm-0

Сайт кафедры высшей и прикладной математики ГВУЗ “ПГТУ”

Исходные данные: тексты, картинки и пожелания.

Объем выполненной работы:

  • прототипирование сайта: создание схемы расположения элементов, картинок, текстов;
  • подбор цветов и шрифтов;
  • кроссбраузерная верстка (HTML+BEM+CSS+SASS);
  • адаптивность под все типы экранов (ПК, планшеты, мобильные телефоны) и программирование интерактивных элементов;
  • посадка на систему управления контентом Wordpress.

Результат работы: адаптивный и кроссбраузерный сайт, управляемый на Wordpress.

Перейти на сайт

Принципы работы

- 01 -

Максимальная вовлеченность в ваш бизнес

- 02 -

Постоянная обратная связь в удобных для Вас каналах коммуникации

- 03 -

Гибкая система оплаты

- 04 -

Обучение работы с сайтом

Мои контакты

Напишите мне и мы обсудим Ваш проект!