Léo Yiğit Ekiz

Work

Six disciplines, each with its archive. The websites are the newest.

NewKırık Pena A broken pick that breaks open, and a band you can play along with.
  1. 01WebDesign and full-stack development3 sites
  2. 02DesignIdentities, campaigns, books20 projects
  3. 03FilmFeatures, shorts, video art14 films
  4. 04PhotographySeries since 20067 series
  5. 05AI and teachingFlyRank, the AI Fluency trackNow
  6. 06Selected workEverything together, filtered21 works

About

Who makes the work, how, and where it came from.

DownloadEuropass CV As a PDF, ready to print.
  1. 01PracticePoint, line, plane06
  2. 02PathIstanbul, Udine, Sarajevo11 stations
  3. 03ExhibitionsOn walls and screens, 2006–201314 shows
  4. 04About meNever too late to start
  5. 05CVExperience, education, languages

Band website

Kırık Pena

A broken pick that breaks open, and a band you can play along with.

For
Kırık Pena, an alternative rock band from Istanbul
Year
2026
My part
Research, art direction, design and development
Language
Turkish
Address
kirikpena.com

The brief

Kırık Pena means “broken guitar pick”. The band had some thirteen million plays on Spotify, a new single, “Kimim Ben”, and no website: only a Linktree. They needed one place for the music, the stage, the concerts and the people who follow them.

The idea

Take the name literally. On the first click the pick breaks along its own crack lines, and the same click starts the new single. After that everything carries the crack: the headlines, the frames around the photographs, and the menu, which is the pick put back together from five pieces. Between the sections stand the instruments, a guitar, a bass, a drum kit and a stage keyboard, all playable, all with recorded sound. I designed three directions for the homepage; “Kırık” became the site.

Moments

4 to try on the site
  1. 01Six stringsA guitar between two sections: drag across the strings to strum, or play chords from the keyboard.
  2. 02A drum kitHover the drums to play them, or press the letters on them.
  3. A cream-coloured keyboard with piano, orchestra, clarinet and synth tabs above “İlk duyan sen ol”
    03A stage keyboardPiano, orchestra, clarinet and synth, under your computer's keys.
  4. The menu: a dark guitar pick split into five pieces, Kimim Ben, Hikaye, Müzik, Konser and Sahne
    04The menuThe pick again, put back together from five pieces, one for each part of the site.

Pages

Desktop, 1440 × 900
  • The opening: the white Kırık Pena pick over a dark live video of the band, with SESSİZLİĞİ KIR below
    Before the break: “break the silence”, with sound or without.
  • KIRIK PENA in large cracked letters beside a photograph of the bassist on stage
    After it: the band, in frames cut like shards.
  • KİMİM BEN in white and red beside the single's red pick-shaped cover
    The new single, “Kimim Ben”.
  • MÜZİK above a row of guitar picks, each one a release cover
    Twenty-four releases, each on its own pick.
  • SAHNEDE above a black-and-white photograph of the singer and a phone video from a concert
    On stage.
  • The footer: KIRIK PENA cracked across the page, with links to Spotify, Instagram and email
    The wordmark cracks open one last time.

On the phone

390 × 844
  • The opening on a phone: the pick and the SESSİZLİĞİ KIR button
  • The homepage on a phone: KIRIK PENA over a photograph of the band
  • The new single on a phone: KİMİM BEN above the red cover
  • The stage section on a phone: a concert video and a quote

Under the hood

Full-stack, front to server

  • No framework

    Hand-written HTML, CSS and JavaScript, with GSAP and Lenis for the motion. Three.js is loaded only for the break, and only after the first click. One switch turns the motion off.

  • The music moves the picture

    One audio player for the whole site; through Web Audio, its level and beat drive the cracks and the film grain.

  • Recorded instruments

    Drums, electric bass, piano and orchestra sections from public-domain (CC0) recordings, each licence checked, each keyboard note pitch-checked. The synth is built in the browser.

  • Drafts behind a password

    The two other directions live on their own addresses, behind a password page checked on the server by a Netlify Edge Function.

  • A newsletter

    “İlk duyan sen ol”, be the first to hear: sign-ups arrive through Netlify Forms.

  • A deploy that checks itself

    Every deploy runs a check first. If it fails, nothing goes live.

  • HTML, CSS, JavaScript
  • GSAP
  • Lenis
  • Three.js
  • Web Audio
  • Netlify Edge Functions
  • Netlify Forms
Research, art direction, design and development
Léo Yiğit Ekiz
Music, photographs, videos and covers
Kırık Pena, their labels and photographers

Visit kirikpena.com