TL;DR: Enhanced my Tableau story with mobile responsiveness

Purpose
I have to select a business-related dataset for this assignment and then visualize it in a Tableau story.

Since I am running a website anyway, I thought I might as well embed it here.

Then, I found out that although you can set the layouts for Tableau dashboards for various screens, like desktop and phone, once they are embeded in Tableau story, the mobile responsiveness is lost. By uploading my dashboards individually to Tableau Public and using HTML tabs, as well as adding Tableau javascripts, I recreated my Tableau story, except with mobile responsiveness and some basic transitional animations.

So, the end result is, when the screen size is less than 800, mobile version of the story gets loaded.

I would also like to credit this tutorial.

Side note: Originally, my website was built in Django and Vue, hosted on Digital Ocean. All the web pages were stored as .html files. After migrating to NuxtJS during my migration to AWS, I have to use .vue files. To get the old trick working, I kept the old file as .html and embed here as an iframe. My old webpage had no margin and padding, so I have to add a horizontal scrollbar here.