Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nivindulakshitha/apple
I cloned iPhone 15 Pro 3D website from scratch!
https://github.com/nivindulakshitha/apple
gasp react sentry tailwindcss threejs
Last synced: 5 days ago
JSON representation
I cloned iPhone 15 Pro 3D website from scratch!
- Host: GitHub
- URL: https://github.com/nivindulakshitha/apple
- Owner: nivindulakshitha
- Created: 2024-12-06T07:44:36.000Z (2 months ago)
- Default Branch: Master
- Last Pushed: 2025-01-13T03:23:59.000Z (about 1 month ago)
- Last Synced: 2025-01-13T04:26:03.855Z (about 1 month ago)
- Topics: gasp, react, sentry, tailwindcss, threejs
- Language: JavaScript
- Homepage: https://apple-showroom.vercel.app/
- Size: 43.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
iPhone 15 Pro Website Clone
A beautiful clone of Apple's iPhone 15 Pro website built with React.js, Three.js, and GSAP.
## Table of Contents
1. [Project Overview](#project-overview)
2. [Features](#features)
3. [Tech Stack](#tech-stack)
4. [Setup and Installation](#setup-and-installation)
5. [Live Demo](#live-demo)
6. [Contributing](#contributing)
7. [Links](#links)
## Project Overview
This project is a **clone of the iPhone 15 Pro website** created as part of a tutorial by **JavaScript Mastery**. The website demonstrates **advanced web design and animation techniques** using **React.js**, **GSAP (Greensock)**, and **Three.js** for 3D model rendering.
## Features
- **Interactive 3D iPhone 15 Pro Model**: View the iPhone 15 Pro in various colors and sizes.
- **Smooth Animations with GSAP**: Enhanced user interaction with subtle animations powered by GSAP.
- **Custom Video Carousel**: Explore the product through a dynamic video carousel.
- **Fully Responsive Design**: Enjoy a seamless experience across all devices, from mobile to desktop.
- **Built with TailwindCSS**: Ensuring a highly customizable and responsive layout.
## Tech Stack
- **React.js**: For building the user interface.
- **GSAP**: For smooth, interactive animations.
- **Three.js**: For 3D rendering of iPhone models.
- **TailwindCSS**: For custom and responsive styling.
- **Vite**: For fast, optimized development.
## Setup and Installation
### Prerequisites
- **Git**: Version control tool.
- **Node.js**: JavaScript runtime.
- **npm**: Node Package Manager (for managing project dependencies).
### Clone the repository
```bash
git clone https://github.com/JavaScript-Mastery-Pro/iphone-doc.git
cd iphone-doc
```
### Install dependencies
```bash
npm install
```
### Run the app
```bash
npm run dev
```
Visit `http://localhost:5173` to view the project in your browser.
## Live Demo
You can check out the live version of this project here:
[Live Demo](https://your-live-demo-link.com)
## Contributing
We welcome contributions to this project! To contribute:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-branch`).
3. Make your changes and commit them (`git commit -m 'Add feature'`).
4. Push to your branch (`git push origin feature-branch`).
5. Open a pull request.
## Links
- [YouTube Tutorial by JavaScript Mastery](https://www.youtube.com/@javascriptmastery/videos)
- [Project Repository on GitHub](https://github.com/JavaScript-Mastery-Pro/iphone-doc)
- [Join our Discord Community](https://discord.com/invite/n6EdbFJ)