Website Build Projects

Read about some of the website build and feature add projects I've completed, using custom Javascript; Drupal, Shopify & WordPress Development.

Drupal Consulting Firm

Custom Carousels, Mega Menu, Accordion, Alert Banner

  • Coded in four custom, unique carousels for use throughout the website
  • Implemented a full width, full height mega menu, with three layout configurations (simple list; three column with a description in the first column and simple link lists in the last two; two column with a description in the first column and links with descriptions in the second)
  • The mobile menu complements the mega menu, with drawers allowing you to drill into each sublevel, with all of the same information seen on desktop
  • Implemented a simple accordion section with vanilla Javascript toggle functionality
  • Coded a dismissible alert banner using cookies to control the visibility (js-cookie API)(it also starts to show again if somebody updates the alert banner content in the admin).

Drupal Conglomerate

Responsive Tables, Charts, Alert Banner, Parallaxing

  • Dynamic, responsive tables - client can enter the data using individual fields in the backend; and the table scrolls appropriately on smaller width devices
  • Data visualized using charts - client can enter the data using individual fields in the backend; and the data is displayed on the front end using chart.js
  • Coded a dismissible alert banner using cookies to control the visibility (js-cookie API)(it also starts to show again if somebody updates the alert banner content in the admin). It was styled to appear at the bottom of the hero until you scrolled past it, then it stuck to the bottom of the page
  • Created a custom background in various sections with subtly parallaxing SVG graphics, activated using Intersection Observer

WordPress Nonprofit

Security Upgrades, Elementor Customizations

Maintained an existing, older WordPress website built with an Astra theme, Elementor, and Gravity Forms.

  • Performed needed security updates as they came up, doing an audit of the website first to predict any potential impacts. There was an added challenge of Astra, Elementor, and Gravity Forms being Pro versions (needed to coordinate with the client and sometimes the developer of the theme/plugin for questions)
  • Made requested customizations within the theme in a way that the client could use Elementor's functionality to add the sections themselves with the design/functionality changes in place, so they have full autonomy/empowerment

Shopify Outdoor Furniture

Mechanic Tasks Using GraphQL

  • Wrote custom Mechanic tasks using GraphQL for shipping rules in the store, extending the functionality of the checkout

Shopify Mattress Store

Deferred Media, Autoplay Video Modals

  • Developed deferred media sections which open a modal onClick & autoplay the video using the postMessage() method in Javascript

Drupal Outdoor Gear

Performance Enhancements

  • Full performance audit using Lighthouse and similar tools
  • Performed several updates to the website to improve on the performance: cleaned out unused css; optimized images; ensured proper deferring of resources, images have dimensions, preloading of fonts, and minification of scripts/styles where possible

Shopify POS Franchise

Ambitious Design Elements, Mega Menu

  • This website design was very ambitious, which was a fun challenge when it came to theming: patterns, layering, and several colors used
  • Because there were so many colors needed, I ended up extending the color schemes in the theme to allow for selection of the colors to be dynamic/through the customizer (this was before Dawn theme's color schemes update)
  • Custom mega menu active on one dropdown (that you specify) which displayed a specific collection of their product categories, along with a few c2as

Shopify Restaurant

Custom Theming Within 1.0 Theme, Shogun Page Building

  • Custom sections/theming within the existing 1.0 Shopify theme
  • Custom page building using the Shogun app - created and themed saved elements for the client so that they can add custom themed sections autonomously

WordPress Multisite Overhaul

Security Upgrades, Audits

  • Performed a thorough investigation and audit of the website to see what needs to be done to bring it up to modern WordPress standards
  • Carefully carried out the updates incrementally, checking as I went to ensure nothing breaks
  • Straddled the changes strategically, as the multisite setup complicated the upgrades (needed to do the changes in a specific way so that things wouldn't break downstream)
  • Took notes/created documentation after carrying out these upgrades so that future developers would have a simpler time navigating this multisite's setup

Drupal 9 Author

Accessible HTML Select Form, Initial Drupal 9 Entry

This website was the first Drupal 9 upgrade that the company I was working for was tackling.

  • Audit of the base themes' modules at that time to evaluate readiness for Drupal 9 and incorporated/patched them or offered alternatives
  • Developed a fully accessible HTML Select Form for the exposed forms on the views pages throughout the website for a unique appearance

Node Sass

NPM Package Configuration

Incorporated two npm packages (node-sass & clean-css-cli) for compiling the SASS. Creates a style.css & style.min.css file, properly formatted and saved in a dist directory

See the source code on my GitHub >

Drupal 7 LMS

Custom Views Configuration, jQuery Progress Bar

Envisioned, built and styled in Drupal 7, this website served as an internal website meant for onboarding and training new and existing employees.

  • Content type for courses with a controlled flow: the user needed to watch a video and fill out an assessment with a passing score in order to proceed to the next step of the course
  • jQuery progress bar
  • A supervisor could log in and ‘masquerade’ as another user to view their dashboard and see their progress and assessment scores

Drupal 7 Store Locator

Dynamic Page Layout With Paragraphs, Store Locator

  • Custom page layout created using Paragraphs. Each section was able to have its own branded color scheme, controlled through the edit page, and sections could be added or removed as needed
  • Masonry styling on the blog page
  • Custom-built store locator using some mapping features in Drupal: Zip code search form at the top, stores listed on the left, a map with numbered markers representing the stores on the right, automatically detected your address using geolocation and gave you the closest store locations on the map, ordered by distance

Drupal 7 Inventor

Parallax, Branding Guidelines, Search API

  • The theming and elements used in the website adhered to their Branding Guidelines document
  • Parallax banners with content overlays that faded away as you scrolled down
  • Translucent content overlays on top of circular images which scaled down with the image
  • Full-height, colored sidebar with a block that was always fixed to the bottom
  • Site search function

Drupal 7 Venue

Fixed Header, Custom Views Configuration, Events Calendar

  • A main navigation that accommodated for the logo being in the center of it
  • A header which made a smooth transition into a fixed header with a simplified logo
  • A CSS double border overlaying the images
  • Buttons with background image textures which could scale with the button
  • Titles which centered well with the pseudo class images applied to them
  • An image gallery which showed 8 images, a call to action, 8 more images, then a load more pagination for the rest (feed of gallery content with call to action blocks breaking up the layout)
  • Events content displayed in a custom monthly calendar you could click through

Drupal 7 Charity Feature

Custom Leaflet Map, Custom Views Configuration

This was a website created for an athletic charity event, which featured a custom map with markers along the map indicating various stops along the route with an associated blog post for each marker. The purpose was to allow people to see real-time updates during the progress of the event.

  • Used the geocoded location from a blog post to add a custom icon as a marker to the exact point on the US Map along the route
  • Custom skin for the map showing the route along the US highlighted
  • Clicking on a marker opened up the associated blog post with an optional photo gallery slider

WordPress Realtor Listings

Custom PHP, dsIDXpress Plugin

Takeover of an existing WordPress website which had broken functionality throughout it, left from the previous developer. I ended up recoding many key elements to work properly.

  • Custom PHP for creating a generated list in the sidebar indicating what neighborhoods the property you are currently viewing belongs in, with custom links on each list item linking to the relevant neighborhood pages (instead of archive pages)
  • Custom PHP to pull properties from a certain neighborhood category and spit them out on each neighborhood page, with the results limited to 4
  • Made many customizations to the theme and the dsIDXpress plugin to make them work the way the client wanted them to

WordPress Store

WooCommerce Customizations, GIF Creation

Takeover of an existing WordPress website which involved PHP/theme editing along with an understanding of how to modify elements in a WooCommerce application.

  • Customized the display of the prices on the products displayed in the feeds (added "/gross" to products only in specific categories)
  • A custom title on the featured products banner
  • Coded in widgetized areas for upcoming events and a special notice banner
  • Created an animated GIF slideshow for the sidebar

WordPress Business Directory

Parallax Styling, Animation, Custom Post Type, Taxonomy Filter

WordPress website for a business directory for an inner city district. It was a recreation of their current website within a custom WordPress theme I created.

  • Parallax styling
  • Animated headers that slid in on page load
  • Business Listings Directory built using a custom post type with custom fields
  • Custom taxonomy filter on the Directory archive page

WordPress Manufacturer

Multisite Migration, Masonry Layout, Post Formats, Site Audit

Redesign for a manufacturer within a multisite setup.

  • Splash page with background images spanning the full height of the browser
  • Masonry layout for the resources page built using vanilla JavaScript and CSS Grid
  • Like buttons for posts
  • Utilization of different post formats in WordPress to create a custom resources archive page (standard and video) and custom testimonial blocks (quote)
  • Migrated the multisite setup from their hosting to ours
  • Composed and carried out a thorough site audit before taking over the website's hosting (and applied security rules to the website to harden the setup)