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

Web Portfolio

Back To Top

Iching Search Portal built with React 19

An on going project I've been working on since 2018. Online version of the I-ching built with React 19 hosted on Netlify server. I'm using React MUI to build out the UI as well as several custom components. Works responsively and plan on creating a React Native version. Recently just refactored from legacy React 16 to React 19. Next phase is to port the application into the Next.js framework or something similar. The app displays text and info about each of the 64 hexagrams, from which I extract specific keywords and phrases, and then run queries on them using popular API's (Reddit,Giphy, Spotify and Mastedon). Plan is to set up more data sources and add customized features to cross reference and filter the data as well as create customized mash ups using various sources of data. Plans to monetize project as well. I have a plan to spin this off using other divination systems.

Visit :

Technology & Techniques Used

  • reactjs React.js
  • Nodejs Node.js
  • es-6 Javascript ES6
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

Another project I worked on as a Developer at the Center for Sustainable Energy. As part of a partnership with National Automobile Dealers Association (NADA). I build the website in Drupal and developed part of the the dealer map in 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

Login & Pass:demo2016

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

iOS Development: The best way to learn a new programming language is to dive head first into the code, which is exactly what I did. For the previous year I had been doing tutorials in IOS and X-code so I had a basic understanding of the platform. I allocated a month to do nothing but learn and code in X-Code and Objective C. Using the Big Nerd Ranch guide to iOS programming I set fourth to learn iOS and objective C. In addition to the Big Nerd Ranch guide I used the hands on tutorials http://www.raywenderlich.com and the ITunes U podcast featuring the Stanford iOS5 course by Paul Hegarty. By the end of 1 month I was able to put together 1 iphone application for submission called Guerrilla Radio, an internet radio station streaming via Shoutcast. I submitted it to the app store but unfortunately it was not accepted by Apple. Currently in the process of revising the app. You can download the current build of this app from my Git Hub account here to look at the code. In addition to that, I am current working on an app that tracks flu's and colds. This project is challenging in the fact that it requires me to access web services via JSON and RESTful api as well as employ customize map kit functions. Learning 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

Visit: Guerrilla Radio

Technology & Techniques Used

  • ExpressionEngine X-Code
  • jQuery Sencha Touch

Skill Set

Back To Top

Design

I am what is called a hybrid in the world of web design/dev, meaning I can both design and develop. As a designer, I look at a site in the terms of aesthetics and usability. Not only must a site be pleasing to the eye but it should also engage the user with simplified access. Over complex sites scare off users. Responsive Web Design By the end of 2013, it is predicted more people will be browsing the web on mobile devices than on desktop computers, websites should not be confined to single devices anymore and need to focus on a multiple devices and screen sizes.

Devices

 

Development

I am primarily a Front End Developer and focus on: HTML, CSS and JavaScript. I focus on creating clean, W3 basced standard markup code that focuses on being responsive to all screen sizes and devices.

In addition, I have experience in back end development, primarily in PHP/MySQL. I also have extensive hands on experience working with Content Management Systems such as Wordpress and Drupal.

About me

Back To Top

Welcome to my portfolio site. What started out as a business venture for me 10 years ago has become a full time profession. I started out in web development and design in 2002 with foray into Flash animation and from there it has blossomed into a full knowledge of HTML/CSS, Photoshop, PHP/MySQL, Javascript/JQuery as well as into various CMS's, primarily Drupal and Wordpress.

I would consider myself foremost a Front End Developer but the journey to that role has given me hands on experience creating and modifying MySQL databases, command line functions, server admin functions as well as writing API's and web services calls. So in a nutshell, I am a hybrid developer who employs both design and Front End development skills as well as knowledge of back end development programming primarily in PHP/MySQL.

I enjoy working on unique challenging projects and pride myself in the diversity of my skill sets and ability to adapt to the every changing world of web and mobile development. You can view some of my code samples on Git Hub here

In addition to learning mobile development, I have also focused on other skills that will enable me to build robust and responsive web sites. First and foremost would be Twitter Bootstrap, a front end developers dream and the perfect way to get hands on with HTML5 and CSS3. I have also worked with SASS and compiled CSS.

Other areas I have begun to focus on are Javascript frameworks such as Node and Backbone. In addition, I participated in Ruby Weekend in May 2012 which I found very beneficial though my understanding of RoR at this point is very basic.

In another life I worked in various industries. I owned a limousine company, drove a cab, worked in restaurants, was a purchaser for gracery distributorship and managed a warehouse operation with over 20 employees. Working with code however, has been the most rewarding for me because I love the challenges of problem solving and the fast past with which this field moves at.

I've have always been a creative type as well as analytical and working in web design and development gives me the opportunity to have the best of both worlds. The things I love the most about this industry is that to be on the top of you game you have to embrace a sense of never ending learning. If you're a developer who is content where you are today you will be obsolete tommorrow. View my CodeAcademy profile here. View my resume here. Contact me at 843 813 3792.