SvelteKit Personal Wesbite + Blog

Welcome to my personal website built with SvelteKit, Tailwind CSS, Shadcn-Svelte for UI components, and MDsveX for rendering Markdown files.


  • SvelteKit + TypeScript

  • Tailwind CSS for styling

  • Shadcn-Svelte for UI components

  • MDsveX preprocessor

  • Light and Dark mode

    • also for code block with two different themes for light and dark mode
  • Mobile friendly interface

  • build time syntax highlighting using shiki and rehype pretty code

    • code blocks has several features like:
      • inline syntax highlighting
      • line numbers
      • line highlight
      • code diff
      • icons based on the code language shown in title bar of the code block
      • individual word highlighting
      • toast notifications for copy feedback
  • support for math using KaTeX.

    • inline math using $$<matheq>$$
    • block math equations
      \nabla \times \mathbf{B} = \mu_0 \left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
      $$\nabla \times \mathbf{B} = \mu_0 \left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)$$
  • Custom components

  • Table of contents

  • Dedicated blogs page with masonry layout

  • Projects page to showcase your projects

  • About page

  • Giscus comments (based on GitHub discussions)

  • SEO, OG and other metatags for different pages, blogs.

Built using

  • SvelteKit: framework for building apps with Svelte.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • Shadcn-Svelte: Accessible and customizable components that you can copy and paste into your apps.
  • MDsveX: A Markdown preprocessor for Svelte.

Getting Started

Clone the repository:

git clone
cd your-personal-website

see the blog to get started quickly. Blog Link

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes