This is my Responsive Portfolio Website Project I did during the Google Nanodegree Program. I used HTML5 semantic elements with simple, clean yet enjoyable layout and with minimal amount of fonts and color palette. I made the DOM compact without too many child elements or nesting which avoids complex reflow and repaint.
I used srcset to let the browser decide the Image to display based on the browser window's width, which boosts performance and makes the website run faster. I linked the external .js file towards the end right before closing the body tag, which allows the browser to run the DOM without blocking.
I added a custom font using @font-face css property. I added a custom logo to the title of the page using https://www.favicon.cc/ to generate a ".ico" file.
I used an SVG for the logo to maintain the logo's quality and the file size low.
I used CSS Flexbox and media queries to make the website responsive.
I used font icons using Font Awesome for social media links. I followed the Google's udacity style guide to maintain a clean format with proper indenting, line spacing etc for better readability of the code.
I added comments for myself and other people who read my code.
I used jQuery with the latest ES6 syntax in JavaScript.
Check out the project live
Thanks! :)