Source Code Easter Egg

The blue easter egg shows you how I setup the code stack for the site and the reasons why. I learned a lot and refreshed some skills when building this site. I always enjoying coding my designs when I can.

CSS / SCSS / CSS FRAMEWORK

Most of the code written is custom SCSS code that is then compiled into css using Gulp. I am using Spectre.css to build a responsive design using flex grid and comes pack with some powerful elements, components, utilities, and more only running at about 10K, very impressive. I am including animate.css to bring the page to life with micro animations using pure CSS.

JS

The vanilla JS functions and code I built myself as both a learning exercise and simplifcation of using a large js library. I am pulling in a min version of jQuery to speed up some of the coding at times. For my portfolio carousel, I decided on use the existing popular Slick Carousel to simplify and speed up coding of a fully custom carousel. Sometimes buy (use opensource vetted code) vs build is ok in my book.

HTML / SERVERSIDE

Using PHP as my serverside function to use include files to make my files more dynamic. Outside of this and some local vars the site is mostly HTML.

Dynamic Modals

Each modal that is used for both the journey and portfolio sections gets dynamic data attribtutes passed to it each time the modal is triggered. This simplified the usage of the modal and to really help with page load by only calling the modal's data when needed.