sarahvgomez.portfolio.web

Peach & Teal

Peach & Teal is a start up business in party planning and personalized favors. Their main market will be mainly online, where they want to be able to offer their packages as well as their consultation services. The main challenge of this project is to be able to design a simple yet elegant ecommerce site that offers a first introductory page with all of the necessary information regarding their company and what they do. This project was designed at every scale, from branding, logo, and color guidelines, to the wireframe, mock-ups, front-end markup to CMS platform development.

Single page Wordpress layout. Each section pulls a Wordpress page content.
SVG Animated Icons on hover. Each icon design moved/transformed differently.
Portfolio section pulls a different work on each page load. Showcasing the project.
PeachnTeal website design mockup

Technologies Used

Adobe Photoshop Icon Adobe Illustrator Icon Wordpress Icon JS Icon HTML5 Icon CSS3 Icon SaSS Icon

Technical Challenges

Client required a single page Wordpress design for their introductory website. This presented an interesting opportunity. The website required a diferent set up of Wordpress' famous The Loop, each separate page was to be retreived by Wordpress and displayed as a section on the main page.

        <?php the_field('news_box_title',6); ?>
        <?php 
        $query = new WP_Query( 'pagename=img-header');
        // The Loop
        if ( $query->have_posts() ) {
          while ( $query->have_posts() ) {
            $query->the_post();
            echo '<div class="entry-content">';
            the_content();
            echo '</div>';
          }
        }
        /* Restore original Post Data */
        wp_reset_postdata();
              ?>

<article id='basicmarkup'</article>

This website's markup follows a conventional landing page format, where typical separate pages are condensed into sections within one page.

#styles{display: block;}

Usage of CSS pseudo-elements allowed the incorporation of small details like the pink heart attached to the contact form, which is conveniently located on top of Alberta, where PeachnTeal is from.

var title = 'javascript rocks';

Because of the nature of single pages links (anchors), smooth scrolling was essential for the overall experience of this website.

<typography='NORDICA'>

PeachnTeal project typography - Nordica

<logo>

PeachnTeal logo

<color-palette>

PeachnTeal project color palette