🚀 Portfolio V2

Nowoczesne, interaktywne portfolio programisty stworzone z wykorzystaniem najnowszych technologii frontendowych. Prezentuje projekty, umiejętności i doświadczenie w atrakcyjny, wizualnie imponujący sposób z efektami glassmorphism i zaawansowanymi animacjami.

✨ Cechy

🎨 Design & UI

• Efekt Glassmorphism - Nowoczesne, przeszklone karty z efektem rozmycia tła
• Animowany Background z Cząsteczkami - Dynamiczne tło z 1500 interaktywnymi cząsteczkami
• Responsywny Design - Perfekcyjne dopasowanie do wszystkich urządzeń (mobile, tablet, desktop)
• Płynne Animacje - Wykorzystanie Framer Motion dla profesjonalnych przejść i interakcji
• Parallax Scrolling - Efekt parallax dla sekcji hero
• Hover Effects - Interaktywne efekty przy najechaniu na elementy

🌐 Funkcjonalności

• Multi-język - Wsparcie dla wielu języków (kontekst językowy)
• Nawigacja Glassmorphic - Przezroczysta nawigacja z efektem rozmycia
• Sekcje Portfolio:
  • Hero z animowanym nagłówkiem
  • O mnie z kartami informacyjnymi
  • Interaktywna sekcja umiejętności z kategoriami
  • Grid projektów z filtrowaniem
  • Modale projektów z szczegółami
  • Sekcja kontaktowa
• Filtrowanie Projektów - Kategoryzacja projektów (Web, Mobile, Scripts, Other)
• Modal Projektów - Szczegółowe okna z informacjami o projektach
• Przyciski CTA - Download CV i kontakt z animacjami

🎯 UX Features

• Smooth Scrolling - Płynne przewijanie między sekcjami
• Loading States - Eleganckie stany ładowania
• Micro-interactions - Drobne animacje zwiększające zaangażowanie
• Progressive Disclosure - Stopniowe odkrywanie treści podczas scrollowania
• Visual Feedback - Natychmiastowa reakcja na interakcje użytkownika

🛠️ Tech Stack

Core Framework

• Next.js 15.2.4 - React framework z App Router
• React 19 - Najnowsza wersja React z nowymi funkcjami
• TypeScript 5 - Typowanie statyczne

Styling & Animations

• Tailwind CSS 3.4 - Utility-first CSS framework
• Framer Motion - Zaawansowane animacje i przejścia
• Motion - Dodatkowa biblioteka animacji
• tailwindcss-animate - Predefiniowane animacje Tailwind
• class-variance-authority - Zarządzanie wariantami komponentów
• clsx & tailwind-merge - Warunkowe klasy CSS

UI Components

• Radix UI - Kompletny zestaw niewidocznych, dostępnych komponentów:
  • Accordion, Alert Dialog, Avatar
  • Checkbox, Collapsible, Context Menu
  • Dialog, Dropdown Menu, Hover Card
  • Label, Menubar, Navigation Menu
  • Popover, Progress, Radio Group
  • Scroll Area, Select, Separator
  • Slider, Switch, Tabs
  • Toast, Toggle, Tooltip
• Lucide React - 1000+ pięknych, spójnych ikon
• Sonner - Eleganckie powiadomienia toast

Forms & Validation

• React Hook Form - Wydajne formularze
• Zod - Schema validation
• @hookform/resolvers - Integracja walidacji

Additional Libraries

• cmdk - Command menu (⌘K)
• date-fns - Nowoczesna biblioteka dat
• embla-carousel-react - Lekki carousel
• react-day-picker - Date picker
• recharts - Wykresy i wizualizacje
• vaul - Drawer component
• Geist Font - Czcionka Vercel

Development Tools

• pnpm - Szybki, wydajny package manager
• PostCSS - CSS transformacje
• Autoprefixer - Automatyczne prefiksy CSS

📁 Struktura Projektu

PortfolioV2/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout z providers
│   ├── page.tsx                 # Główna strona portfolio
│   └── globals.css              # Globalne style
├── components/                   # Komponenty React
│   ├── glassmorphism-card.tsx   # Karta z efektem glassmorphism
│   ├── glassmorphism-navbar.tsx # Nawigacja z glassmorphism
│   ├── interactive-skills-section.tsx # Sekcja umiejętności
│   ├── language-provider.tsx    # Provider języków
│   ├── project-modal.tsx        # Modal szczegółów projektu
│   ├── projects-bento-grid.tsx  # Alternatywny grid projektów
│   ├── projects-grid.tsx        # Grid projektów z filtrowaniem
│   ├── theme-provider.tsx       # Provider motywów
│   └── kokonutui/
│       └── particles-background.tsx # Animowane tło z cząsteczkami
├── lib/
│   └── utils.ts                 # Funkcje pomocnicze
├── public/                      # Pliki statyczne
├── styles/
│   └── globals.css              # Dodatkowe style globalne
├── components.json              # Konfiguracja shadcn/ui
├── next.config.mjs              # Konfiguracja Next.js
├── tailwind.config.ts           # Konfiguracja Tailwind CSS
├── tsconfig.json                # Konfiguracja TypeScript
└── package.json                 # Zależności projektu

🚀 Szybki Start

Wymagania

• Node.js 18.x lub nowszy
• pnpm 8.x lub nowszy (lub npm/yarn)

Instalacja

1. Sklonuj repozytorium

git clone https://github.com/KetusDev/PortfolioV2.git
cd PortfolioV2

2. Zainstaluj zależności

pnpm install
# lub
npm install
# lub
yarn install

3. Uruchom serwer deweloperski

pnpm dev
# lub
npm run dev
# lub
yarn dev

4. Otwórz przeglądarkę

http://localhost:3000

📝 Dostępne Skrypty

# Tryb deweloperski
pnpm dev

# Build produkcyjny
pnpm build

# Start serwera produkcyjnego
pnpm start

# Linting
pnpm lint

🎨 Customizacja

Kolory i Style

Edytuj tailwind.config.ts aby dostosować paletę kolorów, czcionki i breakpointy:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        // Twoje kolory
      },
    },
  },
}

Efekt Glassmorphism

Dostosuj efekt w komponentach GlassmorphismCard i GlassmorphismNavbar:

• Poziom rozmycia: backdrop-blur-xl
• Przezroczystość tła: bg-white/10
• Obramowanie: border-white/20

Animacje Cząsteczek

Konfiguruj tło w app/page.tsx:

<ParticlesBackground
  particleCount={1500}        // Liczba cząsteczek
  noiseIntensity={0.002}      // Intensywność ruchu
  particleSize={{ min: 0.5, max: 2.5 }}  // Rozmiar cząsteczek
/>

Treść

• Projekty: Edytuj components/projects-grid.tsx
• Umiejętności: Edytuj components/interactive-skills-section.tsx
• Teksty: Edytuj tłumaczenia w components/language-provider.tsx

🌐 Deployment

Vercel (Zalecane)

# Zainstaluj Vercel CLI
npm i -g vercel

# Deploy
vercel

Lub połącz repozytorium GitHub z Vercel dla automatycznych deploymentów.

Inne Platformy

Projekt jest kompatybilny z:

• Netlify
• Cloudflare Pages
• AWS Amplify
• Digital Ocean App Platform

🔧 Konfiguracja Środowiska

Utwórz plik .env.local jeśli potrzebujesz zmiennych środowiskowych:

# Przykładowe zmienne
NEXT_PUBLIC_SITE_URL=https://yoursite.com
NEXT_PUBLIC_GA_ID=your-ga-id

📱 Sekcje Portfolio

1. Hero Section

• Animowany tytuł z gradient text
• Subtitle i opis
• CTA buttons (Download CV, Contact)
• Parallax effect podczas scrollowania

2. About Section

• Bento grid z glassmorphic cards
• Informacje osobiste (lokalizacja, edukacja, doświadczenie)
• Aktualne projekty z progress bars
• Osiągnięcia i nagrody
• Hobby i zainteresowania

3. Skills Section

• Kategorie umiejętności (Frontend, Mobile, Backend, Database, Design)
• Interaktywne karty z poziomami
• Doświadczenie i liczba projektów
• Smooth transitions między kategoriami

4. Projects Section

• Filtry kategorii (All, Web, Mobile, Scripts, Other)
• Grid projektów z obrazkami
• Modal z pełnymi szczegółami
• Linki do live demo i GitHub

5. Contact Section

• Informacje kontaktowe
• Linki do social media
• Email i inne dane

🎯 Performance

• ⚡ Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• 🚀 Fast Loading: Optymalizacja obrazków, lazy loading
• 📦 Code Splitting: Automatyczny przez Next.js
• 🎨 CSS Purging: Tylko używane style w produkcji
• 🔍 SEO Friendly: Meta tags, semantic HTML

🤝 Contributing

Contribucje są mile widziane! Jeśli chcesz pomóc:

1. Fork projektu
2. Stwórz branch z feature (git checkout -b feature/AmazingFeature)
3. Commit zmian (git commit -m 'Add some AmazingFeature')
4. Push do brancha (git push origin feature/AmazingFeature)
5. Otwórz Pull Request

📄 Licencja

Ten projekt jest otwarty na użytek osobisty i edukacyjny. Przy wykorzystaniu prosimy o atrybucję.

👤 Autor

KetusDev

• GitHub: @KetusDev
• Email: code.szymon@gmail.com

🙏 Acknowledgments

• Next.js za amazing framework
• Vercel za hosting
• Radix UI za dostępne komponenty
• Framer Motion za potężne animacje
• Tailwind CSS za utility-first CSS

---

Zbudowano używając Next.js i React

_{Jeśli podoba Ci się ten projekt, zostaw ⭐ na GitHub!}