Integrated Repo Gallery

GitHub REST API

Gallery screenshot showing a grid of project repositories

Fetching GitHub Projects Directly For My Website

This is Version 2.0 of my repo gallery project that uses the GitHub REST API to fetch my public repositories. Only this time, the gallery has been integrated directly into my website.

This revamped version fixes some cross-browser compatibility issues and simplifies the way that the page displays or hides information, drastically improving performance. But perhaps the most obvious change is how gallery 2.0 integrates seamlessly into my existing website. I rebuilt the entire project from the ground up so that it matches my current website's theme. The added bonus to this new approach is that if I modify the way my site looks or functions in the future, this new gallery will automatically follow suit.

By front-loading all the work to make this gallery a seamless integration into the core website's structure, I've given this project scalability and, hopefully, made it a bit more evergreen, too.

Oh, and dynamic searching functionality is still included!

This is a project gallery built with JavaScript that implements:

  • Async and callback functions.
  • Fetching data with a REST API.
  • Parsing data as JSON.
  • click event listeners with the matches method to target specific elements within a group.
  • Creating and appending HTML elements.
  • Adding and removing CSS classes.
  • for...of loops.
  • for...in loops.
  • Dynamic search using input event listeners.
  • Prevention of elements' default behaviors.
  • Class matching & HTML restructuring for theming

View Project/Site
return to portfolio