Hugo Site is Launched

My new portfolio has officially been launched! This is my first static website built using Hugo. In my previous post, I mapped out a few broad objectives for this project.

Let’s take a look at the completed goals from a short while ago and review.

Objectives

~~Create portfolio to display work~~
~~Create blog to jot down my progress and help others along the way~~
~~Implement design with SCSS~~
~~Design new Hugo theme and distribute for others to used~~

Create Portfolio

The portfolio has been created and published in place of my old portfolio site. Currently, projects are displayed under the “Work” section on the index page. The index page was constructed as a one-page template to display a hero header, gallery of web projects, a list of the 10 latest blog posts, and a contact form.

Create Blog

The blog post links on the index page lead to their own individual pages. The majority of the blog was based off of the Hugo Black and Light Theme by David Hamp-Gonsalves. Overall, it was a well-constructed, minimalist, text-only theme without any scripts or clutter. The blog has been slightly redesigned but there is a bit more customization work to be done.

Use SCSS

My first major challenge was figuring out how to use SCSS outside of a Ruby on Rails project, since my previous installations of SASS were as easy as typing gem install sass in the terminal. Luckily, I found a fantastically thorough tutorial by Dan Bahrami: Building a production website with Hugo and GulpJS. This also marked my first exposure to Node.js.

Design & Distribute Hugo Theme

While the theme I’ve constructed is fine to publish now and use myself, there is a ways to go to clean it up and optimize it before distributing to the Hugo community. This will be the most challenging objective that I still need to complete and requires more studying of Hugo and the correct syntax. However, I’m very close to finishing the design portion of the theme!

Summary

Cason Lane needed a revamped digital calling card for his business communications consultancy. Main client concerns included site rendering speed, search engine optimization, security, and a new design that maintained the recognizable brand image.

A transition was made from a slow-loading and clunky Wordpress theme to a modern and clean custom site design that was developed with Hugo, a static site generator. Swapping the unnecessarily heavyweight Wordpress CMS along with its slow-loading database and plethora of plugins for a static site greatly helped reduce page load speeds from 20+ seconds to under 1 or 2 seconds. Without a database, the site no longer had to make dynamic requests to load and display content quickly. Removing the database also eliminated the main security vulnerability.

The site was redesigned from scratch by my friend, John Laue, based on client needs. Since the whole site was being built up from scratch, no bloat from unnecessary Wordpress themes or excess plugins was added to create the look and functionality desired. With SEO in mind from the beginning and with site speed being of utmost importance, best practices were applied in sync with content to bring the client’s web presence to the front page of Google.

Tools

Hugo
Foundation
JavaScript
Animate on Scroll
Webpack

Summary

Lincoln Property Company is the second largest property management company in the US with over 184,000 units under management. In late 2018, I developed an interactive infographic that presents the current state of consumer trends and behaviors in an easily digestible manner.

The infographic displays digital marketing statistics about sourced from a variety of sources. The information is displayed with eye-catching animations that are initiated by a user’s scroll behavior.

Tools

Foundation
jQuery
Ruby on Rails
Animate on Scroll
ScrollMagic
GreenSock

Summary

One of my largest projects came in the fall of 2018 with AMP Residential, a property management company whose goal was to launch an entire suite of websites for a portfolio of 30+ multifamily properties. A theme requiring extensive customization capabilities to fit the different needs of all properties and their websites was needed.

The design was challenging because of several offset elements that needed repositioning and resizing for different viewports and many sections demanded conditionality to fit the content of each site, but it was a fun puzzle to solve. It’s become a favorite build of mine.

Some of the sites built with this theme include RiverFront Towers, Stone Ridge Apartments, and Woodland Creek Apartments.

Tools

Foundation
jQuery
Ruby on Rails

Summary

Morada Plano is a luxury apartment complex located in the Plano Arts District and Historic Downtown Plano. In the summer of 2018, I developed another custom property site for Southern Land Company.

For this build, I implemented new UX features requested by the client and designer like parallax scrolling, SVG animations, counter animations, and an Instagram feed.

Tools

Foundation
jQuery
Ruby on Rails
ScrollMagic

Summary

Avenue5 Residential is a multifamily property management company with 40,000 units and 200 properties across the United States. Although they sustained a large online presence, a number of their properties websites were in need of fresh, updated design and functionality. In early 2018, I developed a custom site theme that was applied to a number of websites under their portfolio of properties that was moved to a Ruby on Rails platform.

Two of the property sites undergoing transformation included Boulder Canyon and Canyon View.

Tools

Foundation
jQuery
Ruby on Rails

Summary

Vertis Green Hills is a Southern Land Company residential community made up of luxury apartments with onsite dining and shopping in Nashville, TN. I developed the site in late 2017 while the property was finishing construction and anticipated for opening in 2018.

Tools

Foundation
jQuery
Ruby on Rails

Summary

Miniflix is an experiment in building a React app with Create React App and Auth0. I built a single-page app with a user login system that serves videos through Cloudinary.

Tools

Auth0
Bootstrap
Cloudinary
Create React App
React

Summary

Osprey is an open source Hugo theme that I designed and developed to use for my own portfolio site. I have been maintaining and improving it with the support of the Hugo community on GitHub since 2017.

Tools

Summary

Rhino Linings Spray Foam Insulation, newly formed division of Rhino Linings Corporation, required a corporate website that could reach both consumers and clients. Using Wordpress, I built a site that served as a valuable marking asset.

Tools

Wordpress

Summary

Rugged Fellows Guide is a lifestyle blog created as a personal project to experiment with the Wordpress platform, web design, digital marketing, and SEO fundamentals. Within the first 6 months, the site generated as many as 30,000 sessions per day.

Tools

Wordpress

Summary

LEARN academy is a full-stack web development bootcamp in San Diego, CA. The website required optimization in terms of speed and organic search engine rankings. Assets were optimized, page loading speed improved, and pages were restructured according to modern SEO standards so that content could be properly crawled by search engines.

Tools

Google PageSpeed Insights
Google Search Console
Ruby on Rails

Summary

VolunteerUp is a Ruby on Rails app that connects volunteers with non-profit organizations. It was built in a 2-week sprint on a team of 7 developers as a final project during the LEARN Academy full-stack Ruby on Rails course. My primary involvement was developing the component for searching and filtering organizations and events within the application as well as some UI/UX guidance.

Tools

Kaminari
Filteriffic
Ruby on Rails

About

Work

Blog

Contact

Objectives

Create Portfolio

Create Blog

Use SCSS

Design & Distribute Hugo Theme

Hugo Site is Launched

Objectives

Create Portfolio

Create Blog

Use SCSS

Design & Distribute Hugo Theme

Cason Lane Communications

Summary

Tools

Lincoln Property Company

Summary

Tools

Amp Residential

Summary

Tools

Morada Plano

Summary

Tools

Avenue5 Residential

Summary

Tools

Vertis Green Hills

Summary

Tools

Miniflix

Summary

Tools

My Resume

Osprey

Summary

Tools

Rhino Linings Corporation SPF

Summary

Tools

Rugged Fellows Guide

Summary

Tools

LEARN academy

Summary

Tools

VolunteerUp

Summary

Tools