praabindhp / Reimagined-3D

Praabindh's Portfolio Created And Render With ThreeJS

Home Page:https://reimagined3d.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Praabindh's ReImagined 3D

ReImagined Logo

Reimagined 3D Portfolio Created & Rendered With ReactJS & ThreeJS By Praabindh's Org

Application Live @ Praabindh's ReImagined - 3D

Do Check (Click) It Out !!!

Reimagined 3D Portfolio Created & Rendered With ReactJS & ThreeJS By Praabindh's Org is an impressive project that showcases the best of 3D art and design. The project was created and rendered by Praabindh's Org using the powerful combination of ReactJS and ThreeJS. The website features an interactive 3D layout that allows visitors to view Praabindh's work from different angles, highlighting the depth and complexity of his 3D art and design.

ReImagined 3D | Home

ReImagined Home


Tech Stack

  • JavaScript
  • ReactJS
  • ThreeJS
  • ThreeJS Fiber
  • ThreeJS Drei
  • HTML5
  • Tailwind CSS
  • Maath
  • React Tilt
  • React Vertical Timeline Component
  • React Router DOM
  • Vite
  • EmailJS
  • Framer Motion

Features

Interactive 3D Layout - The website's three-dimensional layout allows visitors to view Praabindh's work from different angles, showcasing the depth and complexity of his 3D art and design.

Easy Navigation - The website features easy-to-navigate menus that allow visitors to explore Praabindh's work in detail.

ReImagined 3D | Overview

ReImagined Overview

Responsive design - The website has been designed using a responsive design approach, where the layout and content adapt to different screen sizes and resolutions. This ensures that the website looks and works well on devices with varying screen sizes, such as desktops, laptops, tablets, and smartphones.

ReImagined 3D | Tech

ReImagined Tech

Interactive Components - Interactive components such as React Tilt and Framer Motion are used to enhance the user experience.

ReImagined 3D | Projects

ReImagined Projects

Vertical Timeline Component - The website features a vertical timeline component that showcases Praabindh's work chronologically.

ReImagined 3D | Work

ReImagined Work

Contact Form - The website includes a contact form powered by EmailJS that visitors can use to get in touch with Praabindh.

ReImagined 3D | Contact

ReImagined Contact

User-friendly navigation - The website's navigation has been optimized for both desktop and mobile devices, with clear and easy-to-use menus, buttons, and links. This makes it easy for users to find what they're looking for, regardless of the device they're using.

Touch-friendly interface - For mobile devices, the website's interface has been optimized for touch input, with larger buttons, clear labels, and intuitive gestures. This ensures that users can interact with the website using their fingers, without the need for a mouse or keyboard.

Fast loading times - The website has been optimized for fast loading times on both desktop and mobile devices, with compressed images, streamlined code, and minimal use of external scripts and plugins. This ensures that users can access the website quickly, even on slower connections or older devices.

Cross-browser compatibility - The website has been tested and optimized to work seamlessly on all major web browsers, including Chrome, Firefox, Safari, and Internet Explorer. This ensures that users can access the website from any device, using their preferred browser.

Built With Technology

React JavaScript

ReactJS is a popular JavaScript library for building user interfaces, and it is widely used in web development. ReactJS is known for its efficiency, modularity, and flexibility. It allows developers to build complex user interfaces with ease, making it an ideal choice for building 3D portfolio websites like Reimagined.

Three JavaScript

ThreeJS, on the other hand, is a JavaScript library that allows developers to create and render 3D graphics in web browsers. It is a powerful and versatile library that is widely used in creating 3D websites, games, and visualizations. ThreeJS is capable of creating complex and interactive 3D environments, and it is a perfect fit for creating the interactive 3D layout of Reimagined.

Libraries & Tools

Praabindh's Org used several other libraries and tools in creating Reimagined, including ThreeJS Fiber, ThreeJS Drei, HTML5, Tailwind CSS, Maath, React Tilt, React Vertical Timeline Component, React Router DOM, Vite, EmailJS, and Framer Motion. Each of these libraries and tools contributed to the development and rendering of the website.

Reimagined features an easy-to-navigate menu that allows visitors to explore Praabindh's work in detail. It also has a vertical timeline component that showcases Praabindh's work chronologically, allowing visitors to see how his skills and techniques have developed over time. The website is fully responsive, meaning it works seamlessly on desktop and mobile devices.

Installation

npm create vite@latest ./ -- --template react 

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom

npm install --legacy-peer-deps three

npm run dev

Usage

To install and run the website, follow these steps:

Clone the repository

git clone https://github.com/praabindh/Reimagined-3D

Install dependencies

npm install --legacy-peer-deps

Run the development server

npm start / npm run dev

View The Web Application

Open -> http://localhost:5173/ In Browser 

Conclusion

Reimagined is an excellent example of how the combination of ReactJS and ThreeJS can be used to create a visually stunning and interactive 3D portfolio website. Praabindh's Org has demonstrated excellent skill and creativity in the development and rendering of the website. The website is not only a showcase of Praabindh's work but also a testament to the power and flexibility of ReactJS and ThreeJS.

Authors

Built During The Internship Phase Of Product Engineer In Codingmart Technologies, Coimbatore, Tamil Nadu, India.

License

GNU AGPLv3

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

Contact

If you have any questions or comments about the website, feel free to get in touch with Praabindh via the contact form on the website.

Phone : +91-9445210125

Personal Email : praabindhp@gmail.com

Official Email : praabindh@codingmart.com

Instagram : @praabindhp

Personal GitHub : @praabindhp

Official GitHub : @praabindh

About

Praabindh's Portfolio Created And Render With ThreeJS

https://reimagined3d.netlify.app/

License:GNU General Public License v3.0


Languages

Language:JavaScript 85.3%Language:CSS 13.9%Language:HTML 0.8%