Web Development & Design

Design and development, although many think go hand-in-hand, are not the same skillset. Not all designers can code, and not all developers can develop graphical assets. Fortunately, I’ve dabbled a bit in both…

In the websites below, you’ll be able to see the design process from conception to final product, and learn a bit about each project’s specific challenges. Each of these websites began life as a Photoshop or Illustrator mockup, and was presented to the client before any code was written.

Highlights of the following samples:

  • Original graphic wireframe creation
  • Mockup to functional and responsive CMS front-end theme
  • Vector graphic creation, modification, and implementation in HTML (SVG)
  • Unique Challenges

Website Design Samples

Front-End Website Development

Although both website design and front-end web development can be considered an art, taking a design and creating a functional website out of it is much more technical then an initial mockup. Not only is cross-browser compatibility a concern, but now one must ensure proper display across a sea of digital devices.

Today’s challenges come from creating an experience for the end user to get them the information they need quickly. Fortunately for designers we have an abundance of frameworks such as Bootstrap, Foundation, Pure, and Material Design Lite to help speed up production of a website. The only drawback is sometimes the design can be limited by the scope of these technologies, unless heavy modifications and overrides are taken to the CSS code.

As we move forward, a new standard known as flexbox seeks to replace the old grid systems and css hacks previously utilized in these frameworks. Phillip Walton has a good example of this on his website: Solved by Flexbox. The only apparent drawback is compatibility with Internet Explorer, which has now been replaced by Microsoft Edge. Fortunately, outside a few legacy applications, support for Internet Explorer can now be safely phased out. As demonstration of the power of flexbox and my understanding of this new standard, this portfolio website was written from the ground up without any of the previously mentioned frameworks.

In preparing my portfolio, I wanted to demonstrate my understanding of various technologies. This website was written from scratch without a Photoshop wireframe, first using Sublime Text and later Atom. In doing this, I’ve created a flexbox based grid framework for use on this and other projects going forward – called FlexForward – to accomplish the layout of this website. Although FlexForward is still very early in development, I believe it’s strong enough to be used in this portfolio as a demonstration.

In addition to the HTML, CSS, PHP, and the reusable flexbox grid framework I’ve created for this website, I’ve also borrowed a few open source solutions to demonstrate my ability to integrate with existing code and tutorials.

Highlights of this website as an example

  • No front-end framework, all layouts were built from the ground up
    • In the process, created my own framework called 'FlexForward'
  • Normalize.css for a standardized presentation across browsers
  • jQuery and jQuery UI for effects
  • Bootstrap’s Modal.js for overlay pop-ups
  • An implementation of Keith Clark’s No-Javascript CSS Parallax
    • Utilizes 3d Transform rather than adjusting the background in the DOM like a javascript solution would.
    • This also allows non resource intensive smooth animations on Android’s Chrome.
    • Disabled on Microsoft Edge as a fallback for maximum compatibility. There is currently an open bug for MS Edge addressing the issues with that browser.
    • Also disabled in Mobile Safari (iOS Devices) for best appearance, and disabled in Firefox (mobile and android) for lag issues. For these devices, 3DCanvas is not activated via CSS (parallax.css).
  • Font Awesome icon fonts

Portfolio code for review

This live website can be downloaded from its git repository on GitLab for your review. In fact, when updating this website, the server pulls from the master branch.


  Download this Portfolio on GitLab


Branding and Graphic Design

Going hand-in-hand with Website Design is of course the broader skill of graphic design. Where many web designers have used graphic design programs such as Adobe Photoshop, Adobe Illustrator and Affinity Designer in their workflows, developing for print using the CMYK color space has its own unique challenges.

Below are several projects of which I worked with the brand identity of a professional entity, where I worked with or created branding standards, manipulated vector graphics, and created assets for both print and web.

Graphic Design Samples

Adobe Creative Cloud

As the most heavily used software packages in graphic design, proficiency with the Adobe Creative Cloud is essential to any graphic designer or web designer. From Photoshop to generate images and assets, to Illustrator to create vector graphics for high-pixel-density displays, understanding this software suite is essential.

The Files below demonstrate my proficiency with various tools in the Adobe Creative Cloud suite, including:

  • Adobe Photoshop for pixel graphics
  • Adobe Illustrator for vector graphics
  • Adobe Audition for podcasts and audio
  • Adobe Premiere for video editing

Creative Cloud Project Samples