Resume

Crystal Smith: Front-End & WordPress Developer

I'm a web developer and designer with 10 years' professional experience in web design and development, and 6 years' experience developing custom themes for WordPress. I'm currently available for contract, sub-contract, or in-house positions.

Email: crystal@createscape.ca

Portfolio: www.createscape.ca

Skills

Development

  • HTML5
  • CSS3
  • LESS CSS preprocessor
  • Responsive Web Development
  • Twitter Bootstrap 3 & 4
  • Bulma CSS Framework
  • PHP: Beginner/Intermediate
  • JavaScript: Beginner Level
  • phpMyAdmin
  • cPanel
  • DNS
  • Cross Browser Testing
  • Mobile Device Testing

Apps

  • Photoshop CC
  • Illustrator CC
  • Google Analytics
  • Google Search Console
  • Wondershare Filmora
  • Microsoft Office
  • Mailchimp
  • Filezilla
  • SourceTree
  • Desktop Server, XAMPP, WAMP
  • Slack
  • LastPass
  • Bitwarden

WordPress

  • WordPress theme development
  • WordPress administration
  • WordPress hosting migrations
  • WordPress multisite
  • WordPress security
  • WordPress bug fixing / troubleshooting
  • CiviCRM in a WordPress environment
  • WooCommerce
  • Advanced Custom Fields
  • Custom customizer fields
  • Custom post types / post type archives
  • Contact Form 7, Gravity Forms

More

  • SEO
  • Business development
  • Project management
  • Design skills & training
  • Logo design
  • Business cards

Work Experience

Createscape Design Studio, Victoria, B.C.

Freelancer / Owner / Designer / Front-end developer

January 2013 - Present

Web Design and Responsive WordPress Theme Development
Web Design and Responsive WordPress Theme Development for Farm to School BC.

I started my business in 2013. Since then I've built and managed many new client websites using WordPress with either custom designed and built themes or child themes. For new websites I've managed all aspects of the project from the project proposal, wireframing, design, and development using HTML, CSS, PHP, jQuery and WordPress. I also provide maintenance services and can fix almost any kind of WordPress bug.

Sample Projects:

Hipwood Digital, Victoria, B.C.

Designer & Front-end developer (subcontract)

July - September 2013

Web Design and Responsive WordPress Theme Development for Adamek Financial
Web Design and Responsive WordPress Theme Development for Adamek Financial

I worked with Hipwood briefly in 3013 while my business was still gaining traction. They are mainly an app development company but needed someone with front-end and WordPress skills to build websites for some of their existing clients.

Sample Project: Adamek Financial - Link courtesy of the Wayback Machine.

(This was a challenging site to build as a responsive website. The owner of the business requested this style of design that looked like a desk with papers etc on it. At the time, I was keen to learn how to use CSS frameworks, but this was probably the worst project to try it on due to the organic layout.)

Radar Hill Technology Inc., Victoria, B.C.

Graphic Designer & Front-end developer

May 2010 - December 2012

Responsive Website Design for Marram Wines
Design and Responsive Web Development for Marram Wines

When I worked for Radar Hill I was involved in all aspects of the design and development process of numerous new websites, as well as maintenance of a broad range of new and retro websites from their client base of around 500 small businesses and real estate agents. I helped the development team transition to HTML5 and responsive design during that time.

Radar Hill uses their own proprietary content management system and many of the website I built were done using their CMS system.

Sample Projects:
  • Marram Wines: Design & Responsive front-end development
  • Cheryl's Gourmet Pantry: Web design and development
  • Penninsula Gallery - Design and front-end development. Link courtesy of the wayback machine.
  • Smoken Bones - Web design and development. This was the first responsive website I built. Link courtesy of the wayback machine. (Business Closed)

A portfolio of my older work from Hipwood Digital, Radar Hill, and some other freelance gigs can be found here: Older Work

Education

University of Victoria

January 2013 - April 2013

Completed Courses:

  • Intro to Anthropology
  • Intro to Environmental Studies
  • Environment, Society, and Sustainability

Lynda.com

I've completed the following Lynda.com courses to learn new design and development skills:

  • CSS with LESS and Sass - November 2013
  • JavaScript Essential Training(2011) - November, 2013
  • Up and Running with Bootstrap 3 - October, 2013
  • Up and Running with Adobe Creative Cloud - April, 2013
  • Joomla! 1.5 Essential Training - May, 2009

Social Media Camp - Victoria, B.C.

October 2010

This was a 1 day conference dedicated to social media. I attended the following topics:

  • Community Engagement
  • Klout
  • Social Media, Spirituality and Religion
  • Social Media and Non-Profits
  • The Future of Media

Web Design Certificate Program, Camosun College, Victoria, B.C.

September 2007 - December 2008

CSS Zen Garden
One of our projects was to tackle the CSS Zen Garden. My project's style was based on the Studio Ghibli Film, Castle in the Sky.

This was a 1.5 year, part time program with classes in the evenings and on the weekend.

  • Dreamweaver Level 1
  • Fireworks Level 1
  • User Interface Design / Writing for the Web
  • Practical Web Design
  • CSS & Web Servers
  • Graphic Design for the Web
  • Photoshop Level 1 and 2 for the Web
  • Illustrator Level 1
  • Flash 8.0 Level 1
  • Audio and Video for Web Designers
  • Project Management and E-Commerce

Vancouver Island University (was Malaspina University-College), Nanaimo, B.C.

Visual Arts Diploma Program (first year completed)

January, 2003 - December, 2004

A reproduction of an impressionist painting in oil and acrylic
A reproduction of an impressionist painting in oil and acrylic.

I was awarded a place on the Dean's Honour List for my 2003/2004 year at Malaspina University-College.

First Year:

  • English 111 and 112
  • History of Western Art I and II
  • Drawing 101 and 102
  • Two-Dimensional Design
  • Three-Dimensional Design
  • Introduction to Global Studies
  • Introduction to Writing Fiction

Second Year

  • Photography I
  • Fundamentals of Painting I

Code Samples

CSS

Hiding a Bootstrap Button after it's clicked:


  <button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>

.hide-me[aria-expanded="true"] {display: none;}

Clearing a float.


  /*Parent Element*/
  .card {
    margin-bottom: 2rem;
    color: #14587A;
    overflow: auto;
  }

A sticky positioned element:


  .parent-element {
    position: relative;
  }

  .sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }

Some fancy quote styles, in use on the footer of LakeShrine.org.


<blockquote>
    <p>
      <b class="fancy-quote left">“</b>
        My Fancy Quote
      <b class="fancy-quote right">”</b>
    </p>
<footer>
  Quote Author
</footer>
</blockquote>


  #quote blockquote {
    border-left: none;
    font-style: italic;
    font-size: 19px;
    text-align: center;
    padding: 19px 20px 0 25px;
    position: relative;
    max-width: 860px;
    margin: 0;
}
.fancy-quote {
  font-family: Georgia,Times,Times New Roman,serif;
  font-size: 48px;
  font-weight: normal;
  position: relative;
  line-height: .4em;
}
  .fancy-quote.right {
    top: 13px;
    right: -20px;
    height: 1ex;
}
  .fancy-quote.left {
    top: 13px;
    left: -25px;
}


LESS

I use LESS most often for colour names because hex values are frustrating. This sample is from lakeshrine.org where they have several different colour schemes in use on different pages.


/*Mixins*/

.box-shadow {
  box-shadow: 0px 3px 18px #aaa;
}

.box-shadow-none {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/*Colour Variables*/
@jade:  #44785c;
@jadelite: #739d86;
@darkblue: #184a82;
@goldlite: #e9c78c;
@golddark: #d2ab67;
@goldtext: #6b4402;
@goldheadertext: #cb9434;
@aqualite: #4a9bc0;
@aqua: #3285ab;
@blue: #497eb7;
@darkblue: #2d6097;
@green: #8ba76d;
@darkgreen: #67804d;
@brown: #b7a88d;
@darkbrown: #a59476;
@browntext: #8a7653;
@stone: #7aa7a7;
@darkstone: #639696;

For this single page website for Bloodhound Home Inspectors, I separated each content section into its own LESS file because the stylesheet was getting so long it was difficult to find anything.


  @import "/less/default.less";
  @import "/less/nav.less";
  @import "/less/background.less";
  @import "/less/best.less";
  @import "/less/why.less";
  @import "/less/options.less";
  @import "/less/how.less";
  @import "/less/inspector.less";
  @import "/less/mack.less";
  @import "/less/contact.less";


PHP

A Custom WordPress loop - I know random posts are normally frowned upon for performance reasons but for this one it is only returning a single custom field for each post. See it working here: http://www.tellywise.tv


    $args = array('cat'=>19, 'orderby'=>'rand', 'posts_per_page' => '200');
      $customPosts = new WP_Query($args);
      while($customPosts->have_posts()) : $customPosts->the_post();
      $videoList123 = " '". get_field('youtube_id') . "',";
      echo $videoList123;
      endwhile;
      wp_reset_postdata();

Adding a randomized CSS class to a container. This is in use on Seaview Beach Resort for the background images. Refreshing the page gives a different background image.



  function random($max){
  $random = rand(1, $max);
  $bgClass = "bg-watermark-".$random;
  return $bgClass;
  }
  

  <div class="container<?php echo random(4); ?>" id="main">


  

jQuery

I started working on a re-design for my website using WordPress and Bulma.css. My old forms were in Contact Form 7 so I started adding the CSS classes used in Bulma to the CF7 form fields.


  //Add Bulma.css classes and divs to Contact Form 7 Forms

  jQuery(document).ready(function() {
    //add classes
     jQuery(".wpcf7-text").addClass("input");
     jQuery(".wpcf7-textarea").addClass("textarea");
     jQuery(".wpcf7-submit").addClass("button");

  //wrap elements in divs
     jQuery( ".wpcf7-text, .wpcf7-textarea, .wpcf7-submit" ).wrap( "<div class='control'></div>" );
     jQuery( ".wpcf7-form select" ).wrap( "<div class='select'></div>" );
     jQuery( ".wpcf7-radio .wpcf7-list-item-label" ).wrap( "<label class='radio'></label>" );
     jQuery( ".wpcf7-checkbox .wpcf7-list-item-label" ).wrap( "<label class='checkbox'></label>" );
  });

}

JavaScript

I'm currently participating in the Light House Labs 21 day JavaScript coding challenge. Below is my completed day #5 project:


  const stations = [
        ['Big Bear Donair', 10, 'restaurant'],
        ['Bright Lights Elementary', 50, 'school'],
        ['Moose Mountain Community Centre', 45, 'community centre']
      ];

  const chooseStations = (stations) => {
        const finalStations = [];
        for (const station of stations) {

            let stationCapacity = station[1];
            let stationType = station[2];

            if (stationCapacity >= 20 ) {

              if((stationType == 'school') || (stationType =='community centre')) {

                  finalStations.push(station[0]);
              }


            }
      }
      return finalStations;
  }

  console.log(chooseStations(stations));