Create a D Developer Portfolio with React and Three.js

Jun 25, 2024

Create a 3D Developer Portfolio with React and Three.js

Introduction

  • 3D animations are a key feature of impressive websites.
  • Example: Bruno Simon's portfolio (driving a car), Uni (3D hippo animations).
  • Aim: Create a 3D developer portfolio using React and Three.js.

Tools and Libraries

  • Three.js: A 3D graphics library.
  • React Three Fiber: Integration of Three.js with React.
  • Tailwind CSS: Utility-first CSS framework.
  • Framer Motion: Library for animations in React.
  • Email.js: To send emails from the website.

Features of the Portfolio

  • Fully responsive design.
  • Customizable 3D models with smooth animations.
  • Various sections like Hero, About, Experience, Technologies, Projects, Testimonials, and Contact.

Step-by-Step Implementation

Initial Setup

  1. Create a new empty folder 3D_portfolio.
  2. Initialize with npm and install dependencies:
    • React
    • Tailwind CSS
    • Three.js
    • React Three Fiber
  3. Set up a basic file structure and install necessary packages.

Hero Section

  • Create a 3D computer model using Three.js and React Three Fiber.
  • Add lighting and positioning to render the model attractively.
  • Implement framer motion for scroll hints and smooth transitions.

About Section

  • Introduce yourself with a title and descriptive text.
  • Use Tilt component to animate 'service cards'.
  • Ensure proper styling with Tailwind CSS.

Experience Section

  • Use react-vertical-timeline-component to showcase work experiences.
  • Animate each entry and display company name, role, and duration.
  • Include specific achievements in a bulleted list.

Technologies Section

  • Showcase technologies with 3D animated balls representing different skills.
  • Use React Three Fiber for rendering balls and animations.

Projects Section

  • Display project cards with titles, descriptions, and links to source code/GitHub.
  • Tilt and animate cards using react-tilt and framer motion.

Testimonials Section

  • Create a scrolling section with client testimonials, images, and designations.
  • Animate testimonial entries for better engagement.

Contact Section

  • Implement a contact form with name, email, and message fields.
  • Use Email.js to handle form submissions and send emails.
  • Display a 3D Earth model to enrich the section visually.

Adding Stars Background

  • Create a starry sky background to visually enrich the page.
  • Use React Three Fiber to animate star particles.

Deployment

  • Deploy the portfolio on Hostinger's servers.
  • Host it on a custom domain with HTTPS security.
  • Detailed deployment steps: Upload build files to public_html on Hostinger.

Final Touches

  • Debug any visual issues or responsiveness problems.
  • Test email functionality.
  • Ensure the portfolio works smoothly across different devices and browsers.

Conclusion

  • Successfully built a fully functional 3D developer portfolio that is visually impressive and feature-rich.
  • This portfolio not only showcases skills with real-world projects but also engages users with interactive 3D elements.