Colin Neal
Web Developer with a focus on Interaction Design and Information Architecture
I am a web developer with a focus on information architecture and interaction design. Most of my work is with established technologies, including Bootstrap, WordPress, Joomla, jQuery, PHP and MySQL in a traditional LAMP environment. I also have proficiency in software programs such as Figma, Balsamiq and WireframeSketcher for creating both low and high-fidelity prototypes. In addition to my skills in web development, I also have a background in non-linear video editing with Adobe Premiere Pro CS6/CC and digital photography using Adobe Lightroom Classic.
Skills
HTML5, CSS, JavaScript/jQuery, PHP, MySQL, CSS frameworks (Bootstrap, Foundation, Semantic UI), content management systems (WordPress, Joomla), UI prototyping software (Figma, Balsamiq, WireframeSketcher), Adobe Photoshop, Illustrator, Premiere Pro, After Effects, Lightroom Classic, legacy Apple Final Cut Pro 7, Microsoft Visio
Education
Communication & Media BS, Clarkson University, December 2008
Information Technology MS, Clarkson University, May 2011
Cerfificate in Web Programming, Champlain College, August 2022
Certificate in Web Design, Champlain College, December 2023
Web Development
Lake Placid Mockup Tourism Website
I built a mockup tourism website of the Lake Placid region primarily to practice integrating the Bootstrap 5 CSS framework into a Joomla environment with significant DOM traversal/manipulation in jQuery. The Joomla template being used on the site is an empty boilerplate template with Bootstrap integration (that I found on Github) which I modified with additional module positions and Material Design theming.
Skills Used: HTML, CSS, jQuery, Bootstrap, Material Design, Joomla, Joomla Content Editor (JCE)
Saratoga Springs Mockup Tourism Website
I built a mockup tourism website of the Saratoga Springs region to practice with working with the open-source Foundation 6 (formerly Zurb Foundation) CSS framework. The back-end of the website was built using a content management system that I wrote from scratch in PHP and MySQL. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery.
Skills Used: HTML, CSS, jQuery, Foundation, PHP, MySQL, Custom CMS
New England Mockup Tourism Website
I built a mockup tourism website of the New England region to practice working the Semantic UI CSS framework. The back-end of the website was built using a content management system that I wrote from scratch in PHP and MySQL. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery.
Skills Used: HTML, CSS, jQuery, Semantic UI, PHP, MySQL, Custom CMS
Pizza Shop Mockup Website
I built a website for a fictitious pizza chain in Upstate New York and Vermont called “Pizzeria Gustare” to practice integrating the Foundation 6 CSS framework into a WordPress environment. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery. The WordPress theme being used is JointsWP, an empty boilerplate theme with Foundation 6 integration. The site was originally built as a static site that was converted to WordPress.
Skills Used: HTML, CSS, jQuery, Foundation (JointsWP), WordPress, Classic Editor
Health Food Store Mockup Website
I built a website for a fictitious health food store chain in Upstate New York and Vermont called “Natural Faire” to practice integrating the Foundation framework into a Joomla environment. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery. The Joomla template being used is an empty boilerplate theme with Foundation 5 integration that I found on Github and substantially modified. The site was originally built as a static site that was converted to Joomla.
Skills Used: HTML, CSS, jQuery, Foundation, PHP, MySQL, Joomla, Joomla Content Editor (JCE)
Coffee Shop Mockup Website
I built a website for a fictitious coffee chain in Upstate New York called “New Brews” to continue practicing integrating Foundation into WordPress. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery. The WordPress theme being used is JointsWP, an empty boilerplate theme with Foundation 6 integration. The site was originally built as a static site that was converted to WordPress,
Skills Used: HTML, CSS, jQuery, Foundation (JointsWP), WordPress, Classic Editor
Yogurt Shop Mockup Website
I built a website for a fictitious yogurt chain in Upstate New York called “Big Freeze” to practice integrating Bootstrap 5 into WordPress with block editing capabilities. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery. The WordPress theme being used is Bootscore, an empty boilerplate theme with Bootstrap 5 integration. The Bootstrap UI components were inserted with the All Bootstrap Blocks plugin.
Skills Used: HTML, CSS, jQuery, Bootstrap (Bootscore), WordPress, Gutenberg Block Editor
Burlington, VT Tourism Mockup
I built a mockup tourism website for Burlington, VT to practice integrating the Semantic UI CSS framework into WordPress. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery. The site was constructed using Chap, which is a WordPress theme/page builder based on Semantic UI.
Skills Used: HTML, CSS, jQuery, Semantic UI (Chap), WordPress, Gutenberg Block Editor
Moreau Lake State Park Tourism Mockup
I built a mockup tourism website for Moreau Lake State Park (near Saratoga Springs and Glens Falls, NY) to practice integrating the Semantic UI CSS framework into WordPress. To add various rollovers and effects, I used the DOM traversal capabilities of jQuery. The site was constructed using Chap, which is a WordPress theme/page builder based on Semantic UI.
Skills Used: HTML, CSS, jQuery, Semantic UI (Chap), WordPress, Gutenberg Block Editor
Interaction Design & Information Architecture
Adobe Photoshop UI Composition
In Photoshop, I created a front-end composition for a fictitious outdoor goods apparel retailer called “French Mountain Outfitters” located outside of Lake George, New York. This composition was based on skills I learned in the Designing Digital Images for the Web (WEBD 110) course that I took through Champlain College. (The imagery being used throughout the mockups was purchased from Adobe Stock and is being used under an open license; all logos are trademarks of their respsective owners; this prototype was intended for educational, non-commercial purposes only.)
High-Fidelity Prototyping (Figma)
In the Usability in Website and Software Design (WEBD 370) that I took through Champlain College, I designed a high-fidelity prototype of a mobile app for “New Brews,” the fictitious coffee chain in Upstate New York that I had earlier built a WordPress site for. The user interface was designed with Material Design components.
Low-Fidelity Prototyping (WireframeSketcher, Balsamiq Wireframes)
Before developing my WordPress-based website for "New Brews," I developed a series of low-fidelity wireframes for each page of the website in WireframeSketcher using the built-in component library for the Foundation CSS framework.
In the Web Site Design (WEBD 215) course that I took through Champlain College, I completed an assignment which required the development of a user flow for a ficticious bakery in Burlington, Vermont called "Mortar & Pestle." The wireframes were designed in Balsamiq.
Conceptual Diagramming (Microsoft Visio)
Below are two examples of conceptual diagrams (site maps) that I developed to plan out the organizational structures of the mockup tourism websites that I created for Lake Placid and Saratoga Springs, New York. This was a concept that I learned in the Information Architecture (COMM 345) that I took through Clarkson University.
