Project Categories

Project Setting Personal
Team Size 1
Role(s) Developer / Designer
Languages HTML CSS JavaScript
Software/Tools Used Brackets / Atom (code), GIMP / Inkscape (graphical assets), jQuery (library), Smooth-Scroll (extension), Prettify (extension), Electron (related app), Node.js (related app), JSDOM (related app)
Status Lightling: Published | Goldenwere: Published | LightVerse: Published

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 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.

My Work

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
  • JavaScript to give certain specialized buttons effects, notably code snippet dropdowns, galleries, and the header overlay
  • Use of modern techniques such as Flexbox and Grid for aid in responsive design

Goldenwere

  • Dark, accentuated design befitting site's purpose and branding colors
  • Modular, flexible design to allow for additive content (such as news and projects)
  • Responsive layout to ensure site looks well on mobile screens
  • Simplified, consistent navigation across all pages

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
  • Responsive layout that performs well on both desktop and mobile screens
  • Content written in separate JSON files, pages written in a singular HTML template
  • Created 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
  • Generated HTML files have semantic, validated markup

Samples

These are some screenshots highlighting aspects of the websites, as well as a video demonstrating the site builder for the LightVerse

Screenshots

Videos

Places

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