https://github.com/sarthak-0-sach/threejs_iphone_website
Developed using ReactJS, ThreeJS and react three fiber, this project is a clone of Apple's iPhone 15 Pro website, built using React.js and TailwindCSS. It showcases advanced animations and 3D model rendering using GSAP (Greensock Animations) and Three.js, giving users an immersive and engaging browsing experience. Happy coding! 😊🚀
https://github.com/sarthak-0-sach/threejs_iphone_website
3d-model-rendering appealing-visuals gsap-animation iphone-website-clone react-three-drei react-three-fiber reactjs smooth-animations tailwindcss-styling three-js vite-react
Last synced: 1 day ago
JSON representation
Developed using ReactJS, ThreeJS and react three fiber, this project is a clone of Apple's iPhone 15 Pro website, built using React.js and TailwindCSS. It showcases advanced animations and 3D model rendering using GSAP (Greensock Animations) and Three.js, giving users an immersive and engaging browsing experience. Happy coding! 😊🚀
- Host: GitHub
- URL: https://github.com/sarthak-0-sach/threejs_iphone_website
- Owner: SartHak-0-Sach
- License: bsd-3-clause
- Created: 2024-05-30T06:05:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-16T14:03:16.000Z (11 months ago)
- Last Synced: 2025-09-07T05:44:29.311Z (30 days ago)
- Topics: 3d-model-rendering, appealing-visuals, gsap-animation, iphone-website-clone, react-three-drei, react-three-fiber, reactjs, smooth-animations, tailwindcss-styling, three-js, vite-react
- Language: JavaScript
- Homepage:
- Size: 37.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# iPhone 15 Pro Website Clone 📱
## 📋 Table of Contents
1. [🤖 Introduction](#-introduction)
2. [⚙️ Tech Stack](#%EF%B8%8F-tech-stack)
3. [🔋 Features](#-features)
4. [🤸 Quick Start](#-quick-start)
- [Prerequisites](#prerequisites)
- [Cloning the Repository](#cloning-the-repository)
- [Installation](#installation)
- [Running the Project](#running-the-project)
6. [🔗 Links](#-links)
7. [🚀 More](#-more)
## 🤖 Introduction
This project is a clone of Apple's iPhone 15 Pro website, built using **React.js** and **TailwindCSS**. It showcases advanced animations and 3D model rendering using **GSAP (Greensock Animations)** and **Three.js**, giving users an immersive and engaging browsing experience.
## ⚙️ Tech Stack
| Technology | Purpose |
|-----------------------|---------------------------------------------------|
| **React.js** | Frontend framework for building the user interface |
| **Three.js** | 3D rendering library for displaying iPhone models |
| **React Three Fiber** | Integrates Three.js with React |
| **React Three Drei** | Helper components for React Three Fiber |
| **GSAP (Greensock)** | Advanced animations for UI elements |
| **Vite** | Fast and modern development server |
| **Tailwind CSS** | Utility-first CSS framework for styling |
## 🔋 Features
- **👉 Beautiful Subtle Smooth Animations using GSAP**: Experience enhanced, seamless animations that elevate the UI interaction.
- **👉 3D Model Rendering with Different Colors and Sizes**: View the iPhone 15 Pro in various colors and sizes with interactive 3D models.
- **👉 Custom Video Carousel (made with GSAP)**: A unique, interactive video carousel that keeps users engaged.
- **👉 Completely Responsive**: A fully responsive design that ensures optimal performance and display on any device.
- **👉 Code Architecture and Reusability**: Organized code structure promoting maintainability and reusability.
## 🤸 Quick Start
Here is how to git-started(sorry🥲) by setting up the project on your local environment.
### Prerequisites
Ensure you have the following installed:
- **Git**
- **Node.js**
- **npm (Node Package Manager)**
### Cloning the Repository
Clone the repository using:
```bash
git clone https://github.com/JavaScript-Mastery-Pro/iphone-doc.git
cd iphone-doc
```
### Installation
Install the project dependencies with:
```bash
npm install
```
### Running the Project
Start the development server with:
```bash
npm run dev
```
Visit [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## 🔗 Links
Sarthak Sachdev
- Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)
- LinkedIn - [Sarthak Sachdev](https://www.linkedin.com/in/sarthak2004/)
- Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)
## 🚀 More
Stay tuned for upcoming features, enhancements, and more! Would love to setup contributions in future if anyone is interested!!
**Happy coding!** 😊🚀