John Dietrich

Front End Web Development Portfolio

Christi Farese

I developed this site using HTML, CSS and WordPress. I cut the graphic elements out of a custom designed Photoshop document. This site also integrates the NextGen JQuery slider as well as the NetxGen Gallery plugin.

Click the image on the right to view live site.


SDT Construction

This site was similarly developed, to the above, with the addition of some custom JavaScript for the social section. The live site can be viewed here by clicking the image on the left.

Crazy Ninja

This site used the same development elements as the others mentioned in this portfolio, and can be viewed live by clicking the image on the right.


Remedy True Health

This site was developed using the same technologies listed above. This site also features a blog which can be seen live here.

The homepage features good examples of incorporating video into a page. To improve load times I incorporated some javascript that links an image thumbnail to a lightbox. Rather than loading all the videos each time the page loads the video only loads when the thumbnail is clicked.

Click the image on the left to view live site.

Remedy True Health Mobile

I developed a mobile version of the site above using JQuery mobile, PHP and JavaScript for mobile detection. This serves a mobile version of the site depending on the device used for the request. There is also a button, and link, to enable manual switching between the mobile and full desktop versions of this site.

Visit on your mobile device to see the site live.


Jane Shelton

This site is heavily reliant on custom PHP and MySQL. The site uses a custom PHP backend with a MySQL database for content management as well.

Click the image on the left to view the live site.

Magnolia Estates

This site uses many of the same elements as the other WordPress sites above with the addition of a real estate plugin.

This site required a good bit of custom CSS, along with plugin configuration, to meet client requirements.

Click the image on the right to view the live site.


Jackson Restaurant Guide

This site relies more heavily on CSS3 techniques, than on images, providing a faster and more consistent user experience.

There is also a good deal of custom PHP used to generate and pull the restaurant information.

Click the image on the left to view the live site.

Jackson Restaurant Guide Mobile

I also used CSS media queries to display different layouts (also called responsive design) to provide a good cross platform mobile experience also called a responsive design.

Here is a screenshot of the site as viewed on a smartphone. visit on your mobile device to see it live.


Drive Decks

This website is based on the Kallyas WordPress theme fully customized per client specifications. The theme is lightweight, and responsive providing a highly optimized user experience.

Click the image on the left to view site live.