Realizacja strony docelowej w React js, Tailwind (kod już istnieje, należy go dostosować do makiety w Figma)
Udany wynik = pomyślnie przeprowadzony Speed Test strony i pełna zgodność z makietą.
Dostęp do makiety w Figma, Google Drive ze wszystkimi zdjęciami i ikonami (najlepiej robić je przez kod ikon, ale jak wyjdzie), plik zip z istniejącym kodem (który trzeba albo dopracować, albo przerobić - jak Wam łatwiej) - wszystko to przekażę w wiadomościach prywatnych.
Nie przerażajcie się, jest tu dość dużo opisane, ale w sumie głównym celem jest zrobić jak w makiecie, fizyka już jest zrealizowana, trzeba tylko wprowadzić wiele POPRAWEK w kodzie. Jeśli będą jakieś problemy z tekstem - sama mogę to poprawić w kodzie, bo uczę się na programistę, po prostu mi się to nie podoba i nie znam React js. Najważniejsze, aby makieta była responsywna. Zwracajcie uwagę na odstępy, używane są 3 czcionki (Lexend Exa, Lexend Mega, Lexend Zetta). Dlatego proszę, po prostu klikajcie w makiecie, sprawdzajcie odstępy, po bokach wszędzie 80 pikseli od ekranów (każdy blok podzielony na ekrany), wszystko centralnie w tych ekranach. Wszystkie neonowe elementy - to po prostu duplikat jednego elementu z różnym Layer Blur (50, 25, 15, 10, 5 (prawie wszędzie), w niektórych różni się gradient kolorów. Zostawię Wam bardzo fajną opinię i będziecie mogli wykorzystać moją pracę w portfolio.
Dodatkowy opis:
1. Animacja sekcji Narzędzia: Chciałabym, aby ikony w sekcji Narzędzia były animowane jak „szklane kulki”. Mają realistycznie spadać w dół pod wpływem grawitacji, gromadzić się tam i lekko toczyć się z boku na bok przy interakcji lub zderzeniu. Usunąć ramkę, która jest w istniejącym kodzie. W idealnym przypadku byłoby zrobić je bardziej szklanymi, ale można zostawić jak w makiecie. (sama fizyka już jest zrealizowana)
2. Podgląd Case Studies (PDF Modal): Po naciśnięciu przycisku „Pełny projekt” ma otwierać się okno modalne z podglądem mojej prezentacji PDF. (!!!!!ale to już jest zrealizowane)
Funkcjonalność: możliwość przewijania stron wewnątrz okna.
Design: minimalistyczny animowany przycisk-krzyżyk w prawym górnym rogu do zamykania (to również już jest)
3. Dodatkowe certyfikaty: W sekcji z certyfikatami po naciśnięciu przycisku ma pojawiać się okno modalne.
Stylizacja: efekt matowego szkła (glassmorphism) z gradientem.
Treść: mają tam być jeszcze 2 certyfikaty, które nie weszły do głównej siatki, z możliwością łatwego dodawania nowych przez kod w przyszłości. (gdy klikniesz na certyfikat, otwiera się (jak prezentacje))
4. Funkcja „Zobacz wyjaśnienie” w Narzędziach: Po naciśnięciu na okrągłe ikony narzędzi mają się przekształcać (lub zamieniać) na karty z nazwą i krótkim opisem. Opis powinien być pod każdą ikoną, dlatego w tym wyskakującym oknie można przewijać w dół.
Przykłady tekstów: * Speed Test: „Wysoka prędkość strony może obniżyć koszt kliknięcia (CPC)”.
GTM: „Pomaga konfigurować analitykę bez angażowania programistów”.
GA4: „Pomaga analizować dane i nie marnować budżetu reklamowego”.
5. Walidacja i logika formularza leadowego:
Błąd: Jeśli obowiązkowe pola nie są wypełnione, formularz nie powinien być wysyłany. Należy dodać efekt wizualny (świecenie/glow) wokół niewypełnionych pól. (to już jest zrealizowane!!!)
Sukces: Po pomyślnym wysłaniu ma pojawić się PopUp z tekstem: „Zgłoszenie wysłane. Zobaczmy, jak możemy szybko zwiększyć Twoje wyniki!”. (mogę to zrobić od razu, albo jak dojdziecie do tego punktu, w ogóle logika jest prosta - formularz z tyłu staje się pusty i przyciemnia się - a PopUp wyskakuje na środku formularza i wygląda tak samo jak okno z certyfikatami)
Pole telefonu: Obok wprowadzenia numeru (tam gdzie +00) dodać mały kwadrat z zaokrąglonymi rogami do wyboru kodu kraju w ALFABETYCZNYM porządku (Dropdown).
Załączniki 1
Plik z rezultatem
Opinia zleceniodawcy o współpracy z Paikar Avetisian
Realizacja strony docelowej w React js, Tailwind (kod już istnieje, należy go dostosować do makiety w Figma)Bardzo zadowolona z pracy Pajkara. Profesjonalnie dopracował istniejący kod i zrobił layout naprawdę pixel perfect. Wszystkie odstępy, czcionki i responsywność na urządzenia mobilne wykonane bezbłędnie. Również mądrze skonfigurował walidację formularzy i okna modalne. Kod czysty, łatwy do utrzymania. Polecam jako odpowiedzialnego specjalistę!
Opinia freelancera o współpracy z Marina Shkliarska
Realizacja strony docelowej w React js, Tailwind (kod już istnieje, należy go dostosować do makiety w Figma)Miły klient, szybko odpowiada i jasno stawia zadania. Współpraca przebiegła łatwo, polecam.
-
Witam, mogę zrealizować według makiety,
w portfolio są projekty na React, proszę o kontakt
-
Cześć!
Przejrzałem opis - tak, mogę Ci w tym pomóc.
Pracuję z witrynami już ponad 3 lata, więc dobrze rozumiem, jak starannie dopracować gotowy kod, nie łamiąc tego, co już działa. Jeśli gdzieś lepiej po prostu wprowadzić poprawki, a gdzie indziej szybciej i czyściej przerobić oddzielny blok - nie ma problemu, patrzę na sytuację.
Z tego, co opisałeś, dla mnie najważniejsze jest doprowadzenie witryny do dokładnej zgodności z makietą, normalne dociśnięcie responsywności, odstępów, czcionek, zachowania elementów i ogólnej integralności interfejsu. React jest dla mnie w porządku, więc spokojnie mogę zrozumieć kod i wprowadzić wszystkie potrzebne poprawki.
Zwracam również uwagę nie tylko na wygląd zewnętrzny, ale także na strukturę kodu i szybkość witryny, aby po poprawkach nic się nie posypało i witryna normalnie przechodziła test prędkości.
… Oto kilka moich prac:
https://www.alytic.sa/
https://www.tornix.ai/
https://www.leagueit.org/
-
Wytańczam.
Jestem gotów dokończyć dla Ciebie stronę internetową i zacząć od razu. Mam doświadczenie w tworzeniu stron internetowych w kodzie.
-
1066 7 0 Dzień dobry!
Zapoznałem się z opisem zadania. Rozumiem, że główną pracą jest dopracowanie istniejącego kodu, dostosowanie do makiety i staranne opracowanie wszystkich szczegółów (marginesy, czcionki, responsywność, UI).
Jestem gotów zrealizować:
— poprawki w układzie z pełnym dostosowaniem do wszystkich urządzeń
— dopracowanie okien modalnych (PDF, certyfikaty)
— poprawne działanie formularza (walidacja, popup sukcesu)
— realizację logiki bloków (w tym Wyjaśnienie Widoku)
… — staranną integrację animacji i interaktywnych elementów
Obecnie aktywnie uczę się React, więc w razie potrzeby będę w stanie zrozumieć obecny kod i dopracować logikę bez problemów.
Pracuję z uwagą na szczegóły, kieruję się zasadą pixel perfect i wygodą dalszego wsparcia kodu.
Jestem gotów omówić szczegóły, zobaczyć makietę i zaproponować optymalną wersję realizacji.
-
328 0 1 Dzień dobry!
Jestem gotowa do dopracowania waszej strony internetowej według makiety Figma z naciskiem na responsywność, dokładne marginesy, czcionki, okna modalne, blok Narzędzia, formularz oraz przejście testu prędkości.
Mogę starannie dopracować istniejący kod React lub przerobić poszczególne części, jeśli będzie to czystsze i bardziej niezawodne. Dla mnie tutaj zrozumiały jest priorytet: maksymalne dopasowanie do makiety + poprawne działanie na wszystkich ekranach.
-
1014 6 0 Witaj, zobacz mój ostatni projekt, jest napisany w React, jest to wysiłek.
Test prędkości 98%
Mogę zrealizować projekt w pixel perfect.
-
686 2 0 Cześć! Projekt wygląda po prostu niesamowicie — bardzo stylowy i nowoczesny design. Z wielką przyjemnością pomogę doprowadzić go do ideału. Podoba mi się wasze podejście do detali (neonowe efekty, czcionki Lexend, szklany morfizm).
Mój plan działania według waszego ZT:
Animacja narzędzi (szklane kulki): Ustawię fizykę tak, aby kulki czuły się „ciężkie”, i dodam wizualnej głębi (gradienty, blur, odbicia), aby wyglądały jak prawdziwe szkło.
Wyjaśnienie widoku: Zrealizuję płynne przekształcenie ikon w karty z opisem. Będzie to wyglądać jak naturalna część interfejsu.
Certyfikaty i studia przypadków: Wypoleruję okna modalne, ustawię efekt szklany (glassmorphism) i zrobię strukturę kodu taką, abyście mogli łatwo dodawać nowe certyfikaty przez jedną tablicę w kodzie.
Formularz i walidacja: Dodam rozwijane menu krajów w porządku alfabetycznym i ustawię logikę udanego wysyłania z waszym powiadomieniem PopUp.
Responsywność i test prędkości: Sprawdzę każdy odstęp (80px po bokach) i zoptymalizuję ładowanie, aby strona działała płynnie.
… Mam głęboką wiedzę na temat React.js i doświadczenie w pracy z animacjami, więc wynik będzie maksymalnie odpowiadał makietom.
Z waszej strony potrzebny będzie tylko kod i link do Figma. Gotowy, aby rozpocząć „magiczne” działania nad waszą stroną już teraz!
-
9972 117 0 Witam.
Jestem programistą NodeJS. Jestem gotów podjąć się zadania. Piszcie, omówimy.
-
9004 69 0 Dzień dobry, mam doświadczenie w react + tailwindcss. To nie wszystkie poprawki? Czy możesz podać więcej informacji na temat poprawek i jaki jest twój budżet na projekt? 880 - to ostateczna kwota?
-
764 5 1 Dzień dobry, Marino! Uważnie przeczytałem cały opis — zadanie jest obszerne, ale jasne. Mam doświadczenie z React + Tailwind, pracuję też z Figma.
Po każdym punkcie:
1. Animacja Tools (szklane kulki) — zrealizuję realistyczny spadek z grawitacją + kolizję przez CSS/Framer Motion, usunę zbędną ramkę z obecnego kodu.
2. PDF Modal (Case Studies) — modalne okno z przewijaniem stron wewnątrz, animowany przycisk-krzyżyk, zgodność z makietą Figma.
3. Certyfikaty (glassmorphism) — 2 karty z efektem matowego szkła + gradient, kliknięcie otwiera jak prezentację, łatwe do skalowania przez kod.
4. View Explanation w Tools — transformacja ikony → karta z nazwą i opisem, okno popup z przewijaniem w dół.
5. Formularz leadowy — walidacja z efektem glow na pustych polach, PopUp „Wysłano zapytanie” po sukcesie, Dropdown wyboru kodu kraju (+00) w porządku alfabetycznym.
Responsywność, odstępy 80px od krawędzi, 3 czcionki (Lexend Mega, Lexend Exa, Lexend) — wszystko porównam z makietą Figma. Przekażę czysty kod, który można od razu pokazać w portfolio.
-
13013 67 0 Witam! Wykonam Twoje zadanie szybko i jakościowo.
Moje portfolio: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Pisz, zacznę pracować dzisiaj. Będę zadowolony ze współpracy z Tobą!
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Rozwój sceny WebGL/Three.js z generowaniem i eksportem 3D (snapshot) z animowanego shaderaOpis obiektu: Projekt przedstawia designerski stół, wykonany w formie realistycznego, głębokiego wiru (centralna wirówka, która płynnie przechodzi z szerokiego poziomego blatu w cienką, elegancką nogę). Istota zadania: Wymagany jest programista WebGL / Creative Coding do… Javascript & Typescript, Programowanie stron internetowych ∙ 16 godzin 35 minut temu ∙ 18 ofert |
Wsparcie i rozwój strony internetowej firmy sprzątającej
75 PLN
Szukam programisty / webmastera do długoterminowego wsparcia i rozwoju strony internetowej firmy sprzątającej. Strona: https://donely.ca O projekcie DoneLy Home Services — firma świadcząca usługi sprzątania w Kanadzie, która aktywnie się rozwija i rozszerza zasięg działalności.… Javascript & Typescript, Programowanie stron internetowych ∙ 2 dni 18 godzin temu ∙ 59 ofert |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 3 dni 19 godzin temu ∙ 27 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 5 dni 10 godzin temu ∙ 35 ofert |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 300 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 10 dni 16 godzin temu ∙ 119 ofert |