Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arushsingh03/my-portfolio

My portfolio Built using reactjs vitejs, next, threejs.
https://github.com/arushsingh03/my-portfolio

mixamo readyplayerme tailwind threejs vercel vitejs-react

Last synced: 6 days ago
JSON representation

My portfolio Built using reactjs vitejs, next, threejs.

Awesome Lists containing this project

README

        



My Portfolio



# Description
This my portfolio leverages React and Three.js to create a visually captivating experience, showcasing my skills and projects with dynamic 3D animations. Built using Vite, it ensures a streamlined development process with rapid build times and effortless deployment. The portfolio's structure follows modern development practices, utilizing reusable higher-order components to maintain clean, modular code that is easy to extend. Additionally, the contact form is integrated with Email.js, allowing seamless communication by directly sending form submissions to your email inbox. This integration enhances user engagement while ensuring fast and reliable message delivery. The overall design reflects both technical proficiency and creativity, providing a compelling demonstration of the developer's capabilities in building immersive, interactive web experiences.

# Features
- Interactive 3D Animations: Utilizes Three.js to add dynamic, animated 3D elements for an engaging user experience.
- Optimized Build with Vite: Fast build times and easy deployment using Vite, improving the development workflow.
- Reusable Higher-Order Components: Modular design that encourages clean code and easy scalability.
- Email Integration with Email.js: Contact form directly linked to your email, enabling seamless communication.
- Responsive Design: Ensures a consistent and optimized user experience across all devices, from desktops to mobile.
- Fast Loading Times: Leveraging Vite and optimized assets for quick load times and enhanced performance.
- Showcase of Projects: Highlights key projects and skills, allowing visitors to explore the developer's work interactively.
# Screenshots
### 3D Hero Section


### About Section which have your a spining globe with your pinned location


### 3D Project Section which shows your projects slides


### Experience Section


### Contact Section


# Tech Used
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Threejs](https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)

### How to Setup:
- Step 1: Clone the Project
`git clone https://github.com/arushsingh03/My-Portfolio`

- Step 2: install all the required dependencies
`npm install`

### API references
| Syntax | Description |
| ----------- | ----------- |
| VITE_APP_EMAILJS_SERVICE_ID | first you need to create a account on emailjs and then you can add emailjs service api key |
| VITE_APP_EMAILJS_TEMPLATE_ID | and, add emailjs template api key which you can find [here](https://www.emailjs.com/)|
| VITE_APP_EMAILJS_PUBLIC_KEY | you also need to add a email js public key which you can find in your account section |
- Step 3: Once ready run the following command to launch the local server
`npm run dev`

### If all goes well you can find your live site at :
`hthttp://localhost:5173/`

### Click to check live preview

Visit Portfolio