runme | ||||
---|---|---|---|---|
|
- Install dependencies with
npm install
(orpnpm install
oryarn
) - Start a development server:
npm run dev
This is a portfolio/blog built using SvelteKit. Hosted on Netlify.
Visit: wentallout.io.vn
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/blog
).
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)
- HTML: Semantic and SEO-focused
- CSS: Vanilla CSS with BEM naming scheme
- JS: VanillaJS/Svelte
- eslint-plugin-svelte
src/styles
reset.css
custom CSS Reset by joshwcomeauglobal.css
global styles and importing all other css filesspacing.css
spacing formargin
,padding
and the whole page layout in general. Check out utopia.fyi for more information about this spacing system.typography.css
typography-related stuff likefont-size
,line-height
,letter-spacing
,font-weight
color.css
text colors, border colors, background colors (2 color schemes:light
anddark
)animation.css
for anything animate.
page | path |
---|---|
Home | / |
Project | /project |
Blog | /blog |
Resource | /resource |
Contact | /contact |
Slug
- /project/
[slug]
- /blog/
[slug]
β i18n (inlang
+ paraglide.js
)
- Tutorial to add i18n to Svelte by Nils Jacobsen
- Machine translation command:
npx @inlang/cli machine translate --project project.inlang
- paraglide-js-adapter-sveltekit
β SEO
- SSR
sitemap.xml
: usinghttps://github.com/bartholomej/svelte-sitemap
β Responsive
β PWA: Works OFFLINE
β Dark/Light Mode Toggle Button
β Dynamic Breadcrumb (Breadcrumb.svelte
)
β Fonts
- Self-host: Google Web Font Helper
- font-family: Inter
- Subset: Subset Variable Font Guide
- Reduce Font CLS (Cumulative Layout Shift): Fontaine
β Icons
unplugin-icons
- Icon family: phosphoricons
- Browse phosphor icons
β Images
- Compressed and Converted into
webp
usingvite-imagetools
loading = 'lazy'
β Routing: built-in filesystem-based router
β Page Transition Animation
svelte/transiton
- nprogress
β RSS
β Working Contact Form (need Netlify setup)
- Use markdown to write blogs mdsvex
- use
categories
(#hashtag) to filter blogs - multiple markdown-related plugins installed:
rehype
andremark
β Blog: Automatic Table of Contents
β Blog: Code Highlight
- Choose a theme: prism-themes then paste into
styles/prism.css
β Blog: Search, Pagination
β Blog: Categories/Tags
β Blog: Prev/Next Button
β Blog: Comment using Giscus
π‘ Splash screen