MichaelAStein.com

This is my Curriculum Vitae and Portfolio web site. While I could have done the site easily with a ReactJS frontend, and a PHP or Node backend, what I decided to do was to really flex a little muscle. The web site is built using WordPress, however it is built with no Theme or Plugins, or that is to say … my own Theme and my own plugins and Gutenberg Blocks. It’s just as easy to browse the site, but I’ll take a moment to talk about some of the little toys employed here.

Theme

The theme employed is custom designed, with blocks employed from my MS-BLOCK-DEMO Plugin and templates tailored to fit, for Pages, Posts and Articles. The Theme features a backdrop of Hong Kong, using my Gutenberg Block “Clouds” drifting past the windows.

Header and Navigation

The header features a Gutenberg Block with a little fancy scss animation, coupled with JavaScript scroll tracking to swap classes on and off depending on the scroll position. As a Gutenberg block, it’s configured to accept Children, so it’s easy to drag and drop a nav bar into it, making it a dynamic sticky header with a great UX and feel.

Home Page

The home page shows a little sense of humor. These things happen when you enjoy what you’re doing. Right from the onset, the home page plays it’s own simile of the intro to George Lucas’ Star Wars. Once I got the scss animation and perspective to work correctly, I tossed in a little programmer humor, A long time ago, in a “Parallax” far, far away … ending with some inspiring words from Obi-Wan Kenobi. The animation can be terminated by hitting the ‘Stop’ button in the bottom left corner.

But the humor doesn’t end there ! As my image stands in front of the glass windows overlooking Hong Kong. On the home page, the pointing right arm has been pinned to the mouse with an event listener. The resulting animation is comical and engaging. Hey, you have to laugh at yourself sometimes!