Aspenline Company Website

A live version of the website was copied with permission from the CEO of Lasergifts/Aspenline. That authorization can be found here

View the live copy of the site.

Overview

This website was the first website I ever built. It was made completely from scratch in HTML+CSS with no CSS frameworks or HTML layouts to start on as a base. All layout was created based on feedback from working closely with the customer's graphics design and Sales/Marketing teams. That is to say, they drew out what they wanted it to look like and I made it happen in code.

Work began on the site in late 2017, and it was put into production early 2018. Because I didn't ask to archive the site when completed, exact dates have since been lost.

This was built for a souvenir company to replace an older website that was...

  1. Not responsive to different screen sizes (Semi-usable on desktops, horrible on phones)
  2. Unable to have more than one product image per product (different product images were considered separate products)
  3. Hard to read (used an old table based layout that did not scale)
  4. Generally difficult to use (hard to find navigation, small font, etc)

Because the company wanted to keep the site itself as secure as possible, I lowered the risk of hacks happening by not providing locations for user created content, used very minimal JavaScript (almost all site functionality works without it), and was very creative with the CSS to create some semi-dynamic content.

This site is a purely static site, meaning it has no database backend. While this makes is super easy to serve, updating the site was a bit of a pain at first. To alleviate that pain, I wrote a python script that would auto-generate the HTML based on an input JSON file. This means the company's data is now in a portable format, easily accessible, and easy to update.

Good things about this site

  1. Needs very little CSS to work on all screen sizes
  2. Very little JavaScript. Near full site functionality is possible without it
  3. Product page usage is all controlled through CSS. This includes dynamically changing image sizes.
  4. A code generating script to generate the HTML easily.
  5. Very small code size. Any slowdowns would be related to the amount of images in use.
  6. Static site, very easy to serve (clone git repo, point Apache/Nginx at it)

Issues/Things I would improve or fix

As to be expected with any site that was written early on in someone's programming career, this site is very simple and has a few rough points.

  1. I would drastically cut down on the amount of CSS files in use.
  2. The mobile navigation bar needs a bit of work. Creating a collapsible navbar would be easy now, but I did not know how to do so at the time.
  3. Improve the mobile navbar to have a fixed position for ease of mobile access.
  4. Move from static HTML to a Flask, Django, or Ruby on Rails framework.
  5. Adding in a database to store product information would allow even easier updating and rendering of the site.
  6. Adding in a "product categories" feature would be nice.

Resolved issues

  1. (2020-07-27) The amount CSS files have been reduced. I had to do some updates on the site for the company. While doing so, I dropped the total amount of CSS files from about 30 CSS files to 9. This removed hundreds of lines of duplicated code, greatly simplified my ability to resolve the issues on the site, and made future maintenance of the site far easier.
  2. (2020-07-27) A basic mobile navmenu button has been added. While doing other updates requested by the company, I mentioned that the navbar could be improved. Given that they agreed and I had limited time, I used some CSS tricks to make the navbar hide itself by default on mobile screens. While this could still be improved, at least the navbar doesn't take up most of the viewport immediately on mobile screens anymore.