My 3D Portfolio/Landing page
This is my portfolio which will be continually improved overtime.
Table of contents
Overview
Screenshot
Interactive Main Page:
Interactive Contact Page:
Links
My process
Built with
- Mobile-first Workflow
- CSS Custom Properties
- Tailwind CSS - For styles
- React - JS library
- Vite - React Bootstrap
- ThreeJS
- React Three Fiber
- Framer Motion
- 3D Models from SketchFab
- React Vertical Timeline Component
- EmailJS
What I learned
- Reusable and scalable code using Higher Order Components (HOCs) and other industry-standard best practices.
- ThreeJS: A powerful 3D graphics library for rendering and animating the 3D model
- React Three Fiber: a popular library for creating 3D graphics with ThreeJS in React
- Framer Motion: The most popular library used to bring your React website to life with animations
- Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
- Ensure responsiveness across all devices and improve your site's performance using Suspense and Preload.
- EmailJS: Implement sending emails through a form on the website with only a few lines of code for seamless integration.
Continued development
- Implementation of:
- [] Light Mode
- [] Blogging
- [] Web3 Authentication with NFT
Author
- Website - richardtom.site
- GitHub - @r-tom90
- LinkedIn - @richard-tom
- Twitter - @CryptoFallen
- Medium - @richardtom
Acknowledgments
Special thanks and thanks to Adrian, this portfolio was built with the tutorial from the JavaScript Mastery YouTube Channel.