🪵 Stolmeb - Strona Wizytówka Firmy Stolarskiej

Profesjonalna, responsywna strona internetowa dla firmy stolarskiej z Gutowa Małego. Prezentuje ofertę mebli na wymiar, tartak oraz usługi stolarskie.

---

📋 Spis Treści

• O Projekcie
• Funkcjonalności
• Technologie
• Struktura Projektu
• Instalacja i Uruchomienie
• Wdrożenie na Produkcję
• Konfiguracja Formularza
• SEO i Optymalizacja
• Autor
• Licencja

---

🎯 O Projekcie

Stolmeb to nowoczesna strona typu landing page dla firmy stolarskiej, łączącej tradycyjne rzemiosło z współczesnym designem. Strona prezentuje:

• 📐 Projektowanie mebli - indywidualne projekty na wymiar
• 🔨 Produkcję mebli - kuchnie, szafy, stoły, krzesła
• 🌲 Tartak - sprzedaż drewna, desek i belek

Główne Cechy:

• ✅ 100% responsywna - działa na wszystkich urządzeniach
• ✅ SEO-optimized - pełne meta tagi, Open Graph, JSON-LD
• ✅ Szybka - lazy loading obrazów, zminifikowane CSS/JS
• ✅ Dostępna - ARIA labels, semantyczny HTML
• ✅ Formularz kontaktowy - z hCaptcha i Web3Forms

---

🚀 Funkcjonalności

Sekcje Strony:

1. Hero - efektowny baner powitalny z CTA
2. O nas - historia firmy, doświadczenie (20+ lat)
3. Nasza oferta - 3 główne kategorie usług z ikonami
4. Nasze realizacje - galeria 9 projektów z lightboxem
5. Nasi partnerzy - logo współpracujących firm
6. Kontakt - formularz + dane + mapa Google

Interaktywne Elementy:

• 📱 Responsywne menu mobilne - hamburger menu
• 🖼️ Lightbox galerii - powiększanie zdjęć
• 📝 Formularz kontaktowy - walidacja + hCaptcha
• ⬆️ Scroll to top - przycisk powrotu na górę
• 🎨 Animacje scroll - fade-in przy przewijaniu
• 🔗 Smooth scroll - płynne przejścia między sekcjami

---

🛠️ Technologie

Technologia	Wersja	Zastosowanie
HTML5	-	Semantyczny markup, ARIA
Tailwind CSS	3.x (CDN)	Utility-first styling
JavaScript (ES6+)	-	Interaktywność, animacje
Font Awesome	6.4.0	Ikony
Google Fonts	-	Inter, Playfair Display
Web3Forms	API	Wysyłanie emaili
hCaptcha	-	Zabezpieczenie przed spamem
Google Maps	Embed API	Mapa lokalizacji

---

📁 Struktura Projektu

stolmeb/
│
├── index.html                 # Główny plik strony
├── README.md                  # Dokumentacja projektu
├── .gitignore                # Ignorowane pliki
│
├── assets/                    # Zasoby statyczne
│   ├── css/
│   │   └── custom.min.css    # Minifikowany CSS (71% redukcja)
│   └── js/
│       └── main.min.js       # Minifikowany JavaScript (56% redukcja)
│
├── images/                    # Obrazy
│   ├── stolmeb_logo.png      # Logo firmy
│   ├── warsztat-hero.jpg     # Hero background
│   ├── realizacje/           # Zdjęcia projektów (9 sztuk)
│   └── partners/             # Logo partnerów
│
├── favicon.ico               # Ikona strony
├── site.webmanifest         # PWA manifest
├── robots.txt               # SEO robots
└── sitemap.xml              # Mapa strony

---

💻 Instalacja i Uruchomienie

Metoda 1: Python HTTP Server (ZALECANE)

# Przejdź do katalogu projektu
cd d:\stolmeb

# Uruchom serwer na porcie 8000
python -m http.server 8000

# Otwórz w przeglądarce:
# http://localhost:8000

Metoda 2: Live Server (VS Code)

1. Zainstaluj rozszerzenie Live Server w VS Code
2. Kliknij prawym na index.html
3. Wybierz "Open with Live Server"

⚠️ Uwaga: Formularz kontaktowy wymaga serwera HTTP (nie działa na file://).

---

🌐 Wdrożenie na Produkcję

Przed wdrożeniem - Checklist:

1. Konfiguracja Formularza ⚠️ KRYTYCZNE

• Zarejestruj się na web3forms.com
• Utwórz Access Key z emailem stolmeb@onet.com.pl
• Zamień w index.html linijka 1027: value="98f09601-bcc1-4d0b-85db-c200a186d98a" na TWÓJ KLUCZ
• Włącz hCaptcha w dashboardzie Web3Forms

2. Kompresja Obrazów ⚠️ KRYTYCZNE

• Skompresuj wszystkie obrazy przez TinyPNG.com
• Oczekiwana redukcja: 60-80% (5-12 MB → 2-4 MB)

3. Aktualizacja Danych

• Dodaj favicon.ico i apple-touch-icon.png
• Dodaj prawdziwe logo partnerów (obecnie placeholder)
• Sprawdź domenę w sitemap.xml

---

Hosting - Opcje Wdrożenia:

Netlify (ZALECANE - 100% DARMOWE)

npm install -g netlify-cli
cd d:\stolmeb
netlify deploy --prod

GitHub Pages

git init
git add .
git commit -m "Initial commit"
git push -u origin main
# Włącz w Settings > Pages

---

📧 Konfiguracja Formularza

1. Rejestracja: https://web3forms.com → Get Started
2. Email: stolmeb@onet.com.pl
3. Skopiuj Access Key i wklej w index.html linia 1027
4. Włącz hCaptcha w dashboardzie

---

🔍 SEO i Optymalizacja

Zaimplementowane:

✅ Meta Tags (OG, Twitter)
✅ JSON-LD LocalBusiness
✅ Lazy loading obrazów
✅ Minified CSS/JS
✅ robots.txt + sitemap.xml

Wyniki:

• Lighthouse SEO: 100/100
• Performance: 90+ (po kompresji obrazów: 95+)

---

👨‍💻 Autor

Bartosz Chwiłkowski
GitHub: @kooogi

---

📄 Licencja

MIT License - Copyright (c) 2025 Stolmeb

---

📞 Kontakt - Stolmeb

Adres: ul. Ostrowska 8, 62-300 Gutowo Małe
Telefon: +48 603 521 487 / +48 782 677 819 / +48 781 668 489
Email: stolmeb@onet.com.pl
Godziny: Pn-Pt: 8:00-17:00, Sb: 9:00-14:00

---

Ostatnia aktualizacja: Listopad 2025 | Wersja: 1.0.0