❓ What is ebaker.us?
I created ebaker.us as a digital resume and portfolio website. Coded using ASP.NET Core MVC, the site showcases my frontend skills and diverse projects. ebaker.us is designed with best practices in mind, focusing on performance optimization, responsive design, and SEO. Users can explore a dark mode that adapts based on system preferences, an animated headshot that changes based on mouse position, intuitive resizing, scroll animations, and interactive elements.
I used media queries to ensure that the website display is accessible and appealing no matter what size device the user views it from. More than 99% of devices are supported, with the minimum recommended width being 290px.
Powered by JavaScript action listeners and a CSS ‘darkmode’ class, the website includes a dark mode option, accessed automatically based on user system preferences or via a toggle button in the top right corner. The site uses local storage to remember users’ dark mode preferences between visits.
Using JavaScript action listeners, I designed an animated headshot that reveals a color or black-and-white image based on mouse position. This minor detail adds to the website’s intractability without sacrificing its clean design.
Using a combination of CSS classes and JavaScript action listeners, select elements on the website fade in and out when they are scrolled to or from, providing depth and improving the site’s overall UX.
Using the CSS hover selector, as well as the parent and sibling selectors, I allow the user to interact with certain elements when hovered over. A notable example of this is in the Projects & Skills section, where the skill icons are highlighted depending on what project is being hovered over.
While constructing the website, I prioritized performance optimization, using PageSpeed Insights and GTmetrix to estimate it. The present optimization scores exceed 95% across all categories (see below). While Accessibility, Best Practices, and SEO posed no significant challenges, the initial performance score was below par. To address this, I implemented Brotli compression for compacting HTTP content, employed defer and async attributes to prevent stylesheets and JavaScript files from hindering page load speed, utilized .webp images with .png alternatives to reduce image file sizes, and deferred offscreen image loading until they come into view. Further possible performance enhancement could be achieved by minimizing main JavaScript thread operations and adopting higher contrast colors to improve accessibility.
PageSpeed Insights (Desktop):
PageSpeed Insights (Mobile):
GTmetrix:
