Projects
Writing
Notes

ADRW Jekyll Theme

Personal portfolio and blog website, Jekyll on GitHub Pages

Since 2009, I have built websites with Windows Live Sites, static HTML, and Wordpress. Then I discovered Jekyll on GitHub Pages.

In 2015, I was excited to keep building my developer skills and loved the opportunity that Jekyll provided to build my own site.

Using other themes as inspiration, I've built many new features as outlined below to help make the site easier to navigate and more effective at displaying content.

If you find any bugs or have any questions, please email me!

Mobile Friendly Menu

Menu that dynamically scales to all screen sizes and auto-hides on mobile.

Desktop Menu Closed Desktop Menu Mobile Menu

Cards

Built image grid to feature images from posts and projects for use on homepage, project, and blog pages. Displays all posts in a given category.

Cards

Card Sections

Extension of cards to allow for sections of posts by category with buttons to more related posts. See on /index, /projects, and /blog pages.

Card Sections

Resume Layout

Resume layout that pulls from work, hackathon, project, freelance, and volunteer categories and formats following meta data into well formated resume. Seen on /experience page.

  • date : end date of position
  • startdate : start date of position
  • position : job title/role , team
  • company : firm or organization
  • summary : markdown description of experience

Resume Layout

Tag and Category Clouds

Tags on category, page, project, & post layouts. Used { % for % } loops and conditional { % if % } statements in liquid markup to only show tags on categories when enabled in _config.yml.

Archive layout that pulls from categories and tags to create easy navigation of all categories and tags with their respective totals of posts. See on /c and /t pages.

Category Cloud

Modularized Footer and Social Bar

Footer was by default hard coded into page layouts. Now both footer and social bar is modularized with respective CSS so that both can easily be added to any page or section.

Better Schema SEO in Layouts

In page, post, and project layouts, I've added meta description HTML tags and Schema syntax with liquid markup. This will improve search engine crawl success and better populate sharing descriptions on Facebook and Twitter.

Improved Readability

Extra wide columns of text are difficult to read! Text columns are sized to make reading as easy as reading a book or newspaper.

Annotations for Embedded Media

By default, including alt text to your Markdown image tag [alt text](/path/to/image.jpg) shows a caption below the image. Now this functionality is extended using <figcaption>this is my caption</figcaption> tags so captions can be added to embedded media and HTML5 videos.

Super Fast, Mobile Optimized, Async CSS, & Font Loading

Transitioning from Wordpress was a huge undertaking but well worth it. According to Google Developer PageSpeed Insights, website performance has increased by more than 2.3x thanks to optimized images and asynchronous static loading of CSS and fonts.

  • 92/100 on mobile, previously 34/100
  • 78/100 on desktop, previously 39/100

Combined with a lightning fast Github Pages CDN, images are heavily optimized and resized for delivery. I've cut site size by over 80% using JPEGmini, ImageAlpha for pngs, Pixelmator, & Affinity Photo.

Resources