×
document.addEventListener('DOMContentLoaded', () => { const slider = document.querySelector('.gallery-slider'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const youtubeItems = document.querySelectorAll('.youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); let currentPosition = 0; nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const itemsPerPage = Math.round(slider.offsetWidth / itemWidth); currentPosition -= itemWidth * itemsPerPage; if (currentPosition < -itemWidth * (allItems.length - itemsPerPage)) { currentPosition = 0; } slider.style.transform = `translateX(${currentPosition}px)`; }); prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const itemsPerPage = Math.round(slider.offsetWidth / itemWidth); currentPosition += itemWidth * itemsPerPage; if (currentPosition > 0) { currentPosition = -itemWidth * (allItems.length - itemsPerPage); } slider.style.transform = `translateX(${currentPosition}px)`; }); youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });
×
document.addEventListener('DOMContentLoaded', () => { const slider = document.querySelector('.gallery-slider'); const allItems = document.querySelectorAll('.gallery-slider > *'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const youtubeItems = document.querySelectorAll('.youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); let currentIndex = 0; const isDesktop = window.matchMedia('(min-width: 901px)').matches; const itemsToScroll = isDesktop ? 5 : 3; function updateSliderPosition() { // Get the first item to calculate the width, including its 3px margins on each side. const itemWidth = allItems[0].offsetWidth + 6; const newPosition = -currentIndex * itemWidth; slider.style.transform = `translateX(${newPosition}px)`; } nextButton.addEventListener('click', () => { // Ensure the index doesn't exceed the bounds. // We check if the remaining items are enough for a full scroll. if (currentIndex < allItems.length - itemsToScroll) { currentIndex += itemsToScroll; } else { // Loop back to the beginning if at the end. currentIndex = 0; } updateSliderPosition(); }); prevButton.addEventListener('click', () => { // Ensure the index doesn't go below the starting point. if (currentIndex > 0) { currentIndex -= itemsToScroll; } else { // Loop to the end of the slider. currentIndex = Math.max(0, allItems.length - itemsToScroll); } updateSliderPosition(); }); youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.includes('v=') ? videoUrl.split('v=')[1].split('&')[0] : videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });
×
document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.gallery-container'); const slider = document.querySelector('.gallery-slider'); const allItems = document.querySelectorAll('.gallery-slider > *'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const youtubeItems = document.querySelectorAll('.youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); const isDesktop = window.matchMedia('(min-width: 901px)').matches; const itemsToScroll = isDesktop ? 5 : 3; nextButton.addEventListener('click', () => { const itemWidth = allItems[0].offsetWidth + 6; const scrollAmount = itemWidth * itemsToScroll; // Check if we are at the end, and loop back to the beginning if (container.scrollLeft + container.offsetWidth >= slider.scrollWidth) { container.scrollLeft = 0; } else { container.scrollLeft += scrollAmount; } }); prevButton.addEventListener('click', () => { const itemWidth = allItems[0].offsetWidth + 6; const scrollAmount = itemWidth * itemsToScroll; // Check if we are at the beginning, and loop to the end if (container.scrollLeft <= 0) { container.scrollLeft = slider.scrollWidth; } else { container.scrollLeft -= scrollAmount; } }); youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.includes('v=') ? videoUrl.split('v=')[1].split('&')[0] : videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });
Temporary Flix Gallery
×
document.addEventListener('DOMContentLoaded', () => { const slider = document.querySelector('.gallery-slider'); const allItems = document.querySelectorAll('.gallery-slider > *'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const youtubeItems = document.querySelectorAll('.youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); let currentIndex = 0; function getItemsToScroll() { return window.innerWidth > 900 ? 5 : 3; } function updateSliderPosition() { const itemWidth = allItems[0].offsetWidth + 6; // include margins const newPosition = -currentIndex * itemWidth; slider.style.transform = `translateX(${newPosition}px)`; } nextButton.addEventListener('click', () => { const itemsToScroll = getItemsToScroll(); if (currentIndex < allItems.length - itemsToScroll) { currentIndex += itemsToScroll; } else { currentIndex = 0; } updateSliderPosition(); }); prevButton.addEventListener('click', () => { const itemsToScroll = getItemsToScroll(); if (currentIndex > 0) { currentIndex -= itemsToScroll; } else { currentIndex = Math.max(0, allItems.length - itemsToScroll); } updateSliderPosition(); }); youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').dataset.videoUrl; if (videoUrl) { const videoId = videoUrl.includes('v=') ? videoUrl.split('v=')[1].split('&')[0] : videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });
Gallery Slider
×
document.addEventListener('DOMContentLoaded', () => { // Select slider elements const slider = document.querySelector('.gallery-slider'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const youtubeItems = document.querySelectorAll('.youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); let index = 0; // Current slide index const itemWidth = slider.querySelector('.gallery-item').offsetWidth; const maxIndex = slider.children.length - Math.floor(slider.offsetWidth / itemWidth); // Function to move slider function updateSlider() { slider.style.transform = `translateX(-${index * itemWidth}px)`; } // Next button click nextButton.addEventListener('click', () => { if (index < maxIndex) { index++; } else { index = 0; // Loop back to start } updateSlider(); }); // Previous button click prevButton.addEventListener('click', () => { if (index > 0) { index--; } else { index = maxIndex; // Loop to end } updateSlider(); }); // Update slider on window resize window.addEventListener('resize', updateSlider); updateSlider(); // ============================ // YouTube Modal functionality // ============================ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); // Extract video ID videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; // Embed video videoModal.style.display = 'block'; // Show modal } }); }); // Close modal button closeButton.addEventListener('click', () => { videoFrame.src = ''; // Stop video videoModal.style.display = 'none'; }); // Close modal if click outside content videoModal.addEventListener('click', e => { if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });
×
const slider = document.querySelector('.gallery-slider'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const youtubeItems = document.querySelectorAll('.youtube-video'); // Selects only YouTube video items const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); let currentPosition = 0; nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const itemsPerPage = Math.round(slider.offsetWidth / itemWidth); currentPosition -= itemWidth * itemsPerPage; if (currentPosition < -itemWidth * (allItems.length - itemsPerPage)) { currentPosition = 0; } slider.style.transform = `translateX(${currentPosition}px)`; }); prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const itemsPerPage = Math.round(slider.offsetWidth / itemWidth); currentPosition += itemWidth * itemsPerPage; if (currentPosition > 0) { currentPosition = -itemWidth * (allItems.length - itemsPerPage); } slider.style.transform = `translateX(${currentPosition}px)`; }); youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; }); }); closeButton.addEventListener('click', () => { videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } });

profile

Hangul : 비아이Name : Kim Hanbin / 김한빈Label : 131 (2021 June 01 - )Solo Debut : 2021 June 01Fandom : IDFandom Colour :Official Lightstick : BINBONG

Former Labels

  • YG Entertainment, as member of iKON (2015 - 2019 June 12)


awards / recognitions

Pre-debut

  • Show Me the Money 3

  • B.I : “Be I” : first single from SMTM to top the charts

  • B.I and Bobby broke the idol-rapper stereotype

  • 2014 Mnet Asian Music Awards

  • B.I and Bobby : first idol trainees to perform at MAMA

2018

  • 10th Melon Music Awards : Songwriter of the Year - top earner in terms of royalties

2019

  • becomes full member of the Korea Music Copyright Association (KOMCA)

2020

  • appointed as Executive Director at IOK Company for IOK Music (resigned 11 October 2022)

2021

  • debut as solo artist under IOK Music affiliate 131 Label

  • “illa illa” : most viewed kpop male soloist debut MV in the first 24 hours with 12.7M views

2022

  • first Asian artist to feature in the GRAMMYs Global Spin series

  • 131, formerly 131 Label, becomes an independent label

2023

  • becomes the cover of the inaugural issue of HIT! Magazine (Brazil)

  • first and only Korean artist to perform at Lollapalooza Berlin

  • headlined the first K-pop concert in Estonia in Tallinn on October 03 (it’s kind of a fun fact :)

  • Supersound Festival : Best Rapper of the Year

2024

  • Hanteo Music Awards 2023 : Special Award (Hip Hop)


+where to start
  • Listen to his demos!
  • Do NOT miss his b-sides and remixes or you're seriously missing out!
  • Read the English translation of each song at least once.

Here's a list of personal faves by playlist-ish. Here ya go:

DEMOS : Fairytale / Hawaii Love / At That Time

LOVE STREAMING : Midnight Blue / Remember Me / Blossom

LEGENwaitforitDARY : Waterfall / Flame / BTBT / Dare to Love

PARTY PEOPLE : To Die / Beautiful Life / Michelangelo

HANBIN AND CHILL : Re-birth / Middle with You

CRIES IN HEARTBREAK :

OLDIES BUT GOODIES : Numb / Cloud Thought

GUILTY PLEASURE : Got It Like That / Gray / Lover

SHOWER SESSIONS :

ROADTRIP JAMS : illa illa / The Island of Misfit Toys

THIS IS REMIX : Lost at Sea (illa illa 2)

UNDERDOGS : Then

iKON : While in iKON, he was the main songwriter, composer and producer of the group. Check iKON discography for a list of his previous works.

I'll finish this some day~~


albums

  • waterfall / 2021.06.01 / first full album as a solo artist

  • to die for / 2023.06.01

  • wonderland / 2025.06.01

extended plays

  • cosmos / 2021.11.11

  • love or loved [l.o.l] pt. 1 / 2022.11.18

  • love or loved part.2 / 2023.11.10

  • tadaima / 2024.03.12 / japan

singles

  • midnight blue [love streaming] / 2021.03.19 / all proceeds from sales, streaming and copyright will be donated to support children in need through World Vision

  • got it like that / 2021.05.14

  • lost at sea (illa illa 2) / 2021.10.01

  • btbt / 2022.05.13

  • ttm / 2023.04.27

  • tasty / 2024.05.20


features / credits / others

2009

2014

  • Be I / B.I / Lyrics and Composition

  • Born Hater / Epik High ft Beenzino, Verbal Jint, B.I, Mino, Bobby / Lyrics and Composition

  • Empty / Winner / Lyrics and Composition

2016

2017

2018

  • Mollado / Seungri ft B.I / Lyrics and Composition

  • FRIEND / Curious Husband’s Get Away / Lyrics, Composition and Production

2019

  • No One / Lee Hi ft B.I / Lyrics

  • 1,2 / Lee Hi ft Choi Hyunsuk / Lyrics and Composition

  • Sexy / Eun Jiwon / Lyrics and Composition

  • Worthless / Eun Jiwon / Lyrics and Composition

2020

2021

  • Acceptance Speech / Epik High ft B.I / Lyrics and Composition

  • Dear. / B.I, under the name ID (Be Identity)

  • Savior / Lee Hi ft B.I / Lyrics by B.I / Lyrics and Composition

2022

  • Don’t Wake Me Up / MC Mong ft Soyou / Lyrics and Composition

  • HANDSOME / Padi ft B.I, Nucksal, Kid Milli, Gaeko / Lyrics and Composition

2023

  • Missing You / Soovi ft DVWN / Lyrics and Composition

  • Hey / Soovi / Composition

  • DO / Padi ft Lee Hi / Lyrics and Composition

  • R.I.P / Kid Milli ft B.I / Lyrics

  • Sorry, I Hate You / Sik-K ft B.I / Lyrics and Composition

  • Favorite / POW / Lyrics and Composition

  • Dazzling / POW / Lyrics and Composition

  • Amazing / POW / Lyrics and Composition

  • Jacuzzi / James Reid, B.I, DJ Flict / Lyrics

  • Smoke (Remix) / Dynamic Duo, Zico, B.I, Jay Park, Changmo, Jessi / Lyrics

  • INFJ / Big Naughty ft B.I, Bang Yedam / Lyrics and Composition

2024

2025