Refer to this post for making changes to your SvelteKit site.

Easy Customization

You can change most of the features from one place - src/lib/settings.js

Here is how it looks like,

export const mainSettings = {
  title: "My Resume",
    "Hi, my name is Joe and this is my online resume built using SvelteKit.",
  favicon: "/images/figs-32.png",
  colorScheme: "bg-blue-500",
  // google analytics
  analytics: "UA-92266803-7",
  // using Disqus for comments, get a shortcode @
  disqusShortname: "webjeda-demo",
  // contact form at /contact uses formspree, create your own @
  formspreeAction: "",
  // set it to false if you do not use math formulas in your articles
  math: true,

Learn more


The theme is built using TailwindCSS. Customizing the theme to your needs can be done without touching any CSS file. It also has a Purge on build. This way you will be using only the styles that you need.

Search Engine Optimized

The theme is optimized for search engines. You can just start adding content and it will be ready to be indexed by search engines.

Lightning Speed

Svelte is superfast. You can see that in action here. Once the site is loaded, pages and posts load instantly like a native app.


Super Performance, SEO, and Accessibility

Lighthouse Test


Display beautiful math equations using mathjax. This feature can be disabled for performance.

V=π m3V=\pi\textrm{ m}^3


The theme includes integrated Disqus comments. This can be disabled if needed.


Once you extract the theme zip file, run the following commands.

  • npm install

  • npm run dev for testing the site locally.

  • npm run build

This will build the HTML site in /public directory. This can be hosted anywhere. Either on conventional hosting or on a static hosting service.

You easily host it as pages using GitHub, Gitlab etc.

In most cases, it is drag-drop upload.


The theme uses a centralized data from where you can make almost all the changes to the entire site.

The files that are responsible for the information shown on the website reside in src/components directory as shown below.

├── components
| ├── About.svelte
| └── Blog.svelte
| └── Skills.svelte
| └── Works.svelte
| └── Testimonials.svelte

Color schemes

You can choose from more than 50 color schemes from tailwind colors. You can change the color scheme in src/lib/settings.js as shown below.

color-scheme: blue-500

Contact form

The theme provides a built-in contact form. You will have to add one line in src/lib/settings.js to make it work.

Get an account from Go to integration. Copy the endpoint which would look like this and put it in src/lib/settings.js as shown below

formspreeAction: "",


Skills can be updated through a file in src/lib/settings.js. Here is how it would look like.

    name: "HTML",
    skillLevel: 90,
    color: "text-pink-400",
    name: "CSS",
    skillLevel: 80,
    color: "text-green-400",
    name: "JavaScript",
    skillLevel: 60,
    color: "text-yellow-400",
    name: "Python",
    skillLevel: 70,
    color: "text-indigo-400",
    name: "Photoshop",
    skillLevel: 70,
    color: "text-blue-400",
    name: "Svelte",
    skillLevel: 50,
    color: "text-red-400",

You can choose any tailwind class.

All sections in the website have a variable in src/lib/settings.js directory which can be updated.


You can add new projects or works in /src/routes/works/ directory. You can have markdown files in here just like blog posts. The index of all works/projects can be found at /works/.

Blog Posts

You can add blog posts in /src/routes/blog/ directory. The index of all the blog posts can be found at /blog/.


Figs Svelte kit Theme

Figs Svelte kit Theme

Figs Svelte kit Theme

Figs Svelte kit Theme

Figs Svelte kit Theme

Figs Svelte kit Theme

Buy Figs Sveltekit Theme Figs Sveltekit Theme

  • Server Side Rendered by default.
  • SEO optimized.
  • Blazing Fast.
  • Easy to customize.
  • 3 months support.
  • Get assistance with reported bugs and issues.
  • Help with included 3rd party assets.