add works and etc
This commit is contained in:
yafeilee
parent
3042c7c08e
commit
f66d32113a
|
|
@ -1,5 +1,13 @@
|
|||
@app.controller 'AboutScrollController', [ '$scope', '$document', ($scope, $document)->
|
||||
|
||||
about_id = angular.element(document.getElementById('about'))
|
||||
|
||||
$document.on 'scroll', ()=>
|
||||
$scope.$apply()
|
||||
|
||||
$scope.is_top = ()->
|
||||
$document.scrollTop() <= 0
|
||||
|
||||
|
||||
$scope.to_about = ()->
|
||||
$document.scrollToElementAnimated(about_id)
|
||||
|
|
|
|||
|
|
@ -23,20 +23,40 @@
|
|||
|
||||
|
||||
.about-page {
|
||||
.top-bar-wrapper {
|
||||
background: 0 0;
|
||||
.top-bar {
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
.top-bar-wrapper {
|
||||
background: 0 0;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.top-bar-section ul{
|
||||
li, li a {
|
||||
background: 0 0;
|
||||
transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||
&.active {
|
||||
background: #000;
|
||||
border-bottom: 1px solid #666;
|
||||
|
||||
.top-bar {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
background: #666;
|
||||
.top-bar {
|
||||
background: 0 0;
|
||||
margin: 1.5rem 0;
|
||||
.name h1 {
|
||||
font-size: 1.325rem;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-section ul{
|
||||
li, li a {
|
||||
background: 0 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
li a.active {
|
||||
background: #4C4C4C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,6 +131,42 @@
|
|||
color: #eee;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.works {
|
||||
color: #eee;
|
||||
background-color: rgba(63, 63, 63, 0.6);
|
||||
list-style: none;
|
||||
padding: 2rem 1rem;
|
||||
li {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
&:after {
|
||||
margin-left: 0.5rem;
|
||||
font-weight: 400;
|
||||
content: '--';
|
||||
}
|
||||
}
|
||||
|
||||
.brief {
|
||||
margin-right: 1rem;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-right: 1rem;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #aaa;
|
||||
font-size: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
|
|
@ -131,7 +187,7 @@
|
|||
|
||||
.mail_to {
|
||||
margin-bottom: 3rem;
|
||||
margin-top: -1rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.contact-ul {
|
||||
|
|
@ -167,4 +223,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border: none;
|
||||
padding: 1.5rem;
|
||||
background-color: #353535;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
- content_for(:main) do
|
||||
/! 导航
|
||||
.about-page ng-app='app' ng-controller='AboutScrollController'
|
||||
.top-bar-wrapper.contain-to-grid.fixed
|
||||
.top-bar-wrapper.contain-to-grid.fixed ng-class="{ active: ! is_top() }"
|
||||
.row
|
||||
.small-12.columns
|
||||
nav.top-bar data-topbar='' role='navigation'
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
a href='#work' du-smooth-scroll='' du-scrollspy='' 作品
|
||||
li
|
||||
a href='#contact' du-smooth-scroll='' du-scrollspy='' 联系
|
||||
#intro
|
||||
header.intro
|
||||
.intro-heading
|
||||
.row
|
||||
|
|
@ -35,20 +36,45 @@
|
|||
.row
|
||||
.small-12.large-9.large-centered.columns
|
||||
h1.title 关于我
|
||||
p Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.
|
||||
p Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.
|
||||
p Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.
|
||||
p 我是李亚飞, 一个在中国深圳的网页开发工程师( Web Developer ).
|
||||
p
|
||||
| 曾经在
|
||||
a href='http://sangfor.com' 深信服
|
||||
| 工作大约 5 年. 在那里, 从一个菜鸟成长为一个资深工程师, 还有幸带领一个很酷的团队帮助公司进行自动化测试方向的研究与推进. 掌握的技术大约有: Linux, Ruby, Ruby on Rails, Testing Automation
|
||||
p
|
||||
| 在今年 3 月份, 为了那份创业梦, 出山开发了 cywin.cn, 这是一个股权众筹平台, 帮助创业团队更好的融资. 借此, 也将自己的 Ruby on Rails 技术全部注入在内
|
||||
p
|
||||
| 现在, 想先休息一段时间, 接下来做一个自由职业者, 接手一些关于 Web 开发的外包工作
|
||||
section#work
|
||||
.row
|
||||
.small-12.large-9.large-centered.columns
|
||||
h1.title 作品
|
||||
p Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.
|
||||
p Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.
|
||||
p Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on the preview page. The theme is open source, and you can use it for any purpose, personal or commercial.
|
||||
ul.works
|
||||
li
|
||||
span.name ATM/ATT
|
||||
span.brief 测试业界领先的关键字驱动的自动化测试平台
|
||||
span.link 公司所属
|
||||
span.time #{time_ago_in_words(DateTime.new(2013))} 前
|
||||
li
|
||||
span.name WBlog
|
||||
span.brief Rails 社区正缺了一个独立博客建站系统
|
||||
span.link
|
||||
a href='https://github.com/windy/wblog' target='_blank' https://github.com/windy/wblog
|
||||
span.time #{time_ago_in_words(DateTime.new(2014,3,1))} 前
|
||||
li
|
||||
span.name Cywin
|
||||
span.brief 一个股权众筹的商业平台
|
||||
span.link
|
||||
a href='http://cywin.cn' target='_blank' http://cywin.cn
|
||||
span.time #{time_ago_in_words(1.month.ago)} 前
|
||||
section#contact
|
||||
.row
|
||||
.small-12.large-9.large-centered.columns
|
||||
h1.title 联系我
|
||||
p
|
||||
| 我目前处于自由职业状态, 如果你想给你的公司或个人制作一个精美简洁的网站, 或许我可以帮到你
|
||||
p
|
||||
| 不要紧张, 请随时联系我
|
||||
p.mail_to
|
||||
= mail_to 'lyfi2003@gmail.com'
|
||||
ul.contact-ul
|
||||
|
|
@ -65,3 +91,7 @@
|
|||
a href='http://www.linkedin.com/pub/yafei-lee/77/3b/505' target='_blank'
|
||||
i.fa.fa-linkedin-square
|
||||
| LinkedIn
|
||||
.footer
|
||||
.row
|
||||
.small-12.columns
|
||||
div Copyright © yafeilee.me
|
||||
|
|
|
|||
Loading…
Reference in New Issue