Website Build Projects
Read about some of the website build and feature add projects I've completed, using custom Javascript, Drupal site building, and custom WordPress Development.
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
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
Branded Site Build
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)