This website has gone through a few iterations, but I’ve decided on a few basic elements for the stack used to make this simple version of it with common tools.
This website uses a few basic tools to work:
And is primarily generated using small HTML templates that pull from YML files.
Inspired by futuristic racing stripe designs, I wanted to be able to have elements come across clearly while still being extremely stylized. A side-content column with superfluous information is used to emulate a “stripe” down the side of the website and other elements like the image lightbox, while helping to visually seperate sections for scanning.
The design uses a base color scheme with a primary accent, and using javascript, it generates a random color from the HSV spectrum (for consistant vibrancy) to create a new color scheme for every page. Certain hues, such as strong blues, are excluded for readability. The color is converted to HSL, and then set as a CSS accent variable. A toned down version is calculated from that and applied to the website background to keep the tone across the page instead of a dull grey.
The hosting takes advantage of a couple features from Gitlab. It uses the Gitlab CI to generate the public HTML files on push, Gitlab pages to host my content (free hosting!), and the automatic SSL certificate for HTTPS.
I also use submodules to pull Git repo information from my projects and embed the README.md into the project page. This allows Jekyll to process them and display them like the rest of the website, and open up the capability of direct linking files through my website. A good example is my aseprite theme project page where the text content is pulled from the git submodule, and the release content is generated from file structure.
Javascript is deliberately limited and semantic elements like <details> are used where possible, but it is used for generating the new accent colors on page load if available, and used for zooming in on pictures instead of loading into a new page.
As part of the Jekyll generation I used as little hardcoded HTML as possible. Most of the website is kept in seperate YAML files which are then pulled from using the light templates to generate the pages. List pages can be generated simply by creating an file that lists what YAML files to populate from:
---
title: Code
layout: list
yaml:
- websites
- programs
- userstyles
---
And each YAML of its own category contains a light structure of category → item → details:
- name: Websites
caption: >-
These are all of the websites I've designed or worked on.
content:
- name: lyutria.com
caption: A personal website used to practice Jekyll static website generation primarily pulling information from .yml files instead of pre-populating any of the website
action:
- text: Blog
link: https://lyutria.com/2020/06/22/Intro.html