Highlights

I'm a fan of the Syntax podcast and thought it'd be fun to submit this website to get their thoughts on the next Syntax Highlights episode.

I was surprised how much they liked it and appreciate the detail they go into.

You can listen to an edited down version of the episode posted above, but some quick quotes are:

Choice Quotes

Wes

• "This website is absolutely full of nice touches."
• "This is the ultimate flex."
• "It's awesome."
• "A+ on this."
• "Unreal job. You should defintely check this website out and click around. Spend sometime on it, inspect element. This is one of those fun websites."

Scott

• "This is one where, if you're listening to this in the car, give the episode a fave and look at this website later."
• "This is probably my favourite website I've seen so far in Syntax highlighting."
• "Dang. Great use of colour. Great use of dissonent colour. Maybe like a retro styling in this thing. It has a good, old school terminal feel to it, but at the same time it's very designery. Oh man...it's cool."
• "The thing I appreciate most about this site is that it's a fairly atypical layout."
• "It's very unusual in its layout, but the layout really works. This thing snaps."
• "The most flexy part of this website is that it's obnoxious over the top done in a way that doesn't hurt the experience. They have perfect control of how much they are giving you."
• "Oh, the highlight color is this beautiful pink too. This site keeps on giving."

Points of Interest

There are a lot of little touches and moments of delight around consolecmnd.com.

• The website was originally build using GatsbyJs in 2020 and has since been rebuilt from the ground up using NextJs v13.

• Data is been pulled in from DatoCMS, a headless CMS with an API that can be queried with GraphQL and pull data into your website. The free tier is generous enough to allow a site like this to operate for free.

• consoleCMND is hosted on Netlify (free tier) so I'm able to edit a page in DatoCMS, click publish which calls a hook to Netlify to pull data and rebuild in about 1 minute.

• Or I can update some code, commit to the main branch and that automatically calls a hook for Netlify to rebuild the code base and deploy to production all with in the minute.

Bonus!

• Check out the rollover effect on the buttons for some full screen blobs
• Custom text highlight colour
• Animated SVG trace paths for media title highlights. See above: "Podcast Clip"
• If you look realllly close to your screen, you'll notice a static noise animation. A slight grainyness to the whole site to tie things together and emulate an old computer screen.
• Custom cursors
• An Award component that appends any award info to the project
• Mobile friendly as well, duh
• Audio (like on this page) and video components to highlight a project's point of interest

Zoom in Animation

Using a Zoom component to display the MainStreeter articles full screen.

The layout is simple css grid with nth child styling to make the first image in the array the large top image, then adds the "Back Issues" title with a ::before on the 2nd child property, then lays out the remaining in a four column list.

By doing this, I was able to simply add the latest article to the gallery and the layout automatically took care of the rest.

Mobile Navigation Animation

Adding a little colour to the opening and closing of the mobile navigation menu.

Bouncing ASCII Ball Animation (CMND)

A little animation experiment with shaders using ThreeJS.

The shader adds a layer of ASCII art for the low-poly ball using the letters CMND and punctuation to make up the object.

Floating Space Faces

Little cmnd bud faces appear throughout the site floating around and adding a little humour and movement to some pages. I think it looks a little like a petri dish under a microscope with a shallow depth of field.

When the page is loaded, the faces are generated with a large number of random variables to provide some variety.

• Random number of faces
• Random sizes
• Random blur
• Random rotation
• Random distance from A -> B they travel
• Random speed to make that journey

When combined, it gives the group a more organic feel.

Gold Bar CMND Rendering

Another bit of movement in the form of a 3D rendering. CMND as a gold bar, created in Blender and animated.

Also a glitch effect applied showing a 3D glasses friendly version. A CSS animation hiding/showing between the two videos giving it a glitch effect.

The 3D glasses version is also revealed on hover.

Animated Nacho Flag

Another ThreeJS toy for a bit of fun and movement, the Nacho Flag.

A sin-wave animated plain with a jpg texture and multiple light points coalesce into this beauty.

No Nachos, No Life indeed * salutes *

Image Gallery Slider

If I want an image slider in the project body, I can just chuck some pics in the CMS and the slider component I built serves them up with no further effort. Boom, slidin'