R L

Portfolio

A large portion of the front-end projects showcased on this page came from my professional experiences at the University of Nebraska-Lincoln in-house agency. You will also see some work from my employment at 9thCO Digital agency. I also occasionally take on freelance projects and competitions to broaden my experiences. Regardless of who my clients are or the size of the project scope, each project offers me a unique set of challenges on how to create a web platform that is performant and user friendly using my expert knowledge in front-end web development and UX design.

I also intentionally incorporate experimental browser features in a number of my projects through progressive enhancement as means to challenge myself to learn web technologies find ways to apply them as solutions to my client’s needs. Here are highlights of some of my recent projects.

9thCO Digital Agency Website Redesign

This project uses the following technologies:

  • Drupal 8
  • Bootstrap 4
  • SASS
  • JS
  • Animations
  • Gulp

The redesign of 9thCO agency's website took place in 2020. The custom Drupal 8 theme was created from ground up to be web accessible, performant, SEO-friendly, and make use of composable content architecture. I was given the mockups and in close collaboration with the in-house designer, I was able to turn the design to code in a short period of a week. I had a lot of fun figuring out how to implement some of the challenging creative placement of images and text and how to reposition them responsively. I also ensured needed assets were loaded conditionally only on pages that needs them. I also stripped out all the unused Drupal base theme files that was loaded in when our custom theme extended one of the core base themes. This was a huge boost to the Core Web Vitals performance scoring.

For this project, I wrote a custom Gulp task runner script that is responsible for compiling and minifying SASS, CSS, and JS code. I also recompiled the Bootstrap SASS files to include only needed partials and performed Bootstrap overrides and modifications such as enabling fluid typography, custom font families and so on.

Visit 9thCO website

Mobiltex Website Redesign

This project uses the following technologies:

  • Wordpress
  • Bootstrap 4
  • SASS
  • JS
  • Animations
  • Gulp

This redesign was for a 9thCO client. Aside from the standard theming work, the part that stood out for me for this client redesign was the custom JS interactivity that I wrote. For their product showcase page, I hooked up custom click events to CTA buttons that ties in with the Owl carousel library and a Bootstrap accordion. Clicking on the list of product CTA buttons below the carousel will cause the carousel to move to the respective product carousel slide and expand the product info accordion panel while collapsing an unrelated accordion panel. On page load, as the carousel auto-rotates, it will also highlights the product CTA button that the slide is tied to. Once the user interacts with the CTA button or carousel navigation, the carousel auto rotate is disabled.

View Launched Website Homepage Screenshot View Launched Website Mobile Homepage

Digital Campus Framework (DCF) & UNL 5.0 theme

This project uses the following technologies:

  • HTML
  • CSS
  • SASS
  • JS
  • Node.js
  • Gulp
  • Grunt
  • Require.js
  • Browserify

The University's web framework underwent a major version upgrade to adopt the latest industry web technologies and accessibility best practices. This include styles and template markup that align with newer CSS specs such as CSS Grids, CSS methodologies such as BEMIT for consistent class names, and accessibility standards such as defining proper landmark regions and use of ARIA attributes. The update also aimed to improve page load and rendering performance. The framework upgrade is split into two projects, a brand agnostic framework that can be shared and reused among other institutions within the university system - DCF, and a University theme that is built on top of it.

In this project, I led the effort to evaluate build tools and architect the build process needed to distribute the DCF library. This include researching build tools such as Webpack and Gulp and their plugin ecosystem, and making a decision based on the business use case and requirements. Then I wrote the build processes needed to generate the code base for the library using composition patterns. I also improved upon the existing theme layer build processes by cleaning up the codebase and wrote new tasks needed to work alongside DCF. I also wrote documentation for DCF and theme layer build processes. I also wrote code for plugin initialization and widgets that the team hope to incorporate into the framework. Lastly, I also created theme UI prototypes for UX testing and contributed code and styles to both the framework and theme layer.

Visit DCF Pattern Library View the DCF Repo View the UNL 5.0 Theme Repo

Sick Fits E-commerce App

This project uses the following technologies:

  • React
  • Next.js
  • Apollo
  • Yoga
  • Prisma
  • GraphQL
  • Styled Components
  • Stripe API
  • Cloudinary API
  • Jest
  • Enzyme

This is a personal project from a workshop that features a full-stack e-commerce React application. The application uses Next.JS with React for server side rendering and Apollo for cache and state management. The backend stack uses Prisma for data storage and exposing a single GraphQL endpoint and Yoga allows me to selectively expose GQL types and methods that are automatically generated by Prisma. Yoga also allowed me to write custom query and mutation resolvers to manipulate CRUD operations and check for login via JWTs and access privileges. I also wrote unit and snapshot tests for components using Jest and Enzyme.

The Sick Fits App allows sellers to create an account and add items to sell. Item images are uploaded to Cloudinary. Seller can edit item details and images after it has been created. Permissions to edit existing items are given to item creators or users with the correct permissions. There is a permissions screen that displays all the users and their permissions to allow admins or users with the correct privileges to edit user permissions. The app features a cart system that buyers can add items to and checkout via Stripe payment method. It also features an Orders page where past orders can be viewed.

Note: The production site is deployed to the free tier of Heroku and Now. Loading takes a while the front and the backend gets booted up.

Visit This App on Heroku Visit This App on Now View the Project Repo

Instagram-like React Redux App

This project uses the following technologies:

  • React
  • Redux
  • JSX

In this personal project, I toyed with an Instagram-like React app that loads in a feed of post details from a json file. I used Redux for state management and used the time travel within the Redux dev tools to inspect the state mutation. This personal project helped me to understand the concept of state vs store, actions, action creators, dispatching actions, reducers, and the benefits of redux such as allowing us to easily pass store data to deeply nested components.

View Project Repo View Project Screenshot

Catch of The Day App

This project uses the following technologies:

  • React
  • JS
  • JSX
  • Stylus
  • Firebase

This React single page client side app is a personal project from a workshop. It features an e-commerce store front with a cart and inventory management. Inventory data is stored on Google's Firebase cloud storage. I created this app to help me learn the basics of React including concepts such as state, props, hot reload, two-way data bindings, re-usability and differences of class-based and functional components, and lifecycle methods. I also utilized packages such as React router, CSS Transitions, and PropTypes for prop checking. The app is deployed to multiple environment such as Netlify, Apache, Now, and Github pages so that I can familiarize myself with how single page application deployment requires routing to be all done through a single entry point.

View the Repo Visit this Project hosted on Netlify

NCard Homepage Refresh

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SASS
  • SVG

There are times when the existing website doesn't really need an entire redo. All it needs is a quick coat of paint to refresh its look on the homepage, tidy up its existing content, making it current and using new methods to present it. The challenge of this project is how to create the most user impact with the least amount of effort.

On the new homepage, I gathered frequent user questions from the client and Google Analytics data on what are some of the most frequented pages and surfaced them on the homepage. I also make use of a spacious design to clearly define steps on how to obtain a new card. I re-purposed a piece of intersection observer code that I wrote for scroll watching on the homepage to trigger animation when the numbered steps becomes visible in the viewport.

Visit This Website

Business & Finance Homepage Refresh

This project uses the following technologies:

  • HTML
  • CSS
  • SASS
  • SVG

This is another website that I had to perform a quick homepage refresh. Again the challenge is how to create the most user impact with limited amount of time and resources.

One of the most important pieces of content on this site is the policies for the University's operations. Certain policies are updated frequently but there was not an easy way to communicate which policy has been updated. Using Drupal features, I built a view that pulls in policies sorted by their most recently updated date and present it as a block on the homepage. Using a spacious design and concise text, I created a clean design that quickly communicates what each of the homepage section is about. I also elevated the awards recipient section, giving it the section acknowledgement that it previously lacks.

Visit This Website

American Council of the Blind - Nebraska (ACBN)

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SASS
  • TWIG
  • GULP
  • Drupal 8
  • Adobe XD

This project is for the OpenAIR 2018 Web Accessibility Competition hosted by Knowbility. Our team's submission won first place in the developer category obtained the best score in 20 years of the competition's existence! The OpenAIR Competition matches participants with nonprofit organizations and artists to help them build accessible websites that they would otherwise have difficulty achieving. Grading is then performed according to an accessibility rubrik. Web accessibility training, and exposure to Assistive Technologies and audit tools were part of the educational component of this competition. As part of the Inclusive Lab team, we were paired up with ACBN to redesign their website and to ensure that the new site meets WCAG 2.0 Success criterias. We also made extra efforts to ensure that the content organization and information architecture (IA) feels logical and that good UX criterias are met. My contribution included content and IA organization, creating mockups, theming, and QA testing. The site was tested against Voice Over and Jaws.


Site has been updated since handed over

Visit Project Repo View Screenshot of Old Website View Launched Website Homepage Screenshot View Launched Website Mobile Homepage View Launched Website Content Page

Facilities Departments Web Pages

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SASS
  • SVG
  • PHP
  • Drupal

This project involved redesigning each Facility unit's web pages and ultimately redesigning the entire Facilities website. This project was an ongoing effort. Some of the challenges that I faced in this project include trying to include appealing visual design components and elements that can be reused throughout the entire website and manipulating text-heavy content pages into easily digestible pieces and display them using Drupal features. It can be difficult to represent certain units such as Building Fire & Safety through appealing photos. To solve my problem, I used SVG text and filled them with relevant images, creating a clip effect. The image is darkened and multiplied for accessibility purposes and this also help reduce the image file size. Double win!

I also built a feeds importer to enable content maintainers to easily upload .CSV files that refreshes the content on this page.

Visit Real Estate Web Page Visit Building Fire & Safety Web Page

Nebraska Repertory Theatre

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • LESS
  • SVG
  • PHP
  • Drupal

The Nebraska Repertory Theatre was recently reopened and a new website and rebranding became part of the process. The elaborate website design was put together by Archrival and was implemented and launched in a time span of two weeks in November 2017. My task was to implement the design in a custom Drupal theme. PHP was used in template files for theming and templating content types. The site uses the Intersection Observer API to show additional content past a certain scroll point on the Show pages. Logic is also written in PHP to disable past showtime ticket links and hide content when show dates have expired. Drupal View was also used to sort and display shows based on their show dates.
Site has been updated since handed over

Visit This Website

Yard Yankees

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SASS
  • Squarespace

The Yard Yankees brochure site is a freelance project that I helped a friend create for his lawn mowing business. I chosed Squarespace primarily for its easy to use and yet customizable features and its responsive web templates. I modified an existing theme and tacked on my own custom CSS and JavaScript. I wrote a custom video loader for the hero banner that will play a looping video only for non-mobile devices. This approach provides a better user expereicne for mobile-device users who visits the site since it will consume less battery and mobile data on their devices. The default video feature loads video from services that also displays their logo and video controls which are undesirable. Site was launched in June of 2017.

Visit This Website

University of Nebraska Lincoln
Employment Website

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SASS

This project involves a lots of skinning and reorganization of the default PeopleAdmin vendor product theme. The original template provided by PeopleAdmin had very limited options in terms of branding and the content organization was not very intuitive or user friendly. My task was to rebrand the vendor product, introduce the university colors, logo, and try to bring it visually as close to the UNL web template as possible. I also used JavaScript to reorganize the page layout and content to improve content flow. I also made improvements to default content layout and design choices more readable on mobile to improve user experience. This website was launched in January of 2018.

Visit This Website View Default Vendor Template

University of Nebraska-Lincoln
Student Accounts Website Redesign

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • TimelineJS
  • Drupal
  • Twig Templates

Completed in May 2017, the Student Accounts website redesign features a user-centered design and information architecture with a topic-based navigation to address audience informational needs. Key features include a timeline of billing dates that will move to the closest entry relative to current date on page load, a collapsible modular announcement block that uses Local Storage to remember user action and will expand again if there are new announcements, and robust templated content types that allow content editors to easily update mobile-responsive tables.

Visit This Website

University of Nebraska-Lincoln
Web Developer Network Homepage Redesign

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SASS
  • Gulp
  • SVG Animations
  • Drupal
  • Twig Templates

This quick project provides a refresh for the Web Developer Network homepage. The effort includes identifying missed opportunities to surface content for more prominent visibility on the homepage. This includes promoting meeting dates, participation opportunities, featured members, past presentations, and documentations. The redesign features a slanted design which is a break from the more traditional banded sections and animated SVGs. The new homepage is completed in March 2017.

Visit This Website

University of Nebraska System
Web Summit 2017 Event Website

This project uses the following technologies:

  • HTML
  • CSS
  • SASS
  • Gulp
  • Animations
  • Drupal

This project's purpose is to create a website for a Web Summit conference in March 2017 for all partners of the University of Nebraska system. It features a registration form to collect attendee details, and a summit agenda page. The conference site also features a slanted design with headings animating into view on page load.

Screenshot 1 Screenshot 2

University of Nebraska-Lincoln
Procurement Services Website Redesign

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • Gulp
  • SASS
  • Drupal
  • Twig Templates

The main Procurement Services redesigned website features easy to follow navigation for both on-campus departments and suppliers. Featuring a hybrid of audience and topic based navigation, the site aims to provide information to both departments and suppliers on how to do business on campus. It features a unique commodity listing system that is built on book navigation, a responsive organizational chart, and clever use of drop caps, lines, and typography to enhance content readability and navigation. This website was launched in December of 2016 and it borrows design elements from the department's subsidiary services websites, giving all the sites a cohesive look and feel.

Visit This Website

University of Nebraska-Lincoln
Parking & Transit Website Redesign

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • SVG
  • LESS
  • Drupal
  • Twig Templates
  • Grunt

Launched in June 2016, the Parking & Transit website redesign included a strategic review of its site informational architecture and content audit to ensure coherent and cohesive content. An interactive permit purchase guide was built to help potential buyers figure out which permit they would need. Efforts also include surfacing hidden content in the previous website through analyzing Google Analytics data. Other efforts include ensuring accurate parking lot GIS information is available on Maps system for public consumption, taking photos, design and develop the entire site.

Visit This Website

University of Nebraska-Lincoln
Procurement Services - Subsidiary Services Websites Redesign

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • REST
  • Grunt
  • LESS
  • SASS
  • Drupal
  • Twig Templates

The Procurement Services Subsidiary Services Websites include I.T. Procurement, eSHOP, and Inventory Services. All three websites are brought together through shared design elements, giving them a cohesive and related feel.
The eSHOP website features an interactive decision tree that allows users to make informed spending decisions that is built using JS and Flexbox. It also features a meeting notes content type that allows content editors to easily create meeting notes from Word documents. The I.T. Procurement website features a searchable, sortable, and filterable catalog of products that is built on Drupal views. The site also uses a taxonomy of user data to make Directory API calls so that contact information are always current. Redesign work for Inventory Services is only performed on the homepage.

Visit eSHOP Website Visit I.T. Procurement Website Visit Inventory Website

University of Nebraska-Lincoln
University Police Website Redesign

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • REST
  • Drupal
  • Twig Templates

Launched in November 2015, the University Police website redesign features a searchable directory of contacts whose details are pulled in through API calls to the university's Directory API to ensure contact information are always current. This directory is built using advanced Drupal views and Twig template. The site's purpose is to provide important information to students and parents on how to be safe and responsible on campus. My efforts include taking photos, assist in developing site information architecture, and provide guidance on content strategy, design and develop the entire site.

Visit This Website

University of Nebraska-Lincoln
Office of Sustainability New Website

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • ChartJS
  • Drupal
  • Twig Templates

The new Office of Sustainability website, launched in August 2015, is part of the university's marketing efforts to show the public it's investment in the environment. This project involves collaboration with the University Communication Marketing and Design team, incorporating their design with mine and building the site from scratch. Aside from the great visuals, the site features sortable catalogs of sustainability-related courses that are built on Drupal views. The site also features a blog content type that allows content editors to easily create monthly blog contents. The site also utilizes ChartJS to create charts that reports on sustainability-related statistics such as year-on-year green house gas emissions at the university.

Visit This Website

University of Nebraska-Lincoln
Utility Services New Website

This project uses the following technologies:

  • HTML
  • CSS
  • JS
  • ChartJS
  • SkrollrJS
  • Drupal
  • Twig Templates

The new Utility Services website aims to inform the public about its functions on campus. The site, launched in July 2015, features a looping video homepage, with feature pieces on each of the utility plants. Parallax scrolling effects were incorporated into these feature pieces to highlight certain content in these feature pieces. My efforts include interviewing key personnel, collaborate with content editor to put together the content, taking photos and videos, design and develop the entire site.

Visit This Website