Projects

  • $ALEX

    Gatsby

    SCSS

    Netlify

    Alex needed a central hub where he could display all his information and appearances that were scattered around the web. To accomplish this, we needed to organize and style many different types of media including articles, podcasts, and tweets while ensuring mobile friendliness.

    This project was built in collaboration with BigHappyTrees.

    Tasks and challenges

    • Organizing and consolidating posts from various sites (Twitter, Medium, YouTube, etc.)
    • Designing a layout that was intuitive, responsive and easily navigable
    • Incorporating a modern, bright and colorful theme
    • Developing a fixed sidebar that displays components on click
    Live Demo
  • All American Building Services

    Gatsby

    SCSS

    Contentful

    Netlify

    AABS chose a complete redesign and rebuild of their old website. They wanted a sophisticated dark theme with an improved experience for mobile users. The result was a static website generated with Gatsby using Contentful as the CMS. This provides faster load speeds, better security, and easy content updates.

    Tasks and challenges

    • Developing a custom, reusable gallery component that was keyboard accessible
    • Building out local landing pages for SEO and Facebook ads
    • Integrating a headless CMS for easy content updates and blog publishing
    • Implementing a complete redesign and redevelopment focusing on mobile responsiveness, accessibility, and SEO
    Live Site
  • Cody Bookkeeping

    Gatsby

    SCSS

    Netlify

    The client was a new small business looking to establish their online presence with a website. A static site was chosen because of the minimal long-term maintenance and low-cost hosting options. I developed a custom testimonial slider to showcase their reviews.

    Tasks and challenges

    • Establishing an online presence for a new small business with a reliable, responsive website
    • Developing a custom testimonials slider component
    • Building a form and connecting it to client's email with Netlify Forms
    • Adding JSON LD schema markup for rich results in search engines
    Live Site
  • Reactified Weather

    Gatsby

    SCSS

    Netlify

    This weather app was built with React, powered by Node, and styled with SCSS. It utilizes Google's Geocoding API and Dark Sky's Weather API to get weather data for searched locations. Built using my Minimal React Boilerplate.

    Tasks and challenges

    • Writing a function to integrate the weather icons with the conditions info sent back from Dark Sky
    • Building a NodeJS server to host the app in order to eliminate CORS conflicts and to send the API keys securely
    • Deploying the app on Heroku which required setting up conditional port and API key variables
    Live DemoSee the Code
  • Lawn Care Concept

    React

    SCSS

    Node

    Webpack

    Heroku

    A one-page concept website built with GatsbyJS, styled with SCSS, and hosted on Netlify. The goal of this project was to help me practice building a brochure website appropriate for a small business.

    Tasks and challenges

    • Design and build a website that would be suitable for a small business
    • Build a custom gallery component with lazy loaded images
    • Implement a mobile responsive layout using Flex and Grid
    • Integrate YouTube iframe
    Live SiteSee the Code
  • Expensify App

    React

    Redux

    SCSS

    Firebase

    Jest

    Webpack

    Heroku

    The Expensify App was the final project in the Complete React Web Developer Udemy Course. It is a fullstack budget app featuring user authentication and a persistent state via Firebase. The user can filter by date or expense amount, and add, search, edit, and delete expenses.

    Tasks and challenges

    • Setting up Jest as the testing suite
    • Connecting Firebase to the app to manage stored data securely and authenticating users via Google account
    • Configuring Webpack to use in this project and also as a boilerplate for future projects
    Live DemoSee the Code
  • Shuttered Photography

    React

    GraphQL

    SCSS

    GatsbyJS

    Netlify CMS

    Github API

    For this project my main goal was to build a blog that could be easily updated by a non-technical client. I used GatsbyJS to build the site, and GraphQL to query the blog posts which are stored as simple markdown files. I then connected all this to Netlify's CMS, an intuitive interface, to easily add and edit new blog posts.

    Tasks and challenges

    • Creating a lightweight, fast and secure blogging website
    • Hooking up the website to Netlify's content management system for easy blog post additions
    • Utilizing lazy loading for images to increase site speed
    Live DemoSee the Code
  • The Café

    HTML5

    SCSS

    jQuery

    GulpJS

    I created this project to practice designing and developing a small business website. My aim was to use my SCSS boilerplate to automate my workflow and provide a quick turn around from inception to completion.

    Tasks and challenges

    • Designing a fast, mobile-ready website suitable for a café style restaurant
    • Building a tabbed menu interface
    • Implementing media card and mobile app theme headers
    Live DemoSee the Code