gideon.sh

Welcome - this is my little corner of the interwebs! Made for Hack Club's personal site YSWS.

You can find it right here - go check it out!

Before	✨ After

New things

• a serif font and warm colours
• a cutesy cat that you can click on
• custom window management - open, close, minimise, drag around
• custom router - you can refresh the page and the current window stays open
• a section for friends' 88x31 buttons
• online/offline status, from slack
• your real battery level in the taskbar (chrome/edge)
• the date and time in the UK, with the day first, as it should be

and... a drum machine?

• yup, a kinda-functional drum sequencer!
• change the tempo and speed, switch drumkits, mute/solo instruments
• hi-hat open and close work properly
• a little visualiser

---

Development

Once you've created a project and installed dependencies with pnpm install, start a development server:

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

To create a production version:

pnpm run build

You can preview the production build with pnpm run preview.

Note

If pnpm isn't installed already, run this (with Node.js installed) to set up corepack first:

npm install -g corepack
corepack enable

Credits

Made with

• SvelteKit, Tailwind CSS
• font: Crimson Pro (serif), Departure Mono (pixel)
• icons: Phosphor Icons
• window manager: Neodrag for dragging
• drum machine: Tone.js, samples from Drumhaus and Cymatics
• sound effects: from Zapsplat

Inspiration

• sharyap.com - windowing, sound effects. really fun website, you should go check it out 🙂
• posthog.com - windowing
• drumha.us and drumbit.app - drum machine design