Build your stunning portfolio site with Next.js, Three.js, GSAP, Tailwind, and TypeScript!
In this fun course, we will make a stylish and interactive personal portfolio site that really stands out. You’ll learn to use Next.js, a leading React framework, and Three.js (React Three Fiber) to add awesome 3D effects. We’ll also dive into GSAP for smooth, fancy animations and use Tailwind CSS to make everything look neat and professional.
Starting from the basics, this tutorial will show you how to create a website with Next.js and TypeScript. Then, step by step, we’ll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.
By the end of this course, you’ll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!
Final repository: https://github.com/a-trost/creative-portfolio
Live Site: https://creative-portfolio-tutorial.vercel.app/
—
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: https://youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
—
Chapters
00:00 Intro
04:16 Getting Started – Project setup
27:29 Creating the Hero
32:12 H1 letters animation
01:00:00 Bounded Component
01:06:29 Setting up ThreeJS Scene
01:40:01 Adding audio effects
01:45:08 Building the Nav Bar
02:03:03 About Page
02:40:27 Tech List (Marquee Title)
03:03:05 Hover and Scroll Animations
04:47:15 Last Slice – Job Experience
04:51:37 Deployment on Vercel
