Hi, I'm Betsy Dupuis.

hi-i-m-betsy-dupuis.markdown

Hi, I'm Betsy Dupuis.

My portfolio.

A Pen by Betsy on CodePen.

License.

index.pug

meta(name="viewport")(content="width=device-width)(initial-scale=1.0")
.container
  article.row.center-contents-y
    .col-xs-12.col-md-9.col-md-offset-3.center-y
      h6.text-normal.text-scale-down-xs
         span.font-display.text-scale-5.text-bold Hello, I'm <br>
         span.font-script.text-scale-8.text-color-primary.margin-bottom-0.v-align-middle Betsy Dupuis
         span.text-scale-8 .
         br.visible-xs.visible-sm
         span.text-scale-4  I live in Austin, Tx.
      h6.font-display.text-light.margin-bottom-inset-third.text-scale-down-xs
         span.text-scale-4 I design & develop for the web.
      .btn-group.text-scale-down-xs
        a.btn-link.text-scale-4.icon-arrow-down(href="#work-starts-here")(target="_blank") See my work
        a.btn-link.text-scale-4.icon-arrow-right(href="https://www.linkedin.com/in/dupuisbetsy")(target="_blank") See my résumé

   summary.row#work-starts-here
      .col-sm-5
          h3.font-display.text-bold Message Center
          h4 Client: 
             a(href="http://estatesales.org/") EstateSales.org
          h5 The Challenge
          p My team was responsible for designing and coding responsive HTML emails for HomeAway – and on a fast deadline. Making an email in HTML poses many challenges not faced in standard web development.
          p Existing frameworks did not meet the needs or standards of HomeAway.
          h5 The Solution
          p Learning from my experiences with Twitter Bootstrap, I designed and developed a Framework capable empowering developers to code better emails in signifigantly less time.
          h6
          .label-group          
            span.label.label-ux 
            span.label.label-design    
     summary.row
      .col-sm-5
          h3.font-display.text-bold CSS Framework for Rapid HTML Email Development
          h4 Client: 
             a(href="http://www.homeaway.com") HomeAway
          h5 The Challenge
          p My team was responsible for designing and coding responsive HTML emails for HomeAway – and on a fast deadline. Making an email in HTML poses many challenges not faced in standard web development.
          p Existing frameworks did not meet the needs or standards of HomeAway.
          h5 The Solution
          p Learning from my experiences with Twitter Bootstrap, I designed and developed a Framework capable empowering developers to code better emails in signifigantly less time.
          h6
          .label-group
            span.label.label-default.label-html-email
            span.label.label-js
            span.label.label-less            
            span.label.label-ux 
            span.label.label-design
  summary.row
    .col-sm-5.pull-right
        h3.font-display.text-bold Expanded Distribution Network<span class="visible-md">&nbsp;</span>Campaign
        h4 Client: 
           a(href="http://www.homeaway.com") HomeAway
        h5 The Challenge           
        p HomeAway has partnered with Expedia.com and other travel sites to distribute HomeAway vacation rental listings across a new network of sites.
        h5 The Solution
        p To share this news with homeowners listing on HomeAway, in collaboration with the marketing team and copywriters we developed an email campaign.
        h6
        .label-group
         
          span.label.label-ux
          span.label.label-design
          span.label.label-html-email
          span.label.label-css
          span.label.label-default.label-html
          span.label.label-php
    .col-sm-7
      
        a(href="#").thumbnail-group
          img(src="https://s3.amazonaws.com/bdcom/images/edn-email.png")(style="max-width:264px;").image-shadow
          button.btn.btn-primary.display-block See the email
        a(href="#").thumbnail-group 
          img(src="https://s3.amazonaws.com/bdcom/images/edn-web.png")(style="max-width:456px;").image-shadow.image-behind.hidden-xs.hidden-sm
          img(src="https://s3.amazonaws.com/bdcom/images/edn-web.png")(style="max-width:456px;").image-shadow.visible-xs.visible-sm
          
          
          button.btn.btn-primary.display-block See the site
  summary.row(style="display:none")
    .col-xs-12
      .label-group
        span.label.label-default.label-html
        span.label.label-css
        span.label.label-js
        span.label.label-less
        span.label.label-design
        span.label.label-ux
        span.label.label-php            
.footer.text-white.text-right
  .container-fluid
    .row
      .col-xs-12.icon-group
        a(href="https://codepen.io/itsjustluck/")(target="_blank").fa.fa-codepen.text-scale-3.margin-bottom-0
        a(href="https://www.linkedin.com/in/dupuisbetsy")(target="_blank").fa.fa-linkedin.text-scale-3.margin-bottom-0
        a(href="https://dribbble.com/betsydupuis")(target="_blank").fa.fa-dribbble.text-scale-3.margin-bottom-0
        

script.js

var smoothScroll = function(el) {
  $(el).click(function(e) {
    var hrefDestination = $(this).attr("href");
    $('html,body').animate({
      scrollTop: $(hrefDestination).offset().top - '48'
    }, 500);
    e.preventDefault();
  });
};

smoothScroll('a[href^="#"]');

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

// Bootstrap imported for base styles

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
// Font Families
$font-family-source-serif: 'https://s3.amazonaws.com/bdcom/webfonts/aleo/';
$font-family-source-script: 'https://s3.amazonaws.com/bdcom/webfonts/begining-yoga/';
$font-family-source-serif-light: #{$font-family-source-serif}#{'light/'};
$font-family-source-serif-bold: #{$font-family-source-serif}#{'begining-yoga/'};

@font-face {
    font-family: 'aleo';
  src: url('#{$font-family-source-serif-light}Aleo-Light-webfont.eot');
    src: url('#{$font-family-source-serif-light}Aleo-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('#{$font-family-source-serif-light}Aleo-Light-webfont.woff') format('woff'),
         url('#{$font-family-source-serif-light}Aleo-Light-webfont.ttf') format('truetype'),
         url('#{$font-family-source-serif-light}Aleo-Light-webfont.svg#aleolight') format('svg');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'aleobold';
    src: url('#{$font-family-source-serif-bold}Aleo-Bold-webfont.eot');
    src: url('#{$font-family-source-serif-bold}Aleo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('#{$font-family-source-serif-bold}Aleo-Bold-webfont.woff') format('woff'),
         url('#{$font-family-source-serif-bold}Aleo-Bold-webfont.ttf') format('truetype'),
         url('#{$font-family-source-serif-bold}Aleo-Bold-webfont.svg#aleobold') format('svg');
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: 'beginning-yoga';
    src: url('#{$font-family-source-script}beginning_yoga-webfont.eot');
    src: url('#{$font-family-source-script}beginning_yoga-webfont.eot?#iefix') format('embedded-opentype'),
         url('#{$font-family-source-script}beginning_yoga-webfont.woff2') format('woff2'),
         url('#{$font-family-source-script}beginning_yoga-webfont.woff') format('woff'),
         url('#{$font-family-source-script}beginning_yoga-webfont.ttf') format('truetype'),
         url('#{$font-family-source-script}beginning_yoga-webfont.svg#beginning_yogaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

// Typography
$scale-1: 1; // 1.6
$scale-2: 18 / 16; // 1.125
$scale-3: 21 / 16; // 1.3125
$scale-3-5: 24 / 16; // 1.3125
$scale-4: 30 / 16; // 1.875
$scale-5: 36 / 16; // 2.25
$scale-6: 48 / 16; // 3
$scale-7: 64 / 16; // 3
$scale-8: 72 / 16; // 3
$font-size-base: 16/10;

html {
  font-size: 100%;
}

body{
  font-family: 'Source Sans Pro', "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
  font-size: $scale-1 + rem;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 24px;
}
h1, h2, h3, h4, h6 {
  margin-top: 0; // Override Bootstrap
}
h1 {
    font-size:$scale-6 + rem; // 3rem
    line-height:(48 / 48) + em; // 1rem
    margin-bottom:(24 / 48) + em; //.5rem
}

h2 {
    font-size:$scale-5 + rem; // 2.25rem
    line-height:(48 / 36) + em; // 1.333333333333333rem
    margin-bottom:(24 / 36) + em; //.6666666666666667rem
}

h3 {
    font-size:$scale-4 + rem; // 1.5rem
    line-height:(24 / 24) + em; // 1rem
    margin-bottom:(24 / 24) + em; // 1rem
}

h4 {
    font-size:$scale-3 + rem; // 1.3125rem
    line-height:(24 / 21) + em; // 1.142857142857143rem
    margin-bottom:(24 / 21) + em; //1.142857142857143rem
}

h5 {
    font-size:$scale-2 + rem; // 1.125rem
    font-weight: bold;
    line-height:(24 / 18) + em; // 1.333333333333333rem
    margin-bottom:(24 / 16) + em; //1.333333333333333rem
}
h6 {
  font-weight: bold;
}
h6, p {
    font-size:$scale-1 + rem; // 1rem
    line-height:(24 / 16) + em; // 1.5rem
    margin-bottom:(24 / 16) + em; // 1.5rem
}

// Components
.btn-group {
  > .btn-link {
    display: inline-block;
    margin-right: 24px;
  }
}

a, a:visited, .btn-link {
  color: #ff5400;
  font-weight: 700;
  &:active, &:focus, &:hover{
    color: #ff8d04;
    text-decoration: none;
  }
}
.icon-arrow-right:after{
 content: " →";
 vertical-align: middle;
}
.icon-arrow-down:after{
 content: " ↓";
 vertical-align: middle;
}
summary{
  margin-bottom: 48px;
}
.footer{
  background: #ff5400;
  color: #fff;
  min-height:12px;
  margin-top: 24px;
  position:  fixed;
  z-index: 999;
  bottom: 0;
  width: 100%;
  padding: 6px 12px;
  a, a:visited, .btn-link {
    color: #fff;
    &:active, &:focus, &:hover{
      color: #fff;
      text-decoration: none;
    }
  }  
}

// Tags
$red: #db1700;
$blue: #35a5d0;
$yellow: #ffb70b;
$purple: #7e4784;
$green: #b7d42b;

.label-group{
  > .label{
    margin-right: 6px;
  }
}
.label {
  border-radius: 0;
  background-color: transparent;
  color: #000;
  border-style: solid;
  border-width: 4px;
  display: inline-block;
  font-size: $scale-2 * 1rem;
  margin-bottom: ($scale-1 + 1rem)/4;
  &:empty{
    display: inline-block;
  }
}
.label-design {
  color: $purple;
  &:before {
    content: 'Design';
  }
}
.label-ux {
  color: $green;
  &:before {
    content: 'UX';
  }
}
.label-html {
  color: $red;
  &:before {
    content: 'HTML';
  }
}
.label-css {
  color: $blue;
  &:before {
    content: 'CSS';
  }
}
.label-less {
  color: $blue;
  &:before {
    content: 'Less CSS';
  }
}
.label-php {
  color: $purple;
  &:before {
    content: 'PHP Templating';
  }
}
.label-responsive {
  color: $red;
  &:before {
    content: 'Responsive';
  }
}
.label-html-email {
  color: $red;
  &:before {
    content: 'HTML Email';
  }
}

.label-js, .label-javascript {
  color: $yellow;
  &:before {
    content: 'JavaScript';
  }  
}
.icon-group {
  > .fa {
    padding-left: 12px;
    &:first-child {
      padding-left: 0;
    }
  }
}
.thumbnail-group {
  display: inline-block;
  vertical-align: top;
  .btn {
    display: block;
    margin: 1rem auto;
  }
}
.image-behind {   
  margin-left: -100px;
  position:relative;
  z-index:-10;
}
.image-shadow {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2), 4px 4px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
}
// Helpers - Typogrpahy
.text-normal {
  font-weight: normal;
}
.text-light {
  font-weight: 300;
}
.font-display {
  font-family: "aleo";
  font-weight: 300;
  &.text-bold, b{
    font-weight: 700;
  }
}

.font-script {
  font-family: 'beginning-yoga';
}

// Helpers - Typography
.margin-bottom-0{
  margin-bottom: 0 !important;
}
.margin-bottom-inset-third{
  margin-top: (24/72) * -1em !important;
}
.v-align-middle {
  vertical-align: middle;
}


.text-scale-8 {
    font-size:$scale-8 + em; // 3rem
    line-height:(72 / 72) + em; // 1rem
    margin-bottom:(24 / 48) + em; //.5rem
}
.text-scale-6 {
    font-size:$scale-6 + em; // 3rem
    line-height:(48 / 48) + em; // 1rem
    margin-bottom:(24 / 48) + em; //.5rem
}

.text-scale-5 {
    font-size:$scale-5 + em; // 2.25rem
    line-height:(48 / 36) + em; // 1.333333333333333rem
    margin-bottom:(24 / 36) + em; //.6666666666666667rem
}

.text-scale-4 {
    font-size:$scale-4 + em; // 1.5rem
    line-height:(24 / 24) + em; // 1rem
    margin-bottom:(24 / 24) + em; // 1rem
}

.text-scale-3 {
    font-size:$scale-3 + em; // 1.3125rem
    line-height:(24 / 21) + em; // 1.142857142857143rem
    margin-bottom:(24 / 21) + em; //1.142857142857143rem
}

.text-scale-2 {
    font-size:$scale-2 + em; // 1.125rem
    line-height:(24 / 18) + em; // 1.333333333333333rem
    margin-bottom:(24 / 18) + em; //1.333333333333333rem
}

.text-scale-1{
    font-size:$scale-1 + rem; // 1rem
    line-height:(24 / 16) + em; // 1.5rem
    margin-bottom:(24 / 16) + em; // 1.5rem
}
.text-color-primary{
  color: #ff5400 !important;
}
.center-contents-y {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding-bottom: 24px;
      .center-y {
        margin-top: auto;
        margin-bottom: auto;
      }
}
// Media Queries


@media screen and (min-height: 24 * 30 * 1px) {
      // Helpers - Layout
    .center-contents-y {
      height: (24 * 30 * 1px) - 48;
    }
}

@media screen and (min-height: 24 * 25 * 1px) {
      // Helpers - Layout
    .center-contents-y {
      height: (24 * 25 * 1px) - 48;
    }
}

@media screen and (min-width: 768px) and (max-width: 979px) and (min-height: 24 * 20 * 1px) {
      // Helpers - Layout
    .center-contents-y {
      height: (24 * 20 * 1px) - 48;
    }
}

/* Landscape phone to portrait tablet */
@media screen and (max-width: 767px) and (max-height: 24 * 15 * 1px) {
  .text-scale-down-xs{
    font-size: (1 / $scale-2) + em;
  }
      // Helpers - Layout
  .center-contents-y {
    height: (24 * 15 * 1px) - 48;
  }
} 

/* Landscape phones and down */
@media  screen and (max-width: 480px) and (max-height: 24 * 10 * 1px) {
      // Helpers - Layout
/*    .center-contents-y {
      height: (24 * 15 * 1px) - 48;
      padding-bottom: 24px;
    }*/
}

@media screen and (max-width: 480px) {
  .text-scale-down-xs{
    font-size: (1 / $scale-3) + em;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />