ShutterStories

ShutterStories is a modern photography portfolio website built for professional photographer Samuel, designed to captivate visitors and showcase his work across Portrait, Wedding, and Lifestyle photography categories. The site combines cutting-edge web technologies with thoughtful UX design to create an engaging, luxurious browsing experience.

Important Notice

This public repo includes only 30–40% of the production code.
This is a showcase repository containing architectural documentation, component structures, and implementation examples The full source code, including custom animations, proprietary components, and specific styling implementations, remains private to maintain the unique identity of my portfolio.
If you'd like deeper access — happy to walk through the full implementation privately during interviews.

🚀 Live Demo: https://shutter-stories.vercel.app/

🎨 Design Inspiration: https://captured.framer.website/

What this repo contains

• Core structural code: Next.js pages, components and responsive Header and Footer sections
• UI/UX implementation: styling with Tailwind CSS and Shadcn UI, animations/transitions via Framer Motion, interactive UI elements
• Client-side form logic (e.g. contact form), validation using Zod, and integration placeholders (e.g. Email.js)
• Clean, modular architecture: components, utilities, type-safe code (TypeScript), and reusable UI primitives
• A minimal and maintainable file/folder structure that reflects best frontend and backend practices

Features (Public Version)

• Interactive Hero Section: Uses Framer Motion and lightweight images to render images with sleek animations for an immersive first impression.
• Creative Project & Gallery Sections: Photo showcases with modern layouts and transitions
• Smooth Scrolling Navigation: Powered by Lenis for fluid page transitions and parallax effects.
• Animated Components: Framer Motion handles entrance animations, hover states, and scroll-triggered reveals for galleries and testimonials.
• Contact Form: Integrated with Email.js + Zod for seamless lead capture without backend setup.
• Responsive Design: Fully mobile-friendly and accessibility-conscious.
• Performance Optimizations: Next.js image optimization and lazy loading for fast load times.

Getting Started

1. Clone the repository

   git clone https://github.com/Rajyo/ShutterStories-starter.git
   
   cd ShutterStories-starter

2. Install dependencies

   pnpm install

3. Copy environment template

   cp .env.example .env

4. Run Development server

   pnpm run dev

Tech Stack

• Next.js - App Router, Server Components, Static optimization
• Tailwind CSS - Utility-first styling with responsive design
• Framer Motion - Scroll-triggered animations and transitions
• Shadcn UI - Customizable, accessible UI components
• Zod - Runtime type-safe form validation
• Lenis - Ultra-smooth custom scroll behavior
• Lucide React - Consistent iconography system
• TypeScript - Full type safety across the application
• Email.js - Serverless contact form submissions

Folder Structure

.
├── app
│   ├── about
│   │   └── page.tsx
│   ├── blog
│   │   ├── [title]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── contact
│   │   └── page.tsx
│   ├── portfolio
│   │   ├── [title]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
├── components
│   ├── AboutMe
│   │   └── index.tsx
│   ├── BookYourSession
│   │   └── index.tsx
│   ├── FAQ
│   │   ├── FAQCard.tsx
│   │   └── index.tsx
│   ├── Footer
│   │   └── index.tsx
│   ├── Header
│   │   └── index.tsx
│   ├── HeroSection
│   │   └── index.tsx
│   ├── PhotographersDiary
│   │   ├── index.tsx
│   │   ├── PhotographersDiaryCard.tsx
│   │   └── PhotographersDiaryPageCard.tsx
│   ├── Portfolio
│   │   ├── index.tsx
│   │   ├── PortfolioImageCard.tsx
│   │   └── PortfolioPageImageCard.tsx
│   ├── Preloader
│   │   └── index.tsx
│   ├── Testimonials
│   │   ├── index.tsx
│   │   └── TestimonialCard.tsx
│   ├── ui
│   │   ├── animation.tsx
│   │   ├── corner-borders.tsx
│   │   ├── grid-borders.tsx
│   │   ├── scale-reading.tsx
│   │   ├── smooth-scroll.tsx
│   │   ├── sticky-cursor.tsx
│   │   ├── toaster.tsx
│   │   └── toast.tsx
│   ├── WhatICanOffer
│   │   ├── index.tsx
│   │   └── WhatICanOfferCard.tsx
│   └── WhyChooseMeAsAPhotographer
│       ├── index.tsx
│       ├── WhyChooseMeAsAPhotographerCard.tsx
│       └── WhyChooseMeAsAPhotographerImageCarousel.tsx
├── hooks
│   ├── device-detector.ts
│   └── use-toast.ts
├── lib
│   ├── data.ts
│   ├── deviceDimensions.ts
│   ├── framer.ts
│   ├── schema.ts
│   └── utils.ts
├── public
│   ├── assets
│   │   ├── footer
│   │   │   └── footer.avif
│   │   ├── heroSection
│   │   │   ├── cropped-main.avif
│   │   │   ├── dance.avif
│   │   │   ├── full-main.avif
│   │   │   └── pose.avif
│   │   ├── black-circle.svg
│   │   ├── cross.svg
│   │   ├── plus-circle.svg
│   │   └── white-circle.svg
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── components.json
├── eslint.config.mjs
├── .gitignore
├── LICENSE
├── next.config.ts
├── next-env.d.ts
├── package.json
├── package-lock.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
└── tsconfig.json

Full Source Access

The full source code lives in a private repository because it contains internal logic and configurations.

I’m happy to:

• Share additional snippets privately on request
• Screen-share the full repo during an interview and walk through the architecture
• Explain specific design decisions in more depth

Contact and Discussion

• 📧 Email: prajyotkhadse7@gmail.com
• 🌐 Website: prajyotkhadse.com
• 💼 Open to Full-Stack, Frontend, and AI Engineering roles.