Prismic | Create a Creative Portfolio with SvelteKit, Three.js, GSAP and Prismic! Full Course 2024 @Prismic | Uploaded June 2024 | Updated October 2024, 1 hour ago.
🚀 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-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386
🔗 Final repository: github.com/a-trost/3d-sveltekit-tutorial
🔗 Live Site: https://3d-sveltekit-tutorial.vercel.app/
---
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: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
#sveltekit #prismic #gsap
🚀 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-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386
🔗 Final repository: github.com/a-trost/3d-sveltekit-tutorial
🔗 Live Site: https://3d-sveltekit-tutorial.vercel.app/
---
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: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
#sveltekit #prismic #gsap
