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
• 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.

🗺 Sitemap

Slug

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

Main Features

⭐ 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)

⭐ Increased Defense against attacks: bot projectection, SQL injection, Cross-site scripting and more; works better than Web Application Firewall (WAF) Read more

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

Background inspired by

bg.ibelick.com

Todo

💡 Splash screen

Stat

Featured on: portfolioshub.com

License

Published under MIT License

⬆ Back to Top