Light-Particle

  Last Edited: February 23, 2023

Preview - Demo

This light 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 a 3D animated 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.

For a dark version of this boilerplate look here. You can use one of these boilerplates as a starting template to make your web appearance, blogging and portfolio awesome. They base heavily on the magnificent work of Stephen Arsenault, Nathan Randecker, me Sitdisch and many more.

If you don’t need those website-boilerplates 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 canvas bundles as 3D animated backgrounds for your website, look here.

Table of Contents

• Features
• Local Running
• Customization
• Exchangeable WebGL Header
• Setup at Github Pages
• Credits

Features

WebGL Header

TWGL

GLSLX

Squoosh

imagemin

Bootstrap

RubyGems

Devicon

Sweet Scroll

CodeQL

Google Search Console

NavBar & Scrollspy

Follow Buttons

Local hosting & development

Screen size adaption

Cross browser & device presentation

HTMLMinifier

mini-css-extract-plugin

terser-webpack-plugin

css-minimizer-webpack-plugin

Local Running

To enable local operation of this boilerplate on your machine, you have to do the following:

• open your terminal and define your startup file MYSTARTUPFILE in use
  • e. g. for Zsh
    ZSH

    MYSTARTUPFILE=".zshrc"
    

  • or for pure Bash
    BASH

    MYSTARTUPFILE=".bashrc" # or .bash_profile for macOS
    

• install Ruby and Jekyll
  • Ubuntu
  • update the packages index sudo apt update

  • install Ruby

  SHELL

  sudo apt-get install autoconf ruby-full build-essential zlib1g-dev
  

  • adapt your startup file

  SHELL

  echo '# Install Ruby Gems to ~/gems' >> ~/$MYSTARTUPFILE
  echo 'export GEM_HOME="$HOME/gems"' >> ~/$MYSTARTUPFILE
  echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/$MYSTARTUPFILE
  source ~/$MYSTARTUPFILE
  

  • if your terminal hasn’t closed, proceed with the next step, otherwise, reopen it and redefine MYSTARTUPFILE

  • install Jekyll gem install jekyll -v 4.2.2
  • macOS [OUTDATED]
  • install the command line tools xcode-select --install
  • set SDKROOT (only macOS Catalina or later) export SDKROOT=$(xcrun --show-sdk-path)
  • install Homebrew

  SHELL

  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  

  • install Ruby brew install ruby

  • adapt your startup file

  SHELL

  echo 'export PATH="/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/3.0.0/bin:$PATH"' >> ~/$MYSTARTUPFILE
  source ~/$MYSTARTUPFILE
  

  • if your terminal hasn’t closed, proceed with the next step, otherwise, reopen it and redefine MYSTARTUPFILE

  • install Jekyll gem install --user-install jekyll

  • execute echo 'export PATH="$HOME/.gem/ruby/X.X.0/bin:$PATH"' >> ~/$MYSTARTUPFILE to adapt your startup file (replace X.X. with your Ruby version ruby -v)
  • others

  CONSIDER:

  • working Jekyll versions are 4.1.0 to 4.3.2
  • newer Jekyll versions have problems with older Ruby versions; e. g. for Ruby 2.7 install Jekyll 4.2.2
• install nvm and source your startup file again
  SHELL

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  source ~/$MYSTARTUPFILE
  

• if your terminal has closed, open it again and continue
• execute nvm install 16.19.1 to install Node.js
• clone the repository git clone https://github.com/mythemeway/Light-Particle or your fork to your local machine
• change your current directory to Light-Particle cd Light-Particle
• run npm install

CONSIDER: If you’ve already installed Ruby, Jekyll, nvm and Node.js you only have to do the last three steps.

That’s it. Now every time you want to run the website locally in development mode, go to your Light-Particle directory on your local machine and execute npm start. Your website will then appear at http://localhost:8080.

If you execute npm run build instead, a one off build of your website in production mode will be put into the ~/Light-Particle/docs directory.

The following video shows an outdated example setup of the dark boilerplate on Ubuntu. This also applies to the light one.

Customization

Customize your site and user settings e. g. while adapting the scss files under ~/Light-Particle/src/styles/ or the following _config.yml file located at ~/Light-Particle.

# Site settings
title: # insert a page-name
description: # insert a website description.
baseurl: /Light-Particle

# User settings
username: # insert a username
user_title: # insert your title
user_picture: # insert a path to your pic e.g. "/assets/img/User_picture.png" (size e.g. 254x254)
user_description: # descripe your experiences
email: # insert your_email_address
github_username: # insert your Github username
twitter_username: # insert your Twitter username
youtube_channel_id: # your Youtube channel id
linkedin_username: # insert your Linkedin username
facebook_username: # insert your Facebook username
instagram_username: # insert your Instagram username

# Google Search Console
google_site_verification: # your meta tag (no quotation marks)

CONSIDER:

• if you want to use this theme on your main domain e. g. <username>.github.io, just set baseurl: to nothing; otherwise, it will only be used in the specified subdirectory e. g. <username>.github.io/Light-Particle
• if you set a username e. g. for Twitter the icon will occur automatically

For an example of how to change the user_picture: of the dark boilerplate, see the video below. This also applies to the light one.

Exchangeable WebGL Header

If you get tired of your current header, you can anytime easily switch to another one.

Canvas Examples

The previews below are clickable and linked to their respective GitHub repositories.

mtw-canvas-disks [included]

Note: Fragment shader is based on CoordSys - intersection [License: MIT; Copyright: ©️ 2013 Inigo Quilez; Changes: made]

mtw-canvas-malachite [included] [default]

Note: Fragment shader is based on Glare of water [License: CC BY 3.0; Copyright: ©️ 2019 Jan Mróz; Changes: made]

mtw-canvas-spiral

Note: Fragment shader is based on ARQVOID :: 240 chars [License: CC BY-NC-SA 3.0; Copyright: ©️ 2021 ENDESGA & Xor; Changes: made]

mtw-canvas-blacksea

Note: Fragment shader is based on Glare of water [License: CC BY 3.0; Copyright: ©️ 2019 Jan Mróz; Changes: made]

Exchanging Procedure

1. open ~/Light-Particle/canvas.config.js
2. change the path to canvas (p2c) and save it

// 
// SECTION: PATH TO CANVAS (p2c) IN USE
// 

// const p2c = './src/canvas/mtw-canvas-disks';
const p2c = './src/canvas/mtw-canvas-malachite';

That’s it.

Adding Procedure

1. put mtw-canvas-new into the ~/Light-Particle/src/canvas directory
2. follow the Exchanging Procedure

// 
// SECTION: PATH TO CANVAS (p2c) IN USE
// 

// const p2c = './src/canvas/mtw-canvas-disks';
// const p2c = './src/canvas/mtw-canvas-malachite';
const p2c = './src/canvas/mtw-canvas-new';

CONSIDER:

• mtw-canvas-new must have a main.js file
• to customize the fragment and/or vertex shaders, modify the shaders.glslx files
• WebGL canvas headers can make your CPU sweat, but it gets colder as you scroll down
• mtw-canvas-spiral and mtw-canvas-blacksea aren’t included by default; you have to add them manually

Setup at GitHub Pages

Here is one procedure of getting your website published at GitHub Pages:

1. fork the repository to your GitHub account
2. publicize your repository on GitHub Pages
3. clone your fork to your local machine git clone https://github.com/<username>/Light-Particle (replace <username>)
4. enable local running of your website
5. customize your website
6. execute npm run build to put a one off build of your website into the ~/Light-Particle/docs directory.
7. add git add ., commit git commit -am "my changes" and push git push your changes to GitHub
8. access your website at https://<username>.github.io/Light-Particle/ (replace <username>) and be proud

Now every time you want to change your published website, go to your Light-Particle directory on your local machine and repeat steps 5–8.

CONSIDER:

• it might take a while that your changes occur at GitHub Pages
• you may also need to clear the cookies and old site data from your browser

The following video shows an outdated example setup of the dark boilerplate on Github pages. This also applies to the light one.

Credits

Light-Particle based on the extraordinary work of: