Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexanderuk82/clone-iphone-website
A responsive clone of the iPhone product page, featuring interactive 3D models powered by Three.js, animations, and a modern UI. Built with React18 , Tailwind CSS, and Vite, this project showcases advanced front-end techniques to create an immersive user experience.
https://github.com/alexanderuk82/clone-iphone-website
3d-graphics animations react responsive-design tailwind-css threejs webdevelopment
Last synced: 27 days ago
JSON representation
A responsive clone of the iPhone product page, featuring interactive 3D models powered by Three.js, animations, and a modern UI. Built with React18 , Tailwind CSS, and Vite, this project showcases advanced front-end techniques to create an immersive user experience.
- Host: GitHub
- URL: https://github.com/alexanderuk82/clone-iphone-website
- Owner: alexanderuk82
- Created: 2024-07-23T03:39:38.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-08-17T04:52:50.000Z (6 months ago)
- Last Synced: 2024-11-21T22:31:59.495Z (3 months ago)
- Topics: 3d-graphics, animations, react, responsive-design, tailwind-css, threejs, webdevelopment
- Language: JavaScript
- Homepage:
- Size: 37.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Clone iPhone Website
A sophisticated and responsive replica of the iPhone product page, featuring 3D models, animations, and interactive elements. This project emphasizes performance, visual appeal, and an immersive user experience.
## 🚀 Tech Stack
- **React**: UI components
- **Three.js**: 3D models and animations
- **Tailwind CSS**: Styling
- **Vite**: Build tool for faster development
## ✨ Features
- **Responsive Design**: Seamlessly adapts to different screen sizes
- **3D Models**: Interactive iPhone models powered by Three.js
- **Smooth Animations**: Eye-catching transitions and effects
- **Interactive UI**: Engaging components for better user interaction
## 📂 Project Structure
- **`src/components`**: Contains all the React components
- **`Iphone.jsx`**: 3D model of the iPhone using Three.js
- **`Model.jsx`**: Wrapper for 3D model handling
- **`VideoCarousel.jsx`**: Carousel for product videos
- **`Loader.jsx`**: Loading animation for the 3D model
- **`animations.js`**: Utility functions for animations
## 📦 Installation
1. **Clone the repository**:
```bash
git clone https://github.com/alexanderuk82/clone-iphone-website.git
```
or
## 📦 Installation
1. **Install dependencies**:
```bash
npm install
```
## 🎮 Usage
Open your browser and navigate to http://localhost:3000 to view the app.
Interact with the 3D iPhone model and explore the product features.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit issues and pull requests.
## 📝 License
This project is licensed under the MIT License.