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.
XR Lab at DICE
Jefferson Health

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
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 & Construction
Landing page for RED, a construction group specializing in corporate and residential development.
Fanatics Retail

Fanatics Retail
Front-end development for various major league sports retail sites including:
Kermit David Pannell - Front-end Developer
Download:
pdf | docSKILLS
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