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
Key Takeaways:
1:28 - The site is just mainly 1 HTML page, with some CSS and JavaScript. I didn't think React or a framework was needed for such a simple site.
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:00 - There is a small amount of JavaScript to listen for when the slides change. I needed to know which slide was active, using addEventListener on "realindexchange"
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"
10:57 - JavaScript that inserts the "source" for each slide, if there is no source detected. This is what triggers the background video to load once you get to the second and third slides.
Top comments (1)
woawww looks nice, awesome job :)