r-tom90/3d-portfolio

My 3D Portfolio/Landing page

This is my portfolio which will be continually improved overtime.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

Screenshot

Interactive Main Page:

Interactive Contact Page:

Links

• View Github Repository
• View Live Site

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.