12/1/24, 12:10 PM Create a front end portfolio project with Next.js and Three.
js
Create a front end portfolio project with Next.js and
Three.js
freecodecamp.org/news/create-a-front-end-portfolio-project-with-nextjs-and-threejs
Beau Carnes October 3, 2024
October 3, 2024 / #Next.js
Beau Carnes
https://www.freecodecamp.org/news/create-a-front-end-portfolio-project-with-nextjs-and-threejs/ 1/3
12/1/24, 12:10 PM Create a front end portfolio project with Next.js and Three.js
Building a standout personal portfolio can help you showcase your skills as a developer. One
way to elevate your portfolio is by incorporating 3D elements, smooth animations, and
responsive design to make it both engaging and professional.
We just published a course on the freeCodeCamp.org YouTube channel that will teach you
how to build a fully mobile-responsive personal portfolio website using Next.js, Three.js, and
Tailwind CSS. This tutorial is perfect for developers of all levels, whether you’re just starting
out or already have experience but want to add some unique, interactive features to your
portfolio. By the end of the course, you’ll have a modern and polished portfolio site that
includes 3D models, animations, AI-generated images, dynamic stats, and much more.
CodeBucks developed this course.
https://www.freecodecamp.org/news/create-a-front-end-portfolio-project-with-nextjs-and-threejs/ 2/3
12/1/24, 12:10 PM Create a front end portfolio project with Next.js and Three.js
In this tutorial, you’ll learn how to integrate 3D models using react-three-fiber and react-
three-drei, enabling you to add immersive, animated elements to your Next.js project. You’ll
also discover how to use AI-generated images from Playground AI to enhance your
portfolio’s visual appeal. A key part of the tutorial is learning to efficiently convert 3D models
into JSX components using Gltf JSX, making it easier to integrate them directly into your
React project.
But the course doesn't stop at visuals. You'll also learn how to dynamically display your
GitHub activity and stats using GitHub ReadMe Stats and GitHub Readme Streak Stats,
giving visitors an engaging overview of your contributions. To refine your site’s aesthetics,
the course will guide you through incorporating custom fonts from Google Fonts and sleek
icons from Lucide Icons. For added interactivity, you’ll implement user-friendly notifications
using Sonner and create functional forms with react-hook-form, enhancing user
engagement on your site.
Additionally, you’ll learn more advanced topics, such as adding smooth animations with
framer-motion, managing email submissions seamlessly with Emailjs, and even
incorporating a Sound component that plays music based on user interaction. All of these
features combined will help bring your portfolio to life.
Here’s a breakdown of the key tools and technologies you’ll use in this tutorial:
Next.js for building the portfolio structure and ensuring optimal performance.
Three.js, along with react-three-fiber and react-three-drei, for adding 3D elements.
Tailwind CSS for crafting a beautiful, responsive design with minimal effort.
Framer-motion to implement smooth and engaging animations.
Emailjs to handle email functionality on the contact page.
Sonner for adding notifications.
react-hook-form for creating interactive forms that collect user input seamlessly.
By the end of the course, you’ll have learned how to set up your project, customize your
layout, and integrate all of these exciting elements. You’ll also learn advanced techniques
like optimizing images and ensuring that your website runs efficiently on all devices.
This tutorial is an excellent opportunity for both beginners and experienced developers to
create a personal portfolio that stands out, combining cutting-edge technologies with elegant,
professional design. Watch the full course on the freeCodeCamp.org YouTube channel (4-
hour watch).
https://www.freecodecamp.org/news/create-a-front-end-portfolio-project-with-nextjs-and-threejs/ 3/3
