JAN.Kfrontend engineer
Menu
portfolio / 2026Polska / zdalniedostępny do współpracy

Frontend / produkt / systemy

FrontendEngineerWho SHIPS.

Buduję strony i aplikacje, w których design, kod i wynik biznesowy są jednym systemem. Od warstwy UI po integracje, SEO, bezpieczeństwo i performance.

Zobacz projektyPorozmawiajmy

01 / projektuj jasno

02 / mierz realnie

03 / wdrażaj stabilnie

01 / umiejętności

Nie procenty.Zakres odpowiedzialności.

„React 90%” niczego nie mierzy. Dużo ważniejsze jest to, jaki fragment produktu potrafię wziąć na siebie i doprowadzić do produkcji.

UI

layout / design systems

Frontend

React / Next.js / TS

Dane

API / auth / integracje

Performance

LCP / CLS / INP

SEO

metadata / schema / semantyka

Jakość

a11y / security basics

01

Architektura frontendu

Komponenty, routing, stan i struktura aplikacji. Kod ma być czytelny dziś i nadal zrozumiały, kiedy projekt urośnie.

  • +Next.js
  • +React
  • +TypeScript
  • +RSC / SSR
02

System interfejsu

Responsywne UI, komponenty wielokrotnego użytku, accessibility i spójne zasady wizualne. Nie składam ekranów — buduję system.

  • +Tailwind
  • +A11y
  • +Design system
  • +Mobile-first
03

Backend i integracje

Łączę frontend z API, autoryzacją, bazą danych i usługami zewnętrznymi. Warstwa wizualna nie kończy produktu.

  • +REST API
  • +Auth
  • +Webhooks
  • +Data flows
04

Web Performance

LCP, CLS, INP, obrazy, fonty i bundle traktuję jako część implementacji. Performance nie zaczyna się po skończeniu strony.

  • +Core Web Vitals
  • +Lighthouse
  • +next/image
  • +Bundle

główny stack

Next.jsReactTypeScriptViteTailwindNode.jsVercel

02 / wybrane projekty

Nie tylkoładne mockupy.

problem → decyzja → technologia
04 wybrane realizacje

012024
projekt_01
podgląd
FinTech Dashboard — podgląd projektu
Next.jsReactTypeScriptTailwind

Panel danych

FinTech Dashboard

Dashboard UX / architektura informacji

Problem
Duża ilość danych musi pozostać czytelna bez zasypywania użytkownika modułami.
Decyzja
Hierarchia oparta na trzech poziomach: przegląd → trend → szczegół. Najważniejsze decyzje użytkownika są widoczne od razu.
technologia dobrana do problemu
022024
projekt_02
podgląd
Modern E-Commerce — podgląd projektu
Next.jsTypeScriptTailwindVercel

E-commerce

Modern E-Commerce

Commerce UX / prezentacja produktu

Problem
Storefront ma sprzedawać produkt, a nie prezentować możliwości biblioteki komponentów.
Decyzja
Mocna ekspozycja produktu, ograniczona liczba wzorców UI i prosta ścieżka od katalogu do zakupu.
technologia dobrana do problemu
032023
projekt_03
podgląd
AI Chat Interface — podgląd projektu
ReactViteTypeScriptTailwind

Aplikacja

AI Chat Interface

Stany interakcji / aplikacyjny layout

Problem
Interfejs konwersacyjny musi pozostać czytelny przy długiej sesji i wielu stanach systemowych.
Decyzja
Treść pozostaje głównym interfejsem. Nawigacja, akcje i statusy są podporządkowane rozmowie.
technologia dobrana do problemu
042023
projekt_04
podgląd
Luxury Portfolio — podgląd projektu
Next.jsReactTailwindVercel

Strona marki

Luxury Portfolio

Art direction / Web Vitals / responsive

Problem
Strona wizerunkowa potrzebuje charakteru bez ciężkich efektów i wizualnego hałasu.
Decyzja
Typografia, rytm i fotografia odpowiadają za narrację. JavaScript nie jest używany jako dekoracja.
technologia dobrana do problemu

03 / podejście

Szybkośćz architektury.

Dobry Lighthouse nie powinien wynikać z gaszenia problemów po skończeniu UI. Najłatwiej wygrać Web Vitals, kiedy design i kod od początku nie robią sobie krzywdy.

01RSC / SSR

Najpierw serwer

HTML i dane renderuję po stronie serwera tam, gdzie interakcja nie wymaga klienta. Mniej hydratacji, mniej JS, prostszy runtime.

02LCP / INP / CLS

Budżet wydajności

Najważniejsza treść ma pierwszeństwo. Obrazy, fonty i skrypty dostają jasną kolejność ładowania zamiast walczyć o sieć.

03HTML > JS

Interakcja progresywna

Najpierw działający interfejs, później enhancement. Native HTML wygrywa tam, gdzie JavaScript nie poprawia doświadczenia.

04SEO / A11y

SEO w architekturze

Semantyka, metadata, canonical, sitemap i dane strukturalne projektuję razem z aplikacją, a nie jako checklistę przed deployem.

domyślna checklista

render

server-first

obrazy

responsive

fonty

next/font

animacje

opcjonalne

SEO

semantyczne

mobile

najpierw

04 / kontakt

Masz problemdo rozwiązania?

Podeślij krótki kontekst. Nie potrzebuję 20-stronicowego briefu — wystarczy problem, cel i to, co już istnieje.

kontakt@twojadomena.pl
GitHub ↗LinkedIn ↗

dobry pierwszy brief

  1. 01Co budujemy?strona / sklep / aplikacja / panel
  2. 02Jaki jest cel?sprzedaż / lead / proces / narzędzie
  3. 03Co już istnieje?design / content / backend / nic
  4. 04Jaki termin?deadline lub planowany start