Personal Website with SvelteKit and TailwindCSS

This is my personal website project built using SvelteKit and Tailwind CSS, designed for speed, minimalism, and SEO-friendliness. It serves as my blog and portfolio.

Branch Structure

• main → The live version of my personal website.
• develop → A branch for experimenting with new features.
• tutorial → The outcome of my step-by-step tutorial series.

Tutorial Series

If you'd like to build a similar website and familiarize yourself with Svelte(Kit) and TailwindCSS, follow my step-by-step guide:

1. Step 1: Set Up the Project
2. Step 2: Install and Configure DaisyUI
3. Step 3: Build the Home Page
4. Step 4: Build the Blog and Projects Pages
5. Step 5: Build the Post Content Page
6. Step 6: Add Transitions and SEO
7. Step 7: Deploy on Cloudflare Workers

Features

• Fast, Accessible and SEO-Friendly - 100/100 score on PageSpeed Insights.
• Tailwind CSS – Minimal, clean, and responsive styling.
• UI Animations – Leveraging SvelteKit’s built-in transitions.
• Client-Side Routing (CSR) – Once the website loads, navigation happens instantly with fewer server requests.
• Tag Filtering – Posts (blog articles and projects) can be filtered by tags.
• Markdown Support – Posts are simple .md files.

Installation & Running Locally

Clone the repository, install dependencies, and start the development server:

git clone https://github.com/pandelig/personal-website-svelte.git
cd personal-website-svelte
npm install
npm run dev

You can find all the npm commands in package.json.

Acknowledgments

The theme of this website was inspired by:

• Mark Horn's AstroNano theme (repo)
• Paco Coursey's personal website

Also a special thanks to the Svelte Discord server and of course, the open-source community, as many open-source tools were used to build this website.

License

MIT