Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/niranjankumar001/iphone-16-pro-clone
Explore this sleek and first website clone of the iPhone 16 Pro! Built with React.js for an interactive feel, Three.js for stunning 3D visuals, and GSAP for smooth animations. IMPORTANT: Star the repo as you about contribute to the open source ,and this will work as a bookmark.
https://github.com/niranjankumar001/iphone-16-pro-clone
gsap hacktoberfest iphone16pro iphone16proclone reactjs threejs
Last synced: 3 months ago
JSON representation
Explore this sleek and first website clone of the iPhone 16 Pro! Built with React.js for an interactive feel, Three.js for stunning 3D visuals, and GSAP for smooth animations. IMPORTANT: Star the repo as you about contribute to the open source ,and this will work as a bookmark.
- Host: GitHub
- URL: https://github.com/niranjankumar001/iphone-16-pro-clone
- Owner: NiranjanKumar001
- License: other
- Created: 2024-09-30T17:51:59.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T07:24:36.000Z (3 months ago)
- Last Synced: 2024-10-24T09:06:44.987Z (3 months ago)
- Topics: gsap, hacktoberfest, iphone16pro, iphone16proclone, reactjs, threejs
- Language: JavaScript
- Homepage: https://i-phone-16-pro.vercel.app
- Size: 45.6 MB
- Stars: 12
- Watchers: 1
- Forks: 16
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# π± iPhone 16 Pro
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Three.js](https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white)
![GSAP](https://img.shields.io/badge/GSAP-88CE02?style=for-the-badge&logo=greensock&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/TailwindCSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
## **β First iPhone 16 Pro Clone Website β**
### This project is the first clone of the iPhone 16 Pro website, providing an immersive 3D web experience. Built using React, Three.js, GSAP, and Tailwind CSS, this website replica showcases sleek design, interactive 3D elements, and smooth animations. β Feel free to star this project if you like it! β
## π **Key Features of the iPhone 16 Pro Website Clone**
π **ReactJS** for building dynamic UI components
π **Three.js** for stunning 3D graphics
π― **GSAP** for smooth animations and transitions
π¨ **Tailwind CSS** for modern styling
## πΈ **Preview**
### Check out a preview of the iPhone 16 Pro clone website:![Project Screenshot](https://i.postimg.cc/vTr06xHT/Screenshot-2024-10-02-024906.png)
## π **Live Preview**Explore the live demo of the iPhone 16 Pro website: [π‘½](https://i-phone-16-pro.vercel.app/)
## π» **Tech Stack Used in This iPhone 16 Pro Clone**
| Tech | Description |
| ---------------- | --------------------------------------- |
| ReactJS | Frontend library for building UI |
| Three.js | 3D library for rendering graphics |
| GSAP | Animation library for smooth effects |
| Tailwind CSS | Utility-first CSS framework |
## π **How to Get Started with the iPhone 16 Pro Clone Website**
1. Clone the repository:
```bash
git clone https://github.com/NiranjanKumar001/iPhone-16-Pro.git
```
2. Navigate to the project directory:
```bash
cd iPhone-16-Pro
```
3. Install dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm run dev
```
## π **Future Enhancements**
1.Add more detailed 3D interactions with the iPhone 16 Pro model
2.Implement additional GSAP animations for a more dynamic experience
3.Integrate light and dark mode themes
4.Optimize for mobile responsiveness
## Contact
If you have any questions or inquiries regarding the iPhone 16 Pro clone, feel free to reach out via email:
[[email protected]](mailto:[email protected])
## β€οΈContributors
## π **Acknowledgments**
Special thanks to [**Adrian Hajdin**](https://github.com/adrianhajdin) for his insightful iPhone 15 tutorial, which greatly assisted in the development of this project. This project is intended for educational purposes only.
_Made_ by Niranjan Kumar_