About this site
This portfolio is built with SvelteKit and styled with Tailwind CSS. The background is a real-time WebGL fluid simulation that responds to your input.
Interactivity
The fluid background is interactive — here’s how to play with it:
| Action | Where | What happens |
|---|---|---|
| Move mouse | Homepage | Creates fluid trails that follow your cursor |
| Click and drag | Other pages | Creates fluid trails while holding the mouse button |
| Touch and drag | Mobile | Same as click and drag |
| Press Space, S, or L | Anywhere | Triggers a burst of random color splats |
| Press P | Anywhere | Pauses / resumes the simulation |
| Press C | Anywhere | Opens / closes the fluid config panel |
| Press I | Anywhere | Toggles whether clicking on cards triggers the fluid |
| Press H | Anywhere | Toggles home mode (mouse always creates trails) |
Navigating between pages also triggers a splat burst. You can fine-tune all simulation parameters on the fluid config page.
Tech Stack
- SvelteKit (Svelte 5) — framework and routing
- Tailwind CSS 4 — styling
- mdsvex — markdown content
- Vite — build tooling
- Vercel — hosting
Credits
The WebGL fluid simulation is adapted from:
- WebGL Fluid Simulation by Pavel Dobryakov (MIT License)
- WebGL Fluid Background by Thomas Kabalin — adapted for use as a website background (MIT License)
Social icons use paths from Simple Icons.
License
The source code and content of this site are not licensed for reuse without explicit permission. Third-party components, including the WebGL fluid simulation, retain their original licenses (see credits above). All other code, design, and content are © Steven Bash.