Project Categories

Project Setting Personal
Team Size 1
Role(s) Designer / Maintainer
Languages HTML CSS JavaScript
Software/Tools Used Brackets (code), GIMP / Inkscape (graphical assets), jQuery (library), Vue.js (library), Tippy.js (library), vanilla-tilt.js (library), Prettify (library), Tabulator (library), Electron (related app), Node.js (related app), JSDOM (related app)
Status Lightling: Published (latest design: 2020/10) | Goldenwere: Published (latest design: 2020/10) | LightVerse: Torn Down (latest design: 2020/06)
Time Period 2015 - 2020

About

The LightSuite refers to my websites: Lightling, Goldenwere, and the LightVerse. These websites have changed a lot over the years, originally starting off with visually basic and static sites reminiscent of the HTML4 era created using OpenElement, to the responsive, modern designs in use today. Each iteration typically came after a period of learning significant things about web design and development. All of these sites in their current iterations have been built from scratch from the ground up without any templates or website creators. The Lightling and Goldenwere sites are actively maintained from a content perspective, while the LightVerse site has been torn down.

My Work

Overall

  • Responsive layouts that perform well on both desktop and mobile screens
  • Use of modern techniques such as Flexbox and Grid for aid in responsive design
  • Reflect branding in site layout, color, etc.
  • Semantic, valid markup, either generated (in the case of LightVerse) or manually edited (Lightling and Goldenwere)
  • (With LightVerse as exception) Create CLI batch scripts to minify, build, and push sites to surge.sh

Lightling

  • Professional, modern design with fitting color scheme based off of logo
  • Appropriate levels of animation to give site a more dynamic feeling, noted by front-page wave animation, links, and header overlay
  • Semantic, valid markup and optimized code/graphics
  • Use of progressive enhancement to ensure site works even at a basic level. Optional JavaScript features include:
    • Code snippet dropdowns with syntax highlighting using Prettify
    • Filtering system using Vue.js for projects page
    • Experimental "Experience Tables" page using Tabulator loading in JSON files
    • Source code viewer, e.g. 🅱RPG loading in .html files with source code (can still view said source code by opening .html)
    • Image popout, displaying sample images in a large popup container on the page; has an added Tilt effect when hovering over images
  • Ensure site validates with accessibility testing
    • All pages have been tested for contrast and semantic input (roles, ARIA labels, and keyboard accessible)
    • Elements which can be disabled/enabled as desired (such as the filtering container on the portfolio page) are removed/added to tab focusing

Goldenwere

  • Bright, fun design reflecting the nature of Goldenwere and its branding
  • Simplified, consistent navigation across all pages
  • Limited use of JavaScript for extra features only, such as adding tooltips using Tippy.js to give extra information

LightVerse

  • Dark and clean design oriented around the site's purpose of a space-y, wiki-like informational website
  • Navigation setup in a familiar format of a wiki-based website
  • Content written in separate JSON files, pages created using a singular HTML template and stylesheet
  • Webpage building app – using Electron (UI), Node.js (file IO), and JSDOM (headless DOM manipulation (i.e. the HTML template)) – which combines the JSON files and the template

Samples

These are some samples from the project.

Videos

Screenshots

To avoid long push times to surge, images are heavily compressed with small dimensions, so these screenshots aren't very detailed. To get a better look, see Places.

Code

Places

Lightling Home Page
Goldenwere Home Page
LV-Site-Builder GitHub Repo