Adam Wheatley logo

Adam  Wheatley

Front-End Development // WordPress

Hey, I’m Adam.

I’m a front-end developer specializing in WordPress located in Nashville, TN. I’ve been studying web development since 2013 and continue to learn, experiment, and build things for the web. Below you can see some things I’ve made for clients, and some just for fun. So look around for a while and if you have any questions, let me know – I’d love to talk with you.

Christ United Methodist logo

Christ United Methodist website shown on various devices

About Christ UMC

I’ve had a long-standing relationship with Christ UMC, particularly with the student ministry, as I have led worship for their fall and winter retreats for several years. This is an incredible church that focuses on relationships and community. Their new website is scheduled to launch in August of 2015. You can check them out at christumcfranklin.org.

The Project

I was brought on by Big Heart Creative to help style the pages, existing widgets and plugins, as well as add and style new widgets plugins. This is a WordPress site based on the Natural Theme by Organic Themes.

Technology

CSS, WordPress

About Mark Wagner

Mark is a great friend of mine, and an equally great singer/songwriter from Nashville, TN, then Seattle, WA, then back to Nashville, then to Olympia, WA, and now back in Nashville (for now, at least). He and his wife Kalle also started a non-profit called Storysong, which uses music, photography, and other creative expressions to empower and equip people around the world to share stories, connect communities and share the hope of Jesus Christ through the redemptive transformation of lives.

The Project

This project was my first chance to build a one-page website, which Mark asked for. Each section of the site is set up as a page in WordPress, allowing the navigation to scroll to the corresponding page. The site features a pure-CSS off-canvas navigation and “smooth scrolling” using jQuery. As I was building this responsive site mobile-first, I thought it would be interesting to keep the design consistent over various screen sizes, giving the user the same experience whether on a phone, tablet, laptop, or desktop.

Technology

HTML, CSS, jQuery, WordPress

About Kal’s Kitchen

Kalle Wagner (Kal for short) is the wife of Mark Wagner, and is a fantastic cook. Kal’s recipes are focused on health and nutrition, using whole foods, healthy fats, lots of herbs and spices, and quality meats. And most of her recipes are gluten-free, dairy-free, egg-free and allergy friendly.

The Project

This site is a custom design and theme that I build especially for Kalle.  Since she specializes in clean eating, I wanted to go for a simple and clean design.  I also came up with a logo for Kalle – not necessarily my forte, but she really liked it, so we decided to keep it.  The original (mockup) version of the site was built using the Foundation framework, but the final version is not – though it is still fully responsive.

Technology

HTML, CSS, WordPress

Pure CSS Projects

I think CSS is incredible, and it always excites me to find a way to add functionality to a website using pure CSS rather than JavaScript or another language (although JavaScript is pretty great too). Treehouse has some great workshops that teach you how to build UI element often found on websites. Below you will find a few things that I’ve built while working through these workshops.

Tooltips*

This technique makes use of pseudo-elements as well as data attributes within an HTML element. I’ve also added a tabindex attribute so you can still see the tooltips even when tabbing through the page. Lastly, I’ve given each of the tooltips transform and transition styles to make them appear and disappear more smoothly. *Ok, so there is an empty onclick attribute on these words to make this work on touch devices.  So it’s mostly pure CSS.

To see the tooltip, hover over the word Adam or the word Wheatley.

Accordion

Using accordions for content has been around for a long time, but it typically uses JavaScript to handle the toggle function. This pure CSS version uses radio input elements and their checked pseudo-class along with some sibling selectors.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.