2024 Full Course: Crafting a Unique Portfolio Using SvelteKit, Three.js, GSAP, and Prismic

In this tutorial, we will guide you through the process of creating a creative portfolio using SvelteKit, Three.js, GSAP, and Prismic. These tools will help you build a stunning and interactive portfolio website that showcases your work in a dynamic and engaging way. By the end of this tutorial, you will have a fully functional portfolio website that you can use to showcase your creative projects.

Step 1: Setting up the environment
First, make sure you have Node.js installed on your machine. You can download it from the official Node.js website. Once Node.js is installed, you can use npm (Node Package Manager) to install the necessary packages for this project.

Create a new folder for your project and open it in your terminal. Run the following command to create a new SvelteKit project:

npx create-svelte@next my-portfolio

Next, navigate into the newly created project folder and install the necessary dependencies:

cd my-portfolio
npm install

Step 2: Setting up Three.js
Three.js is a JavaScript library that allows you to create 3D graphics in the browser. To use Three.js in your project, you will need to install it as a dependency. Run the following command to install Three.js:

npm install three

Step 3: Setting up GSAP
GSAP (GreenSock Animation Platform) is a powerful animation library that you can use to create animations on your website. To use GSAP in your project, you will need to install it as a dependency. Run the following command to install GSAP:

npm install gsap

Step 4: Setting up Prismic
Prismic is a headless CMS that you can use to manage your content and data. To integrate Prismic into your project, you will need to sign up for a Prismic account and create a new repository. Once you have set up your Prismic account, you can install the Prismic client library in your project by running the following command:

npm install prismic-javascript

Step 5: Building the portfolio website
Now that you have set up the environment and installed the necessary dependencies, you can start building your portfolio website. In this section, we will walk you through the process of creating the layout, adding Three.js animations, integrating GSAP animations, and fetching content from Prismic.

First, create a new file named index.svelte in the src/routes folder. This file will serve as the homepage of your portfolio website. Add the following code to set up the basic layout of the homepage:

<script>
  import { onMount } from 'svelte';
  import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
  import { TweenMax, Power1 } from 'gsap';

  let scene, camera, renderer;

  onMount(() => {
    // Initialize Three.js scene, camera, and renderer here
  });
</script>

<style>
  /* Add CSS styles for the homepage layout here */
</style>

<div class="container">
  <header>
    <h1>Welcome to My Portfolio</h1>
  </header>
  <main>
    <canvas id="canvas"></canvas>
  </main>
  <footer>
    <p>© 2024 My Portfolio. All rights reserved.</p>
  </footer>
</div>

In the <script> section, we import the necessary functions from Svelte, Three.js, and GSAP. We also define variables for the Three.js scene, camera, and renderer. Inside the onMount() function, you can initialize the Three.js scene, camera, and renderer.

In the <style> section, you can add CSS styles to customize the layout of the homepage. You can also add additional styles to make your portfolio website look more visually appealing.

Next, create a new file named ThreeScene.svelte in the src/components folder. This file will contain the Three.js scene setup and animations. Add the following code to set up the Three.js scene:

<script>
  import { onMount, onDestroy } from 'svelte';
  import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';

  let scene, camera, renderer, cube;

  onMount(() => {
    // Initialize Three.js scene, camera, and renderer here
  });

  onDestroy(() => {
    // Clean up Three.js resources here
  });
</script>

<style>
  /* Add CSS styles for the Three.js scene here */
</style>

<canvas id="canvas"></canvas>

In the <script> section, we import the necessary functions from Svelte and Three.js. We also define variables for the Three.js scene, camera, renderer, and cube. Inside the onMount() function, you can initialize the Three.js scene, camera, and renderer. You can also create and add a cube to the scene.

In the <style> section, you can add CSS styles to customize the appearance of the Three.js scene. You can adjust the size, position, and styling of the canvas element to fit your design.

Step 6: Adding animations with GSAP
Now that you have set up the Three.js scene, you can add animations using GSAP. GSAP provides a powerful set of functions for creating animations on your website. In this section, we will show you how to use GSAP to create animations for your portfolio website.

First, import the necessary functions from GSAP in the <script> section of the ThreeScene.svelte file:

import { TweenMax, Power1 } from 'gsap';

Next, you can add animations to the cube in the onMount() function using GSAP:

onMount(() => {
  // Create animations with GSAP here
  TweenMax.to(cube.rotation, 2, { y: Math.PI * 2, ease: Power1.easeInOut, repeat: -1 });
});

In this example, we use the TweenMax.to() function to animate the rotation of the cube. The animation lasts for 2 seconds and rotates the cube by 360 degrees (Math.PI * 2). We also set the easing function to Power1.easeInOut for a smooth animation effect. The repeat: -1 option makes the animation repeat indefinitely.

You can experiment with different GSAP functions and properties to create custom animations for your portfolio website.

Step 7: Fetching content from Prismic
Now that you have set up the Three.js scene and added animations with GSAP, you can fetch content from Prismic to populate your portfolio website with dynamic data. Prismic allows you to create and manage content using a customizable content model.

To fetch content from Prismic, you can use the Prismic client library in a new file named prismic.js in the src/utils folder. Add the following code to set up the Prismic client and fetch content:

import Prismic from 'prismic-javascript';

const apiEndpoint = 'https://your-repository.prismic.io/api/v2';

export const fetchContent = async () => {
  const client = Prismic.client(apiEndpoint);
  const response = await client.query(Prismic.Predicates.at('document.type', 'project'));
  return response.results.map(result => result.data);
};

In this code snippet, we import the Prismic client library and define the API endpoint for our Prismic repository. We then create a fetchContent() function that fetches content of type ‘project’ from Prismic and returns the data as an array of objects.

Step 8: Displaying content on the homepage
Now that you have fetched content from Prismic, you can display it on the homepage of your portfolio website. Update the index.svelte file to import the fetchContent() function and display the fetched content:

<script>
  import { fetchContent } from '$lib/prismic';

  let projects = [];

  fetchContent().then(data => {
    projects = data;
  });
</script>

<div class="container">
  <header>
    <h1>Welcome to My Portfolio</h1>
  </header>
  <main>
    {#each projects as project}
      <div>
        <h2>{project.title}</h2>
        <p>{project.description}</p>
        <img src={project.image.url} alt={project.image.alt} />
      </div>
    {/each}
  </main>
  <footer>
    <p>© 2024 My Portfolio. All rights reserved.</p>
  </footer>
</div>

In this code snippet, we import the fetchContent() function from the prismic.js file and call it to fetch content from Prismic. We then use Svelte’s {#each} block to iterate over the projects array and display the title, description, and image of each project.

Step 9: Customizing the portfolio website
Now that you have set up the Three.js scene, added animations with GSAP, fetched content from Prismic, and displayed it on the homepage, you can customize the portfolio website further to fit your design and branding.

You can update the CSS styles in the index.svelte and ThreeScene.svelte files to change the layout, colors, fonts, and other visual elements of the portfolio website. You can also add additional components, pages, and features to enhance the user experience and showcase your work effectively.

Step 10: Deploying the portfolio website
Once you have finished building and customizing your portfolio website, you can deploy it to a web hosting service to make it accessible to the public. You can use platforms like Netlify, Vercel, or GitHub Pages to host your SvelteKit project.

To deploy your portfolio website, you can run the following command in your terminal to build the project:

npm run build

After the build process is complete, you can deploy the project by running the following command:

npm run deploy

This command will deploy your portfolio website to the specified hosting service, where you can share it with others and showcase your creative projects.

Congratulations! You have successfully created a creative portfolio using SvelteKit, Three.js, GSAP, and Prismic. Your portfolio website is now ready to impress visitors with stunning visuals, interactive animations, and dynamic content. Thank you for following this tutorial, and we hope you have learned valuable skills and techniques for building creative websites. Good luck with your portfolio!