Olexiy Hryhorash
Zaproponuj Olexiy pracę nad swoim kolejnym zleceniem.
Ranking
Poziom znajomości języków obcych
Umiejętności i kwalifikacje
Usługi
Portfolio
-
Tłumacz online (Translator Online)
Programowanie stron internetowychTranslator Online to nowoczesna, szybka i w pełni responsywna aplikacja internetowa do bezpłatnego tłumaczenia tekstu. Projekt zrealizowano na czystym stosie technologicznym (HTML5, CSS3 i JavaScript) bez użycia zewnętrznych frameworków.
Główne możliwości i cechy projektu:
1. Integracja z MyMemory API w celu dokładnego tłumaczenia w czasie rzeczywistym.
… 2. Dynamiczne, niestandardowe rozwijane menu (Select) do szybkiego wyboru języków.
3. Funkcja "inteligentnego" odwrotu (Swap) - natychmiastowa zmiana kierunku tłumaczenia wraz z tekstem i stanami interfejsu.
4. Optymalizacja zapytań (Debounce) - tłumaczenie uruchamiane automatycznie po 500 ms od zakończenia wprowadzania przez użytkownika, co zmniejsza obciążenie API.
5. Niezawodne kopiowanie wyniku do schowka za pomocą Clipboard API (z zoptymalizowanym rozwiązaniem fallback dla starszych urządzeń mobilnych).
6. Nowoczesny UI/UX: stylowe asymetryczne tło gradientowe, interaktywna animacja pojawiania się elementów za pomocą Intersection Observer, pełna responsywność na ekrany mobilne (Media Queries).
#frontend #javascript #html #css #api #responsive #uiux #freelance
-
Kalkulator matematyczny (HTML / CSS / JavaScript)
Programowanie stron internetowychInteraktywny kalkulator internetowy o nowoczesnym designie do wykonywania podstawowych obliczeń matematycznych w przeglądarce.
Co zostało zrealizowane w projekcie:
1. Podstawowe obliczenia - pełne wsparcie dla dodawania, odejmowania, mnożenia, dzielenia, obliczania procentów oraz pracy z ułamkami dziesiętnymi.
… 2. Dokładność wyników - wykorzystanie metod parsowania oraz ograniczenia liczby miejsc po przecinku (.toFixed(10)) dla poprawnego wyświetlania ostatecznego wyniku.
3. Wygodny interfejs - siatka przycisków zbudowana na podstawie CSS Grid, dodany efekt rozmycia tła (backdrop-filter) oraz płynne animacje CSS podczas ładowania strony.
4. Walidacja wejścia - zrealizowano limit na maksymalną liczbę znaków (do 30), ochrona przed podwójnym wprowadzaniem operatorów oraz obsługa błędów (try/catch) z wyświetleniem komunikatu "Błąd".
5. Responsywny ekran wyniku - długie wyrażenia i duże liczby nie łamią układu, a automatycznie przewijają się poziomo wewnątrz wyświetlacza.
6. Pojedyncze usunięcie - dodano funkcjonalność usuwania ostatnio wprowadzonego znaku (przycisk ⌫) dla wygodnego poprawiania błędów pisarskich.
Stos technologii: HTML5, CSS3 (CSS Grid, Backdrop-filter, Animacje kluczowe), JavaScript Vanilla (Zdarzenia DOM, Obsługa ciągów, Logika obliczeń).
-
Interaktywna lista zadań (JavaScript / LocalStorage)
Programowanie stron internetowychDynamiczna aplikacja webowa do planowania zadań z interaktywnym interfejsem, systemem liczników oraz zapisywaniem stanu użytkownika.
Co zostało zrealizowane w projekcie:
1. Pełna funkcjonalność CRUD (tworzenie, odczyt, przełączanie statusu wykonane/aktywne, usuwanie zadań).
… 2. Praca z LocalStorage - dane użytkownika są bezpiecznie przechowywane i nie znikają po odświeżeniu strony.
3. Interaktywne liczniki - automatyczne zliczanie całkowitej liczby zadań, aktywnych i wykonanych punktów w czasie rzeczywistym.
4. Walidacja formularzy - ograniczenia na maksymalną liczbę znaków (do 100), ochrona przed pustymi inputami oraz limit listy (do 30 zadań).
5. Płynny UX - dodane niestandardowe mikroanimacje (fade-in, bounce) do interakcji z interfejsem i powiadomieniami.
6. Responsywna i wielobrowarowa struktura - interfejs idealnie skalowalny na urządzenia mobilne i monitory desktopowe.
Stos technologii: HTML5 (semantyczna struktura), CSS3 (Flexbox, Animacje CSS, Media Queries), JavaScript Vanilla (Manipulacja DOM, LocalStorage API, Obsługa zdarzeń).
-
Strona portfolio dewelopera webowego (HTML5 / CSS3 / JavaScript)
Programowanie stron internetowychOpracowanie i wykonanie nowoczesnej, responsywnej strony portfolio do prezentacji własnych projektów i umiejętności. Strona stworzona od podstaw na bazie czystego kodu, bez użycia zewnętrznych konstruktorów czy ciężkich frameworków CSS, co zapewnia maksymalną prędkość ładowania i optymalizację.
Co zostało zrealizowane w projekcie:
1. Semantyczne i wieloplatformowe wykonanie (HTML5) z wysokimi wskaźnikami SEO i dostępności.
… 2. Nowoczesny responsywny interfejs użytkownika (CSS3) z płynymi przejściami, efektami hover dla desktopu oraz niestandardowymi interaktywnymi kartami.
3. Pełna optymalizacja pod urządzenia mobilne - cała siatka elementów i stopka elastycznie przystosowują się do dowolnej szerokości ekranu (do 320px).
4. Integracja dynamicznego interfejsu i logiki, która demonstruje pracę z DOM.
Strona służy jako centralny hub do prezentacji innych moich aplikacji webowych, w tym responsywnego kalkulatora matematycznego, aplikacji pogodowej (Weather App) z integracją API oraz menedżera zadań (Smart To-Do List).
Stos technologii: HTML5, CSS3 (Flexbox/Grid, Media Queries), JavaScript (Vanilla JS), React.
Będę zadowolony, mogąc opracować dla Ciebie czysty, szybki i wygodny interfejs!
#wykonanie #rozwój_witryn #frontend #html #css #javascript #react #portfolio #landing
-
Adaptacyjna aplikacja internetowa pogody (Weather App)
Programowanie stron internetowychNowoczesna, w pełni responsywna aplikacja internetowa typu one-page (SPA) do śledzenia pogody w dowolnym miejscu na świecie w czasie rzeczywistym.
Projekt przeszedł pełny cykl głębokiego refaktoryzowania logiki oraz redesignu interfejsu UI/UX.
… Co zostało zrealizowane i zoptymalizowane:
1. Integracja dwóch zewnętrznych API: Geocoding API od Open-Meteo (do wyszukiwania dokładnych współrzędnych na podstawie nazwy miasta) oraz serwisu wttr.in (do uzyskiwania szczegółowych danych meteorologicznych w formacie JSON).
2. Dynamiczna zmiana interfejsu: tła lewego panelu oraz ikony (FontAwesome) automatycznie dostosowują się do aktualnego stanu pogody (słonecznie, pochmurno, deszcz, burza, zmienna pogoda).
3. Odporność logiki na błędy (Error Tolerance): zrealizowano domyślny stan (Variable) na wypadek otrzymania niestandardowych kodów meteorologicznych lub błędów sieci.
4. Optymalizacja UX: dodano blokowanie elementów interfejsu (input/button) oraz animację ładowania podczas wykonywania asynchronicznego zapytania, aby zapobiec spamowaniu timeoutów. Wyszukiwanie działa zarówno po kliknięciu, jak i po naciśnięciu klawisza Enter.
5. Premium UI design: efekt matowego szkła (Glassmorphic Backdrop Filter), płynne niestandardowe animacje CSS z użyciem cubic-bezier, niestandardowa ikona zakładki (Favicon w formacie SVG).
6. Responsywność między przeglądarkami (Media Queries): interfejs jest w pełni przebudowywany pod urządzenia mobilne. Zrealizowano złożone kontrole typu wskaźnika urządzenia (media z pointer: coarse/fine), co pozwoliło zablokować niepotrzebne przewijanie mobilne, zachowując idealne wyświetlanie na PC przy skalowaniu.
Stos technologii: #HTML5, #CSS3, #JavaScript (ES6+, Async/Await, Fetch API), #Geocoding, #UI_UX, #Responsive
Będę zadowolony, mogąc stworzyć dla Ciebie nowoczesny, szybki i interaktywny interfejs!