PROJECTS

Stuff I've Built

My Vacation Map

  • react

  • javascript

  • drupal8

  • redux

  • leaflet

  • pantheon

  • netlify


Have you ever been preparing for a trip and found a bunch of cool places to visit, only to not know where to keep that information so that it's easily accessable when you're out and about? My Vacation Map is a custom mapping app that is built on React and using the Leaflet mapping library to solve this problem.

The app allows the user to add points onto the map with various information that the user would like to keep about that location. These can be personal notes, information from guidebooks, links to a website about that location, or many other possibilities. The user is able to add a category that will determine the icon and color of the map point for easier identification while reviewing their points. The app also is able to use geolocation to find the user's current location and even follow them as they move.

My Vacation Map is built on Create-React-App with Redux for state management, the React-Leaflet component library for managing the Leaflet mapping, and the React-Geolocated component for geolocation. For data managemnet, there is a Drupal 8 back-end connected via REST and JSON Api end points as well as the Simple Oauth module for Oauth2 authentication management.

myvacationmap.com

Email me for access to this private repo! rob@roblahoda.com

Rock, Paper, Scissors Game

  • javascript

  • greensock

  • codepen


This is a Javascript Rock-Paper-Scissors game! It started off as a simple command-line challenge that I decided to translate into a full game with Greensock GSAP animation, SVG graphics for the hands, emojis, and a retro feel. It uses an ES6 Promise structure to get a random name for player 2 from a random name API.

Codepen Link

View Github Repo

Westerville Caring and Sharing

  • flexbox

  • twig


A local charity contacted me about helping them update their website in time for their 25th anniversary. They had a previously unfinished site that needed rebuilding so I put together a simple site using Twig templates and a simple, Flexbox-based layout. The site design and content needed to be simple so that a volunteer from the organization could take over the code and continue to update the site. We were able to put together a nice, clean design in just over a month to have it ready for their organization's 25th Anniversary celebration.

westervillecaringandsharing.org

View Github Repo

CSS Grid Periodic Table

  • javascript

  • greensock

  • cssgrid

  • codepen


My wife is a chemist and I used to work for a chemistry information company, so I felt inspired to use this as a basis for playing around with CSS Grid. So I built a representation of the Periodic Table of Elements laid out using CSS Grid. The table is generated through an AJAX call to a Github repo containing the raw information in JSON. Using Greensock Animations I set up a fade in upon loading of the table and also a fade and scaling effect on the elements.

Codepen Link

View Github Repo

React-based Multilingual Calendar/Clock

  • react

  • javascript


After building my multilingual clock and calendar in vanilla Javascript, I decided to rebuild it in React. The app is visually identical to the Codepen version except that this one is built in React. For more information see the description below for the original project.

reactcalendar.roblahoda.com/

View Github Repo

Rob Lahoda • Web Developer

  • javascript

  • greensock

  • cssgrid

  • netlify


This is my personal website. It's built using Twig templating combined with JSON data and Markdown files for blog content. The site is hosted on Netlify for continuious delivery from Github. The animation is done with Greensock Animation Platform (GSAP) and the layout is in CSS Grid with a Flexbox fallback. The icons are inline SVG inserted dynamically using Javascript.

roblahoda.com

View Github Repo

Heritage Insurance Advisors

  • drupal8

  • pantheon


A local business contacted me with the request to build a website for them that could grow significantly in the future. After some discussion with them, we decided that Drupal 8 would be an ideal platform based on their needs and future growth plans. Their desires were fairly open-ended so I built the theme with maximum flexibility in mind.

The theme is built with Paragraphs as the primary layout tool. The client wanted the site up quickly so I used the UIKit front-end framework as a starting point for the design. The site is fully responsive and contains a custom quote form based on the Webform module that uses a variety of logic to allow the user to request a quote for the various types of insurance that is offered by the company.

hia-oh.com

View Github Repo

Love God Love France

  • drupal8

  • flexbox

  • pantheon


Working on a personal project I built this site using Drupal 8. I wanted to have maximum editorial flexibility so I used Paragraphs for the primary layout basis. There are a number of different Paragraph types including one that generates an SVG pie chart based off the values supplied by the content item. The site also includes Mailchimp signup forms and a responsive design.

Please Note: This site describes my family's desire to move internationally. However, due to circumstances beyond our control, this is no longer our intent.

lovegodlovefrance.org

View Github Repo

Multilingual Calendar/Clock with CSS Grid and Flexbox Fallback

  • javascript

  • cssgrid

  • flexbox

  • codepen


When learning a new language one of the first things people learn are numbers and dates. As a way to help language students get used to reading numbers and dates in the language they want to learn, I created this multilingual clock and calendar. The app shows all the numbers both as numbers and written out. The user can see the current time and date as well as the next and previous days. There is a full calendar of the entire month with the days of the week and numbers for each of the days with different styles for the current day and weekends.

The app is built in Javascript with a CSS Grid layout and a Flexbox fallback. The user can change the order of dates in the date view from Month/Day/Year to Day/Month/Year and they are able to change the week start date from Sunday to Monday. There is an API call to Github to get a JSON file containing all of the different languages (currently English, French, Spanish, and German).

Codepen Link

View Github Repo

Flashcards

  • javascript

  • flexbox

  • codepen


I've always been fascinated by the prospect of learning another language. For a few years I have been slowly learning French and I wanted a way to make flashcards that I could use to help learn the vocabulary. Of course, I didn't want to deal with paper flashcards, I wanted something electronic. That led me to start this project.

The project is written in Javascript with a Flexbox layout and allows the user to enter in the 'front' and 'back' values for the cards they are creating, then hide what they entered and test themselves on the cards. Adding and removing the cards happens dynamically and the user can create as many cards as they want.

Codepen Link

Rob Lahoda Media

  • twig

  • gulp

  • sass


For over 15 years I have been a multimedia producer. I love visual storytelling and have used photography, video production, graphic design, and more to tell many stories through personal and client-based projects. My experience has run the gamut from sports to nature, architecture to astronomy, portraits to journalism.

As a way to showcase my work, I created this portfolio site using a custom Gulp workflow, SASS, Twig templating for automating much of the code, Flexbox layout, and a responsive design.

media.roblahoda.com

View Github Repo