-
Notifications
You must be signed in to change notification settings - Fork 130
/
Copy pathindex.html
175 lines (171 loc) · 8.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
<title>关于 于江水</title>
<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
<link rel="shortcut icon" href="./images/favicon.png"/>
</head>
<body class="loading-process">
<div class="loading">
<div class="loading-circle"></div>
<div class="loading-avatar"><img src="images/avatar@2x.jpg" alt="" width="100" height="100"></div>
<div class="loading-info">正在努力加载中...</div>
</div>
<div class="section-header">
<div class="section">
<nav class="nav" role="navigation">
<ul>
<li class="nav-about fade fade1"><a href="#about">关于</a></li>
<li class="nav-works fade fade4"><a href="#works">作品</a></li>
<li class="fade back-home"><a href="#top">首页</a></li>
<li class="nav-skill fade fade2"><a href="#skill">能力</a></li>
<li class="nav-contact fade fade3"><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
<div class="nav-bg"></div>
</div>
<div class="home-bg">
<img src="images/home-bg.jpg" alt="" width="1000" height="667">
</div>
<div class="section-wrap section-fristpage">
<div class="section">
<div class="section-content">
<p class="fade fade1">Hi，我是 于江水</p>
<p class="fade fade2">擅长前端，喜欢简约，打算走向全端的不归路 ~</p>
<p class="fade fade3">想了解更多，往下滚动哦 ^_^</p>
</div>
<a href="#" class="scroll-tip fade fade4">向下滚动</a>
</div>
</div>
<div id="about" class="section-wrap section-about">
<div class="section">
<div class="about-content clearfix section-content">
<div class="left">
<h1>关于本人</h1>
<p class="fade fade1">2008 年接触网站建设</p>
<p class="fade fade2">2012 年专注前端学习</p>
<p class="fade fade3">断续写过两年多独立博客（旧博 <a href="http://www.qianxingzhem.com" target="_blank">潜行者m</a>)</p>
<p class="fade fade4"><a href="http://www.haohaoxuexitiantianxiangshang.com" target="_blank">好好学习天天向上</a> 开发者</p>
<p class="fade fade5"><a href="http://deepdevelop.com" target="_blank">Deepdevelop</a> 兼职前端工程师</p>
<p class="fade fade6">目前在申请前端实习，为 10 月份校招做准备。</p>
</div>
<div class="right">
<img class="my-photo fade fade4" src="images/me.jpg" alt="" width="335" height="540">
</div>
</div>
</div>
</div>
<div id="works" class="section-wrap section-works">
<div class="section">
<div class="works-content section-content">
<h1>近期作品</h1>
<div class="works-list clearfix">
<div class="works-item first fade fade1">
<a href="http://www.uucsr.org/" target="_blank">
<img src="images/works/uucsr.jpg" alt="" width="300" height="180">
<div class="work-info">
<h2>UUSCR</h2>
<p><strong>开发时间</strong>：2013年8月<br>
<strong>工作详情</strong>：由本人负责前端页面开发，在 5 天时间内完成 30 个页面（11 个独立页面结构）的开发，以及相关交互 JS 等。</p>
</div>
</a>
</div>
<div class="works-item fade fade2">
<a href="http://hamburger-kammerspiele.de/" target="_blank">
<img src="images/works/hk.jpg" alt="" width="300" height="180">
<div class="work-info">
<h2>Hamburger Kammerspiele</h2>
<p><strong>开发时间</strong>：2013年11月<br>
<strong>工作详情</strong>：负责前端页面和兼容性，响应式，增加 JS 交互和功能等。</p>
</div>
</a>
</div>
<div class="works-item fade fade3">
<a href="http://www.haohaoxuexitiantianxiangshang.com/" target="_blank">
<img src="images/works/hhxx.jpg" alt="" width="300" height="180">
<div class="work-info">
<h2>好好学习 天天向上</h2>
<p><strong>开发时间</strong>：2013年6月 - 至今<br>
<strong>工作详情</strong>：基于 WordPress 做前后端整站的开发和功能整合。</p>
</div>
</a>
</div>
<div class="works-item first fade fade4">
<a href="http://97866.com/" target="_blank">
<img src="images/works/game.jpg" alt="" width="300" height="180">
<div class="work-info">
<h2>游戏小站</h2>
<p><strong>开发时间</strong>：2013年12月<br>
<strong>工作详情</strong>：基于 PSD 做前端页面开发，于后端沟通交流。</p>
</div>
</a>
</div>
</div>
<a class="more-link" href="http://yujiangshui.com/product/">查看更多</a>
</div>
</div>
</div>
<div id="skill" class="section-wrap section-skill">
<div class="section">
<div class="skill-content section-content">
<h1>技能水平</h1>
<ul>
<li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C 标准的结构和代码。</li>
<li class="fade fade3">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
<li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li>
<li class="fade fade4">熟练掌握 ST2 、Emmet、Sass 等等前端开发和团队协作工具。</li>
<li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li>
<li class="fade fade3">喜欢并使用 WordPress ，写过两年多技术博客，有一定 PHP 后端相关知识。</li>
<li class="fade fade2">了解 Ajax 工作原理和实现方法。</li>
<li class="fade fade1">对用户体验和交互设计有一定的了解和追求。</li>
<li class="fade fade1">做过很多网站，了解整套网站建设的流程和相关内容（SEO、维护等）。</li>
<li class="fade fade4">服务器使用自己搭建环境的 VPS，对 Linux 有一定了解。</li>
<li class="fade fade2">对喜欢的事物抱有极大的兴趣和自学能力，喜欢接触新事物。</li>
</ul>
</div>
</div>
</div>
<div id="contact" class="section-wrap section-contact">
<div class="section">
<div class="contact-content clearfix section-content">
<h1>联系本人</h1>
<div class="left">
<div class="contact-ways fade fade1">
<h2>社交网络</h2>
<ul>
<li>邮箱：<a target="_blank" href="mailto:hi@harryyu.me">hi@harryyu.me</a></li>
<li>知乎：<a target="_blank" href="http://www.zhihu.com/people/jiangshui">@于江水</a></li>
<li>微博：<a target="_blank" href="http://weibo.com/yujiangshui">@yujiangshui</a></li>
<li>Twitter：<a target="_blank" href="https://twitter.com/yujiangshui">@yujiangshui</a></li>
<li>Github：<a target="_blank" href="https://github.com/yujiangshui">@yujiangshui</a></li>
</ul>
</div>
<div class="contact-info fade fade2">
<h2>本站声明</h2>
<p>本站设计、交互、编码均由 Jiangshui 一人独立完成。感谢 jQuery 提供了很多方便。本站源代码已经公开在 github 上面，欢迎 fork 学习。</p>
</div>
</div>
<div class="right fade fade3">
<h2>项目外包</h2>
<p>如果你有前端相关的需求，可以联系我做外包，目前我主要做：</p>
<ul>
<li>根据设计稿做出后端开发人员需要的前端页面，并与后端人员做交流。</li>
<li>根据需求，对网站前端进行修改和优化，或者转响应式处理。</li>
<li>做 WordPress 主题或者功能，功能等主要由 <a href="http://wpjam.com/" target="_blank">WPJAM</a> 来做，我来前端有关。</li>
<li>对于网站建设项目，我也有一些同行朋友可以推荐，也欢迎咨询！</li>
</ul>
<p><strong>合作流程</strong>：按照合作谈定的价格，预付 50% 的项目款，开始工作。完成验收后，支付尾款。</p>
<p><strong>价格参考</strong>：视具体项目难度和工作量等，一般来说，工时价格为 150 左右。</p>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
<div class="state-indicator"></div>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>
</body>
</html>