Live Demo: album.anitacreativestudio.com
An interactive web application demonstrating expertise in combining modern frontend frameworks with 3D rendering technologies to create a realistic, personalized digital photo album experience.
This project is a high-performance, responsive virtual photo album that features:
- Realistic 3D Interaction: Utilizes Three.js and React Three Fiber (R3F) to render a customizable book model with physically-based page-turning animations.
- Dynamic UI Architecture: Implements distinct, adaptive navigation patterns—a full-width scroll for desktop and a compact columnar grid for mobile—showcasing advanced Tailwind CSS responsiveness.
- Scalable State Management: Uses Jotai for efficient, atomic state management of page content, index tracking, and component synchronization.
- Full-Stack Integration: Features a decoupled architecture with a React frontend (Vercel) and a dedicated Node.js/Express backend (Render).
- 3D Rendering: Three.js / React Three Fiber (R3F) – Complex 3D scene setup and custom geometry manipulation.
- Frontend: React (Vite) & Tailwind CSS – Modern hook-based architecture and utility-first responsive design.
- State Management: Jotai – Lightweight global state synchronization.
- Backend: Node.js & Express – API development and data management.
- Deployment: Vercel (Frontend) & Render (Backend).
To quickly run and review the project locally:
- Clone:
git clone https://github.com/digitalfairy/3D-Photo-Album.git - Install:
npm install - Run Dev Server:
npm run dev - Navigate to
http://localhost:5173.
src/components/UI.jsx: Demonstrates advanced responsive design logic switching between desktop and mobile layouts.src/components/Experience.jsx: Contains the core R3F setup, implementing model loading and lighting.src/stores/pageStore.js: Showcases atomic state management for UI-to-3D synchronization.
Portfolio: anitacreativestudio.com
Email: jelicanita7@gmail.com
LinkedIn: [Your LinkedIn Profile Link]