{"id":21635281,"url":"https://github.com/sarthak-0-sach/threejs_iphone_website","last_synced_at":"2026-04-11T04:32:01.048Z","repository":{"id":263146636,"uuid":"807968371","full_name":"SartHak-0-Sach/ThreeJS_iPhone_website","owner":"SartHak-0-Sach","description":"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! 😊🚀","archived":false,"fork":false,"pushed_at":"2024-11-16T14:03:16.000Z","size":39037,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T17:49:55.754Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SartHak-0-Sach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-30T06:05:45.000Z","updated_at":"2024-11-16T14:05:56.000Z","dependencies_parsed_at":"2024-11-16T15:27:30.727Z","dependency_job_id":null,"html_url":"https://github.com/SartHak-0-Sach/ThreeJS_iPhone_website","commit_stats":null,"previous_names":["sarthak-0-sach/threejs_iphone_website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SartHak-0-Sach/ThreeJS_iPhone_website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SartHak-0-Sach%2FThreeJS_iPhone_website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SartHak-0-Sach%2FThreeJS_iPhone_website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SartHak-0-Sach%2FThreeJS_iPhone_website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SartHak-0-Sach%2FThreeJS_iPhone_website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SartHak-0-Sach","download_url":"https://codeload.github.com/SartHak-0-Sach/ThreeJS_iPhone_website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SartHak-0-Sach%2FThreeJS_iPhone_website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31669113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-25T03:20:35.139Z","updated_at":"2026-04-11T04:32:01.014Z","avatar_url":"https://github.com/SartHak-0-Sach.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iPhone 15 Pro Website Clone 📱\n\n## 📋 Table of Contents\n1. [🤖 Introduction](#-introduction)\n2. [⚙️ Tech Stack](#%EF%B8%8F-tech-stack)\n3. [🔋 Features](#-features)\n4. [🤸 Quick Start](#-quick-start)\n   - [Prerequisites](#prerequisites)\n   - [Cloning the Repository](#cloning-the-repository)\n   - [Installation](#installation)\n   - [Running the Project](#running-the-project)\n6. [🔗 Links](#-links)\n7. [🚀 More](#-more)\n\n## 🤖 Introduction\nThis 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.\n\n## ⚙️ Tech Stack\n| Technology            | Purpose                                           |\n|-----------------------|---------------------------------------------------|\n| **React.js**          | Frontend framework for building the user interface |\n| **Three.js**          | 3D rendering library for displaying iPhone models |\n| **React Three Fiber** | Integrates Three.js with React                    |\n| **React Three Drei**  | Helper components for React Three Fiber           |\n| **GSAP (Greensock)**  | Advanced animations for UI elements               |\n| **Vite**              | Fast and modern development server                |\n| **Tailwind CSS**      | Utility-first CSS framework for styling           |\n\n## 🔋 Features\n- **👉 Beautiful Subtle Smooth Animations using GSAP**: Experience enhanced, seamless animations that elevate the UI interaction.\n- **👉 3D Model Rendering with Different Colors and Sizes**: View the iPhone 15 Pro in various colors and sizes with interactive 3D models.\n- **👉 Custom Video Carousel (made with GSAP)**: A unique, interactive video carousel that keeps users engaged.\n- **👉 Completely Responsive**: A fully responsive design that ensures optimal performance and display on any device.\n- **👉 Code Architecture and Reusability**: Organized code structure promoting maintainability and reusability.\n\n## 🤸 Quick Start\nHere is how to git-started(sorry🥲) by setting up the project on your local environment.\n\n### Prerequisites\nEnsure you have the following installed:\n- **Git**\n- **Node.js**\n- **npm (Node Package Manager)**\n\n### Cloning the Repository\nClone the repository using:\n```bash\ngit clone https://github.com/JavaScript-Mastery-Pro/iphone-doc.git\ncd iphone-doc\n```\n\n### Installation\nInstall the project dependencies with:\n```bash\nnpm install\n```\n\n### Running the Project\nStart the development server with:\n```bash\nnpm run dev\n```\nVisit [http://localhost:5173](http://localhost:5173) in your browser to view the project.\n\n## 🔗 Links\n\u003cb\u003e\u003cstrong\u003eSarthak Sachdev\u003c/strong\u003e\u003c/b\u003e\n- Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)\n- LinkedIn - [Sarthak Sachdev](https://www.linkedin.com/in/sarthak2004/)\n- Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)\n\n## 🚀 More\nStay tuned for upcoming features, enhancements, and more! Would love to setup contributions in future if anyone is interested!!\n\n**Happy coding!** 😊🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarthak-0-sach%2Fthreejs_iphone_website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarthak-0-sach%2Fthreejs_iphone_website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarthak-0-sach%2Fthreejs_iphone_website/lists"}