Website-Boilerplate | Combo of Webpack, Bootstrap... to develop/build a cross-browser & -device, dark-theme blog + portfolio website with exchangeable WebGL header - Demo:

Dark Particle Website Boilerplate

Lighthouse Average Results

Full Reports: Main Page | Project Page

Mobile (click to toggle)

Full Reports: Main Page | Project Page

~ Created with Lighthouse-Badger :badger: :tokyo_tower: :medal_military: ~

Mozilla Observatory

Full Report: Last One
Example Mozilla Observatory Report Example

Snyk Vulnerabilities

Full Report: Last One
Example Snyk Report Example

Preview - Demo


This dark theme website-boilerplate combines Webpack, Jekyll, Bootstrap and much more. Additionally, you can just add other packages from npm and/or gems from RubyGems as you like.

Further, it has an easily exchangeable WebGL canvas header as an animated 3D background. The GLSLX shader files are also watched in the development mode of this boilerplate. That means, if you edit them and save your changes, the shaders will be recompiled and reloaded immediately.

You are welcome to use this boilerplate to edit the existing shaders or to create a completely new WebGL header. I am curious what you will develop. If you need inspiration, check out Shadertoy or GLSL Sandbox for fragment shaders and Vertexshaderart for vertex shaders. There you can see what's possible.

If you don't need this boilerplate with all the bells and whistles, but want a WebGL canvas boilerplate as a quick and easy live editor, or if you just want the pure minimized bundles as a 3D animated background, look here.

Note: WebGL canvas headers can make your CPU sweat, but it gets colder as you scroll down :wink:

Feature Overview

npm RubyGems jQuery BABEL Font Awesome Google Search Console

Branch: master

webpack Bootstrap jekyll Node.js nvm Sass Squoosh imagemin

Note: imagemin-mozjpeg, -pngquant & -gifsicle are deactivated by default due to currently unresolved vulnerabilities. Feel free to change this here watcher.config.mjs (e. g. imagemin-pngquant is faster than Squoosh-oxipng).

Releases: v1 > v2 > v3 > v4



Note: Third party feature badges are clickable and linked to their sources.

Additional Feature Information: v4.0

[click to toggle]

Note: Cards are clickable and linked to the corresponding GitHub repositories.

Feature Presentation: Exchangeable WebGL Header






Feature Presentation: Screen Size Adaption

Header About Projects

Other Version

You can get a bright version here:

More Information

You can use one of these boilerplates as a starting template to make your web appearance, blogging and portfolio awesome. They are heavily based on the magnificent work of Stephen Arsenault [License: MIT], Nathan Randecker [License: MIT; Copyright: © 2016 Nathan Randecker], me Sitdisch and many more.

For more information about this boilerplate, and to see what's possible even with an older version, take a look at my personal GitHub page here:

P.s. don't be afraid of the cookie consent window on my website. I don't record your personal data. It's only necessary to satisfy the lawyers out there.

Have a nice day.


Note on protected brand names and logos

  • The use of protected brand names, trade names, utility models and brand logos on this website does not constitute an infringement of copyright; rather, it serves as an illustrative note. Even if this is not marked as such at the respective points, the corresponding legal provisions always apply.

  • The brand names and logos used are the property of their respective owners and are subject to their copyright provisions.

  • This offer is in no way related to the legal entities of the protected brand names and logos used.

  • This README contains links to external third-party websites. The README operator has no influence on the content of these sites. Therefore, he cannot assume any liability. Instead, the respective provider is always responsible for the content.

  • The linked pages were checked for possible legal violations at the time of linking and illegal content wasn't discernible. A permanent control of the linked pages is unreasonable without concrete evidence of an infringement. However, if the README operator becomes aware of such a violation, he will act immediately.

Readme uses