3D React Portfolio

Personal Portfolio - 3D React Portfolio

Created a responsive react website using amazing features of CSS, HTML and Javascript framework React with 3D graphics and animations. I have used ThreeJS 3D Developer tools for this Portfolio.

Implemented my own Portfolio as Website, Where I have added all my projects and experiences. I have hosted it with the help of github gh-pages. I keep on making changes accordingly.

View Live Demo

Introduction

The most impressive websites in the world use 3D graphics and animations to bring their content to life. See here how to build your own ThreeJS 3D Developer Portfolio today!

In this project, you'll use these technologies:

• ThreeJS - an incredibly powerful 3D graphics library that enables you to render and animate captivating 3D models with ease.
• React Three Fiber - a widely adopted library that seamlessly integrates ThreeJS into React, allowing you to create stunning 3D graphics while harnessing the full potential of React's capabilities.
• TailwindCSS - a highly popular utility-first CSS styling framework that empowers you to craft visually stunning websites with minimal effort.
• Framer Motion - the go-to library for adding captivating animations to your React websites, breathing life into your creations and making them truly stand out.

This portfolio contains:

• Load, customize, and create visually impressive 3D models and geometries. We'll also see to manipulate various lighting setups and understand how to position objects effectively within a 3D space.
• Implement industry-standard best practices, making our code reusable and scalable through techniques like Higher Order Components (HOCs), enhancing the efficiency and maintainability of our projects.
• Incorporate a functional email form on our website, allowing visitors to easily reach out to you, thus enhancing user engagement and interactivity.
• Ensuring that our website exhibits optimal responsiveness across all devices, offering a seamless user experience. Additionally, you'll learn to optimize our site's performance using techniques such as Suspense and Preload.
• Prepare to embark on an exciting journey that will transform you into a skilled ThreeJS 3D Developer, enabling you to create visually stunning and interactive web experiences that will leave a lasting impression on audience.

This project was bootstrapped with Create React App.

npx create-react-app

To start with react app

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm i node-sass

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
See the section about running tests for more information.

npm i ityped

Enter in any string, and watch it type at the speed you've set, backspace what it's typed,
and begin a new sentence for however many strings you've set.

See the section about deployment for more information.

npm i @material-ui/core

npm i @material-ui/core

React components for faster and easier web development. Build your own design system, or start with Material Design.

See the section about MUI Documentation for more information.

npm run build

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Other libraries and dependencies which needs to be installed before working on the project

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

npm install -D tailwindcss

npx tailwindcss init

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 run dev

npm install --legacy-peer-deps -D postcss autoprefixer

npx tailwindcss init -p

npm install --save-dev sass

npm i ityped

npm install --legacy-peer-deps three

npm install react-icons --save

npm install --legacy-peer-deps react-parallax-tilt

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

SnapShots in Laptop View

SnapShots in Mobile View

Connect with me:

[

]website [

]twitter [

]linkedin [

]instagram