Project1.個人履歷

index.pug

.col-sm-4.left
  .names
    h2.chinesename 王茂己
    .engname Rock Wang
  .pic
    img(src="https://i.imgur.com/1zc2GcY.jpg?1", alt="")

  hr
    
  .contact 
    h3 CONTACT
      .hr
    i.fas.fa-home
      .line
      .city 台中市
    hr
    i.fas.fa-envelope
      .line
      .email a0938130702@mail.com
    hr
    i.fas.fa-mobile-alt
      .line
      .phone +886 938130702
    hr
.col-sm-2
.col-sm-5.right
  .exprience 
    h4 EXPRIENCE 
    p 2016.01-2018.03<br><span class="colorpurple">Tiger City 威秀影城 ｜ 一般廳員工</span><br><br>2018.07-2019.07<br><span class="colorpurple">逢甲琴韻吉他社 ｜ 社長</span><br><br>2019.08-現在<br><span class="colorpurple">台中大毅老爺行旅 ｜ 採購專員</span>
  hr
  .education 
    h4 EDUCATION
    p 2013-2016<br><span class="colorpurple">台中二中 ｜ 普通科</span><br><br>2016-2019<br><span class="colorpurple"> 逢甲大學 ｜ 國際貿易與經營學系</span><br><br>2019.12-2020.01<br><span class="colorpurple"> Hahow好學校 吳哲宇老師 動畫互動網頁入門 完課</span>
  hr
    
  .skill 
    h4 COMPUTER SKILL 
    p <span class="colorpurple">HTML、CSS、Javascript、Pug、Sass、BootStrap、JQuery、Sublime Text、MincrosftWord、MincrosftExcel、MincrosftPowerPoint</span>
    hr
    h4 ENGLISH SKILL
    p <span class="colorpurple">ETS TOEIC 820</span>


    

  

project1.markdown

Project1.個人履歷

A Pen by Rock070 on CodePen.

License.

scripts

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

style.sass

$color_purple: #968EAA
$color_grey: #a7a7a7

*
  // border: solid 1px black
  font-family: 'Oswald', '微軟正黑體'
  position: relative
  

html,body
  padding: 40px
  padding-left: 50px
  margin: 0
  background-color: #DDD
hr
  border-bottom: 1px solid $color_grey
.colorpurple
  color: $color_purple
.left
  .names
    text-align: center
    .chinesename
      font-size: 20px 
      color: $color_purple
      margin-bottom: 3px
    .engname
      color: $color_grey
      margin-top: 0px
      
 

  .pic
    
    display: block
    position: relative
    height: 100px
    
    img
      width: 85px
      height: 85px
      position: absolute
      left: 50%
      top: 50%
      transform: translate(-50%,-50%)
      border-radius: 100%
      box-shadow: 0 0 5px #EEE 
      
      
      
  .contact
    color: $color_purple
    h3
      margin-bottom: 10px
      .hr
        width: 15%
        border-bottom: 5px solid $color_grey
        position: relative
        left: 40px
    
      

    
    i
      display: block
      padding: 5px 0px
      margin-left: 8px
      font-size: 15px
      position: relative
      .line
        border-right: solid 2px $color_purple
        position: absolute
        left: 25px
        top: 4px
        height: 70%
        color: $color_purple
        margin-left: 0px
      .city,.email,.phone
        text-align: right
        position: absolute
        right: 0px
        top: 1px
        padding: 5px 0px
        font-weight: 800
      
      

      

      
    
    
.right
  .exprience,.education,.skill
    height: 230px
  p
    line-height: 24px
  h4
    color: $color_grey

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700&amp;display=swap" rel="stylesheet" />