Skip to content

This repository showcases a React-based metaverse portfolio featuring a 3D avatar guide, Blender-created office environment, GSAP animations, PWA optimization, Webpack configuration, and live deployment on pulkitmathur.me.

License

Notifications You must be signed in to change notification settings

Pulkit1822/Personal-Portfolio

Repository files navigation

This is a Metaverse portfolio website built using React, Three.js, and Tailwind CSS.


💡 Explore Sponsorship Options

To support this project, explore sponsorship options available for this repository, as every contribution counts and your support will greatly benefit its development 😊


Overview 🚀

  • Built with React, Three.js, and Vite
  • Reactive 3D background created with Three.js
  • Clean and minimalist UI design
  • Engineered the portfolio as a web-based PWA, optimizing for performance, security, and scalability. Configured Webpack and deployed it live.

Features ✨

  • Clean and minimalist UI designed using Tailwind CSS
  • Smooth scroll and page transitions with React Router
  • 3D graphics and animations using Three.js and react-three-fiber
  • Responsive design that works on mobile and desktop
  • Contact form with validation
  • 3D background that reacts to cursor movement
  • Personalized music player for ads-free experience

Running Locally 🚀

  1. Clone this repo

  2. Install dependencies

    yarn install
  3. Start local development server

    yarn run dev

Turn on the Music while viewing 🎵

To enhance your experience while visiting my profile, I recommend turning on the music "Sunflower" by Post Malone. It will add a delightful touch to your browsing experience. Tap on the music icon to turn on the music.

Music Icon

Personalised Music Player 🎵

A Portfolio is something that tells us about a person. So, to know my music taste, I recommend turning on my playlist. A person's music taste tells us more about his emotional thoughts. Tap on the music player icon to view.

Music Player Location Music Player

Music Player Features 🎧

  • Responsive Design: The music player is fully responsive and works seamlessly on both desktop and mobile devices.
  • Ad-Free Experience: Enjoy uninterrupted music with no ads.
  • Cloudinary API: Uses Cloudinary API to store and stream music content, ensuring fast and reliable playback.
  • Basic Controls: Simple and intuitive controls for playing the next song, going back to the previous song, and shuffling the playlist.

Purpose of Including Music Player 🎼

The main idea behind including music in my portfolio is to share my personal taste with viewers. This helps to create a more personal connection, allowing potential collaborators to understand me better and facilitating more effective and enjoyable collaboration.

Technologies Used 🛠️

  • React - JavaScript library for building user interfaces
  • Vite - Fast and lightweight development server
  • Three.js - JavaScript library for creating 3D graphics
  • Tailwind CSS - Utility-first CSS framework
  • Blender - Open-source 3D creation software
  • GSAP - JavaScript animation library
  • Mixamo - Online 3D character animation service
  • RPM - Avatar creation platform
  • FormSpree - Form backend service for contact form
  • Clouinary API - Cloudinary service for streaming music for the playlist I downloaded

Metaverse ✨

Inspiration Result
Screenshot 1 Screenshot 1

Work Screenshots 📷

Here are some screenshots showcasing the work I have done:

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 Screenshot 5 Screenshot 6 Screenshot 7 Screenshot 8

License 🪪

This project is licensed under the MIT License - see the LICENSE.md file for more details.

Deployment 📦

The app is deployed on Netlify and available at: pulkitmathur.tech

Contribution 🫱🏻‍🫲🏼

If you have a better solution or want to suggest improvements, feel free to open an issue or submit a pull request. Contributions are always welcome!

Feedback

If you have any feedback, suggestions, or questions regarding this repository, please feel free to open an issue or contact me below on any of the platforms you prefer 😊

portfolio    Linkedin Logo    Gmail logo    Instagram Logo    Pinterest Logo    Twitter Logo   

Happy learning and coding!


If you find this repository useful, don't forget to star it! ⭐️

Written by Pulkit

About

This repository showcases a React-based metaverse portfolio featuring a 3D avatar guide, Blender-created office environment, GSAP animations, PWA optimization, Webpack configuration, and live deployment on pulkitmathur.me.

Topics

Resources

License

Stars

Watchers

Forks