Website

screenshot of Website
svelte
vite
unocss

Overview

My website is built with SvelteKit, WindiCSS, and Remark/Rehype/Unified. It is a port from Gatsby to SvelteKit, with the biggest challenge being the transfer of the Markdown processing due to Gatsby's locked-in Remark ecosystem.

Features

  • SvelteKit: The website is built using SvelteKit, a framework for building fast, lightweight web applications.
  • WindiCSS: WindiCSS is used for styling the website, offering a utility-first CSS framework that is highly efficient and easy to use.
  • Remark/Rehype/Unified: Remark, Rehype, and Unified are a set of tools used for processing and transforming Markdown content. These tools allow for a seamless integration of Markdown in the website.

Summary

The website is built using SvelteKit, WindiCSS, and Remark/Rehype/Unified. The transfer from Gatsby to SvelteKit posed the challenge of transferring the Markdown processing, which was solved using a compatible rollup-plugin-markdown. This allows for seamless integration of Markdown content in the website.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

unocss
UnoCSS

UnoCSS is an instant, on-demand atomic CSS engine that generates utility classes at build time. It's highly customizable, extremely fast, and compatible with Tailwind CSS utilities while offering additional features like attributify mode and pure CSS icons.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.