Maria Blair

Portfolio built with HTML, CSS, and JavaScript from scratch using the w3schools CSS library. Main focus here is the parallax effect achieved with CSS and vivid images that I love. JS and CSS makes the small images interactive when clicked (pop up) or hovered on (opacity filter). The site is also completely responsive and looks good on different screen sizes, including mobile. Google maps uses my API key and has a pin. The button leads users back to my main Bootstrap portfolio.

Using JavaScript and jQuery, developed an interactive resume application that reads all data from a JSON file and then dynamically modifies the DOM to display the information. Further customized the project by personalizing the design using CSS. I'm using Google Maps and Twitter APIs to display the interractive map of the places I've lived and worked, as well as my Twitter account feed.

Using WordPress, built and customized a website for INKA Properties company. Configured WP theme and widget area, designed front page. Created Contact page and Property page with image galleries. Configured Google map of the property using my API key.

Developed a classic Battleship Game as a project for the Head First JavaScript Programming class. Used JavaScript and object-oriented design. Built a grid with HTML and CSS and placed it on top of the background image to create a functional board. Structured JS code according to the MVC model for more efficient organization and testing.

Optimized performance and browser rendering of this very troublesome portfolio site in terms of critical rendering path and frames per second (FPS). Used several technologies and JavaScript refactoring. Using Grunt, I optmized images by resizing and compressing, and minified JS for all sites. Optimized fonts and asynchronized loading of JS. Improved Google PageSpeed Insights score from 23/100 to 95/100 for mobile and 97/100 for desktop for the main site. Optimized Cam's Pizzeria site to render at 60 FPS when scrolling and resizing pizza images in under 5ms. Used Chrome's Dev Tools Timeline to measure and record performance.

Developed a game as my 5th project for the Udacity Front-End Web Dev nanodegree. The goal was to create a classic arcade frogger game using the newly acquired skills in Object Oriented JS and HTML5 Canvas. Images and a game loop engine were provided. The rest was built in app.js file.