Create a Creative Portfolio with SvelteKit, Three.js, GSAP and Prismic! Full Course 2024

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!

---

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.

---

#sveltekit #prismic #gsap

[slip-shape]

I appreciate your dedication 7 hour content.

[mr_clean]

Hey just some unsolicited advice (feel free to ignore me lol), but in your thumbnail if you use a red border, with it continuing on the bottom, it appears like the bar YouTube uses to show what videos you have already watched. Because of this people may not click on the video thinking they've already watched it (that's what I did at first glance and almost skipped, but then realized what was happening)

[Deus-lo-Vuilt]

Thank you for these projects, you learn a lot, keep it up, I leave like and sub <3

[novapixels]

Oh my gaaaad! Amazing! This will be my panorama for the weekend 👩🏽‍💻! Thank you so much ❤

[nickstaresinic]

I didn't understand the group-hover 'trick' (at ~3:17:15) until you illustrated it by removing the overflow-hidden class. Very cool.

[eepycat]

Thank you for the in-depth step-by-step tutorial! One issue I have discovered though, is that the 3d object does not seem to render on ios devices. The objects just displays as a black shape, with the Mesh Normal Material being the only one that renders just fine. Was wondering if you have an idea on how to fix it? I tried to figure it out but have not been able to make any progress :(

[thewebbeckons]

I absolutely love this series; but where is the love for nuxt :P

[psmcyqe]

hey really enjoyed this, can you do a video on making use of Threlte with Spline 3D? I'd like to use what I learned here to make reactionary 3D fun BUT I suck at designing things in 3D and Spline makes that possible. Maybe I'm missing something here lol.

[nickstaresinic]

FYI, I went through your fine SK-GSAP-Prismic tutorial with little difficulty, but I was unable to launch the starter for this tutorial owing to an npm error. In part...

:
npm error engine Unsupported engine
npm error notsup Required: {"node":"20"}
npm error notsup Actual: {"npm":"10.7.0", "node":"v22.2.0"}
:
X Dependency installation failed, try again with... [NB: I tried the suggestion, but to no avail.]
:


Instead of downgrading my node version, I'll wait until it's supported by Prismic and will look forward to going through another of your informative tutorials.

MBP MacOS Monterey 12.7.5