About

Hi, thanks for visiting!

I am currently a front-end developer specializing in responsive design and accessibility standards, while focusing on writing semantic, sustainable code. I have an extensive design background which I still find myself utilizing frequently in the front-end development sphere. My skillsets range from design tools such as Adobe Creative Cloud, to front-end frameworks like Bootstrap 4 and Foundation 6, CMS intergration using Adobe Experience Mananger (AEM) and Wordpress, and current development coding standards with HTML 5, CSS 3, javascript (ES6) and jQuery. As with most developers, I am always looking to expand my development knowledge and take on projects that will support my growth and that of my colleagues.

When I'm not pushing pixels or cranking out code, I can be caught cycling, hockeying and doing general dad stuff.

Development

XR Lab at DICE

Jefferson Health

XR Lab at DICE

Jefferson Health

www.dicegrp.org/xr-lab.html

Front-end development for Jefferson Health's Sidney Kimmel Cancer Center website re-design. Responsible for features including responsive css, jQuery components, svg animation and CMS integration with AEM (Adobe Experience Manager).

Code Samples:

													
/* html (bootstrap) */


<div class="xr-home-section-c p-2">
    <!-- the pros -->
    <div class="row no-gutters mb-5 mt-5"><!-- start row -->
      <div class="col-12 col-md-12 col-lg-12 offset-0 text-center">
        <h2 class="text-uppercase">Exposing Clinicians to XR Tech</h2>
        <p>Providing guidance and hands-on experience and access to the latest Augmented and Virtual Reality systems. Our approach is to bring this technology and education to locations convenient to clinicians.</p>
      </div>
    </div><!-- end row -->
    <div class="row no-gutters xr-home-section-c-top mb-5"><!-- start row -->

      <div class="col-12 col-md-4 xr-support-items pr-2 pl-2">
        <div class="xr-mobile-lab-A-1 xr-event-section xr-background-image-rounded text-center mb-3 mb-md-5 d-flex align-items-center flex-column justify-content-center">
          <img src="/content/dam/dice/xr_lab/xrevent.svg">
          <h2 class="text-wht">XR Event</h2>
          <p class="text-wht">We believe understanding derives from experience. We can help you plan your XR event</p>
          <button class="text-wht xr-blue-button">Book</button>
        </div>
      </div>

      <div class="col-12 col-md-4 xr-support-items pr-2 pl-2">
        <div class="xr-mobile-lab-A-2 xr-event-section xr-background-image-rounded text-center mb-3 mb-md-5 d-flex align-items-center flex-column justify-content-center">
          <img src="/content/dam/dice/xr_lab/xrevent.svg">
          <h2 class="text-wht">XR Event Facilitation</h2>
          <p class="text-wht">Our team can help you create an XR event from start to finish.</p>
          <button class="text-wht xr-blue-button">Book</button>
        </div>
      </div>

      <div class="col-12 col-md-4 xr-support-items pr-2 pl-2">
        <div class="xr-mobile-lab-A-3 xr-event-section xr-background-image-rounded text-center mb-3 mb-md-5 d-flex align-items-center flex-column justify-content-center">
          <img src="/content/dam/dice/xr_lab/guestspeaker.svg">
          <h2 class="text-wht">Guest Speaker</h2>
          <p class="text-wht">Request one of our team members to be a guest speaker at your next event.</p>
          <button class="text-wht xr-blue-button">Book</button>
        </div>
      </div>
   
    </div><!-- end row -->
    
    <!-- the pros -->
    <div class="row no-gutters mb-5 mb-md-0"><!-- start row -->
      <div class="col-12 col-md-12 col-lg-12 offset-0 text-center">
        <h2 class="text-blk">Our Mobile Lab is Equipped With</h2>
      </div>
    </div><!-- end row -->

    <div class="row no-gutters"><!-- start row -->
      <!-- profile 1  -->
      <div class="col-12 col-md-4 text-center pr-2 pl-2">
        <div class="xr-mobile-profile pt-4 pb-4 d-flex align-items-center flex-column justify-content-center">
          <img src="/content/dam/dice/xr_lab/roomscale.svg">
          <h2 class="text-gray">Room-Scale VR Systems</h2>
          <p class="text-gray">HTC Vive<br>Oculus Rift</p>
        </div> 
      </div>
      <!-- profile 2  -->
      <div class="col-12 col-md-4 text-center pr-2 pl-2">
        <div class="xr-mobile-profile pt-4 pb-4 d-flex align-items-center flex-column justify-content-center">
          <img src="/content/dam/dice/xr_lab/standalone.svg">
          <h2 class="text-gray">Standalone VR Systems</h2>
          <p class="text-gray">OculusGo<br>Samsung Gear. (Mobile VR)</p>
        </div>
        
      </div>
      <!-- profile 3  -->
      <div class="col-12 col-md-4 text-center pr-2 pl-2">
        <div class="xr-mobile-profile pt-4 pb-4 d-flex align-items-center flex-column justify-content-center">
          <img src="/content/dam/dice/xr_lab/augmentedreality.svg">
          <h2 class="text-gray">Augmented Reality Systems</h2>
          <p class="text-gray">Magic Leap<br>Hololens</p>
        </div>
      </div>
    </div><!-- end row -->

    <div class="row no-gutters mb-5"><!-- start row -->
        <div class="col-12 xr-support-1 xr-event-section xr-background-image-rounded text-center mb-5 d-flex align-items-center flex-column justify-content-center">
          <h2 class="text-wht">Our next event is happening in May of 2019</h2>
          <p class="text-wht">Have questions? Curious about booking our Mobile Lab?</p>
          <button class="text-wht xr-blue-button">Book Us</button>
        </div>
    </div><!-- end row 



/* css */

h2, h3 {
      font-family: 'Lato';
    }
    h2 {
      font-size:28px;
      font-weight:800;
      color:#FCAF17;
    }
    h3 {
      font-size:16px;
      font-weight:800;
      margin: 10px 0px;
      color:#000;
    }

    p {
      font-family: Museo-Sans, sans-serif;
      font-size:16px;
      line-height:20px;
      margin: 10px 0px;
    }
    img {
      width:100%;
      height:auto;
    }
    ul {
      list-style: none;
      padding-left: 20px;
    }
    li {
      font-size:20px;
      font-weight:700;
      font-family: Museo-Sans, sans-serif;
    }
    li::before {
      content: "•"; color: #FCAF17;
      display: inline-block; width: 1em;
      margin-left: -1em;
      padding:8px 0;
    }
    button {
      -moz-border-radius: 30px;
      -webkit-border-radius: 30px;
      border-radius: 30px;
      background-color: transparent;
      font-size: 16px;
      padding:10px 0;
      margin:5px 5px;
      width:160px;
      height:auto;
      cursor:pointer;
    }
    .fixed {
      position: fixed!important;
      display: block;
      width:300px;
      height:400px;
      top:0;
      left:40px;

    }
    .btn-link, .btn-link:hover, .btn-link.focus, .btn-link:focus {
      font-size:20px;
      font-weight:500;
      text-decoration: none;
    }
    /*accordion*/
    #accordion .card .card-header h5 button {
      width: 100%;
    }
    #accordion .card .card-header {
      border-bottom: none;
      background-color:transparent;
    }
    #accordion .card {
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      border-radius: 0px;
    }
    #accordion .card-body {
      width:100%;
    }
    #accordion .card-body img {
      width:200px;
    }
    .accordion-arrow img {
      width:20px;
    }
    /* + - toggle */
    .card-header button:after {
      font-family: Museo-Sans, sans-serif;
      content: '\2716';
      float: right;
      color: #5AB5DD;
    }
    .card-header button.collapsed:after {
      /*content: '+'; */
      content: '\2716';
      transform: rotate(45deg);
    }
    /*end accordion*/
    button h4 {
      vertical-align: text-top;
    }
    button img {
      width: 40px;
    }
    button.xr-blue-button {
      border: 1px solid #5AB5DD;
    }
    button.xr-blue-button:active, button.xr-blue-button:hover {
      background-color: #5AB5DD;
    }
    button.xr-yellow-button {
      border: 1px solid #FCAF17;
    }
    button.xr-yellow-button:active, button.xr-yellow-button:hover {
      background-color: #FFF;
      color: #FCAF17;
    }
    hr.hr-blue {
      border-top: 1px solid #5AB5DD;
    }
    hr.hr-yellow {
      border-top: 1px solid #FCAF17;
    }
    h3.text-blue {
      font-size: 16px;
    }
    .text-blk {
      color:#000;
    }
    .text-wht {
      color:#FFF;
    }
    .text-blue {
      color:#5AB5DD;
    }
    .text-gray {
      color:#5A5A5A;
    }
    .text-pink {
      color:#FF00BA;
    }
    .text-yellow {
      color:#FCAF17;
    }
    .xr-home-section-a {
      background-color: #F7F9FA;
      padding:40px;
    }
    .xr-home-section-a-top {
      margin:0 0 20px 0;
    }
    .xr-home-section-b {
      background-color: #e6f1f6;
      padding:40px;
    }
    .xr-home-section-b h3 {
      text-transform: uppercase;
    }
    .xr-home-section-c {
      background-color: #F7F9FA;
    }
    .xr-event-section {
      background-repeat: no-repeat;
      padding:40px 10vw;
    }
    .xr-event-section img {
      width:100px;
    }
    .xr-support-1 {
      background-image: url('assets/1.0_home/bookus.jpg');
    }
    .xr-support-2 {
      background-image: url('assets/1.0_home/bookus.jpg');
    }
    .xr-background-image-rounded {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }
    .xr-support-list {
      overflow: auto;
      position: relative;
    }
    .xr-pro-profile, .xr-mobile-profile {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      border: 1px solid #C6C6C6;
      margin: 50px 0;
    }
    .xr-pro-profile img {
      width: 40%;
      top: -70px;
      position: relative;
    }
    .xr-pro-profile h2, .xr-pro-profile p {
      position: relative;
      top: -50px;
      text-transform: none;
    }
    .xr-mobile-profile img {
      width: 40%;
      position: relative;
    }
    .xr-mobile-profile h2, .xr-mobile-profile p {
      position: relative;
      text-transform: none;
    }
    .xr-pro-profile button {
      background-color: #FFF;
      position: relative;
      top: -3vw;
      margin:0;
    }
    .xr-pro-profile button:hover {
      color:#FFF;
    }
    .xr-pro-profile a {
      opacity:.5;
    }
    .xr-pro-profile a:hover {
      opacity:1;
    }
    img.xr-linked {
      width:22px;
    }
    .icon-right img {
      width:70%;
    }
    .icon-text-group-right {
      right: 3vw;
    }
    @media screen and (max-width:1200px) {
        .xr-pro-profile img {
            width: 40%;
            top: -58px;
        }
        .xr-pro-profile h2, .xr-pro-profile p {
            top: -40px;
        }
        .xr-pro-profile button {
            top: -30px;
        }
        img.xr-linked {
            width:22px;
        }
    }
    @media screen and (max-width:992px) {
      button {
            padding: 8px 0;
            width: 120px;
      	}
        .xr-pro-profile h2 {
            font-size: 18px;
            margin-bottom: 0;
        }
        .xr-pro-profile p {
            font-size: 12px;
            margin: 0;
        }
    }
    @media screen and (max-width:768px) {
        .icon-text-group-right {
          right: 0;
        }
        .xr-support-1 {
          background-image: url('assets/1.0_home/bookus@2x.jpg');
        }
        .xr-support-2 {
          background-image: url('assets/1.0_home/bookus@2x.jpg');
        } 
        .xr-support-items {
          order: 0;
        }
        .xr-support-list {
          order: 1;
        }
        .xr-support-list h2 {
          text-align: center;
        }
    }

//  jQuery  //


  $(window).scroll(function(){
    var sticky = $('.xr-support-list'),
    scroll = $(window).scrollTop();

  if (scroll >= 20 && scroll <= 300) 
    sticky.addClass('fixed');
    else sticky.removeClass('fixed');
  });

Sidney Kimmel Cancer Center

Jefferson Health

Sidney Kimmel Cancer Center

Jefferson Health

www.sidneykimmelcancercenter.jeffersonhealth.org

Code Samples:

													
/* css */

@media screen and (max-width:768px) {
    .cmp-skcc-hero .skcc-hero.animate .hero-heading, .cmp-skcc-hero .skcc-hero.no-animate .hero-heading {
        top: 57vw;
    }
    .cmp-skcc-hero .hero-heading {
        bottom: -65px;
        width: 90%;
    }
    .cmp-skcc-hero .skcc-hero, .cmp-skcc-hero .skcc-hero.no-animate {
        -webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0 80%);
        clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
        height: 92vw;
        background-position-y: top;
    }
    .cmp-skcc-hero .skcc-hero .hero-overlay, .cmp-skcc-hero .skcc-hero.no-animate .hero-overlay {
        opacity: 0.5;
        background-color: #E4E0E1;
        -webkit-clip-path: polygon(50vw 100%, 100% 50%, 100% 100%, 0 100%, 0 50%, 50vw 100%);
        clip-path: polygon(50vw 100%, 100% 50%, 100% 100%, 0 100%, 0 50%, 50vw 100%);
        height: 100%;
    }
    .cmp-skcc-hero .icon-360 {
        width: 20%;
        top: 30px;
        left: -1px;
    }
    .cmp-skcc-hero .hero-svg {
        display:none;
    }    
    .cmp-skcc-hero #skcc-typeahead-form {
        margin: 0 auto;
        position: absolute;
        width: 70%;
        top:70vw;
        left:0;
        right: 0;
        z-index:0;
    }
    .cmp-skcc-hero #skcc-typeahead-form {
        margin-top: 10px;
    }
    .cmp-skcc-hero .hero-heading-container h1 {
        font-size: 5.4vw;
    }
    .cmp-skcc-hero .hero-heading-container h2,
    .cmp-skcc-hero .hero-heading-container h3 {
        font-size: 5vw;
    } 
    .cmp-skcc-hero .hero-banner p {
        font-size: 14vw;
        line-height: 9vw;
    }
    .cmp-skcc-hero .hero-banner span{
        font-size: 6.5vw;
    }
    .pagehero {
        max-height: none;
        height: auto;
        margin-bottom:0;
    }
    .cmp-skcc-hero, .skcc-hero {
        max-height: none;
    }
}
/* IE 11+ */
@media all and (-ms-high-contrast: none) and (max-width: 768px)   {
    .cmp-skcc-hero .hero-IE img {
       top: 80%;
    }
}
@media all and (-ms-high-contrast: none) and (max-width: 600px)   {
    .cmp-skcc-hero .hero-IE img {
       height: 29vw;
       width: 100%;
       position: absolute;
       top: 80%;
    }
}
/* End IE 11+ */
@media screen and (max-width:500px) and (min-height: 850px) { 
    .cmp-skcc-icon-menu .icon-360 {
        margin: 30px auto 0 auto;
    }
}

@media screen and (max-width:500px) {
    .cmp-skcc-hero .hero-heading-container.searchbar {
        padding: 30px 20px 125px 20px;
    }   
    .cmp-skcc-hero .hero-heading-container {
        padding: 30px 20px 125px 20px;
        border-radius: 55px 55px 0 0;
    }
    .cmp-skcc-hero #skcc-typeahead-form .typeahead__container .typeahead__field .typeahead__hint, 
    .cmp-skcc-hero #skcc-typeahead-form .typeahead__container .typeahead__field .typeahead__label-container, 
    .cmp-skcc-hero #skcc-typeahead-form .typeahead__container .typeahead__field [contenteditable], 
    .cmp-skcc-hero #skcc-typeahead-form .typeahead__container .typeahead__field input, 
    .cmp-skcc-hero #skcc-typeahead-form .typeahead__container .typeahead__field textarea {
        padding-right: 5px;
    }
    .cmp-skcc-hero #skcc-typeahead-form button {
        width: 45px;
    }
}
@media screen and (max-width:480px) {
    .cmp-skcc-hero .skcc-hero, .cmp-skcc-hero .skcc-hero.no-animate {
        height: 94vw;
    } 
    .cmp-skcc-hero .hero-heading-container {
        top: 0px;
    }
    .cmp-skcc-hero .hero-banner {
        top: 32%;
    }
}
@media all and (-ms-high-contrast: none) and (max-width: 400px)   {
    .cmp-skcc-hero .typeahead__container .typeahead__field input, .cmp-skcc-hero .typeahead__container .typeahead__field button {
        height: 34px;
        padding: 5px;
    }
}
@media screen and (max-width:400px) {
    .cmp-skcc-hero .typeahead__container .typeahead__field input, .cmp-skcc-hero .typeahead__container .typeahead__field button {
        height: 34px;
        padding: 5px;
    }

    .cmp-skcc-hero .typeahead__cancel-button {
        padding: 0 10px;
    }
    .cmp-skcc-hero .typeahead__container .typeahead__field .typeahead__search-icon {
        font-size: 20px;
    }
}
@media all and (-ms-high-contrast: none) and (max-width: 360px)   {
    .cmp-skcc-hero .hero-IE img {
       height: 29vw;
       width: 100%;
       position: absolute;
       top: 82%;
    }
}

//  jQuery  //

stat ticker loop thru infinite list

// set initial i value
var i = 1;

// Get number of stat items on the page
var length = $('.stat-item').length;

// Check if more than 1 stat item is on the page
if (length > 1) {
    // Start 3000ms intervals
    setInterval(function() {
        if (i>length){
            $('.stat-item.active').removeClass('active').hide();
            $('.stat-item:first').addClass('active').css("display","flex").hide().fadeIn(1000);
            i = 1;
        }
        else {
            $('.stat-item.active').removeClass('active').hide().next().addClass('active').css("display","flex").hide().fadeIn(1000);
        }
        i++;
    }, 3000);
}

RED

General Contracting & Construction

Red - General Contracting and Construction screen shot

RED

General Contracting & Construction

www.redgcc.com

Landing page for RED, a construction group specializing in corporate and residential development.

Fanatics Retail

Front-end development for various major league sports retail sites including:

Design

Cucina Zapata Foods

Bicycle Therapy - 25th kit

Cookie Confidential

Coupe Customs

Spinnaker Search

Kill Clothing Brand

RED Construction

Threat Level

'Deadpool' Specialized Tarmac

Resume

Kermit David Pannell - Front-end Developer

Download:

pdf | doc

SKILLS

Proficient in HTML 5, CSS 3, JavaScript (ES6), jQuery, Foundation 6 and Bootstrap 4 front-end frameworks, git, Adobe Creative Cloud and related front-end web development technologies. Focusing on best practices such as responsive design and accessibility standards, with several years of experience in agile development.

EMPLOYMENT HISTORY

Jefferson Health - Philadelphia, PA (Front-end Developer | 2018 - current)

Part of the Jefferson Health Digital Innovation & Consumer Experience group, (DICE). Responsible for front-end development tasks including the Sydney Kimmel Cancer Center website redesign using current development coding standards, front-end frameworks such as Bootstrap 4 and content management via AEM (Adobe Experience Manager). Created peer-informational course series highlighting accessibility compliance for web design. Initiation of on-boarding mentoring efforts to improve and encourage new employee acclimation, engagement and growth.

Fanatics - Conshohocken, PA (Front-end Developer | 2014 - 2018)

Responsible for front-end development tasks in a fast-paced and ever-changing sports retail domain. Worked as part of the development team for major e-commerce clients such as: NFL shop, NBA store, NHL and MLB shop. Frequent collaboration with designers and business leads to support an enhanced online shopping experience. Supported the migration of dozens of websites to a new responsive platform, helping to serve more potential customers and increase overall profit margin.

Leadnomics - Philadelphia, PA (Graphic Design/Web Developer | 2014)

Responsible for the creation of info-graphics, web-based advertisements, branding conceptualization and standardization, with a digital-marketing agency focused on target-market research and brand development.

IBM - Philadelphia, PA (Web Developer | 2009 - 2013)

Responsibilities within the collateral management product division ranging from front-end development and UI/UX design, to maintaining client branding standards. Also involved in the creation of graphical process models to visually convey application semantics such as: user interaction, functionality, security protocol, etc.

Performance Development Group - Malvern, PA (User Interface Designer | 2008 - 2009)

Responsible for interactive design and authoring for various e-learning platforms, focusing on the development of intelligent and intuitive UI to better serve client training goals.

Boyd Tamney Cross Advertising - Wayne, PA (Web Designer | 2007 - 2008)

Web development and UI design in a fast-paced, demanding agency environment. Specializing in client brand management, cost-effective marketing and rapid product delivery.

Soft Assist - King Of Prussia, PA (User Interface Designer | 2002 - 2004)

User interface design and development of e-learning applications utilizing various design tools ranging from creative suite, to 3D design. Maintenance of branding standards for clients including: Black & Decker, Home Depot, Exelon Energy and University of Pennsylvania Health Systems.

EDUCATION

Art Institute of Philadelphia - Philadelphia, PA

Associate Degree in Specialized Technology

Course Training

Codecademy, Lynda, Pluralsight and Udemy course completion in various front-end development related competencies

EXTRACURRICULAR/INITIATIVES

Code4PA Code-a-thon - Team participation creating technology solutions to combat the opioid epidemic

Web Accessibility standards and practices presentation series

Onboarding buddy system and peer-mentoring initiatives

Ed Snider Youth Hockey Organization volunteer work

Contact

Kermit David Pannell

215.317.0645

kermit76@gmail.com