https://github.com/wentallout/portfolio
Personal portfolio/blog built using SvelteKit. Optimized and running in 2024.
https://github.com/wentallout/portfolio
blog giscus mdsvex netlify portfolio svelte svelte5 sveltekit
Last synced: 11 days ago
JSON representation
Personal portfolio/blog built using SvelteKit. Optimized and running in 2024.
- Host: GitHub
- URL: https://github.com/wentallout/portfolio
- Owner: wentallout
- License: mit
- Created: 2022-08-28T14:25:10.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-12T18:35:50.000Z (about 1 month ago)
- Last Synced: 2025-04-12T19:23:20.339Z (about 1 month ago)
- Topics: blog, giscus, mdsvex, netlify, portfolio, svelte, svelte5, sveltekit
- Language: Svelte
- Homepage: https://wentallout.io.vn
- Size: 279 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Portfolio
[](https://app.netlify.com/sites/khoa-design/deploys)
## 💻 Developing
[](https://stackblitz.com/github/wentallout/portfolio)
[](https://open.vscode.dev/wentallout/portfolio)
1. Install dependencies with `npm install` (or `pnpm install` or `yarn`)
2. Start a development server:
```bash
npm run dev
```
## ❓ What is this?
This is a portfolio/blog built using SvelteKit. Hosted on Netlify.
Visit: [wentallout.io.vn](https://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](https://perfectionist.dev/)
- [eslint-plugin-svelte](https://sveltejs.github.io/eslint-plugin-svelte/user-guide)
## 💅 Styling
`src/styles`
- `reset.css` custom CSS Reset by [joshwcomeau](https://www.joshwcomeau.com/css/custom-css-reset/)
- `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](https://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
| page | path |
| -------- | --------- |
| Home | / |
| Project | /project |
| Blog | /blog |
| Resource | /resource |
| Contact | /contact |
Slug
- /project/`[slug]`
- /blog/`[slug]`
## Main Features
⭐ SEO
- [SSR](https://kit.svelte.dev/docs/seo#out-of-the-box-ssr)
- [sitemap](https://github.com/jasongitmail/super-sitemap)
⭐ High Security: CSP Rules (`csp-directives.mjs`)
⭐ Responsive
⭐ PWA: Works OFFLINE
⭐ Dark/Light Mode Toggle Button
⭐ Dynamic Breadcrumb (`Breadcrumb.svelte`)
⭐ Font Optimization
- Self-host: [Google Web Font Helper](https://gwfh.mranftl.com/fonts)
- font-family: [Inter](https://rsms.me/inter/). [Read more about Inter](https://beautifulwebtype.com/inter)
- Subset: [Subset Variable Font Guide](https://barrd.dev/article/create-a-variable-font-subset-for-smaller-file-size/)
- Reduce Font CLS (Cumulative Layout Shift): [Automatic font matching](https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback)
⭐ Icons
- `unplugin-icons`
- Icon family: [phosphoricons](https://phosphoricons.com/)
- [Browse phosphor icons](https://icon-sets.iconify.design/ph)
⭐ Images
- Compressed and Converted into `webp` using`vite-imagetools`
- `loading = 'lazy'`
⭐ Routing: built-in [filesystem-based router](https://kit.svelte.dev/docs/routing)
⭐ Page Transition Animation
- `svelte/transiton`
- [nprogress](https://www.npmjs.com/package/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](https://docs.arcjet.com/shield/concepts)
---
## Blogging Features
- Use markdown to write blogs [mdsvex](https://github.com/pngwn/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](https://github.com/PrismJS/prism-themes) then paste into `styles/prism.css`
⭐ Blog: Search, Pagination
⭐ Blog: Categories/Tags
⭐ Blog: Prev/Next Button
⭐ Blog: Comment using [Giscus](https://giscus.app)
## Background inspired by
[bg.ibelick.com](https://bg.ibelick.com)
## Todo
💡 [Splash screen](https://www.sveltevietnam.dev/en/blog/20231220-behind-the-screen-progressive-splashscreen)
## Stat
Featured on: [portfolioshub.com](https://www.portfolioshub.com)
## License
[Published under MIT License](https://github.com/wentallout/portfolio/blob/master/LICENSE.md)
[⬆ Back to Top](#portfolio)