My Portfolio Website

“Pushing the boundaries Open Source Web Technologies”

Role: Creating Liquid, Responsive HTML5 Website & Strategizing on website.

Workflow, Communication & Brief

I teamed up with Mythili Hariharan for the design on this website. We brainstormed our ideas for pushing the web technologies and engaging users with compelling Animations, at some of our favourite cafes.

Information Architecture & Brief

Before commencing the work, I had developed a rough draft of Information Architecture and content for the website. I was very keen on having a dark theme as the "white-themed" portfolio websites did not appeal me so much.

FEATURES

Responsive HTML5

The website can be scaled to any device and performs brilliantly on mobile phones.

Animations

Scrollmagic, One of the leading scroll based animation libraries is used along with Greensock to achieve most of the responsive and liquid animations on the website.

Exclusion of Scroll-hijacking

Websites are made for users and each design choice should be made to benefit the user. A lot of the websites these days use scroll hijacking, a technique that controls the scrolling behaviour and/or the speed of user scrolls. I was always against taking the control of scrollbar from the users as I feel it's an anti-pattern and should be avoided in most cases. Envato has a great post on this.
Also, I avoided using a JavaScirpt scrollbar and used CSS scrollbar instead. The colour of CSS scrollbar is time specific and changes as per the time visited by the user.

Eco-Friendly Website

The print style sheet hides everything, except the about page and prints an eco-friendly message to instigate saving papers.

About page

The age old way of showing social icons looked too cliched for the website. I brainstormed and came up with an idea to uniquely represent all social media links. Strangely, the designer approved this idea.

Homepage 3D Icosahedron

The concept here was to have a couple of 2D triangles forming an icosahedron and have them being rotated on a 3D plane on the mouse movements. A user can interact with these triangles by moving their mouse over icosahedrons.

Custom code is written for responsive Navigation

Viewport Units were used instead of JavaScript for resizing fonts which scale as per the viewport width (and in some cases height). For non-supporting browsers, JavaScript fallback was added.

Interactive Page Transitions

The website achieves a seamless transition while opening up navigation menu and dialogue boxes for case-studies(projects) and CV. The Case-studies are loaded asynchronously using jQuery Ajax.

JavaScript Fallback

The web always talks about creating "content-first" websites and I really wanted the site to implement this in utmost fidelity. The website gracefully degrades when the browser javaScript is turned off.

OPTIMIZING PERFORMANCE

Performance Budget

We were keen on utilizing the power of SVGs as images for the website. Due to highly detailed vectors, the SVG exports went up to 12MB. I helped designer Madelyn Lee to achieve an optimized version of the vectors without loosing visual details. The result was a much more optimized vector file which in turn, exported smaller SVGs.

This was achieved by combining paths using pathfinder, simplifying paths, removing groups, removing completely transparent or hidden objects/layers, etc. SVGs were further minified and optimized using SVGO. Finally we reached a stage where the whole website size (including CSS, JS and images) was approximately 2MB.

Mobile Performance

We disabled Parallax in favor of performance for mobile devices. We realized that having parallax meant lower scrolling performance and higher page sizes caused by loading multiple images as parallax layers. The code makes sure that desktop images are not loaded on the mobile and vice versa.

Optimising Critical Rendering Path

The website is optimised to delay loading of resources and visual elements that are not immediately visible on the website load. The first visible paint happens somewhere within a second and most of the assets not critical to the first paint are loaded asynchronously after achieving the first paint.

Optimising SVGs

When I first briefed the Designer, Mythili for the project, We were in the same pace of not having Gradient Meshes or any complicated vector elements in design. The vector elements had to be simple and flat as they had to be animated via CSS and JavaScript. I briefed Mythili on optimising Vector objects so that the exported SVGs are of smaller sizes. All the outlines on case study pages come from a single SVG sprite sheet. You can know more about the SVG optimisation tips and techniques used while developing this website through my youtube video

WEBP

Website uses webP images and in some of the cases the file sizes were somewhere near 10% of the original files. The website uses Modernizr, a feature detection library for fallback on browsers that do not support WEBP.

Mobile Performance

Although many mobile phones have become at par with the desktop in terms of hardware capabilities, I stripped down a couple of features(and images) for the mobile website. This facilitated a greater performance, both in terms of memory usage and file size.

DOM Performance & 60FPS Animations

The property `will-change` is quite a controversial one as sometimes it rasterises the elements while animating. I chose to use the property very carefully and I would advise anyone planning to use this property to go through this article by Greensock.

Although, this is a one page website, the code is optimized to use the least amount of DOM elements possible for achieving all the features.