kermit pannell website logo

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, 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 collegues.

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

XR Lab at DICE

Jefferson Health
XR Lab at Dice

XR Lab at DICE

Jefferson Health

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).


													
/* 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 screen shot

Sidney Kimmel Cancer Center

Jefferson Health

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).


													
/* 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

kit bag fanatics retail

Fanatics Retail

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


Cucina Zapata Foods logo
Coupe Customs logo
Cookie Confidential logo
Bicycle Therapy kit logo
Spinnaker Search LLC logo
Kill Clothing Brand logo
RED contracting and construction logo
Threat Level logo
Specialized Tarmac Marvel Deadpool Custom

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

Kermit David Pannell

215.317.0645

215.317.0645

kermit76@gmail.com