$mash@bradmash.com: Technology Enthusiast & Full Stack Web Developer

Examples of Work

Ohio University (https://ohio.edu/)

Drupal 8 Master Theme

I developed the Ohio University Drupal 8 master theme using the latest Drupal 8 techniques for theme development. Many of my implementations are still being used.

For example, on the homepage, the main “mega menu” is still in use and remains an example of the WCAG AA 2.0 criteria I implemented. This menu implements an “aria-activedescendant” style mega menu. Below is a short gif showing how the menu can be traversed fully using a keyboard.

Ohio University Mega Menu developed by Brad Mash

Specialty Equipment Market Association (https://sema.org/)

Everything from the Drupal 8 theme, UI components, SSO login, and member portal are examples of my work from this site.

Member Portal

The above image is from my local development box hence the https warning. However, this integration fully accesses a user’s session via the Drupal federated login with Netforum. Once logged in, everything a user needs is available including views for past and upcoming events, their memberships, and links to their other account management pages. This is integration is used in-full on their production website (https://www.sema.org/user/signin). The federated login is also an integration I developed.

Reusable Component Library

I took great care to ensure the components for the site were all highly developed for WCAG accessibility criteria. See the components below.

Testimonial

The testimonial paragraph component gives the ability to spotlight and quote a person as seen below.

Card Row

The card row paragraph component allows for up to four side by side styled content boxes with optional icons and links associated with each content box. The element itself has a header and link as well.

Styled Columns

The styled columns paragraph component has three options for side by side components, of which only two can be chosen for a 50/50 column layout. The choices are:

  • Contact Info Column
  • Image Callout Column
  • Linked List Column

Topic Rows

The topic rows paragraph component allows for alternating rows of text beside an image or video in a 50/50 layout. The next row is the same but flip flops the positions of the image/video and text. This continues until rows are not added.

Accordion

The accordion paragraph component is a simple expand/collapse hide/show element. The heading for each item expands and collpases a given accordion item.

Call to Action Set

The call to action set paragraph component creates styled links based on your configuration. At the end of the day each call to action is just a link. However, you can optionally add an icon for your link. If an icon is configured for the link the icon will show to the left of the link’s title, and the button link’s background will be black and the button text will be white. If no icon is chosen the button background will be red and the button text will be black.

Stats and Facts Row

The stats and facts row paragraph component allows for four side by side “facts” to be defined. A stat/fact is some kind of main figure with an explanation. For example, the main bold stat could be “42%” and its description could be “The meaning of life.”

Black version:

Red version:

Content Tabs

The content tabs paragraph component implements a tab-like structure to hide/show content when a tab is clicked on the left side of the element.

Sponsor Row

The sponsor row paragraph component gives the ability to add “sponsors” as an image and title with a link to the sponsor. This element was developed with sponsors in mind, but could be used for other types of content as well. The limit caps at 5 sponsors, and when on smaller screens the sponsors rotate in a gallery-like fashion upon clicking the element’s associated UI.

Gallery

The gallery paragraph component provides the ability to add images with descriptions to a gallery carousal type of element. More than one image must be supplied for the gallery to properly work, as a gallery element by nature expects more than one image to rotate through. The element does not auto-rotate, but provides a UI for traversing the gallery.