rashil2000


Last commit: 4 December 2020

TFPS Landing Page

The Technology Fimmaking and Photography Society of IIT Kharagpur had a commendable online presence, be it short movies on YouTube, photographs on Instagram or followers on Facebook. It lacked one thing though - a proper webpage. Well, no more! - an enthusiastic me decided in my second year.

After searching through countless media-outlet centric templates, I settled on Snapshot, and made considerable changes to the About section. This included calls to YouTube and Instagram APIs to get the current number of subscribers and followers.

I put up TFPS's best film work in the Celluloid section, and reserved the Showreel section for top photographs by TFPS folk. There were two main hurdles in the way.

Splash animation

I had way too cool ideas for this one - it's the first thing visitors see and it should really stand out in uniqueness. Large number of websites for making logo animations exist and some of them are really good - I did end up making prototypes like this one at one of them:

effect-anim

One major catch here - none of these websites offer anything for free, and I didn't really want to pay anything until I'd run out of options. I searched some more, and looked for assets online to make this stuff on my own using After Effects.

That turned out to be too difficult of an exercise. I finally figured - why not just stick to something I already know - CSS! People might not know this but CSS can be used to make incredible animations, and you don't even have to load any heavy JPEGs or MP4s, it's all text! So after sitting up an entire night, this was the result:

css-anim

Image feed

This one was tough because Facebook made a lot of changes to their Graph API by the end of 2019. Before this, it was really easy to construct a basic feed of a user's Instagram pictures using HTML/JS. Now one has to go through a lot of stuff - making business accounts, getting apps approved, incorporating persistent API keys, understanding the data structures etc. - to get that done. To skip all that, I looked out for site plugins that offer the same functionality; of course the free ones.

lightwidget

Lightwidget (above) was one good option and it didn't require signup, but it didn't provide a way to sort the posts by number of likes. I decided to go with Juicer (below) as it has a lot more customization capability. Sadly, it shows some ads in the feed too, but this isn't much of a concern today since most peope use adblocks in browsers anyways.

juicer

Oh, and also the project is open source on GitHub, so anyone can contribute, file issues or request features.