algoraveizmir.com

i co-founded algorave izmir to bring live coding music and digital arts to izmir. if you don’t know, algorave is a cool movement where people write code to make music and visuals in real-time, and show their screens to the audience. we needed a fast and nice-looking website to share our events, manifesto, and community rules.

how it is made

i used astro 6 for the framework. it runs on cloudflare workers using server-side rendering (ssr), so it is very fast.

unlike my other projects, i didn’t use tailwind css here. i wanted to write vanilla css with custom properties (tokens) to keep it clean and lightweight. the design has a dark theme with cool interactive effects:

• a moving wave animation in the hero header (made with canvas).
• a grid background that glows when you move your cursor.
• text scramble animations that feel like a hacker terminal.

global reach (i18n)

as an official node of TOPLAP (the global live coding organization), we want to connect with live coders around the world, so the site supports 6 languages: turkish, english, german, french, spanish, and japanese.

astro’s native i18n routing handles the urls. i wrote all translation keys in typescript files. this is great because if i forget to translate a word in one language, typescript shows an error before building.

form & maps

for the contact form, i used the new astro actions to handle form inputs on the server. to stop spam bots, i added cloudflare turnstile and a hidden honeypot field. once verified, it sends the message using resend.

i also wrote a custom script for maps. when we build the site, it reads the coordinate of the event venue, fetches a static map image from mapbox, and saves it. this way, the user doesn’t load a heavy map api, making the page load much faster.

you can check out the live website at algoraveizmir.com.