{"id":27535697,"url":"https://github.com/lankesathwik7/3d-portfolio","last_synced_at":"2026-04-07T08:01:44.107Z","repository":{"id":287813468,"uuid":"965862881","full_name":"LankeSathwik7/3d-Portfolio","owner":"LankeSathwik7","description":"An immersive and interactive 3D portfolio website built with Three.js and React, featuring animated models, GSAP animations, and responsive design. This project showcases modern web development skills through an engaging visual experience.","archived":false,"fork":false,"pushed_at":"2025-04-14T03:42:19.000Z","size":10138,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T04:33:18.397Z","etag":null,"topics":["3d-portfolio","gsap","portfolio-website","react","react-three-drei","react-three-fiber","tailwindcss","three-js","threejs","vite"],"latest_commit_sha":null,"homepage":"https://3d-portfolio-bay-phi.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LankeSathwik7.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,"zenodo":null}},"created_at":"2025-04-14T03:06:58.000Z","updated_at":"2025-04-14T03:51:26.000Z","dependencies_parsed_at":"2025-04-14T04:43:25.802Z","dependency_job_id":null,"html_url":"https://github.com/LankeSathwik7/3d-Portfolio","commit_stats":null,"previous_names":["lankesathwik7/3d-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LankeSathwik7%2F3d-Portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LankeSathwik7%2F3d-Portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LankeSathwik7%2F3d-Portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LankeSathwik7%2F3d-Portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LankeSathwik7","download_url":"https://codeload.github.com/LankeSathwik7/3d-Portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249535844,"owners_count":21287496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-portfolio","gsap","portfolio-website","react","react-three-drei","react-three-fiber","tailwindcss","three-js","threejs","vite"],"created_at":"2025-04-18T19:10:37.294Z","updated_at":"2026-04-07T08:01:44.100Z","avatar_url":"https://github.com/LankeSathwik7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Portfolio\n\nAn immersive and interactive 3D portfolio website built with Three.js and React, showcasing my skills, projects, and creativity in a unique visual experience.\n\n## 🌟 Live Demo\n\n[View the live site](https://3d-portfolio-bay-phi.vercel.app/)\n\n## 🤖 Introduction\n\nThis 3D Portfolio is a modern, engaging personal website featuring animated 3D scenes, smooth camera transitions, interactive model showcases, and responsive design. It's the perfect way to stand out in the digital crowd and showcase my skills as a developer.\n\nThis project was built following the JavaScript Mastery tutorial, with my own customizations and enhancements added throughout the development process.\n\n## ⚙️ Tech Stack\n\n- **Three.js** - 3D graphics library\n- **React Three Fiber** - React renderer for Three.js\n- **Drei** - Useful helpers for React Three Fiber\n- **GSAP** - Animation library\n- **Tailwind CSS** - Utility-first CSS framework\n- **Vite** - Next generation frontend tooling\n- **React 19** - JavaScript library for building user interfaces\n\n## 🔋 Features\n\n- 👉 **Animated 3D models** with smooth reveal animations\n- 👉 **Realistic lighting and shadows** for immersive scenes\n- 👉 **GSAP-powered scroll interactions** for engaging user experience\n- 👉 **Responsive design** with Tailwind CSS, adapting to all screen sizes\n- 👉 **Micro-interactions** adding polish and delight\n- 👉 **Multi-section layout** (About, Projects, Contact) for organized content\n- 👉 **Mobile-optimized 3D experience** for all devices\n\n## 🤸 Quick Start\n\nFollow these steps to set up the project locally on your machine:\n\n### Prerequisites\n\nMake sure you have the following installed:\n- Git\n- Node.js\n- npm (Node Package Manager)\n\n### Cloning the Repository\n\n```bash\ngit clone https://github.com/LankeSathwik7/3d-Portfolio.git\ncd 3d-Portfolio\n```\n\n### Installation\n\nInstall the project dependencies:\n\n```bash\nnpm install\n```\n\n### Running the Project\n\n```bash\nnpm run dev\n```\n\nOpen http://localhost:5173 in your browser to view the project.\n\n## 📁 Project Structure\n\n```\n3d-Portfolio/\n├── public/            # Static assets and 3D models\n│   ├── images/        # Images and UI assets\n│   └── models/        # 3D models (.glb files)\n├── src/\n│   ├── components/    # React components\n│   │   └── models/    # 3D model components\n│   ├── constants/     # Constants and data\n│   ├── sections/      # Page sections\n│   ├── App.jsx        # Main application component\n│   └── main.jsx       # Entry point\n├── index.html         # HTML entry point\n├── package.json       # Project dependencies and scripts\n└── vite.config.js     # Vite configuration\n```\n\n## 🔧 Customization\n\nTo customize the portfolio for your own use:\n\n1. Replace the 3D models in the `public/models` directory with your own models\n2. Update project information in `src/constants`\n3. Modify the color scheme in your CSS\n4. Change personal information and links throughout the components\n\n## 📱 Responsive Design\n\nThe portfolio is fully responsive, providing an optimal viewing experience across a wide range of devices:\n- Desktop displays\n- Tablets\n- Mobile phones\n\n## 🙏 Acknowledgements\n\nThis project was built following the [JavaScript Mastery](https://www.youtube.com/@javascriptmastery) tutorial. Special thanks to:\n\n- Adrian Hajdin for the excellent tutorial and guidance\n- The Three.js and React Three Fiber communities for their amazing tools\n- All the open-source contributors who make projects like this possible\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flankesathwik7%2F3d-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flankesathwik7%2F3d-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flankesathwik7%2F3d-portfolio/lists"}