Olexiy Hryhorash
Offer Olexiy work on your next project.
Rating
Language proficiency level
Skills and abilities
Programming
Portfolio
-
Math Calculator (HTML / CSS / JavaScript)
Web ProgrammingAn interactive web calculator with a modern interface designed for performing basic mathematical operations directly in the browser.
Key features implemented in the project:
1. Core Calculations - full support for addition, subtraction, multiplication, division, percentage calculations, and decimal points.
… 2. Accurate Results - handles data parsing and decimal precision limits (.toFixed(10)) to ensure correct calculation outputs.
3. Modern Layout - structured using CSS Grid for the button layout, featuring a blurred background effect (backdrop-filter) and smooth CSS fade-in animations on page load.
4. Input Validation - includes a strict 30-character input limit, smart operator replacement to avoid consecutive syntax duplicates, and error handling (try/catch) displaying "Error".
5. Responsive Display - long mathematical expressions automatically scroll horizontally within the result display without breaking the layout.
6. Single Character Delete - implemented a backspace feature (⌫ button) to easily remove the last typed character and correct typos.
Tech Stack: HTML5, CSS3 (CSS Grid, Backdrop-filter, Keyframe Animations), Vanilla JavaScript (DOM Events, String Manipulation, Math Logic).
-
Interactive To-Do List (JavaScript / LocalStorage)
Web ProgrammingA dynamic web application for task management featuring an interactive UI, real-time counters, and persistent user state.
Key features implemented in the project:
1. Full CRUD functionality (creating, reading, toggling "done/active" status, and deleting tasks).
… 2. LocalStorage integration — user data is securely stored locally and persists even after refreshing the page.
3. Interactive counters - automatic real-time tracking of total, active, and completed tasks.
4. Form validation - includes a 100-character input limit, empty input protection, and a maximum list capacity (up to 30 tasks).
5. Smooth UX - custom CSS micro-animations (fade-in, bounce) applied for better user interaction and feedback messages.
6. Responsive & cross-browser design - the interface scales flawlessly across various screen sizes, from mobile phones to desktop monitors.
Tech Stack: HTML5 (semantic markup), CSS3 (Flexbox, CSS Animations, Media Queries), Vanilla JavaScript (DOM Manipulation, LocalStorage API, Event Handling).
-
Web Developer Portfolio Website (HTML5 / CSS3 / JavaScript)
Web ProgrammingDevelopment and layout design of a modern, fully responsive portfolio website tailored for showcasing web development projects and technical skills. Built entirely from scratch using clean, hand-written code without any bulky page builders or heavy CSS frameworks, ensuring lightning-fast performance and optimal loading speeds.
Key features implemented in the project:
1. Semantic and cross-browser HTML5 layout focused on SEO best practices and accessibility.
… 2. Modern, high-contrast responsive UI (CSS3) featuring smooth transitions, hover effects for desktop, and interactive elements.
3. Flawless mobile optimization - the entire element grid and footer dynamically adapt to any screen size (down to 320px) for a seamless mobile UX.
4. Clean JavaScript architecture to power dynamic interface components and DOM manipulation.
The website serves as a central hub demonstrating my other web applications, including a responsive Math Calculator, a dynamic Weather App with server-side API data fetching, and a Smart To-Do List manager.
Tech Stack: HTML5, CSS3 (Flexbox/Grid, Media Queries), JavaScript (Vanilla JS), React.
#frontend #web_development #html5 #css3 #javascript #react #portfolio #responsive #ui_design
-
Responsive Weather App with Geocoding API Integration
Web ProgrammingA modern, fully responsive Single Page Application (SPA) designed to track real-time weather conditions anywhere in the world.
This project represents a complete, deep logic refactoring and a total UI/UX redesign of an older codebase.
… Key Features & Technical Implementations:
1. Multi-API Integration: Successfully connects the Open-Meteo Geocoding API (for precise coordinate lookup by city name) and the wttr.in weather engine (to fetch detailed meteorological data in JSON format).
2. Dynamic UI Adaptation: The left panel's background images and weather icons (FontAwesome) automatically change based on the current weather state (sunny, cloudy, rainy, thunderstorm, variable).
3. Error Tolerance: Implemented a robust fallback state ("Variable") to handle unexpected weather codes or network errors gracefully without breaking the layout.
4. UX Optimization: Included interface state locking (disabling input/button) and a smooth loading animation during asynchronous fetch requests to prevent query spamming. The search works via both the "Search" button and the "Enter" key.
5. Premium UI Design: Features a modern Glassmorphism effect (backdrop-filter blur with subtle semi-transparent borders), custom CSS animations utilizing cubic-bezier curves, and a clean custom SVG favicon.
6. Cross-Device Responsiveness: Fully optimized for mobile screens. Advanced pointer queries (media with pointer: coarse/fine) ensure that unwanted mobile scrolling is locked while desktop scaling remains perfectly fluid.
Tech Stack: #HTML5, #CSS3, #JavaScript (ES6+, Async/Await, Fetch API), #Geocoding, #UI_UX, #Responsive
I would be happy to build a fast, modern, and highly interactive interface for your next project!