DEV Community

alvgonzx
alvgonzx

Posted on • Edited on

👨‍💻 How I created my portfolio using Sveltekit and Tailwind

A portfolio is a vital tool for web developers to showcase their skills, projects, and experiences to potential clients or employers.
In this article, I will share my journey of building my portfolio using the powerful combination of SvelteKit and Tailwind CSS.

Why Sveltekit + Tailwind?

You might wonder why I chose SvelteKit for a simple project like a portfolio. I primarily chose SvelteKit for its scalability and stability. For instance, if in the future I wanted to include another application within my portfolio, such as an interactive chat feature, I could easily build it using SvelteKit using a backend service.

I also chose Tailwind because I primarily focus on backend development and wanted a straightforward way to build my portfolio without getting too deep into CSS. However, I took on the challenge of designing the layout myself using Figma, just like a professional web designer! 😛

1. Creating my Sveltekit project

This is the first project I did with Sveltekit, and I really liked it. I didn't have experience with any other JS framework (I'm focused on backend) and the experience of building an app without vanilla JS was really interesting. For creating my project, first I learned a little bit about Svelte/kit in the interactive tutorial and then followed the Sveltekit documentation for building the app. I can summarize it in the following steps:

  1. Create the scaffold app 
npm create svelte@latest my-app
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies 
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the development enviroment 
npm run dev
Enter fullscreen mode Exit fullscreen mode

2. Designing the layout

Since I'm using Svelte, I used components to make the code easier. Here is the final component structure:

lib/components/
  |- about-me/
    |- AboutMe.svelte
    |- GetToKnowMe.svelte
    |- Skills.svelte
    |- Titles.svelte
  |- hero/
    |- Code.svelte
    |- Hero.svelte
    |- Titles.svelte
  |- projects/
    |- Card.svelte
    |- Cards.svelte
    |- Projects.svelte
    |- Titles.svelte
  |- Footer.svelte
  |- Header.svelte
Enter fullscreen mode Exit fullscreen mode

3. Deploying it to Github Pages

For deployment, I've chosen Github Pages because I find it to be a very straightforward solution. While there are many other options available, such as Vercel or Netlify, I personally find Github Pages to be the best one.

And that's it! That's how you can easily create a modern portfolio using modern technologies!

Top comments (0)