Skip to content

Instantly share code, notes, and snippets.

@td00

td00/index.pug

Created May 27, 2020 20:06
Show Gist options
  • Save td00/a4806a2f6243bd5b744c343c3083ab2c to your computer and use it in GitHub Desktop.
Save td00/a4806a2f6243bd5b744c343c3083ab2c to your computer and use it in GitHub Desktop.
Download ZIP
Resume
Raw
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
Raw
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
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Raw
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
Raw
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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment