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 to keep it up-to-date.
https://shinchancode.github.io/3d-react-portfolio/
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.
- 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.
# Getting Started with Create React App
This project was bootstrapped with Create React App.
To start with react app
In the project directory, you can run:
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.
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.
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.
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.
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 install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom
See the section about deployment for more information.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
