{"id":26375115,"url":"https://github.com/xeventech/3d-portfolio-website","last_synced_at":"2026-04-07T21:31:35.607Z","repository":{"id":282315199,"uuid":"948179713","full_name":"XevenTech/3d-portfolio-website","owner":"XevenTech","description":"Amazing 3D Web Developer Portfolio Website with awesome graphics - built with React \u0026 Three.js. ▶️ Watch Video Tutorial 🔗https://youtu.be/uAFUHCpnz3E","archived":false,"fork":false,"pushed_at":"2025-03-14T12:26:46.000Z","size":18047,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-23T23:36:27.759Z","etag":null,"topics":["3d-portfolio","3d-website","awesome-portfolio","framer-motion","javascript","portfolio","portfolio-website","react","reactjs","tailwindcss","threejs","typescript"],"latest_commit_sha":null,"homepage":"https://3d-portfolio-website-gamma.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/XevenTech.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":"2025-03-13T22:09:31.000Z","updated_at":"2025-03-28T11:52:31.000Z","dependencies_parsed_at":"2025-03-13T23:34:56.001Z","dependency_job_id":null,"html_url":"https://github.com/XevenTech/3d-portfolio-website","commit_stats":null,"previous_names":["xeventech/3d-portfolio-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/XevenTech/3d-portfolio-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XevenTech%2F3d-portfolio-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XevenTech%2F3d-portfolio-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XevenTech%2F3d-portfolio-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XevenTech%2F3d-portfolio-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XevenTech","download_url":"https://codeload.github.com/XevenTech/3d-portfolio-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XevenTech%2F3d-portfolio-website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281705961,"owners_count":26547506,"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","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"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-portfolio","3d-website","awesome-portfolio","framer-motion","javascript","portfolio","portfolio-website","react","reactjs","tailwindcss","threejs","typescript"],"created_at":"2025-03-17T02:15:55.694Z","updated_at":"2025-10-29T21:43:54.037Z","avatar_url":"https://github.com/XevenTech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Portfolio\n\n\u003c!-- GitHub badges --\u003e\n\n![GitHub repo size](https://img.shields.io/github/repo-size/xeventech/3d-portfolio-website)\n[![Stars](https://img.shields.io/github/stars/XevenTech/3d-portfolio-website?style=social)](https://github.com/XevenTech/3d-portfolio-website/stargazers)\n[![Fork](https://img.shields.io/github/forks/XevenTech/3d-portfolio-website?style=social)](https://github.com/XevenTech/3d-portfolio-website/forks)\n[![YouTube Video Views](https://img.shields.io/youtube/views/uAFUHCpnz3E?style=social)](https://youtu.be/uAFUHCpnz3E)\n\n![demo](https://github.com/XevenTech/projects_snapshots/blob/main/3d-portfolio-website/3d-portfolio.png?raw=true)\n\n\n## 🌐 Live Demo\n\nExplore the live demonstration of the project:\n[3d-portfolio-website](https://3d-portfolio-website-gamma.vercel.app/)\n\n## 📝 Description\n\n**3D Portfolio** is a well-designed and fully functional portfolio website that is built with\nReact.js and Three.js. It is a fully responsive website that works well on all devices.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFolder Structure\u003c/b\u003e\u003c/summary\u003e\n\n```bash\n3d-portfolio-website/\n├── src/\n├   ├── App.tsx\n├   ├── globals.css\n├   ├── main.tsx\n├   ├── vite.env.d.ts\n├   ├── components/\n├   ├   ├── atoms/\n├   ├   ├   └── Header.tsx\n├   ├   ├── canvas/\n├   ├   ├   ├── Ball.tsx\n├   ├   ├   ├── Computers.tsx\n├   ├   ├   ├── Earth.tsx\n├   ├   ├   ├── Stars.tsx\n├   ├   ├   └── index.ts\n├   ├   ├── layout/\n├   ├   ├   ├── Loader.tsx\n├   ├   ├   └── Navbar.tsx\n├   ├   ├── sections/\n├   ├   ├   ├── About.tsx\n├   ├   ├   ├── Contact.tsx\n├   ├   ├   ├── Experience.tsx\n├   ├   ├   ├── Feedbacks.tsx\n├   ├   ├   ├── Hero.tsx\n├   ├   ├   ├── Tech.tsx\n├   ├   ├   ├── Works.tsx\n├   ├   ├   └── page.tsx\n├   ├   └── index.ts\n├   ├── constants/\n├   ├   ├── config.ts\n├   ├   ├── styles.ts\n├   ├   └── index.ts\n├   ├── hoc/\n├   ├   ├── SectionWrapper.tsx\n├   ├   └── index.ts\n├   ├── utils/\n├   ├   └── motion.ts\n├   ├── types/\n├   ├   └── index.d.ts\n├   └── assets/\n├       ├── company/\n├       ├   └── [[...]].{svg,png}\n├       ├── tech/\n├       ├   └── [[...]].{svg,png}\n├       ├── [[...]].{svg,png}\n├       └── index.ts\n├── public/\n├   ├── desktop_pc\n├   ├   ├── textures/[[...]].png\n├   ├   ├── license.txt\n├   ├   ├── scene.bin\n├   ├   └── scene.gltf\n├   ├── planet\n├   ├   ├── textures/[[...]].png\n├   ├   ├── license.txt\n├   ├   ├── scene.bin\n├   ├   └── scene.gltf\n├   ├── logo.png\n├   └── logo.svg\n├── .env\n├── .eslintignore\n├── .eslintrc.cjs\n├── .gitignore\n├── .prettierignore\n├── .prettierrc.cjs\n├── index.html\n├── LICENSE\n├── README.md\n├── package.json\n├── postcss.config.cjs\n├── tailwind.config.cjs\n├── tsconfig.json\n├── tsconfig.node.json\n└── vite.config.js\n```\n\n\u003c/details\u003e\n\n## 📖 Table of Contents\n\n\u003cdetails\u003e\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Live Demo](#-live-demo)\n- [Description](#-description)\n- [Technologies Used](#-technologies-used)\n- [Get Started](#-get-started)\n  - [Prerequisites](#-prerequisites)\n  - [Installation and Run Locally](#-installation-and-run-locally)\n  - [Scripts](#-scripts)\n- [Environment Variables](#-environment-variables)\n- [Deployment](#-deployment)\n  - [Deploy to production (manual)](#-deploy-to-production-manual)\n  - [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)\n  - [Deploy on Netlify](#-deploy-on-netlify)\n- [Contributing](#-contributing)\n  - [Bug / Feature Request](#-bug--feature-request)\n- [Acknowledgements](#-acknowledgements)\n- [References](#-references)\n- [Contact Us](#-contact-us)\n- [License](#-license)\n\n\u003c/details\u003e\n\n## ✨ Technologies Used\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003e3D Portfolio\u003c/b\u003e is built using the following technologies:\u003c/summary\u003e\n\n- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that\n  compiles to plain JavaScript.\n- [Vite](https://vitejs.dev/): Vite is a build tool that aims to provide a faster and leaner\n  development experience for modern web projects.\n- [React.js](https://reactjs.org/): React is a free and open-source front-end JavaScript library for\n  building user interfaces or UI components.\n- [Three.js](https://threejs.org/): Three.js is a cross-browser JavaScript library and application\n  programming interface used to create and display animated 3D computer graphics in a web browser\n  using WebGL.\n- [Framer Motion](https://www.framer.com/motion/): Framer Motion is a production-ready motion\n  library for React.\n- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for\n  rapidly building custom user interfaces.\n- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic\n  patterns found in JavaScript code.\n- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.\n- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the\n  frameworks, workflows, and infrastructure to build a faster, more personalized Web.\n\n\u003c/details\u003e\u003cbr/\u003e\n\n![Technologies Used](https://skillicons.dev/icons?i=ts,vite,react,threejs,tailwind,vercel)\n\n## 🧰 Get Started\n\nTo get this project up and running in your development environment, follow these step-by-step\ninstructions.\n\n### 📋 Prerequisites\n\nIn order to install and run this project locally, you would need to have the following installed on\nyour local machine.\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com/get-npm)\n- [Git](https://git-scm.com/downloads)\n\n### ⚙️ Installation and Run Locally\n\n**Step 0:**\n\nNote :bangbang: the application uses EmailJS in order to send emails using client-side, therefore,\nyou need to create EmailJS account [here](https://emailjs.com/) and sets the\n`VITE_EMAILJS_SERVICE_ID`, `VITE_EMAILJS_TEMPLATE_ID`, and `VITE_EMAIL_JS_ACCESS_TOKEN` environment\nvariables in `.env` file.\n\n**Step 1:**\n\nDownload or clone this repo by using the link below:\n\n```bash\ngit clone https://github.com/XevenTech/3d-portfolio-website.git\n```\n\n**Step 2:**\n\nExecute the following command in the root directory of the downloaded repo in order to install\ndependencies:\n\n```bash\nnpm install\n```\n\n**Step 3:**\n\nExecute the following command in order to run the development server locally:\n\n```bash\nnpm run dev\n```\n\n**Step 4:**\n\nOpen [http://localhost:5173](http://localhost:5173) with your browser to see the result.\n\n### 📜 Scripts\n\nAll scripts are defined in the `package.json` file. Here is a list of all scripts:\n\n| Script             | Action                                      |\n| :----------------- | :------------------------------------------ |\n| `npm install`      | Installs dependencies                       |\n| `npm run dev`      | Starts local dev server at `localhost:5137` |\n| `npm run build`    | Build your production site to `./dist/`     |\n| `npm run preview`  | Boot up a local static web server           |\n| `npm run lint`     | Run ESLint                                  |\n| `npm run ts:check` | Perform type-checking                       |\n\n## 🔒 Environment Variables\n\nEnvironment variables[^3] can be used for configuration. They must be set before running the app.\n\n\u003e [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are\n\u003e set in the operating system or shell, typically used to configure programs.\n\n**React.js 18 3D Portfolio** uses [EmailJS](https://www.emailjs.com/) as external service. You need\nto create an account and get the required credentials to run the app.\n\nCreate a `.env` file in the root directory of the project and add the following environment\nvariables:\n\n```env\nVITE_EMAILJS_SERVICE_ID=\u003cVITE_EMAILJS_SERVICE_ID\u003e\nVITE_EMAILJS_TEMPLATE_ID=\u003cVITE_EMAILJS_TEMPLATE_ID\u003e\nVITE_EMAIL_JS_ACCESS_TOKEN=\u003cVITE_EMAIL_JS_ACCESS_TOKEN\u003e\n```\n\n## 🚀 Deployment\n\n#### Deploy to production (manual)\n\nYou can create an optimized production build with the following command:\n\n```bash\nnpm run build\n```\n\n#### Deploy on Vercel (recommended)\n\nThe easiest way to deploy this Next.js app is to use the\n[Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/XevenTech/3d-portfolio-website)\n\n#### Deploy on Netlify\n\nYou can also deploy this Next.js app with [Netlify](https://www.netlify.com/).\n\n[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/XevenTech/3d-portfolio-website)\n\nCheck out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n\n## 💎 Acknowledgements\n\nWe'd like to express our gratitude to the following technologies who helped us with this project and made it\npossible:\n\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Three.js](https://threejs.org/)\n- [Framer Motion](https://www.framer.com/motion/)\n- [React Vertical Timeline Component](https://www.npmjs.com/package/react-vertical-timeline-component)\n- [React Parallax Tilt](https://www.npmjs.com/package/react-parallax-tilt)\n- [Maath](https://www.npmjs.com/package/maath)\n- [EmailJS](https://www.emailjs.com/)\n- [ESLint](https://eslint.org/)\n- [Prettier](https://prettier.io/)\n- [Vercel](https://vercel.com/)\n- [JavaScript Mastery](https://www.jsmastery.pro/)\n\n## 📞 Contact Us\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-xeventech-blue?style=flat\u0026logo=linkedin\u0026logoColor=b0c0c0\u0026labelColor=363D44)](https://www.linkedin.com/company/xeventech)\n\n\n## 📋 License\n\n[licensed as MIT](https://opensource.org/license/mit/) and is free to use — See\n[LICENSE](https://github.com/XevenTech/3d-portfolio-website/blob/main/LICENSE) for more details.\n\n\n## ▶️ Watch Video Tutorial\n\n[![Watch Video](https://github.com/XevenTech/projects_snapshots/blob/main/3d-portfolio-website/thumbnail.png?raw=true \"Play\")](https://youtu.be/uAFUHCpnz3E)\n\n\n## ❤ Thank you for reading, here's a cat:\n\n![Cat](https://github.com/XevenTech/xeventech/blob/main/cat.gif?raw=true \"Thank You\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxeventech%2F3d-portfolio-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxeventech%2F3d-portfolio-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxeventech%2F3d-portfolio-website/lists"}