Greendale Trail Association

Original Github Link

Live Website

Purpose

By helping the Greendale Trail Organization improve pedestrian and bicycle infrastructure of the Greenbelt Trail System, I get the chance to help improve the quality of life for tens of thousands of people.

Personal Background

I am fortunate enough to have grown up in an area with safe and accessable biking/ running trails. This reduced one of the biggest challenges with long distance running - being and feeling safe. Being in this exercise friendly environment changed my life through making it easy for me to change my fitness habits for the better. Here's my best cross country race times throughout highschool.

Project Requirements

• Responsive Design
• Reasonable UI ( doesn't look worse than the typical website made with a website builder )
• Minimal Cost

Learned Web Dev Concepts

• CSS Animations ( Not Scroll Based )
• Responsive web design practices
• Web components ( utilized in original website but not the current website )
• Github version control

Tech Stack Evolution

• Front End - HTML, CSS 🏃🏾Nunjucks, SCSS, 11ty
• Hosting - GHPages 🏃🏾 Netlify

I wanted to start with the basics ( HTML, CSS ) until its limitations became apparent.

Once I wanted a faster way to write out HTML and a way to visually keep track of CSS rules, I switched to Nunjucks and SCSS. 11ty came in to glue together my templates.

Along with writing out my HTML faster, 11ty helps with SEO through things like serving the client all the static files they need in a way where search engines could “see” the content of the website. One temporary downside of adopting this technology is the learning curve of figuring out how to do some plain and simple HTML stuff in a somewhat different way. The main challenge of doing this was being provided videos && documentation that didn’t always make the most sense to me up front. Thankfully I’m in the age of LLM’s helping to “translate” documentation in a more carefully explained way.

As for switching hosting from Github Pages to Netlify

I’m implementing form processing in the near-ish future as of writing this. GHP doesn’t support server side code. This means I’d need to use a third party service ( such as Netlify Forms || build my own serverless function ) to handle form submissions. The real tipping point for me was the fact that Netlify have a repo size limit of 10GB compared to GHP’s 1GB - given both are still FREE.