Ctwhome Portfolio

This is the fastest and most comfortable development experience started template. Everything comes installed for a speedy staring with examples. Simply remove what you don't need and you are good to go :)

Features

• SvelteKit 2

  • Svelte 4 (getting ready for Svelte 5 and refactor with Runes)
  • 🦾 TypeScript
  • ⭐️ Format on save with ESLint (VSCode Settings file and WebStorm)
  • 🔌 Svelte Endpoint usage
  • 🔄 Hybrid SSG + SSR + SPA mode with SvelteKit
  • ⬇ MDsveX Markdown parser (full blog example below)
  • Persist store with svelte-persisted-store
  • Advanced forms with Svelte

• 💙 TailwindCSS 3.4

• 🌼 DaisyUI 4

  • 30+ Themes and custom theme
  • Theme selector

• 🚀 PWA

  • Offline mode, new content available prompt

• ⚡️ Site performance optimization and Web Core Vitals

• 💿 Database connections with endpoints

• 🗺️ Translation engine with i18next

• 🔐 Login with Auth.js

• 🕺 Page transition animation API

• ✨ All Iconify on-demand with unplugin Icons - +100.000 SVG icons completely customizable (use icones to find icons)

Development eXperience (DX)

• Use conventional commits
• Automatic changelog
• Create realease command

Custom features and Examples

• ✍️ Blog with MDsveX
  • New structure with isolated content instead of the routing (root/content)
  • Relative images
  • Automatic Assets optimization
  • Reading Time
  • ToC
  • OG Tags and SEO Optimization with Svelte
  • RSS.xml
• Native File API example
• ↕️ Scrolly Telling example
• Site analytics with:
  • Google
  • Matomo

Components

• Tiny gallery for scelte
• Login with modal component
• Autocomplete input field

Experiments and Examples

• ThreeJS and CameraControls
• GIS with MapLibre and Svelte
• Charting with Chart.js and Vega

Essential pages:

• about.md
• privacy policy.md
• sitemap.xml

Motivation and Personal opinion

I use the same technologies in my web applications. SvelteKit is awesome, and developing with it is a pleasure. I use this repository as an example and as best practices to follow for all my applications. My motivation for keeping it updated is that, at the end of the day, this repository also serves as my official portfolio showcase. If you find it interesting and use any of the ideas seen here, please give it some credit in your applications as well.

Installation and running locally

npx degit ctwhome/portfolio <directory-name>
cd  <directory-name> && pnpm install
pnpm dev

Updating fork

1. Add remote from the original repository in your forked repository:

git remote add upstream git://github.com/ctwhome/portfolio.git
git fetch upstream

1. Updating your fork from the original repo to keep up with their changes: git pull upstream main

Start the development server on http://localhost:5173

yarn dev

Production

Build the application for production:

yarn build