Portfolio

💻 Developing

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

⌨ Coding style

• HTML: Semantic and SEO-focused
• CSS: Vanilla CSS with BEM naming scheme
• JS: VanillaJS/Svelte
• 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.

🗺 Sitemap

Slug

• /project/[slug]
• /blog/[slug]

Main Features

⭐ 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: using https://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)

Blogging Features

• Use markdown to write blogs mdsvex
• use categories (#hashtag) to filter blogs
• multiple markdown-related plugins installed: rehype and remark

⭐ 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

Todo

💡 Splash screen

Stat

License

Published under MIT License

⬆ Back to Top