Statically Generated Site

This site is entirely static. The original code used to generate it is open-sourced under the MIT license and available on GitHub. A significant amount of nonoriginal open-source code was also used, much of which is listed below.

Markup

The site's content is written in Markdown and rendered with markdown-it. The templates for the site's HTML are Mithril modules rendered on the server with mithril-node-render. Content is read and injected into the templates by a static markup generator I wrote titled smg.

Style

The styles for this site are written in Stylus. Concepts from itcss and BEM are used throughout. Flexbox is used extensively in lieu of a traditional grid system. The layout is responsive and has been tested on modern desktop and mobile browsers.

• Colors and Shades
  • #B00000
  • #000
  • #222
  • #555
  • #AAA
  • #EEE
  • #FFF
• Fonts
  • Open Sans
  • Source Code Pro
• SVG Icons
  • Font Awesome via IcoMoon

Scripts

The site's JavaScript is written in ES6, transpiled by Babel, and bundled by webpack. Domready is used extensively to ensure the DOM is, in fact, ready before DOM-dependent scripts fire. I also use my get-element module a lot to grab elements to interact with.

The menu animation is powered by a custom script that uses bezier-easing for easing calculations. The animation logic itself is entirely decoupled, so I'll likely break that out into a module soon.

The scrolling animation that fires when the arrow at the bottom of a full-page banner is clicked is powered by smooth-scroll.

Scripts are also used to prevent dragging elements, calculate how long ago posts were posted, and lock the height of full page banners on mobile to prevent janky resizing if browser chrome autohides.

Do note, though, that the site is completely usable with all scripts disabled, if that's your cup of tea. Progressive enhancement FTW!

Gulp

The site is built by a custom modular Gulp task tree that provides a unified CLI interface to the various processess necessary to get from raw source to browser-ready code. This includes a most convenient watch task that watches all source for changes, automatically runs any necessary tasks in response to said changes, and automatically pushes those changes to the browser (which automatically reloads) through browser-sync.