📸 Bootstrap Photography Portfolio

A fully responsive photography portfolio landing page built with HTML, CSS, and Bootstrap 5, following a mobile-first design approach. Showcases services, portfolio, pricing, testimonials, and includes a contact form — all without JavaScript.

Perfect for photographers, creatives, or small studios looking for an elegant, fast, accessible online presence.

---

✨ Features

• Mobile-first responsive design
  Optimized for all screen sizes — from smartphones to 4K desktops — using Bootstrap’s grid and custom media queries.

• Modern & clean UI/UX

  • Sticky navbar with CTA button
  • Hero section with animated background glow + carousel
  • About section with image grid
  • Filterable portfolio preview
  • Pricing cards with clear packages
  • Testimonial section with reviewer profile
  • Instagram feed preview
  • Contact form with validation-ready fields
  • Accessible footer with social links

• Interactive Elements (CSS-only)

  • Hover scale effects on buttons/cards
  • Decorative glowing blobs using box-shadow
  • Carousel indicators styled for better UX
  • Focus states preserved for keyboard navigation

• Responsive Breakpoints (via Bootstrap + Custom MQs)

  • 576px (sm)
  • 768px (md)
  • 992px (lg)
  • 1200px (xl)
  • 1400px (xxl)

---

🛠️ Technologies Used

• HTML5 – Semantic structure
• CSS3 – Custom styling, animations, variables
• Bootstrap 5.3 – Layout, components, utilities
• Font Awesome 6.5 – Icons
• FontShare (Clash Display) – Modern typography
• No JavaScript – Pure static frontend experience

💡 Lightweight, SEO-friendly, and blazing fast — zero JS means no render-blocking or hydration delays.

---

📱 Mobile‑First Design Philosophy

This project was designed mobile-first:

• Starts with base styles for smallest screens
• Enhances layout progressively using min-width media queries
• Uses clamp() for fluid typography
• Employs d-flex, gap, container-xl from Bootstrap for smart spacing

✅ Benefits:

• Faster load times on mobile networks
• Better Core Web Vitals score
• Future-proof scaling for tablets & desktops

---

📦 Folder Structure

kiekeFotografie/
┣━ img/
┃ ┗━ *.png (All images: logo, carousel, about, portfolio, etc.)
┣━ index.html
┣━ style.css
┗━ README.md

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/TOMJID/kiekeFotografie-landing.git
cd kiekeFotografie-landing

---

👨‍💻 Author

Crafted with love & care by Tomjid — Web Developer & Design Enthusiast

Found a bug or want to improve? Fork, fix, and send a PR!