Rich Costello
Full Stack Developer
Front End Developer
Javascript/React.js
Drupal
HTML5/CSS3

Web Portfolio

Back To Top

Ichingportal.com: a keyword search platform built with React 19 and Next.js

An ongoing project I’ve been working for a few years. This is an online version of the I Ching built with React 19 and hosted on Netlify. I recently refactored the site into the Next.js framework and built out the UI using shadcn and Tailwind CSS. I created multiple reusable custom components to enhance front-end features and UI/UX. The platform is designed for both desktop and mobile, with plans to develop a React Native version in the near future.

Originally built in React 16, I refactored all components to React 19 before migrating to Next.js over the past few months. The app displays text and information for each of the 64 hexagrams, from which I extract specific keywords and phrases to run queries using popular APIs (Reddit, Giphy, Spotify, Polymarket, and Mastodon).

My plan is to integrate more data sources and add features to cross-reference and filter data, as well as create customized mashups using third-party APIs and data scraping. I also have plans to monetize the project and eventually spin it off using other divination systems like Runes and Tarot. This has been a challenging and rewarding personal project, and I have learned a great deal throughout the process. I am happy to walk you through the codebase upon request.

Visit :

Technology & Techniques Used

  • reactjs React.js
  • es-6 Next.js
  • Nodejs Node.js
wordpress

Calevip.org

An on going project I worked on as a web developer for Center for Sustainable Energy. Calevip.org handles rebates for contractors who install EV charging stations around the state of California and is a division of the California Energy Commission. Working with a designer and marketing team I was tasked with implementing a redesign and upgrade to this site in 2022. The previous design had become stale and needed a redesign and new updated features. Working in Drupal with an extensive Figma layout, I set about rebuilding the site with new branding custom page layouts making the site fully responsive for all screen sizes and ada compliant.

Custom features I developed

Custom landing pages for upcoming launches on new programs. These pages provided info for specific projects and a link through to a Salesforce app to apply for the project. Page includes a custom funding visualization chart built in D3.js with data coming from Saleforce database,

Document Library page which categorized pdf's from multiple programs into an organized structure. Built with Drupal views and javascript

Custom Webform for vendors to list their products and services

A vendor catalog for finding contractors by county.

Visit: Calevip.org

Technology & Techniques Used

  • Drupal Drupal
  • es6 Javascript ES6
  • Bootstrap Bootstrap
  • Salesforce Salesforce
  • Salesforce D3.js

Dealer Map built in React

A project I worked on as a Developer at the Center for Sustainable Energy as part of a partnership with National Automobile Dealers Association (NADA). The website is built in Drupal and the the dealer map is built with React js. The map itself is a react application connected to a Saleforce API with all dealer information and integrated into the the react-google-maps application. The front end uses the React Material UI framework and I added custom css to match the style guide and expected behaviors of the site. Use zip 92025 to see map populate.

Visit :

Technology & Techniques Used

  • Nodejs React.js
  • Nodejs Node.js
  • Nodejs Bootstrap
  • Nodejs Javascript ES6

Custom Salesforce Applications

Another facet of my role at the Center for Sustainable Energy was doing front end development work on custom salesforce applications built with lightning web components. We had two custom app platforms from which we ran client applications. I was part of an agile development team that built out these applications for state government agencies and public utilities promoting rebates for electric vehicles and ev charging infrastructure. My role in these sprints was custom styling of both visual force pages and lighting web components to scale and render on both desktop and mobile devices as well as ADA compliant. Using both custom css and javascript as well as the Salesforce Lightning Design System library, I styled form based applications from start to finish based on design specs and ux layouts. In addition I built landing pages using Experience Builder on the Salesforce backend. Other features include building a progress stepper and styling the layout of survey pages tied the JSON files on the client admin on the Force.com platform.

Public Utility Example

Adaptive Web App Example (reduce the screen size and refresh to view)

Technology & Techniques Used

  • es-6 Javascript ES6
  • sf-dev SLDS
org

Driveclean California

This is a site I built as a web developer at Center for Sustainable Energy. The site falls under the umbrella of the California Air Resources Board (CARB). The scope of the project was to take a legacy site build in jsp pages and move it into a Drupal site and tie it in with the Fueleconomy.gov website to create a platform where the consumer could get information on clean vehicles in conjunction with rebates and incentives that were offered in California. Originally build in Drupal 9 with the bootstrap framework I worked with a marketing team and UX development to build the site out to the clients specifications. The site has two main objectives, to highlight clean vehicles (ev, hybrid and hydrogen) and showcase the incentives and rebates available when one is purchased.

Custom features I developed

Vehicle Search is a feature built using a custom module to sort both vehicle data and incentive data by zip code. Part of the data is sourced from fuel economy.gov api while the rest is uploaded via csv via feeds and compiled using advanced queue. A custom view handles the filtering of the data and I created several custom twigs to handle the complex layout.

Incentive Search is a feature built with a custom Drupal module and views that sort vehicle incentives by zip code and provide a potential Incentive amount based on that zip code. Using the feeds module, updated data can be uploaded via csv file and compiled with the advanced queue module. A custom view is used handle the filtering via the select lists. Created a custom twig file to handle the layout with bootstrap.

Visit

Technology & Techniques Used

  • Drupal Drupal
  • es6 Javascript ES6
  • jQuery PHP
  • jQuery HTML5
Create DM

Drupal Web Development

During my tenure at Center for Sustainable Energy I built and maintained 15 Drupal web sites. These sites consisted of a corporate site and various websites for state run programs and public utilities. Working with Figma comps from a graphic design team as well as build requirements from product managers and marketing department, I built out, redesigned and added custom features to multiple Drupal websites. This includes building out custom themes and layouts using custom twig filters and integrating custom applications into sites. Other requirements included making these site fully responsive for any screen size from smallest iPhone to large screen TV’s and making sure each site was fully ADA compliant. Implementing translation for multiple languages. Other duties included maintaining each site with current security updates and updating modules using Lando locally and pushing to Pantheon enviroments. A few of our sites had custom modules and applications of which I would be required to add enhancements in both functionality and design. Implemented an Okta 2 factor authentication login across all sites for security enhancements working with IT team.

Technology & Techniques Used

  • jQuery Drupal
  • jQuery PHP
Create DM

Sitelab International

Migrated Wolfgangpuck.com, a large scale very content heavy website, from a custom PHP site built in 2006 using Zend Framework into a Drupal 7 website. Process included taking all the existing front-end code and importing it into a custom Drupal theme based off of the Zen theme. Process included mapping out all the behaviors and functionalities of the old Zend framework site and reformatting them into Drupal using both existing and custom modules. Site contained 15 indvidual content types and layouts using custom php.tpl files to achieve various functionalities.
Company also had ongoing contract with large produce manufacturing companies. I performed custom theming for landing pages, module updates and site maintenance for Hass Avocado Board and Soyconnection.com, both Drupal 7 sites. In addition, I assisted in the front end developement of Quidel.com using the Drupal Omega theme.

Visit

Technology & Techniques Used

  • jQuery Drupal
  • jQuery jQuery
  • jQuery PHP
  • jQuery HTML5
Create DM

Station Casinos

I started work here as a developer in early 2010. The position encompassed all elements of the corporate web presence. My range of duties required a knowledge of both front and back end development. I managed 35 sites hosted on multiple servers and multiple platforms ranging from PHP, Drupal, Wordpress, .Net to customized web applications. Working in conjunction with both our advertising department and external agencies we would re-purpose print, video and audio collateral onto our various web properties. Additional duties included developing and maintaining the RESNET booking engine, the portal in which online guests book hotel rooms. In the spring of 2012 was involed in the redesign and implementation of the new corporate web sites.

Visit

Technology & Techniques Used

  • jQuery Responsive
    Design
  • Wordpress Wordpress
  • jQuery PHP
  • jQuery HTML5

Dynamic Landing Pages

The fast paced world of web development in a corporate casino marketing department required me to wear many hats. Landing pages were an essential part of the conversion chain with online advertising buys requiring customized landing pages using re-purposed print assets corresponding to a particular property/brand and the type of promotion being offered. The objective for our pages varied. Some promotions required highlighting multiple properties, which I employed the use of a jQury carousel and lots of visual imagery to promote the brand. Other promotions were target specific (i.e Groupon). Pages such as these often employed various functionalities such as dynamic calendars to highlight black out dates and web service calls to highlight casinos jackpot totals.

Visit

Technology & Techniques Used

  • jQuery Responsive
    Design
  • jQuery jQuery
  • jQuery PHP
Headscape

iOS and Mobile Dev

earning IOS development has very much invigorated the way I look at programming as a whole and I am happy I have chosen this path.

Sencha Touch and HTML5 Mobile Development:During the winter of 2012, I attended a meet-up and saw a demonstration of Sencha Touch, a javascript based HTML5 mobile web frame work. Upon downloading the package I realized the potential this platform had in creating mobile apps with ease. When I completed work on my native IOS app for Guerrilla Radio, I embarked on making a similar version in Sencha that could be accessed via a url. The result can be seen via the link below. The thing I like about Sencha is that it allows you to create app across multiple platforms (Android, Blackberry, etc) without having to develop on their individual platforms.

The audio portion of this app will only work if accessed via Safari or on any iOS device

Technology & Techniques Used

  • ExpressionEngine X-Code
  • jQuery Sencha Touch