My simple website.

Stack

• Svelte
• SvelteKit
• Biome
• GSAP - For smooth animations
• Sass - For enhanced styling
• TypeScript - For type safety
• Zod - For runtime type validation

Deployment

The website is automatically deployed using GitHub Actions. On every push to the main branch:

1. The code is checked out
2. The changes are pulled on the VPS
3. Dependencies are installed
4. The application is built
5. The PM2 process is restarted

Cool things

• Header Theme Switcher

  The changing button rotates on hover and fully rotates on click. The issue was that if the button hover was exited before the rotation was complete,the button would rotate back to its original positio, in a very jarring way.

• Footer Link

  The SVG external link icon was cool to tweak in order to animate it on hover.

• Magnetik Component

  A configurable magnetic field effect that attracts elements towards the mouse cursor. Features adjustable field size and force, with a debug mode that visualizes the magnetic field boundaries.

• Custom Cursor

  A spring physics-based custom cursor that smoothly follows mouse movement. Fully customizable with support for scaling, opacity, blur effects, and the ability to display SVGs or text inside it on hover. Includes its own actions (use:cursorEnter and use:cursorLeave) for easily adding hover interactions to any element, with configurable parameters for scale, opacity, and content changes. It only appears on desktop devices and when the mouse has moved to avoid appearing on page load.

• Interactive Background Canvas

  A WebGL-powered interactive background featuring Bayer dithering effects. Click anywhere on the background to generate expanding wave rings with retro pixelated aesthetics. Uses fragment shaders for GPU-accelerated rendering and supports up to 10 simultaneous wave effects with configurable speed, thickness, and attenuation parameters.

  Inspired by the techniques described in Interactive WebGL Backgrounds: A Quick Guide to Bayer Dithering on Codrops.

• Scroll State Composable

  A reactive composable that elegantly tracks scroll state using Svelte 5's runes system. It monitors both the current scroll position and whether the page can be scrolled, then derives a boolean indicating if the scroll position has exceeded a defined trigger threshold. The composable automatically manages event listeners for scroll and resize events, providing a clean API for scroll-based UI changes like header styling or element visibility. Perfect for implementing smooth scroll-triggered animations and responsive design patterns.

Backend Infrastructure

The website is powered by two custom Rust services:

API Server (vps-back)

• Built with Rocket.rs framework
• Provides RESTful API endpoints
• Handles CORS and static file serving
• Serves data for the music section

LastFM Integration (vps-lastfm)

A dedicated service that:

• Fetches real-time LastFM listening data
• Tracks currently playing song (5-second intervals)
• Stores last 100 played tracks (1-minute intervals)
• Outputs structured JSON data consumed by the API server

Architecture Diagram

The architecture diagram is generated using D2.

Acknowledgements

Fonts

• iA Writer Duospace