{"id":26692762,"url":"https://github.com/polypasc/threejs-portfolio","last_synced_at":"2025-07-17T18:03:39.298Z","repository":{"id":280767890,"uuid":"886765536","full_name":"PolyPasc/threejs-portfolio","owner":"PolyPasc","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-11T15:18:28.000Z","size":11388,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T07:35:36.329Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PolyPasc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-11-11T15:07:26.000Z","updated_at":"2024-11-11T15:18:32.000Z","dependencies_parsed_at":"2025-03-05T07:47:12.304Z","dependency_job_id":null,"html_url":"https://github.com/PolyPasc/threejs-portfolio","commit_stats":null,"previous_names":["polypasc/threejs-portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolyPasc%2Fthreejs-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolyPasc%2Fthreejs-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolyPasc%2Fthreejs-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolyPasc%2Fthreejs-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PolyPasc","download_url":"https://codeload.github.com/PolyPasc/threejs-portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245703017,"owners_count":20658732,"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":[],"created_at":"2025-03-26T17:34:52.820Z","updated_at":"2025-03-26T17:34:54.685Z","avatar_url":"https://github.com/PolyPasc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three.js Portfolio Website\n\nThis Three.js project utilize modern WebGL technologies alongside React.js to craft immersive, visually appealing experiences that captivate users from the very first moment they arrive.\n\n## Table of Contents\n\n- [Description](#description)\n- [Prerequisites](#prerequisites)\n- [Technologies Used](#technologies-used)\n- [Features](#features)\n- [Installation and Setup](#installation-and-setup)\n- [Running the Project](#running-the-project)\n- [Project Structure](#project-structure)\n- [Contributing](#contributing)\n- [Acknowledgments](#acknowledgments)\n  - [Tools for Future Use](#tools-for-future-use)\n- [Things I learned](#things-i-learned)\n- [Future Scope](#future-scope)\n- [Contact](#contact)\n\n## Description\n\nAn interactive showcase designed to highlight skills and projects as a web developer. This portfolio provides an responsive and engaging user experience through immersive 3D graphics, with the help of WebGL.\n\n- **Technology Stack**: Three.js, React.js, Tailwind CSS, React Three Fiber and React Three Drei\n- **Development Tools**: ESLint, Prettier and Vite\n\n## Prerequisites\n\n1. Node and npm are required. Here are the versions that I have used.\n\n   ```bash\n   node --version\n\n   v22.1.0\n   ```\n\n   ```bash\n   npm --version\n\n   10.7.0\n   ```\n\n2. Git is required. Here's the version that I have used\n\n   ```bash\n   git --version\n\n   git version 2.45.0.windows.1\n   ```\n\n3. At last, a GitHub account. :octocat:\n\n## Technologies Used\n\n  - **React**: JavaScript library for building user interfaces.\n  - **Three.js**: Library for rendering 3D graphics in the browser.\n  - **Vite**: Fast build tool with hot module replacement.\n  - **React Three Fiber**: React renderer for Three.js, simplifies 3D integration.\n  - **React Three Drei**: Useful helpers for React Three Fiber projects.\n  - **Tailwind CSS**: Utility-first CSS framework for rapid styling.\n  - **ESLint**: Tool for identifying and fixing JavaScript issues.\n  - **Prettier**: Code formatter for consistent style across the codebase.\n\n## Features\n\n- **Interactive 3D Models**: Engage users with a captivating 3D model that responds to user interaction, creating an immersive experience right.\n\n- **Responsive Design**: Built with Tailwind CSS, the website ensures a seamless experience across all devices, adapting beautifully to various screen sizes.\n\n- **Interactive Showcase**: Projects and work experience with interactive elements, allows users to explore your skills and contributions in detail.\n\n- **User-Centric Overview**: Provides a clear and concise information of your background and expertise, helping viewers understand your development workflow.\n\n- **Client Testimonials**: Highlight positive feedback from previous clients, showcasing your commitment to quality and client satisfaction.\n\n- **Configured for 3D Web Development**: Utilizes Vite for fast builds and hot module replacement (HMR), along with ESLint and Prettier configured for maintaining clean, consistent code quality with Tailwind CSS and react-three-fiber.\n\n## Installation and Setup\n\nTo set up this project locally, follow these steps:\n\n1.  **Clone the repository:**\n\n    ```bash\n    git clone https://github.com/PolyPasc/threejs-portfolio.git\n\n    cd threejs-portfolio\n    ```\n\n2.  **Install dependencies:**\n\n    ```bash\n    npm install\n    ```\n\n## Running the Project\n\n- **Start Server:** Use `npm run dev` for development mode with automatic restarts.\n\n  ```bash\n  npm run dev\n  ```\n\n  The server will start on `http://localhost:5173`.\n\n- **Run Linting:** Use `npm run lint` to check code quality.\n\n  ```bash\n  npm run lint\n  ```\n\n- **Format Code:** Use `npm run format` to format the code according to project standards.\n\n  ```bash\n  npm run format\n  ```\n\n- **Build Code:** Use `npm run build` to build the code according to vite configuration.\n\n  ```bash\n  npm run build\n  ```\n\n- **Preview Code:** Use `npm run preview` to preview how the code will look and behave in a production environment.\n\n  ```bash\n  npm run preview\n  ```\n\n## Project Structure\n\nHere is a brief overview of the project structure:\n\n```\n/public\n    /assets                 # Uploaded assets\n    /models                 # .glb models for 3D Canvas\n    /textures               # Textures \u0026 media files for models\n/src\n    /components             # Reusable React components\n      /ui                   # Resuable UI react Components\n    /constants              # Constant Data\n    /sections               # Reusable Section components \n    App.jsx                 # Main application component\n    index.css               # Global styles\n    main.jsx                # Entry point for React\n.gitignore                  # Git ignore file\n.prettierignore             # Prettier ignore file\n.prettierrc                 # Prettier configuration\n.eslint.config.js           # ESLint configuration\nindex.html                  # Main HTML file\npackage-lock.json           # Locks dependencies versions\npackage.json                # Project metadata and dependencies\ntailwind.config.js          # Tailwind CSS configuration\nvite.config.js              # Vite configuration\n```\n\n## Contributing\n\nContributions are welcome! Please follow these guidelines:\n\n1. Fork this repository.\n2. Create a new branch `git checkout -b feature/YourFeature`.\n3. Make your changes.\n4. Commit your changes `git commit -am 'Add new feature'`.\n5. Push to the branch `git push origin feature/YourFeature`.\n6. Create a new Pull Request.\n\n## Acknowledgments\n\n- [Node.js](https://nodejs.org/)\n- [React](https://github.com/reactjs/react.dev)\n- [React Three Fiber](https://github.com/pmndrs/react-three-fiber)\n- [React Three Drei](https://github.com/pmndrs/drei)\n- [Three.js](https://threejs.org/)\n- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss)\n- [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)\n- [react responsive](https://github.com/yocontra/react-responsive)\n- [maath](https://github.com/pmndrs/maath)\n- [react-globe.gl](https://github.com/vasturiano/react-globe.gl)\n- [leva](https://github.com/pmndrs/leva)\n- [ESLint](https://eslint.org/)\n- [Prettier](https://prettier.io/)\n- [readyplayer.me (3D Human Avatar)](https://readyplayer.me/)\n- [.gltf to .jsx Convertor](https://github.com/pmndrs/gltfjsx)\n- [Sketchfab - 3D Models](https://sketchfab.com/3d-models)\n\n---\n\n### Tools for Future Use\n\n- [Adobe Mixamo - To Animate 3D Human Avatar](https://www.mixamo.com/#/)\n- [.glb / .gltf to .fbx convertor for Adobe Mixamo](https://products.aspose.app/3d/conversion/gltf-to-fbx)\n\n## Things I Learned\n\nThroughout the development of this Three.js portfolio website, I gained valuable insights and skills, including:\n\n- **3D Web Graphics**: Deepened my understanding of Three.js and WebGL, learning how to create and manipulate 3D models for dynamic web experiences.\n\n- **React.js Proficiency**: Enhanced my skills in React, particularly in managing 3D models and Canvases to create interactive components, leveraging libraries like React Three Fiber and React Three Drei.\n\n- **Responsive Web Design**: Gained expertise in using Tailwind CSS to build responsive layouts, ensuring optimal user experiences across various devices.\n\n- **Code Consistency**: Learned to inforce consistent code quality through the integration of ESLint rules and Prettier [plugins](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier).\n\n- **User-Centered Design**: Gained insights into creating user-friendly interfaces that enhance user engagement and satisfaction.\n\n## Future Scope\n\nLooking forward, several enhancements could further improve the functionality and user experience of this project. Such as -\n\n- **Enhanced SEO and Accessibility**: Implement advanced search engine optimization (SEO) and accessibility features to ensure the site reaches a wider audience and is usable by all visitors.\n\n- **Comprehensive Project Documentation**: A seperate detailed documentation page for each project, offering insights and guidance to enhance user understanding and engagement.\n\n- **Dedicated Blog Section**: A blog page to share insights, lessons learned, and experiences throughout the development journey.\n\nI would like feedback and suggestions for further improvements and features!\n\nIf you have ideas on how to enhance this project, please feel free to share them through issues or pull requests.\n\n## Contact\n\nFor any questions or feedback, please reach out to:\n\n- :e-mail: **Email:** github@technologist.anonaddy.com\n- :point_right: **LinkedIn:** [in/pratap-adit](https://www.linkedin.com/in/pratap-adit)\n- :octocat: **GitHub:** [PolyPasc](https://github.com/PolyPasc)\n\n---\n\nThank you for checking out my project! If this project helped / interests you, then give it a :star2: Star.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolypasc%2Fthreejs-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolypasc%2Fthreejs-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolypasc%2Fthreejs-portfolio/lists"}