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-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 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
Видео Create a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and Prismic канала Prismic
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 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
Видео Create a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and Prismic канала Prismic
Nextjs14 next js 13 tutorial nextjs tutorial next js tutorial next js 14 app directory Creative Portfolio Developer Portfolio Creative Dev Next js app directory Prismic Prismic CMS Prismic Nextjs Prismic Nextjs 14 Slice Machine Slice Machine nextjs Tailwind CSS Tailwind Nextjs Prismic TypeScript Nextjs 14 TypeScript Full Stack Crash Course Next js Crash course Nextjs tailwind Crash Course Prismic Crash course gsap greensock three.js react-three-fiber
Комментарии отсутствуют
Информация о видео
28 декабря 2023 г. 22:00:08
05:04:30
Другие видео канала
