A modern, interactive photography portfolio website showcasing landscape, city, event photography, and a detailed John Muir Trail (JMT) journey with interactive mapping.
- Interactive Photo Galleries: Four distinct categories - Landscapes, Cities, Events, and People
- JMT Trail Experience: Interactive map with GPX trail data visualization and photo waypoints
- Responsive Design: Fully responsive across desktop, tablet, and mobile devices
- Lightbox View: Full-screen image viewing with keyboard navigation
- Contact Form: Integrated EmailJS for direct communication
- Smooth Animations: Premium UI with glassmorphism effects and micro-interactions
- Crypto Donations: Support via Ethereum and Bitcoin
- React 18 - Modern UI library with hooks
- React Router - Client-side routing
- Vite - Next-generation frontend build tool with HMR
- Vanilla CSS - Custom CSS with CSS variables for theming
- Responsive Design - Mobile-first approach with flexbox and grid layouts
- Modern Effects - Glassmorphism, gradients, and smooth transitions
- Leaflet - Interactive map library for JMT trail visualization
- GPX Parser - Custom GPX file parsing for trail data
- GeoJSON - Geographic data formatting
- EmailJS - Contact form email functionality
- ESLint - Code quality and consistency
- Python PIL - Image compression and optimization script
PhotoWeb/
├── public/
│ ├── JMT.gpx # GPX trail data
│ ├── JMT_2025.json # Trail waypoint data
│ └── vite.svg
├── src/
│ ├── components/
│ │ ├── Footer.jsx # Social media links footer
│ │ ├── Gallery.jsx # Photo gallery component
│ │ ├── Hero.jsx # Homepage hero section
│ │ ├── Lightbox.jsx # Full-screen image viewer
│ │ ├── Navbar.jsx # Navigation header with burger menu
│ │ └── SplashScreen.jsx # Loading animation
│ ├── pages/
│ │ ├── About.jsx # About page with bio and donations
│ │ ├── CategoryPage.jsx # Photo category pages
│ │ ├── Home.jsx # Homepage
│ │ └── JMTPage.jsx # JMT trail page with map
│ ├── styles/ # Component-specific CSS files
│ ├── utils/
│ │ ├── geojsonParser.js # GeoJSON parsing utilities
│ │ ├── gpxParser.js # GPX file parser
│ │ ├── images.js # Image data and metadata
│ │ └── jmtData.js # JMT trail configuration
│ ├── App.jsx # Main app component with routing
│ ├── main.jsx # React entry point
│ └── index.css # Global styles and CSS variables
├── image_compressor.py # Image optimization script
└── package.json
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/danilmezor/PhotoWeb.git
cd PhotoWeb- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe optimized build will be in the dist/ directory.
npm run previewTo enable the contact form, configure your EmailJS credentials:
- Sign up at EmailJS
- Update the EmailJS service ID, template ID, and public key in
src/pages/About.jsx
Use the included Python script to compress images:
python image_compressor.pyThis script uses PIL to optimize images while maintaining quality.
- Desktop: Full gallery grid, side-by-side layouts
- Tablet: Adapted grid layouts, touch-friendly navigation
- Mobile: Burger menu, stacked layouts, optimized image loading
- Modern dark theme with vibrant accent colors
- Glassmorphism effects on navigation and overlays
- Smooth page transitions and hover animations
- Custom scrollbar styling
- Micro-interactions for enhanced UX
This project is open source and available for personal and educational use.
Danil Mezor
- GitHub: @danilmezor
- LinkedIn: Danil Mezor
- Instagram: @danil.mezor
Built with ❤️ using React and Vite