This website is of note because it is the first time I coded GLSL shaders to run in a web browser. I wanted to do something interesting for the background and wanted something more code heavy than asset heavy. While looking for ideas, I discovered ThreeJS and learned that is supports GLSL shaders. So I decided to use that for my background on top of a basic WordPress website. I like WordPress for stuff like this since I know it and it can be pretty flexible when building a theme from scratch. Just as I did with BiblioCraftMod.com, I used the super basic boilerplate theme, underscores, then I built the theme from scratch on top of that with PHP, JavaScript, HTML, and CSS. I used ThreeJS to do all the 3D background stuff. This site, like BiblioCraftMod.com is also hosted on a Linux based virtual machine that I rent.
The background itself can be pretty intensive on older computers and laptops so I made it so it will measure the framerate and adjust the quality of the background accordingly. There are 4 states for the graphics. One is full graphics, which means you get to see the galaxy, the stars, and the moving icy shape in the background. First detection of a slow down I back it down from “High” to “Medium” which basically just reduces the number of star in the galaxy that need to be rendered. “Low” just gets rid of the galaxy all together and if the performance is still too low, we jump back to high long enough to render a frame then stop the animation and just use a freeze frame of the full galaxy and background image. The idea is the website should be accessible on any device, but it should look more interesting on more powerful devices. Alternatively, the user also has manual control of the graphics in the top right of the website. The user can adjust the quality settings and can just stop the animation all together if they prefer.
Portfolio Website
Principle Medium
Skills Used
Website
CSS
HTML
Javascript
PHP