Web Development

Custom coded websites and web applications in a wide range of platforms including Wordpress, Magento and Shopify, as well as custom coded standalone websites and applications. HTML5/CSS3/SASS, PHP/MySQL, jQuery/Javascript, and Mobile Responsive CSS. You can take a look at just a few examples of my work below.

  • Emocion – The Sounds of Tango

    emocion

    Project:
    New Website Development; Custom WordPress Theme; Emocion Tango
    Platform:
    Wordpress
    Deliverables:
    UI/UX Development, One page site developed as WordPress theme with custom functions.

    Project Details: This custom WordPress theme was developed for the amazing “Emocion Tango” a brilliant group of performers. The theme is fully responsive for mobile, and has some interesting animations and features, including a custom contact form with ajax submission process and animation.

    I cannot take credit for the design itself, which was completed by another party hired by the client. However, I handled every aspect of the development, including the responsive CSS. I also implemented a method to embed Youtube videos, with a preview thumbnail, and the ability to play by clicking the thumbnail with a custom play button vs. the default Youtube play button.

    screencapture-emociontango-1472171635351

    Read More
  • web-design-user-interface-ui-pricing-slider
    web-design-user-interface-ui-pricing-slider

    Custom UI/UX; jQuery, PHP, HTML/CSS; Pricing Slider

    web-design-user-interface-ui-pricing-slider

    Sliding Pricing Calculator UI/UX with WordPress Integration

    Client: EnVisual

    Scope: Design and develop a sliding pricing calculator interface that simulates and actual sliding element that the user can slide up or down to alter the calculated results, with integration into WordPress.

    Skills Required: jQuery/AJAX, PHP/MySQL, HTML/CSS, WordPress

    Project Details: The purpose of this application is to provide customers with an interface to determine pricing. The different sliders can have default parameters set, and those numbers are increased as the slider is engaged. The increase is based on number of items at that price.

    In order to accomplish this, I also made use of Google’s exchange rate API, in order to allow the user to switch between exchange rates, in order to see the difference in cost, and also to be sure that the results match their expectations (for international use).

    This particular slider was integrated with a WordPress page template, in order to be integrated into a WordPress site. Therefore, it is theoretically able to be integrated into any install, and used with a different concept in mind. At some point, I will build something a little more complex, that can be downloaded and installed.

    If this project interests you, and you’d like to know more about how I accomplished it, please feel free to contact me. Additionally, if you need a pricing slider, written in php, jQuery, and HTML/CSS, please feel free to contact me to discuss your needs.

     

     

    Read More
  • Web Development; Custom WordPress Theme; Auxiliary Design Co

    web-development-custom-wordpress-theme-auxiliary-design

    Web Development; Custom WordPress Theme; Auxiliary Design Co

    Client: Auxiliary Design Co.

    Scope: Development of custom WordPress theme, using provided design

    Skills Required: WordPress Theme Development, HTML5, CSS3, jQuery, PHP, Mobile Responsive CSS

    See the live site here: http://yourauxiliary.com

    Project Details: This custom WordPress theme consists of a great deal of CSS3 transitions, jQuery manipulations, as well as custom PHP scripting. I made use of no plugins for this project, only custom code. Some of the key features are:

    • Mobile Responsive
    • Multiple navigation options with animation and automated scrolling
    • Custom “reveal” animation for hidden work content
    • All one page, giving high content potential for homepage
    • Custom contact form script, no plugin
    • Dynamic ajax contact form validation with error display
    • Right side pagination-style navigation that animates with position
    • Mobile hamburger menu, populated with content from full level menu
    • “Raining” icons animation effect
    • Custom spinning loading animation
    auxlry auxlry2

     

     

    Read More
  • Web Development; Custom WordPress Theme; CWA

    cwallpresentation

    Web Design & Development; Custom WordPress Theme; CWA

    Client: CWA (via Auxiliary)

    Scope: Web Layout Modifications, Custom UI/UX for Gallery, Mobile Responsive Conversion of Theme

    Project Details: CWA is a high-end architectural firm. They had a pre-existing site, done in WordPress, that needed some updates. The goal was to convert their existing theme to one that would be responsive to mobile, to be sure the site was “mobile-friendly”. This consisted of writing new CSS declarations to cause the layout to adjust to the width of the device the user is viewing on.

    Additionally, the gallery section needed a better method of organization and user interaction. We consolidated the gallery with a grid of thumbs above the “list-style” format of the items. Clicking one of these thumbs would bring you to the respective project. Each project was given one large featured image with a small row of thumbs underneath. Selecting these would switch out the featured image with that image, using jQuery. Where the thumbs exceeded the width of the container, a right or left arrow appears, allowing the user to scroll to the next set of thumbs.

     

     

    Read More
  • Custom WordPress Search & Filter, New American Goods

    custom-wordpress-search-and-filter-new-american-goods

    Web Development; Custom Search/Filter & Browse Functionality; WordPress

    Client: New American Goods

    Scope: PHP, WordPress, jQuery, AJAX, HTML/CSS

    Project Details:New American Goods is an online shopping platform that specializes in providing “Made in the U.S.A” products only. This way, customers can be sure that the products they buy were made in the United States.

    The client had created a database of products in WordPress, using the custom post concept. These were also organized by custom taxonomies. It was my job to create a method of allowing the posts displayed to be filtered by combinations of selections by the user. For example, if the user wanted to see only those products in California, they would simply select “California” from the selections. They can then filter further by selecting product category, etc. This was accomplished using primarily AJAX with PHP and jQuery. I utilized some of the WordPress default functionality for some population of content, and then filtered that content using AJAX.

     

     

    Read More
  • Interactive Infographic

    interactiveinfographc

    Interactive Infographic

    Client: Consulting Agency

    Scope: Develop a standalone interactive infographic interface that returns comparative results via PHP and AJAX/jQuery.

    Skills Required: HTML5, CSS3, jQuery, PHP

    See the working example here: http://jondaydesign.net/interactiveinfographic/

    Project Details: This is a standalone package consisting of an html file, a jquery file, a php script and a csv file. This can be installed on any server, as the csv data is automatically scraped by the php script. The results are returned via AJAX in the form of percentages of a whole. After the user enters their choices in the displayed form, the data is compared to the csv file to make calculations.

    Each selection represents a piece of criteria that must be met to be counted toward the percentage. As more selections are made, the results are narrowed down further, resulting in a smaller percentage. The data is returned to the front-end interface, and displays are animated into view that show the results. I used a “counter” style animation for the percentages. The user is also automatically scrolled to the animation as it occurs, which happens in sequence (total of two…in the form of two blocks of two).

     

     

    Read More
  • Web Development; Shopify; Custom Theme

    malaganapresentation

    Web Development; Custom Shopify Theme & Functionality

    Client: Malagana Design

    Scope: Web Development, Custom Shopify, HTML/CSS, jQuery, AJAX, Custom Language Selector w/ Translation, Custom Currency Selector, Liquid

    View the site: http://malaganadesign.com

    Project Details: Malagana Design specializes in creating awesome furniture that defies gravity. They decided to open up a Shopify store, and needed a completely custom theme to match a design that was created by Auxiliary. It was my job to develop this design into a functioning theme with advanced functionality.

    The client requeste a custom language selector, which would allow the user to change the language of the entire site to Spanish, which would be based on a translation entered in the back-end by the administrator. I created this using a combination of jQuery and AJAX, and tapped into the session to store the selection (allowing it to remain selected throughout use). The same was done with a currency selector, although a portion of that logic was done using a known solution.

    Additionally, I implemented a custom swatch selection method that was more advanced than the standard recommendation in the Shopify documentation. I implemented a blog and press section, complete with modals to display the content for each item.

     

     

    Read More
  • Magento e-Commerce; The Trendy Box

    thetrendybox

    Web Development; Magento

    Client: The Trendy Box

    Scope: Magento theme customization, PHP, HTML/CSS

    Project Details: The Trendy Box is a monthly subscription service that allows users to subscribe to receive monthly boxes of accessories and other fashion items. The client desired to build the site using Magento, and required customizations to be made to the theme. Originally, we worked with Shopify for this, and after some time the client desired to make the switch to Magento.

     

     

    Read More
  • Web Development; Custom HTML Website; Origin Technologies

    Web Development; Custom HTML Website; Origin Technologies

    Read More
  • Web Development; Custom WordPress Theme; offMetro

    Web Development; Custom WordPress Theme; offMetro

    Client: offMetro NY

    Role/Project Scope: Custom WordPress theme and functionality, HTML, CSS, jQuery, PHP, MySQL, External API integration to import travel deal content from known-resources into filterable posts, custom search and browse feature using built-in WordPress functions in conjunction with custom PHP and jQUery

    See it in action

    Read More
  • Web Development; HTML/CSS/jQuery; BlueStacks

    bluestacks

    Web Development; HTML/CSS/jQuery; BlueStacks

    Client: BlueStacks

    Role/Scope of Project: Various implementations within HTML, CSS, jQuery, as well as PSD to HTML conversion, page optimization, speed enhancements, and SEO

    I initially built this site as a WordPress site, but due to high traffic volumes, and slow page load on foreign servers, we opted for a static HTML/CSS/Javascript site.

    Read More
  • Web Development; Custom WordPress Theme; Walk Your A.S. Off

    web-design-walk-your-as-off

    Web Design & Development; Custom WordPress Theme

    Client: Walk Your A.S. Off

    Scope: Web Design, Layout, WordPress Theme Development, HTML/CSS(3), jQuery, PHP

    Project Details: Walk Your A.S. Off is a charitable organization which helps those who suffer from A.S. They had a pre-existing WordPress site that was using a pre-made theme from WordPress.org. They were hoping to attract new sponsors, and wanted to update their website with a new custom theme, which would be more catered to their needs.

    The client required both the design and development of the theme, so I began by providing some initial layouts, created in Adobe Illustrator. Once we arrived at a solid design that would meet the needs of the group, I began developing a custom WordPress theme from scratch. Some of the elements that were required were custom sign-up forms, as well as custom profile fields and displays, along with total tallies of users’ meta data.

    Users can sign up, and visit a custom profile page for themselves. On this page, they can also enter the number of steps they have walked for the charity for that week. These are stored and tallied automatically as they increment, as well does a running total of the entire user population.

    As with all projects these days, this theme was created to be responsive to all devices, so that it would be mobile-friendly. To do this, I’ve altered the layout depending on the width of the device, using @media queries.

    The site seems to have been an improvement to their pre-existing site, and has some improved functionality as well.

     

     

    Read More
  • Web Development; Custom Magento Theme; Esposito Sausage

    Esposito-Homepage-Final

    Web Development; Custom Magento Theme; PSD to HTML; Mobile Repsonsive

    Client: Esposito Sausage

    Scope: Magento Theme Development, HTML/CSS(3), jQuery, PHP, ASP.net, PSD to HTML Conversion

    Project Details:

    esposito-home esposito-innerpage

    What made this difficult, was that the .psd provided, was only for full-scale screens.  Ordinarily this might not be a problem, but since the content stretches to the edges of the planes, we are presented with a problem.  We have to figure out how to get the items to change with the width of the screen, so that everything stays relatively the same (until we get to smaller sizes).

    esposito-mobileThis particular project was somewhat difficult with regard to mobile responsiveness.  However, it was able to be achieved.  In order to do so, I had to eliminate some items from the header area, in order to make sure everything fit.

     

     

    Read More
  • Web Development; Custom WordPress Theme; Lurk

    lurk-natural-fragrances-page

    Web Design; Custom WordPress Theme + eCommerce

    Client: Lurk

    Scope: WordPress Theme Development, HTML/CSS(3), jQuery, PHP

    Project Details: Lurk produces natural fragrances using all-natural ingredients. Years ago, I built a flash website for Lurk using a design they provided. Some time after, as Flash became obsolete, the design was “re-imagined” and I reproduced the Flash site as a WordPress theme.

    In addition to a standard WordPress theme with informational content, I included a “shop”, allowing users to purchase items directly on the site. Payments were processed using Quickbooks, for easy connection to the client’s accounting software and credit card processing system.

    There are some custom fade animations in the UI, as well as an embedded HTML5 video

    Update: this site has been recreated using Shopify, for easier management of inventory and content. It is no longer visible in its original state as seen above.

     

     

    Read More
  • Web Development; Custom WordPress Theme; Seraph Miami

    shot-20150126-464-1e23ct2

    Web Development; Custom WordPress Theme

    Client: Seraph Miami

    Scope: WordPress Theme Development, HTML/CSS(3), jQuery, PHP, portfolio-style gallery with custom ajaxing

    View the site: http://seraphmiami.com

     

     

    Read More
  • Web Development; Custom WordPress/Fullscale site

    web-development-fullscale-social-networking-my-vici-daily-deals

    Web Design & Development; Custom WordPress Theme; Full-scale Social Networking and Daily Deals Site

    Client: MyVici

    Scope: Web Design, Layout, WordPress Theme Development, HTML/CSS(3), jQuery, PHP, Google API Integration, AJAX, Drag & Drop UI/UX, Buddypress

    Project Details: MyVici was the brainchild of Mike Tokar of Origin Technologies. My role in the project was initially to handle only the design, but after some time, it was realized that it might be best for me to head up the development as well. We had another developer working on the project, and although he was skilled, things just weren’t “aligning” the way we had hoped. So, I stepped in, shifted us to using WordPress in order to make some use of the custom functions that already exist within WordPress.

    Initially, the site was intended to be a competitor to Groupon, offering daily deals that are purchased using the “group buying” method. Over time, more and more functions were added to the site, as the scope and scale of the site increased. At this point, I actually traveled to the client’s location in Framingham, Massachussetts, and spent multiple months living in a Red Roof Inn, coding custom features of the site.

    Some of the innovations used in the site include:

    • Drag & Drop sharing of content with friends in user’s sidebar panel
    • Locate and select from Google API a listing for a particular business
    • Connect to all friends from your contact list, or via an existing social network (before this was common)
    • Manipulated Buddypress to the point of being an almost entirely new system
    • Real-time voting and storage of vote counts, as well as the ability to filter/order by those counts

     

     

    Read More
  • Web Development; Custom WordPress Theme; Ibis Interactive

    web-development-custom-wordpress-theme-ibis-interactive

    Web Development; Custom WordPress Theme; Mobile Responsive

    Client: Ibis Interactive

    Scope: WordPress Theme Development, HTML/CSS(3), jQuery, PHP

    Project Details: Ibis Interactive provides digital services such as web design & development. I provided a custom-built WordPress theme based on specifics provided by the client. There were some parallax items, as well as “scroll-into-view” animations that would take place when particular elements were scrolled into view.

    I also integrated custom icon fonts, as well as utilized the “background-size:cover” method to create fully scalable images that would fill the space required automatically.

     

     

    Read More
  • Web Development; Custom WordPress Theme; Pretty Young Things

    web-development-custom-wordpress-theme-pretty-young-things

    Web Development; Custom WordPress Theme

    Client: Pretty Young Things

    Scope: Web Design, Layout, WordPress Theme Development, HTML/CSS(3), jQuery, PHP, AJAX

    View the site: http://pytnyc.com

    Project Details: Pretty Young Things is a site dedicated to the nightlife (and associated photography) of New York. I was approached by a long-time client to create a WordPress theme based on their design. They had some additional requests, such as an animated thumbnail on hover, and some lightbox functionality, as well as custom AJAX pagination.

     

     

    Read More
  • Web Development; Custom Flash Website; Karlee

    karlee-flash-site1

    Web Design & Development; Custom Flash Website

    Client: Karlee

    Scope: Web Design, Layout, Flash, Actionscript

    Project Details: Karlee “Feed Your Head” is a line of girls’ fashion accessories for the head/hair. They are unique designs consisting of natural elements such as feathers. My job was to create a website that reflected the visual style of the product, as well as provide a pleasing interface to users. This included a fancy loading animation utilizing elements from the logo (which I also designed), some interactive elements and a contact form.

    This was done when Flash was still being heavily utilized for animated site interfaces. Since that time, I would not recommend using Flash for a website. Unfortunately, the site is no longer operational.

     

     

    Read More
  • Web Development; Custom WordPress Theme; Fisher Talwar

    web-development-custom-wordpress-theme-fisher-talwar

    Web Design & Development; Custom WordPress Theme

    Client: Fisher Talwar

    Scope: Web Design, Layout, WordPress Theme Development, HTML/CSS(3), jQuery, PHP

    Project Details: I created this WordPress theme quite some time ago, as a project for a long-term client, for whom I did numerous WordPress themes (both design and development). The purpose of this particular theme was to serve as an information site for a Law Firm in Los Angeles, California.

    The development of this theme was relatively straightforward, and quick to accomplish. The primary components are all standard WordPress elements, and were therefore easily implemented. I did create a slideshow however, which was a bit different than the norm.

    Since the time of this theme’s creation, the firm has a new site/theme, so this is no longer available to the viewing public. However, I still have the files needed, and might activate a demo site at some point.

     

     

    Read More
  • Custom HTML/CSS/jQuery Website; SAG Harbor Advisors

    sag-harbor-html-website-development

    Web Development; Custom WordPress Theme; Mobile Responsive

    Client: SAG Harbor Advisors

    Scope: WordPress Theme Development, HTML/CSS(3), jQuery, PHP, Mobile Responsive CSS

    View the site: http://sagharboradvisors.com

    Project Details: Originally, I built this site as a static HTML page, based on the clients’ submitted design/layout. The current site is essentially the same layout, but it has been updated and converted into a WordPress theme that uses responsive CSS, making it mobile-friendly.

    The theme is setup to allow the client to easily make changes to various pieces of the content and linkage to resource materials.

     

     

    Read More