Create a Creative Portfolio with SvelteKit, Three.js, GSAP and Prismic! Full Course 2024
🚀 Build your stunning creative portfolio website with SvelteKit, Prismic, Three.js, GSAP, Tailwind, and TypeScript!
In this fun course, we'll make an interactive and stylish personal portfolio website to help you stand out. You'll learn SvelteKit, a JavaScript framework that makes performant sites and is a joy to work with. We'll use Three.js to create awesome 3D effects, and use a library called Threlte to make Three easy to use within Svelte. We'll dig into GSAP to animate our site on enter, scroll, and hover, and use Tailwind CSS for all the styling. We'll use Prismic for our content, which turns our custom components into a page builder with a ton of great features like live previews.
Starting from the basics, this tutorial will show you how to create a website with Svelte 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!
🔗 Course Resources: https://prismic.notion.site/Course-Re...
🔗 Final repository: https://github.com/a-trost/3d-sveltek...
🔗 Live Site: https://3d-sveltekit-tutorial.vercel....
---
Chapters 📍
00:00 Intro
00:49 Full Website Tour
08:53 Setup your project (SvelteKit & Prismic)
20:22 Building the Hero Section (Slice Machine & GSAP)
02:06:26 Create background styles
02:13:36 Settings and Footer
02:54:23 Create the Header
03:33:31 Biography section
04:18:41 Animated Tech List section
04:43:42 Experience section
04:56:46 Blog section
05:59:46 Professional projects category
06:52:15 Deploy on Vercel
07:03:30 Polishing the live website
---
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:
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#sveltekit #prismic #gsap
Watch video Create a Creative Portfolio with SvelteKit, Three.js, GSAP and Prismic! Full Course 2024 online without registration, duration hours minute second in high quality. This video was added by user Prismic 24 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 22,234 once and liked it 676 people.