kt946 / threejs-react-portfolio-tutorial-jsm

A 3D developer portfolio that uses React, Three.js, and Tailwind CSS to render a developers' information and projects.

Home Page:https://kt946-threejs-portfolio-tutorial.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Three.js React Portfolio Tutorial JSM

home-page-screenshot

Description

This project was built using a tutorial by JavaScript Mastery on youtube.

This is a 3D React portfolio for a web developer, showcasing their skills and experience in creating interactive 3D models and scenes using ThreeJS and React Three Fiber. The portfolio also features a sleek and modern design, customizable animations and transitions using Framer Motion, and a responsive layout using TailwindCSS.

⭐ Note: This website may require some time for the 3D models to render.

Table of Contents

Installation

  1. Clone the repository.
  2. Install the dependencies by running npm install.
  3. Create a .env file and add the following environment variables:
VITE_APP_EMAILJS_SERVICE_ID
VITE_APP_EMAILJS_TEMPLATE_ID
VITE_APP_EMAILJS_PUBLIC_KEY
  1. Start the project by running npm run dev.
  2. Navigate to the project in your browser using the provided URL in the terminal.

⭐ Note: An EmailJS account is required for the contact form to work.

Features

  • A visually stunning portfolio with a modern and sleek design.
  • Animations and transitions using Framer Motion, which adds a touch of interactivity to the portfolio.
  • Interactive 3D models and scenes created with ThreeJS and React Three Fiber.
  • A responsive layout using TailwindCSS that ensures the portfolio is optimized for all devices and screen sizes.
  • Contact form using EmailJS that allows users to get in touch with the developer directly from the portfolio website.
  • A customizable constants file to easily edit the portfolio information.

Screenshots

about-section-screenshot

work-section-screenshot

projects-section-screenshot

contact-screenshot

Technologies Used

  • React: A JavaScript library for building user interfaces
  • ThreeJS: A JavaScript library for creating 3D graphics in the browser.
  • React Three Fiber: A React renderer for ThreeJS.
  • TailwindCSS: A utility-first CSS framework for rapid UI development.
  • Framer Motion: A library for creating animations in React.
  • EmailJS: A library for sending emails from a React application.

Contributing

If you'd like to contribute to this project, please fork the repository and submit a pull request.

Links

License

This project is licensed under the MIT License.

About

A 3D developer portfolio that uses React, Three.js, and Tailwind CSS to render a developers' information and projects.

https://kt946-threejs-portfolio-tutorial.netlify.app/


Languages

Language:JavaScript 84.5%Language:CSS 14.7%Language:HTML 0.8%