I recently updated my personal website, https://hunterchang.com, and wanted to share how I did it. The idea was to make a link in bio type of site, like Linktree, but style it to look and feel like TikTok or Instagram Reels.
I added full-screen video backgrounds and have my social media icons clearly visible.
The code can all be found at: https://github.com/ChangoMan/hchang-reels
The main slider library I used was https://swiperjs.com
1:50 - There is a package.json file that spins up https://browsersync.io and another command that watches for Tailwind CSS changes.
4:05 - I used https://swiperjs.com to create the slides for the site. I imported the swiper element bundle and used their web components to make the sliders.
7:54 - I get the "realIndex" from the event listener and use that to determine which slide I am on.
8:33 - I didn't want all the background videos to load at once, so I only load the video and include the "source" when I am on that particular slide.
9:15 - Description of the properties I used on my "video" tag. I took a picture from the first frame of the video and used that as the "poster"