1. Install dependencies with npm install (or pnpm install or yarn)
2. 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/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)

• 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

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.

Slug

• /projects/[slug]
• /blogs/[slug]

⭐ SEO

• SSR
• sitemap

⭐ Responsive

⭐ PWA: Works OFFLINE

⭐ Dark/Light Mode Toggle Button

⭐ Dynamic Breadcrumb (Breadcrumb.svelte)

⭐ Font Optimization

• Self-host: Google Web Font Helper
• font-family: Inter. Read more about Inter
• Subset: Subset Variable Font Guide
• Reduce Font CLS (Cumulative Layout Shift): Automatic font matching

⭐ 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 and remark

⭐ Blogs: Automatic Table of Contents

⭐ Blogs: Code Highlight prism-themes

⭐ Blogs: Search, Pagination

⭐ Blogs: Categories/Tags

⭐ Blogs: Prev/Next Button

⭐ Blogs: Comment using Giscus

bg.ibelick.com

💡 Splash screen

Featured on: portfolioshub.com

Published under MIT License

⬆ Back to Top