Portfolio

Personal portfolio/blog built using SvelteKit. Optimized and running in 2024.

#portfolio #sveltekit #blog #netlify #giscus #mdsvex #svelte #svelte5

Portfolio

💻 Developing

Install dependencies with npm install (or pnpm install or yarn)
Start a development server:

npm run dev

❓ What is this?

This is a portfolio/blog built using SvelteKit. Hosted on Netlify.

Visit: wentallout.io.vn

🤩 What makes this special?

A website made with SvelteKit is just incredibly fast even compared to other framework-based websites like React/Next/Vue and has great SEO out-of-the-box. You won't need a backend or CMS though, the blog posts are just markdown files you can store on your computer (see routes/blogs).

All imported images are automatically converted to webp and lazy loaded to optimize performance.

Visitors can also comment on your blogs using GitHub discussion (you might want to customize Comments.svelte component so that it works on your repo)

⌨ Coding style

HTML: Semantic and SEO-focused
CSS: Vanilla CSS with BEM naming scheme
JS: VanillaJS/Svelte
Linting optimized for aesthetics: alphabetical style perfectionist.dev
eslint-plugin-svelte

💅 Styling

src/styles

reset.css custom CSS Reset by joshwcomeau
global.css global styles and importing all other css files
spacing.css spacing for margin, padding and the whole page layout in general. Check out utopia.fyi for more information about this spacing system.
typography.css typography-related stuff like font-size, line-height, letter-spacing, font-weight
color.css text colors, border colors, background colors (2 color schemes: light and dark)
animation.css for anything animate.