How to Create a Portfolio Site with Svelte and Skeleton UI

  1. Unveiling the Power of Skeleton.dev and Tailwind UI
  2. Setting Up Your Portfolio Project
  3. Tailoring Your Portfolio's Visual Identity
  4. Crafting Engaging Portfolio Sections

When it comes time to creating a personal space or portfolio online, I often look at popular content management systems with a customized theme. This time, I wanted to recreate the Tailwind Spotlight template using the Skeleton UI toolkit for Svelte.

The Spotlight template has a lot of benefits for being used as a portfolio site. It’s a simple and clean user interface and really helps you showcase your best work. There’s a good set of examples of how you can build out the blog articles and I like the work history and CV download elements, as well.

Lastly, it has this “clean slate” feel to it, allowing you to genuinely create your own look and let your content or designs tell the story.

Unveiling the Power of Skeleton.dev and Tailwind UI

Let’s first break down why I selected this toolkit:

What stood out to me the most in this UI toolkit, is that it makes it really easy to build accessible and performant interfaces. I also like how the lint rules help you make the right decisions for accessibility and semantics in general.

This is a powerful combination where you get the benefits of using Svelte Kit with Tailwind classes with PostCSS. It’s really an interesting approach when you can create isolated styles within components and mix in the ability to extend elements using the Tailwind CSS classes and variants.

Given that, I found Tailwind classes and utility or variant styling to be lending itself to writing less customized CSS and more time learning how to leverage those patterns across light and dark modes. It’s also a lot easier for responsive design when you can layer on those size, color modes and classes to be specific for the sizes you are targeting.

Setting Up Your Portfolio Project

With setting up the Skeleton toolkit, you can first explore the built-in themes and theme generator. I’d recommend using a default theme and extending it based on your own needs by using the “Skeleton CLI”. This is a great way to start exploring the design token classes, color pairing chart and background styles.

Once you’ve had some time to explore the default themes, then go ahead and visit the “Theme Generator” to start building out the colors you need for your project. Or you can simply just go ahead with one of the defaults.

Tailoring Your Portfolio's Visual Identity

Having this UI toolkit and design system in place means it’s even easier for you to create a cohesive visual identity for your portfolio. You can start to think about the best typography and imagery that aligns with your personal branding.

You can also customize the headling and base text for dark and light modes and add some gradients to the background will also help a lot with this theme.

Crafting Engaging Portfolio Sections

Take some time to review the avaialble Tailwind elements that come with the UI toolkit. This includes the utilities and Svelte components which will help you understand which ones to pull in as you build out your portfolio. You can combine these elements and components to build out your own components, as you go.

For example, say you have a list of projects you want to showcase, you might consider using the provided Cards element.

The Spotlight template has an “Articles” section, you may want to consider adding mdsvex to SvelteKit. This allows you to use markdown files as pages and even use Svelete components inside the markdown.

In conclusion, I think you will find this combination gives you the tools you need to publish your own personal site with your own projects or article content.