Create a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and Prismic
🚀 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-p...
🔗Live Site: https://creative-portfolio-tutorial.v...
---
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: • Creating a Project With Slice Machine...
► [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 Hero letters animation
01:00:00 Helper Component
01:06:29 Setting up Three.js Scene
01:40:01 Adding sound effects
01:45:08 Nav Bar
02:03:03 About Page
02:40:27 Tech List (Marquee Title)
03:03:05 Hover and Scroll Animations
04:47:15 Job Experience Slice
04:51:37 Deployment on Vercel
Watch video Create a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and Prismic online without registration, duration hours minute second in high quality. This video was added by user Prismic 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 193,750 once and liked it 4.5 thousand people.