Olexiy Hryhorash
Предложите Olexiy работу над вашим следующим проектом или зарегистрируйте профиль фрилансера и начинайте зарабатывать прямо сейчас.
Рейтинг
Уровень владения языками
Навыки и умения
Программирование
Дизайн и арт
Услуги
Продвижение
Портфолио
-
Онлайн-переводчик (Translator Online)
Веб-программированиеTranslator Online - это современное, быстрое и полностью адаптивное веб-приложение для бесплатного перевода текста. Проект реализован на чистом технологическом стеке (HTML5, CSS3 и JavaScript) без использования сторонних фреймворков.
Основные возможности и особенности проекта:
1. Интеграция с MyMemory API для осуществления точного перевода в реальном времени.
… 2. Динамическое кастомное выпадающее меню (Select) для быстрого выбора языков.
3. Функция "умного" реверса (Swap) - мгновенная смена направления перевода вместе с текстом и состояниями интерфейса.
4. Оптимизация запросов (Debounce) - перевод запускается автоматически через 500 мс после завершения ввода пользователем, что уменьшает нагрузку на API.
5. Надежное копирование результата в буфер обмена с помощью Clipboard API (с оптимизированным fallback-решением для старых мобильных устройств).
6. Современный UI/UX: стильный асимметричный градиентный фон, интерактивная анимация появления элементов с помощью Intersection Observer, полная адаптивность под мобильные экраны (Media Queries).
#frontend #javascript #html #css #api #responsive #uiux #freelance
-
Математический калькулятор (HTML / CSS / JavaScript)
Веб-программированиеИнтерактивный веб-калькулятор с современным дизайном для выполнения базовых математических вычислений в браузере.
Что реализовано в проекте:
1. Основные вычисления - полная поддержка сложения, вычитания, умножения, деления, вычисления процентов и работы с десятичными дробями.
… 2. Точность результатов - использование методов парсинга и ограничения знаков после запятой (.toFixed(10)) для корректного отображения финального результата.
3. Удобный интерфейс - сетка кнопок построена на основе CSS Grid, добавлен эффект размытия фона (backdrop-filter) и плавные CSS-анимации при загрузке страницы.
4. Валидация ввода - реализован лимит на максимальное количество символов (до 30), защита от двойного ввода операторов подряд и обработка ошибок (try/catch) с выводом сообщения "Error".
5. Адаптивный экран результата - длинные выражения и большие числа не ломают верстку, а автоматически скроллятся по горизонтали внутри дисплея.
6. Поодинокое удаление - добавлен функционал удаления последнего введенного символа (кнопка ⌫) для удобного исправления опечаток.
Стек технологий: HTML5, CSS3 (CSS Grid, Backdrop-filter, Keyframe Анимации), JavaScript Vanilla (DOM Events, Обработка строк, Логика вычислений).
-
Интерактивный список дел (JavaScript / LocalStorage)
Веб-программированиеДинамическое веб-приложение для планирования задач с интерактивным интерфейсом, системой счетчиков и сохранением состояния пользователя.
Что реализовано в проекте:
1. Полный CRUD-функционал (создание, чтение, переключение статуса выполнено/активно, удаление задач).
… 2. Работа с LocalStorage - данные пользователя надежно хранятся и не исчезают после перезагрузки страницы.
3. Интерактивные счетчики - автоматический подсчет общего количества задач, активных и выполненных пунктов в реальном времени.
4. Валидация форм - ограничения на максимальное количество символов (до 100), защита от пустых инпутов и лимит списка (до 30 задач).
5. Плавный UX - добавлены кастомные микроанимации (fade-in, bounce) для взаимодействия с интерфейсом и уведомлениями.
6. Адаптивная и кроссбраузерная верстка - интерфейс идеально масштабируется под мобильные устройства и десктопные мониторы.
Стек технологий: HTML5 (семантическая верстка), CSS3 (Flexbox, CSS Animations, Media Queries), JavaScript Vanilla (DOM Manipulation, LocalStorage API, Event Handling).
-
Сайт-портфолио веб-разработчика (HTML5 / CSS3 / JavaScript)
Веб-программированиеРазработка и верстка современного, адаптивного сайта-портфолио для презентации собственных проектов и навыков. Сайт создан с нуля на основе чистого кода, без использования сторонних конструкторов или тяжелых CSS-фреймворков, что обеспечивает максимальную скорость загрузки и оптимизацию.
Что было реализовано в проекте:
1. Семантическая и кроссбраузерная верстка (HTML5) с высокими показателями SEO и доступности.
… 2. Современный адаптивный UI (CSS3) с плавными переходами, ховер-эффектами для десктопа и кастомными интерактивными карточками.
3. Полная оптимизация под мобильные устройства - вся сетка элементов и футер гибко перестраиваются под любую ширину экрана (до 320px).
4. Интеграция динамического интерфейса и логики, демонстрирующая работу с DOM.
Сайт служит центральным хабом для демонстрации других моих веб-приложений, среди которых адаптивный математический калькулятор, приложение погоды (Weather App) с интеграцией API и менеджер задач (Smart To-Do List).
Стек технологий: HTML5, CSS3 (Flexbox/Grid, Media Queries), JavaScript (Vanilla JS), React.
Буду рад разработать для вас чистый, быстрый и удобный интерфейс!
#верстка #веб_разработка #frontend #html #css #javascript #react #portfolio #landing
-
Адаптивное веб-приложение погоды (Weather App)
Веб-программированиеСовременное, полностью адаптивное одностраничное веб-приложение (SPA) для отслеживания погоды в любой точке мира в реальном времени.
Проект прошел полный цикл глубокого рефакторинга логики и редизайна UI/UX интерфейса.
… Что было реализовано и оптимизировано:
1. Интеграция двух сторонних API: Geocoding API от Open-Meteo (для поиска точных координат по названию города) и сервиса wttr.in (для получения детальных метеорологических данных в формате JSON).
2. Динамическое изменение интерфейса: фоновые изображения левой панели и иконки (FontAwesome) автоматически адаптируются под текущее состояние погоды (ясно, облачно, дождь, гроза, переменная погода).
3. Устойчивость логики к ошибкам (Error Tolerance): реализовано дефолтное состояние (Variable) на случай получения нестандартных метеорологических кодов или ошибок сети.
4. UX-оптимизация: добавлено блокирование элементов интерфейса (input/button) и анимацию загрузки во время выполнения асинхронного запроса для предотвращения спама таймаутов. Поиск работает как по клику, так и по нажатию клавиши Enter.
5. Премиальный UI-дизайн: эффект матового стекла (Glassmorphic Backdrop Filter), плавные кастомные CSS-анимации с использованием cubic-bezier, кастомная иконка вкладки (Favicon в формате SVG).
6. Кроссбраузерная адаптивность (Media Queries): интерфейс полностью перестраивается под мобильные устройства. Реализованы сложные проверки на тип указателя устройства (media с pointer: coarse/fine), что позволило заблокировать ненужный мобильный скролл, сохранив идеальное отображение на ПК при масштабировании.
Стек технологий: #HTML5, #CSS3, #JavaScript (ES6+, Async/Await, Fetch API), #Geocoding, #UI_UX, #Responsive
Буду рад разработать для вас современный, быстрый и интерактивный интерфейс!