Contact Mgr. Expense Tracker

Website Overview


  • Hidden elements appear once interacted with, such as dropdown menus and contact details in the footer.
  • On certain pages, tables center the text vertically alongside the images. A flexbox is used for the footer's contact icons. Floats and images with absolute, fixed, and static positioning are also utilized.
  • I used lots of adjacent sibling selectors, pseudo elements, pseudo selectors, and direct child selectors.


  • I wanted to find a way to share content between pages, like I do in the apps with Embedded Ruby. But as this site is static, and not an app, ERB wasn't an option. Server Side Includes wouldn't work either. I spent a lot of time adjusting the navigation bars on twenty or so seperate pages. Finally, I discovered Jekyll.
  • I tried to balance fun and professionality. Finding good fonts and transparent clipart that match the site's design was much tougher than I anticipated. In the end, I manually edited each clipart image. Along with logo design, these were the most time consuming parts of the site.
  • After losing plenty of Devtools work to habitual page refreshes, I learned about persistent authoring. It was smooth sailing from there on out as I no longer had to switch between VIM and chrome endlessly.
  • I haven't yet figured out how to make the blue "shadow" surround the main and the footer without appearing in front of those elements. I tried using z-index. For now, I've nested those elements in a div, and applied the shadow to it instead.

Source Code: GitHub

Contact Mgr. Expense Tracker