This project is a practice exercise to create a website similar to Apple's official site using modern web technologies. The tutorial for this project was followed from Adrian Hajdin's iPhone GitHub repository.
- React.js: A JavaScript library for building user interfaces.
- Three.js: A JavaScript library that enables the creation of 3D graphics in the browser.
- React Three Fiber: A React renderer for Three.js.
- React Three Drei: A collection of useful helpers for React Three Fiber.
- GSAP (Greensock): A powerful animation library for building high-performance animations.
- Vite: A fast development build tool and dev server.
- npm: Node package manager used for managing project dependencies.
- Tailwind CSS: A utility-first CSS framework for quickly styling the application.
Make sure you have Node.js and npm installed on your machine. You can download Node.js here.
-
Clone the repository:
git clone https://github.com/yourusername/apple-website-clone.git cd apple-website-clone
-
Install the dependencies:
npm install
To start the development server, run:
npm run dev
This will start the Vite development server and you should be able to see the application running at http://localhost:3000
.
To build the project for production, run:
npm run build
The built files will be in the dist
directory.
apple-website/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ ├── components/
│ ├── styles/
│ ├── App.jsx
│ ├── index.jsx
│ └── ...
├── .gitignore
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md
- public/: Contains static files like
index.html
. - src/: Contains the source code of the application.
- assets/: Contains images, icons, and other asset files.
- components/: Contains React components.
- styles/: Contains Tailwind CSS styles and custom styles.
- App.jsx: Main application component.
- index.jsx: Entry point of the React application.
Contributions are welcome! If you have any ideas or suggestions, please open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.