Resume

index.pug

.resume
  .base
    .profile
      .photo
        img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg')
      .info
        h4.name Kelly Chen
        small.job Front-end Web Designer
    .about
      h3 About me
      | 嗨！目前正努力學習中，希望自己的進步及成長能夠被看見，請多指教。
      br
      | 喜歡塗鴉、動漫和美好的小事物，歡迎交流 v(´∀｀*v)
    .contact
      h3 Contact
      .call
        i.fa.fa-phone
        span (+886)900-000-000
      .address
        i.fa.fa-map-marker
        span Taipei, Taiwan
      .email
        i.fa.fa-envelope
        span ヽ(*´∀`)@gmail.com
      .website
        a(href='http://codepen.io/xichen', target='_blank') 
          i.fa.fa-home
          span codepen.io/xichen
    .follow
      h3 Follow
      .box
        a(href='javascript:void(0);')
          i.fa.fa-facebook
        a(href='javascript:void(0);')
          i.pif-plurkapp
        a(href='javascript:void(0);')
          i.fa.fa-twitter
        a(href='javascript:void(0);')
          i.fa.fa-pinterest-p
        a(href='javascript:void(0);')
          i.fa.fa-tumblr
        a(href='https://codepen.io/xichen/', target="_blank")
          i.fa.fa-codepen
  .func
    .work
      h3
        i.fa.fa-briefcase
        | Work Exrerience
      ul
        li
          span Front-end Web Designer
          small Apr 2016 - Now
        li
          span Design Assistant
          small Mar 2015 - Dec 2015
        li
          span Design Assistant (Part-time)
          small Oct 2014 - Jul 2015
    .edu
      h3
        i.fa.fa-graduation-cap
        | Education
      ul
        li
          span Department of Information Management
          small Set 2010 - Jun 2014
        li
          span Department of Data Processing
          small Set 2007 - Jun 2010
    .skills-prog
      h3
        i.fa.fa-code
        | Programming Skills
      ul
        li(data-percent='92')
          span HTML5 & PUG
          .skills-bar
            .bar
        li(data-percent='96')
          span CSS3 & SASS
          .skills-bar
            .bar
        li(data-percent='40')
          span JavaScript
          .skills-bar
            .bar
        li(data-percent='60')
          span jQuery
          .skills-bar
            .bar
        li(data-percent='33')
          span NodeJS
          .skills-bar
            .bar
        li(data-percent='52')
          span VueJS
          .skills-bar
            .bar
        li(data-percent='20')
          span PHP
          .skills-bar
            .bar
    .skills-soft
      h3
        i.fa.fa-th-list
        | Software Skills
      ul
        li(data-percent='94')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Photoshop
          small
        li(data-percent='80')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Illustrator
          small
        li(data-percent='89')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Sublime Text
          small
        li(data-percent='55')
          svg(viewbox='0 0 100 100')
            circle(cx='50' cy='50' r='45')
            circle.cbar(cx='50' cy='50' r='45')
          span Dreamweaver
          small
    .interests
      h3
        i.fa.fa-star
        | Interests
      .interests-items
        .draw
          i.fa.fa-paint-brush
          span Draw
        .guitar
          i.guitar
            svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 53.858 53.858')
              path(d='M6.901,37.275l9.621,9.62l4.185-4.184l-9.622-9.624L6.901,37.275z M11.085,36.64l6.019,6.019\l-0.593,0.618l-6.059-6.003L11.085,36.64z')
              path(d='M36.868,26.667c-0.353-0.705-0.856-1.542-1.346-2.242l-0.366-0.523l-0.088,0.06L50.797,8.235\L49.02,6.461L27.277,28.204l0.252,0.754c0.543,1.579,0.152,3.29-1.022,4.464c-1.669,1.668-4.34,1.669-6.009-0.001\c-0.784-0.782-1.232-1.9-1.232-3.067c0-1.143,0.438-2.21,1.232-3.005c1.124-1.123,2.881-1.546,4.408-1.018l0.748,0.25L47.396,4.839\l-1.836-1.837L29.236,19.276l0.504-0.856l-0.705-0.473c-0.6-0.375-1.231-0.742-1.753-0.872c-0.72-0.227-1.862-0.498-3.213-0.498\c-2.318,0-4.399,0.822-6.015,2.377c-1.597,1.533-2.323,3.29-2.875,4.812l-0.069,0.186c-0.09,0.246-0.268,0.732-0.365,0.901\c-0.359,0.105-1.264,0.299-1.836,0.366c-2.677,0.509-6.723,1.279-9.691,4.248c-1.125,1.125-3.021,3.529-3.092,7.005\c0,3.62,1.996,7.452,5.934,11.39c3.979,3.979,7.791,5.997,11.329,5.997c2.581,0,4.889-1.009,7.066-3.093\c2.968-2.968,3.738-7.01,4.247-9.689c0.05-0.199,0.109-0.512,0.171-0.838c0.05-0.26,0.125-0.657,0.176-0.874\c0.246-0.135,0.703-0.342,1.166-0.496c1.475-0.536,3.184-1.245,4.818-2.88c3.178-3.372,2.371-7.568,1.879-9.216L36.868,26.667z\M24.847,23.653c-2.265-0.469-4.627,0.241-6.185,1.86c-2.652,2.652-2.652,6.967,0,9.621c1.259,1.259,3.001,1.981,4.78,1.981\c1.778,0,3.52-0.723,4.779-1.981c1.623-1.621,2.318-3.96,1.86-6.184l3.281-3.282l0.108,0.162c0.365,0.545,0.758,1.166,0.907,1.616\c0.554,1.884,0.782,4.579-1.271,6.727c-1.141,1.197-2.512,1.787-3.826,2.248c-1.058,0.377-1.802,0.715-2.28,1.264l-0.095,0.123\c-0.237,0.396-0.427,1.125-0.699,2.692c-0.359,2.051-1.027,5.867-3.528,8.429c-1.555,1.556-3.305,2.344-5.2,2.344\c-2.856,0.001-6.192-1.793-9.645-5.185c-3.499-3.497-5.244-6.729-5.188-9.615c0-2.383,1.275-4.16,2.345-5.229\c2.489-2.488,6.207-3.139,8.424-3.527c1.591-0.265,2.321-0.47,2.786-0.782l0.122-0.106c0.477-0.407,0.74-1.046,1.046-1.786\l0.279-0.68c0.464-1.169,0.99-2.494,2.163-3.612c1.147-1.097,2.573-1.652,4.237-1.652c1.184,0,2.166,0.288,2.466,0.376\c0.149,0.05,0.391,0.183,0.625,0.312c0.214,0.118,0.432,0.236,0.628,0.324l0.381,0.254L24.847,23.653z')
              path(d='M23.458,26.252c-1.04,0.075-2.044,0.525-2.757,1.238c-0.762,0.762-1.174,1.772-1.161,2.844\c0.013,1.041,0.429,2.003,1.161,2.699c0.77,0.771,1.739,1.178,2.804,1.178c1.035,0,2.056-0.43,2.803-1.177\c0.77-0.769,1.177-1.739,1.177-2.802c0-1.034-0.43-2.056-1.177-2.802c-0.768-0.77-1.735-1.178-2.842-1.178\C23.462,26.252,23.46,26.252,23.458,26.252z M22.477,29.327c0.265-0.265,0.659-0.43,1.027-0.43c0.409,0,0.735,0.136,1.07,0.468\c0.198,0.166,0.326,0.529,0.326,0.928c0,0.408-0.137,0.735-0.43,1.028c-0.521,0.518-1.489,0.546-1.993,0\C21.927,30.771,21.927,29.876,22.477,29.327z')
              path(d='M53.605,8.544l-0.002,0c-0.109-0.623-0.848-3.106-3.078-5.336c-2.085-2.084-4.648-2.96-5.332-3.079\L44.546,0l-0.491,0.491c0,0-5.991,5.991-6.301,6.3l-0.457,0.455l1.775,1.776L45.295,2.8c0.867,0.332,2.211,0.988,3.455,2.184\c1.186,1.185,1.848,2.562,2.184,3.455l-6.221,6.223l1.773,1.774l7.248-7.246L53.605,8.544z')
            //- img(src='http://kelly.comxa.com/scratch/guitar.svg')
          span Guitar
        .movie
          i.fa.fa-film
          span Movie
        .music
          i.fa.fa-headphones
          span Music
        .game
          i.fa.fa-gamepad
          span Game

resume.markdown

Resume

A Pen by XiChen on CodePen.

License.

script.coffeescript

$('.skills-prog li').find('.skills-bar').each (i) ->
  $(this).find('.bar').delay(i*150).animate {
    width: $(this).parents().attr('data-percent') + '%'
  }, 1000, 'linear', ->
    $(this).css 'transition-duration': '.5s'
  return
$('.skills-soft li').find('svg').each (i) ->
  circle = $(this).children('.cbar')
  r = circle.attr('r')
  c = Math.PI * (r * 2)
  percent = $(this).parent().data 'percent'
  cbar = ((100-percent)/100) * c
  circle.css 'stroke-dashoffset': c, 'stroke-dasharray': c
  circle.delay(i*150).animate {
    strokeDashoffset: cbar
  }, 1000, 'linear', ->
    circle.css 'transition-duration': '.3s'
  $(this).siblings('small').prop('Counter', 0).delay(i*150).animate {
    Counter: percent
  }, duration: 1000, step: (now) ->
    $(this).text Math.ceil(now) + '%'
  return

scripts

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

style.sass

$color: (main: #8d9e78, sub: #3d405b, func: #e07a5f, reverse: #fcfcfc, line: #cdcdcd)
$base: (bg: #eee, border: #bbb, preset: #555)
$wapper-w: 870px
$wapper-base: 225px
$wapper-func: $wapper-w - $wapper-base
@mixin size($w, $h)
  width: $w
  height: $h
*
  outline: none
body, html
  margin: 0
  background: map-get($base, bg)
  font-family: 'Ubuntu', '微軟正黑體', sans-serif
  letter-spacing: .65px
  font-size: 15px
  color: map-get($base, preset)
  cursor: default
a
  text-decoration: none
  color: map-get($base, preset)
  display: block
  transition-duration: .3s
ul
  list-style-type: none
  padding: 0
h3
  color: map-get($color, sub)
  margin: 10px 0
  text-transform: uppercase
  font-size: 18px
.resume
  width: $wapper-w
  background: #fbfbfb
  margin: 20px auto
  border: 1px solid map-get($base, border)
  box-shadow: 0 0 20px -3px map-get($base, border)
  position: relative
  display: flex
  &::before
    content: ''
    +size(100%, 6px)
    background: map-get($color, main)
    position: absolute
    bottom: 0
    left: 0
  &::after
    content: ''
    display: block
    clear: both
  .base, .func
    box-sizing: border-box
    float: left
    > div
      padding-bottom: 10px
      &:last-of-type
        padding-bottom: 0
  .base
    width: $wapper-base
    padding: 30px 15px
    background: rgba(map-get($base, bg), .6)
    .profile
      background: map-get($color, main)
      padding: 30px 15px 5px 15px
      margin: -30px -15px 45px -15px
      position: relative
      z-index: 2
      &::after
        content: ''
        position: absolute
        background: map-get($color, main)
        +size(100%, 30px)
        bottom: -15px
        left: 0
        transform: skewY(-5deg)
        z-index: -1
      .photo
        img
          width: 100%
          border-radius: 50%
      .info
        text-align: center
        color: map-get($color, reverse)
        .name
          margin-top: 10px
          margin-bottom: 0
          font-size: 1.5em
          font-weight: normal
    .contact
      div
        line-height: 24px
        a:hover
          color: map-get($color, func)
          span::after
            width: 100%
        &:hover
          i
            color: map-get($color, func)
        i
          color: map-get($color, main)
          +size(20px, 20px)
          font-size: 20px
          text-align: center
          margin-right: 15px
          transition-duration: .3s
        span
          position: relative
          &::after
            content: ''
            position: absolute
            background: map-get($color, func)
            height: 1px
            width: 0
            bottom: 0
            left: 0
            transition-duration: .3s
    .follow
      .box
        text-align: center
        vertical-align: middle
        a
          display: inline-block
          vertical-align: text-bottom
          &:hover i
            background: map-get($color, func)
            border-radius: 5px
            transform: rotate(45deg) scale(.8)
            &::before
              transform: rotate(-45deg) scale(1.5)
        i
          display: inline-block
          font-size: 30px
          background: map-get($color, main)
          +size(60px, 60px)
          border-radius: 50%
          line-height: 60px
          color: map-get($color, reverse)
          margin: 0 10px 10px 10px
          transition-duration: .3s
          &::before
            transition-duration: .3s
          &.fa::before
            display: block
  .func
    width: $wapper-func
    padding: 30px 25px
    &:hover
      > div
        transition-duration: .3s
        &:hover
          h3
            letter-spacing: 1.6px
            i
              transform: scale(1.2)
        &:not(:hover)
          opacity: .5
    h3
      transition-duration: .3s
      margin-top: 0
      i
        color: map-get($color, reverse)
        background: map-get($color, main)
        +size(42px, 42px)
        font-size: 20px
        line-height: 42px
        border-radius: 50%
        text-align: center
        vertical-align: middle
        margin-right: 8px
        transition-duration: .3s
    .work, .edu
      float: left
      small
        display: block
        opacity: .7
      ul li
        position: relative
        margin-left: 15px
        padding-left: 25px
        padding-bottom: 15px
        &:hover
          &::before
            animation: circle 1.2s infinite
          span
            color: map-get($color, func)
          @keyframes circle
            from
              box-shadow: 0 0 0 0px rgba(map-get($color, sub), 1)
            to
              box-shadow: 0 0 0 6px rgba(map-get($color, sub), 0)
        &:first-of-type
          &::before
            +size(10px, 10px)
            left: -2px
        &:last-of-type
          padding-bottom: 3px
          &::after
            border-radius: 1.5px
        &::before, &::after
          content: ''
          display: block
          position: absolute
        &::before
          +size(7px, 7px)
          border: 3px solid map-get($color, sub)
          background: map-get($color, reverse)
          border-radius: 50%
          left: 0
          z-index: 1
        &::after
          +size(3px, 100%)
          background: map-get($color, sub)
          left: 5px
          top: 0
        span
          transition-duration: .3s
    .work
      width: 42%
    .edu
      width: 58%
    .skills
      &-prog
        clear: both
        ul
          margin-left: 15px
          li
            margin-bottom: 8px
            display: flex
            align-items: center
            transition-duration: .3s
            &:hover
              color: map-get($color, func)
              .skills-bar .bar
                background: map-get($color, func)
                box-shadow: 0 0 0 1px map-get($color, func)
            span
              display: block
              width: 120px
            .skills-bar
              background: map-get($color, line)
              height: 2px
              width: calc(100% - 120px)
              position: relative
              border-radius: 2px
              .bar
                position: absolute
                top: -1px
                height: 4px
                background: map-get($color, main)
                box-shadow: 0 0 0 map-get($color, main)
                border-radius: 5px
                // transition-duration: .3s
                // use jquery add css transition-duration
      &-soft
        ul
          display: flex
          justify-content: space-between
          text-align: center
          li
            position: relative
            &:hover
              svg .cbar
                stroke: map-get($color, func)
                stroke-width: 4px
              span, small
                transform: scale(1.2)
            svg
              width: 95%
              fill: transparent
              transform: rotate(-90deg)
              circle
                stroke-width: 1px
                stroke: map-get($color, line)
              .cbar
                stroke-width: 3px
                stroke: map-get($color, main)
                stroke-linecap: round
                // transition-duration: .3s
                // use jquery add css transition-duration
            .soft-info
            span, small
              position: absolute
              display: block
              width: 100%
              top: 52%
              transition-duration: .3s
            span
              top: 40%
    .interests
      &-items
        box-sizing: border-box
        padding: 15px
        width: 100%
        border: 1px solid map-get($color, line)
        text-align: center
        display: flex
        justify-content: space-between
        div
          display: inline-block
          +size(80px, 80px)
          &:hover
            i
              transform: scale(1.2)
            span
              color: map-get($color, func)
              transition-duration: .3s
          i
            font-size: 45px
            width: 60px
            height: 60px
            line-height: 60px
            color: map-get($color, main)
            transition-duration: .3s
            &.guitar
              display: block
              margin: 0 auto
              svg
                +size(50px, 50px)
                margin-top: 5px
                fill: map-get($color, main)
          span
            display: block
          

styles

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
<link href="https://s.plurk.com/0e89357f530f0a843c68440a020d4eb5.css" rel="stylesheet" />