forked from cchlorine/RaKunr
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (229 loc) · 14.5 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rakume | Kunr</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style/main.css">
</head>
<body>
<nav id="nav"><a href="#!/home" title="Home" class="active">Home</a><a href="#!/about" title="About me">About</a><a href="#!/friends" title="My friends">Friends</a><a href="http://rakume.com/blog/">Blog</a><a href="http://atashi.work/">Works</a></nav>
<main id="main">
<section data-name="home">
<div class="container"><a href="#!/about" class="avatar"><img src="assets/kunr.png"></a>
<h1>Rakume Hayashi</h1>
<p>愿风指引着你的道路，愿你的刀刃永远锋利。</p>
</div>
</section>
<section data-name="about">
<div class="container">
<article class="about-card">
<h2>Rakume Hayashi</h2>
<p>Front-End / PHPer / ACGer</p>
<ul class="about-contact">
<li><span>E-mail</span><a href="mailto:[email protected]" target="about-contact">[email protected]</a></li>
<li><span>Github</span><a href="https://github.com/rakume" target="about-contact">@rakume</a></li>
<li><span>V2EX</span><a href="https://v2ex.com/member/rakume" target="about-contact">@rakume</a></li>
<li><span>Instagram</span><a href="https://instagram.com/gongyu6" target="about-contact">@gongyu6</a></li>
<li><span>QQ</span><a href="http://sighttp.qq.com/authd?IDKEY=dfb9df45be3a8ef7faa65ef72164dfb326c597f6e8512e8f" target="about-contact">747284706</a></li>
</ul>
</article>
<article class="about-skill">
<div class="progress">
<div style="height: 65%" class="progress-bar"></div>
<div class="progress-name">Chinese</div>
</div>
<div class="progress">
<div style="height: 23%" class="progress-bar"></div>
<div class="progress-name">Spanish</div>
</div>
<div class="progress">
<div style="height: 18%" class="progress-bar"></div>
<div class="progress-name">English</div>
</div>
<div class="progress">
<div style="height: 82%" class="progress-bar"></div>
<div class="progress-name">HTML5</div>
</div>
<div class="progress">
<div style="height: 90%" class="progress-bar"></div>
<div class="progress-name">CSS3</div>
</div>
<div class="progress">
<div style="height: 80%" class="progress-bar"></div>
<div class="progress-name">ES5</div>
</div>
<div class="progress">
<div style="height: 58%" class="progress-bar"></div>
<div class="progress-name">ES6</div>
</div>
<div class="progress">
<div style="height: 72%" class="progress-bar"></div>
<div class="progress-name">PHP</div>
</div>
<div class="progress">
<div style="height: 32%" class="progress-bar"></div>
<div class="progress-name">Python</div>
</div>
<div class="progress">
<div style="height: 5%" class="progress-bar"></div>
<div class="progress-name">C</div>
</div>
</article>
</div>
</section>
<section data-name="friends">
<ul>
<li><a href="https://lingoys.com/" title="Lingoys!Art." target="_blank" class="name">Lingoys!Art.</a>
<p class="descripition">没有回忆就去创造回忆，没有道路就去开辟道路！</p>
</li>
<li><img src="//cdn.v2ex.com/gravatar/b0e4cc90b24e9929beb4c8350ced5dc3?s=250" class="avatar">
<div class="info"><a href="https://blog.cee.moe/" title="Cee" target="_blank" class="name">Cee</a>
<p class="descripition">菊苣，不能再菊！</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/68701bc5fe5805e4d6d67924b09721c2?s=250" class="avatar">
<div class="info"><a href="http://blog.thiece.cn/" title="Thiece" target="_blank" class="name">Thiece</a>
<p class="descripition">设计稿简直赞的没话说</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/b7f6ae83917067e9d8e24233e46b59ef?s=250" class="avatar">
<div class="info"><a href="http://mouto.org/" title="卜卜口の" target="_blank" class="name">卜卜口の</a>
<p class="descripition">无处不在的摄影，前端菊苣</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/57e7f7aa6656c214d28ee31d137c249e?s=250" class="avatar">
<div class="info"><a href="http://flag.moe/" title="蘑菇" target="_blank" class="name">蘑菇</a>
<p class="descripition">要来一只蘑菇么，可好吃啦</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/9956c1857d9af29aa6528990c487e698?s=250" class="avatar">
<div class="info"><a href="http://030.name/" title="Misaka" target="_blank" class="name">Misaka</a>
<p class="descripition">跳票小丸子w</p>
</div>
</li>
<li><img src="//rakume.github.io/ife-Torshavn/assets/avatar/qinmiao.png" class="avatar">
<div class="info"><a href="http://www.almsev.com/" title="Kin" target="_blank" class="name">Kin</a>
<p class="descripition">浙大学霸，知识储备量大</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/ad516503a11cd5ca435acc9bb6523536?s=250" class="avatar">
<div class="info"><a href="http://ovear.info/" title="Ovear" target="_blank" class="name">Ovear</a>
<p class="descripition">后端大角虫</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/3008ee652f9a064a2dfa276273d74550?s=250" class="avatar">
<div class="info"><a href="http://dimpurr.com/" title="Dimpurr" target="_blank" class="name">Dimpurr</a>
<p class="descripition">FE / UX 菊苣</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/a8b6b83c25f43f206a76063d13a0dc16?s=250" class="avatar">
<div class="info"><a href="http://dualfat.com/" title="二胖" target="_blank" class="name">二胖</a>
<p class="descripition">LL 大法好！</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/fc0b461fef2b71b533aa6ea594ca396f?s=250" class="avatar">
<div class="info"><a href="http://ooxx.dk/" title="OX" target="_blank" class="name">OX</a>
<p class="descripition">可奈的女♂孩♂纸</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/ec2be5c75a541e1c95a99001fd9aa5fa?s=250" class="avatar">
<div class="info"><a href="http://blog.ggdog.info/" title="千与琥珀" target="_blank" class="name">千与琥珀</a>
<p class="descripition">PHP大触，博客有着无尽的日常系列</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/96dfd48ff36725ca7fc2c81c5f0b9861?s=250" class="avatar">
<div class="info"><a href="https://xin.moe/" title="新喵" target="_blank" class="name">新喵</a>
<p class="descripition">Hostker 运营，巫女<del>（雾）</del></p>
</div>
</li>
<li><img src="//avatars2.githubusercontent.com/u/9015538?s=460&v=4" class="avatar">
<div class="info"><a href="https://yumoe.com/" title="Trii Hsia" target="_blank" class="name">Trii Hsia</a>
<p class="descripition">各种折腾的少年</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/dc01ccfacf9f4b862a02f9676d40763b?s=250" class="avatar">
<div class="info"><a href="https://jimmycai.org/" title="Jimmy" target="_blank" class="name">Jimmy</a>
<p class="descripition">肉身翻墙，写的一首好前端</p>
</div>
</li>
<li><img src="//avatars0.githubusercontent.com/u/6690865?s=460&v=4" class="avatar">
<div class="info"><a href="http://altoria.me/" title="Lily" target="_blank" class="name">Lily</a>
<p class="descripition">不仅文艺而且写得一手好代码</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/d0921a293dc065308a871567889a53c4?s=250" class="avatar">
<div class="info"><a href="http://ikevin.in/" title="Kevin" target="_blank" class="name">Kevin</a>
<p class="descripition">位于四川的萌货，前端新手</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/829e35ddb6a7ea0f8f172284efab090f" class="avatar">
<div class="info"><a href="http://qwe7002.com/" title="qwe7002" target="_blank" class="name">qwe7002</a>
<p class="descripition"></p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/682ec731fc37a5f457f8503785404fcc?s=250" class="avatar">
<div class="info"><a href="http://otakism.org/" title="Hermit" target="_blank" class="name">Hermit</a>
<p class="descripition">Hermit 大大的主题特别赞</p>
</div>
</li>
<li><img src="//avatars1.githubusercontent.com/u/1269502?v=3&amp;s=250" class="avatar">
<div class="info"><a href="http://blog.kochiya.me/" title="AprocySanae" target="_blank" class="name">AprocySanae</a>
<p class="descripition">文艺的菊苣</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/3e37c768e2572165ec00ad97415a8a13?s=250" class="avatar">
<div class="info"><a href="http://bgm.im/" title="千寻" target="_blank" class="name">千寻</a>
<p class="descripition">分享各种优质的音乐与图片</p>
</div>
</li>
<li><img src="//avatars3.githubusercontent.com/u/6339395?v=3&amp;s=250" class="avatar">
<div class="info"><a href="http://www.kylen314.com/" title="Vespa" target="_blank" class="name">Vespa</a>
<p class="descripition">算法菊苣，而且博客里都是什么我怎么完全看不懂QAQ</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/bca07f9107a0a02302b6ff339bf4cb50?s=250" class="avatar">
<div class="info"><a href="http://blog.ushiromiyabatora.com/" title="巴托拉" target="_blank" class="name">巴托拉</a>
<p class="descripition">夏日空大妈，擅长写 360 软文，然后还去了 360。</p>
</div>
</li>
<li><img src="http://tp3.sinaimg.cn/2816978834/180/5713441173/1" class="avatar">
<div class="info"><a href="http://blog.kotori.moe/" title="Sora" target="_blank" class="name">Sora</a>
<p class="descripition">萌音物语站长</p>
</div>
</li>
<li><img src="//avatars2.githubusercontent.com/u/13916411?v=3&amp;s=250" class="avatar">
<div class="info"><a href="https://touko.moe/" title="Touko" target="_blank" class="name">Touko</a>
<p class="descripition">湖建师护大的学霸（望</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/82e7b8daa8d0a8074b5dfbd632331d3a?s=250" class="avatar">
<div class="info"><a href="https://blog.cdog.me/" title="CDog" target="_blank" class="name">CDog</a>
<p class="descripition"></p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/147834caf9ccb0a66b2505c753747867?s=250" class="avatar">
<div class="info"><a href="http://ccloli.com/" title="cc" target="_blank" class="name">cc</a>
<p class="descripition">cc 是个大变态！</p>
</div>
</li>
<li><img src="//cdn.v2ex.com/gravatar/1bacdf49cd46c8dd39daae174438578c?s=250" class="avatar">
<div class="info"><a href="http://sakuracat.com/" title="Shiina" target="_blank" class="name">Shiina</a>
<p class="descripition"></p>
</div>
</li>
<li><a href="http://kou.moe/" title="萌口组" target="_blank" class="name">萌口组</a>
<p class="descripition">二次元大杂烩。</p>
</li>
<li><img src="//avatars2.githubusercontent.com/u/8687182?v=3&s=250" class="avatar">
<div class="info"><a href="https://www.tcdw.net/" title="吐槽大王" target="_blank" class="name">吐槽大王</a>
<p class="descripition">世界第二的 *nix 运维</p>
</div>
</li>
</ul>
</section>
</main>
<script src="assets/script/main.js"></script>
</body>
</html>