PROJECTS
Stuff I've Built
Covid-19 Chart Site
-
javascript
-
html5
-
css3
-
sass
-
flexbox
-
netlify
With all the hype and confusion around the Covid-19 pandemic, I wanted to be able to see the data in a clear, helpful way that would help me understand what was going on better. I had heard that things were getting better at times, or worse, but it was hard to know what was going on.
This site uses data from the NY Times and the European Centre for Disease Prevention and Control to allow users to view data for various countries around the world or US states. The raw data came in the form of deaths and cases for each day in CSV format. So I wrote some Python code that would parse the CSV files into JSON, then take that JSON and write it into a Javascript file for display. During the processing, I added in additional data to further help with understanding and clarity.
In addition to the total numbers of cases and deaths that have accumulated each day, other metrics such as the number of new cases and deaths, the percent of the total population of that country or state that has the virus or has died, the date of the first death, and the date of the first case were calculated.
The site was built in vanilla Javascript using Chart.js for the charting and Python for data parsing and calculations. Additional features include using CSS Grid with a Flexbox fallback for the country/state card display grid, using HTML5 details/summary tags for collapsable data cards, using Javascript to automatically collapse the cards for easier scrolling on mobile view, a "scroll to top" button for easier scrolling on mobile and desktop, and the ability to add all countries/states or clear the chart as desired.
The site is hosted via Netlify for continuous deployment from Github.
covid-19-graph.netlify.com
View on Github
My Vacation Map
-
react
-
javascript
-
drupal8
-
redux
-
jest
-
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 React 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.
For API management, custom Redux middleware was written to allow simplified triggering of complex events through components. Unit tests are written in Jest with Enzyme.
myvacationmap.com
Email me for access to this private repo! rob@roblahoda.com
Hot Dog Demo Site
-
html5
-
css3
-
sass
-
flexbox
I recently did a little code challenge where I was given a photoshop mockup of a site and asked to build it out however I wanted to. So I built this demo site. It’s written in HTML using semantic markup and tagging. The styles were written in SCSS and there’s a small amount of Javascript.
All of the colors are in CSS variables, which allowed me to implement a “dark mode” setting by just adding a single CSS style to the body element. The layout is done in Flexbox and fully responsive with the order of the image/article sets changing on smaller viewport sizes to allow for the content to remain in a logical order on screen.
The main navigation menu collapses on mobile using just CSS styles. SCSS mixin was used to create responsive type to change sizes based on the viewport size. I added hover animations to the primary nav menu items. The icons are inline SVG images for fast loading.
Live Preview Site
View Github Repo
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.