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.
-
AG Event
A highly interactive single-page HTML5 Website for an Event company based in Istanbul, Turkey. Read More
-
eScapegoat
A fun vector based illustration website for a festival that has a tradition of members submitting confessions anonymously. Read Case Study
-
Panda Icecreams
A dedicated Desktop and Mobile website experiance for an Ice-cream brand. Case Study