About this site

Welcome on my mechanical driven website where I test modern web technologies.

Anatomy of the website

The website uses the standards HTML5, CSS 3, JavaScript and HTML Canvas animations.

jamstack
It is built on the JAMstack architecture with a decoupled (headless) CMS. At the frontend the website only consists of generated static HTML files.
drupal
At the backend it runs on the CMS platform Drupal 8
WordPress
To study and follow the most popular CMS, I also created a WordPress 5 version of this website.

To make it possible to study and use all these different technologies with the same content, I created this web stack.

JAMstack GuntherWillems.com schema

I have 2 backend content sources (Drupal & markdown files) that I can sync with a self-written custom module (PHP/Drupal API) in Drupal. The markdown files have metadata in a YAML front matter block.

With 2 static site generators (SSG) that I have written in PHP, I can generate the static HTML files from these 2 sources. Editing is possible within Drupal or with a self-written program that uses a JavaScript editor to modify the markdown files.

Drupal Association Individual Member

Because in HTML5 the emphasis is on semantics, I opted to create a minimalistic responsive website.

Cogs

Cog symbol The rotating cog animations are created with the HTML5 2D canvas element and JavaScript. For a fluid animation 2 canvas elements are used. One to pre-render the next frame and one to show the last completed frame. Slower devices are detected and the refresh rate is adapted accordingly. Everything is drawn with vector paths (Bézier curves) in real time. This shows the power of the canvas API and the current web browsers.

Typographic palette

4 fonts are used:

Font palette art

In the header, a light script font Sheila Bold (by Laura Worthington) in combination with the very playful script like font Fertigo Pro (by Jos Buivenga) in the navigation menu.

The headings in the main text use the modern Hurme Geometric Sans No. 4 (by Toni Hurme) with swash in uppercase letters. It contrasts with the next font from the same font family.

The main font is the modern geometric sans-serif Hurme Geometric Sans No. 2 (by Toni Hurme). It is a very geometrical and round font that makes the link with the round cogs. The lowercase o is visually a perfect circle.

The Hurme Geometric Sans font family is very customizable with stylistic sets, small caps and other OpenType features. It has large word spacing in combination with tight kerning.

How these 2 fonts work together:

Fonts comparison

Fonts obtained under license at MyFonts.com.

Color palette

Only one color, sunset red, is used for links and marked text.

My website over the years

It evolved as new standards became important. From HTML to HTML 4 to XHTML 1 Strict with CSS 1.0 to HTML5 with CSS 3. It changed from a layout with tables to a flexible 'liquid layout' to a mobile-first & responsive design in Drupal 8 and WordPress. Afterwards I implemented the JAMstack architecture.
Two pages from the 2007 version can be seen here. The about link is working.

2001

site in 2001 indexsite in 2001

2007

site in 2007 indexsite in 2007

2013

site in 2013 indexsite in 2013

Contact

You can reach me at this address: {G_Willems@outlook.com}