Skip to content

Commit 2d6924f

Browse files
fnlctrlfnlctrl
committed
upgrade to vue 2.0
1 parent 609bc8c commit 2d6924f

40 files changed

+599
-322
lines changed

‎404.html

+15-17
Large diffs are not rendered by default.

‎index.html

+15-17
Large diffs are not rendered by default.

‎package.json

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "portfolio",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"description": "fnlCtrl's portfolio",
55
"license": "MIT",
66
"author": {
@@ -13,30 +13,33 @@
1313
},
1414
"dependencies": {
1515
"marked": "^0.3.5",
16-
"vue": "^1.0.21",
17-
"vue-i18n": "^2.4.1",
18-
"vue-router": "^0.7.13"
16+
"vue": "^2.0.0-rc.1",
17+
"vue-i18n": "^4.2.0",
18+
"vue-router": "^2.0.0-rc.3"
1919
},
2020
"devDependencies": {
2121
"autoprefixer-loader": "^3.2.0",
22-
"babel-core": "^6.7.6",
22+
"babel-core": "^6.13.2",
2323
"babel-loader": "^6.2.4",
2424
"babel-preset-es2015": "^6.6.0",
2525
"css-loader": "^0.23.1",
2626
"extract-text-webpack-plugin": "^1.0.1",
2727
"file-loader": "^0.8.5",
2828
"gulp": "^3.9.1",
2929
"gulp-inline": "^0.1.1",
30+
"html-loader": "^0.4.3",
3031
"less": "^2.6.1",
3132
"less-loader": "^2.2.3",
3233
"raw-loader": "^0.5.1",
3334
"style-loader": "^0.13.1",
35+
"svg-sprite-loader": "0.0.26",
3436
"url-loader": "^0.5.7",
35-
"vue-html-loader": "^1.2.2",
36-
"webpack": "^1.12.14",
37+
"vue-loader": "^9.3.2",
38+
"webpack": "^1.13.1",
3739
"webpack-dev-server": "^1.14.1"
3840
},
3941
"scripts": {
42+
"optimize-icons": "svgo --config=svgo.config.yml src/icons",
4043
"start": "webpack-dev-server --config webpack.config.js",
4144
"build": "webpack -p && gulp build && cp index.html 404.html"
4245
},

‎src/components/gallery/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import MdT from 'md-transform';
44

55
export default {
66
template,
7-
replace: false,
87
props: {
98
data: {
109
type: Object,
@@ -13,7 +12,7 @@ export default {
1312
},
1413
methods: {
1514
redirect({target: {href}}) {
16-
href && this.$route.router.go(href.replace(window.location.origin,''));
15+
href && this.$router.push(href.replace(window.location.origin,''));
1716
}
1817
}
1918
};

‎src/components/gallery/style.less

+1-21
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,10 @@
1-
gallery {
1+
.gallery {
22
height: 100%;
33
display: block;
44
position: relative;
5-
overflow: auto;
65
column-count: 100;
76
column-width: 200px;
87
column-gap: 20px;
9-
&::-webkit-scrollbar-track {
10-
background: linear-gradient(
11-
to bottom,
12-
transparent 0%,
13-
transparent 30%,
14-
rgba(0, 0, 0, 0.3) 50%,
15-
transparent 70%,
16-
transparent 100%
17-
)
18-
}
19-
&::-webkit-scrollbar {
20-
width: 6px;
21-
height: 6px;
22-
}
23-
24-
&::-webkit-scrollbar-thumb {
25-
border-radius: 10px;
26-
background: rgba(0, 0, 0, 0.6);
27-
}
288
ul {
299
display: none;
3010
}

‎src/components/gallery/template.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
<div class="item" v-for="(title, item) in data" @click.capture.prevent="redirect">{{{ item.html }}}</div>
1+
<div class="gallery">
2+
<div class="item"
3+
v-for="(item, title) in data"
4+
v-html="item.html"
5+
@click.capture.prevent="redirect"></div>
6+
</div>

‎src/components/icon/index.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
export default {
2-
github: require('../../icons/ic-github.svg'),
3-
gplus: require('../../icons/ic-gplus.svg'),
4-
star: require('../../icons/ic-star.svg'),
5-
zhihu: require('../../icons/ic-zhihu.svg')
1+
module.exports = {
2+
props: {
3+
name: {
4+
type: String,
5+
required: true
6+
}
7+
},
8+
template: `<svg icon><use v-bind="{'xlink:href': name}"></use></svg>`
69
};

‎src/components/navigation/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import template from './template.html';
33

44
export default {
55
template,
6-
replace: false,
76
data: () => ({
87
views: [
98
"designs",

‎src/components/navigation/style.less

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
navigation {
1+
.navigation {
22
position: fixed;
33
width: auto;
44
height: auto;
55
z-index: 98;
66
}
77

88
@media (min-width: 640px) {
9-
navigation {
9+
.navigation {
1010
top: 50%;
1111
height: 100px;
1212
margin-top: -50px;
@@ -59,7 +59,7 @@ navigation {
5959
}
6060

6161
@media (max-width: 640px) {
62-
navigation {
62+
.navigation {
6363
padding: 0 40px;
6464
width: 100%;
6565
top: 0;

‎src/components/navigation/template.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
<a class="dot" v-for="view in views" v-link="{path: '/' + view, activeClass: 'active'}">
2-
<span class="hint">{{ view }}</span>
3-
</a>
1+
<div class="navigation">
2+
<!--activeClass-->
3+
<router-link class="dot" v-for="view in views" active-class="active" :to="{path: '/' + view}">
4+
<span class="hint">{{ view }}</span>
5+
</router-link>
6+
</div>

‎src/components/profile/contacts.js

+14-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
export default {
2-
"github": "http://github.com/fnlctrl",
3-
"zhihu": "http://www.zhihu.com/people/fnlctrl",
4-
"gplus": "http://google.com/+宋铄运"
5-
}
1+
export default [
2+
{
3+
url: 'http://github.com/fnlctrl',
4+
icon: require('github.svg')
5+
},
6+
{
7+
url: 'http://www.zhihu.com/people/fnlctrl',
8+
icon: require('zhihu.svg')
9+
},
10+
{
11+
url: 'http://google.com/+宋铄运',
12+
icon: require('gplus.svg')
13+
}
14+
]

‎src/components/profile/index.js

+22-28
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,32 @@ import './style.less';
22
import template from './template.html';
33
import skills from './skills.js';
44
import contacts from './contacts.js';
5-
import icon from 'icon';
65

76
export default {
87
template,
9-
replace: false,
8+
props: {
9+
value: {
10+
type: Boolean,
11+
default: false
12+
}
13+
},
1014
data: () => ({
1115
contacts,
1216
skills,
13-
active: false,
14-
icon,
15-
styles: Object.keys(skills).reduce((prev, curr) => {
16-
var color = skills[curr].style.color;
17-
return prev + `
18-
._${color}:hover path{
19-
fill: #${color};
20-
}
21-
._${color} .background {
22-
background: #${color};
23-
}
24-
`
25-
}, '')
26-
}),
27-
events: {
28-
'about:hide'() { this.active = false; }
29-
},
30-
watch: {
31-
active(val) {
32-
if (val) {
33-
this.$el.className += ' active';
34-
} else {
35-
this.$el.className = this.$el.className.replace(' active', '')
36-
}
37-
}
38-
}
17+
styles: `
18+
<style>${
19+
Object.keys(skills).reduce((prev, curr) => {
20+
var color = skills[curr].style.color;
21+
return prev + `
22+
._${color}:hover path{
23+
fill: #${color};
24+
}
25+
._${color} .background {
26+
background: #${color};
27+
}
28+
`
29+
}, '')
30+
}</style>
31+
`
32+
})
3933
};

‎src/components/profile/style.less

+16-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
profile {
1+
.profile {
22
display: block;
3+
svg {
4+
fill: currentColor;
5+
}
36
.skills {
47
h1 {
58
font-weight: 500;
@@ -66,8 +69,9 @@ profile {
6669

6770
@media (min-width: 640px) {
6871
/* sidebar normal */
69-
profile {
72+
.profile {
7073
position: fixed;
74+
top: 0;
7175
width: 320px;
7276
padding: 30px;
7377
box-sizing: border-box;
@@ -156,16 +160,20 @@ profile {
156160
color: inherit;
157161
margin: 10px 6px 0 0;
158162
opacity: 0.6;
163+
height: 25px;
164+
width: 25px;
165+
svg {
166+
height: 100%;
167+
width: 100%;
168+
}
159169
&:hover {
160170
opacity: 1;
161171
}
162-
object {
163-
pointer-events: none;
164-
}
165172
}
166173
}
167174
}
168-
profile.active {
175+
176+
.profile.active {
169177
background: rgba(0, 0, 0, 0.3);
170178
transform: translateX(-176px);
171179
pointer-events: auto;
@@ -184,9 +192,6 @@ profile {
184192
transform: scale(1);
185193
}
186194
}
187-
~ * {
188-
transform: translateX(-320px);
189-
}
190195
}
191196

192197
@keyframes glow {
@@ -206,11 +211,11 @@ profile {
206211
}
207212

208213
@media (max-width: 640px) {
209-
profile {
214+
.profile {
210215
width: 100%;
211216
padding: 30px;
212217
box-sizing: border-box;
213-
background: rgba(0,0,0,0.2 );
218+
background: rgba(0, 0, 0, 0.2);
214219
.header {
215220
.avatar {
216221
float: left;

‎src/components/profile/template.html

+31-29
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
<div class="header">
2-
<div class="avatar" @click="active = !active">
3-
<img ease-2 src="../../icons/avatar.jpg"/>
4-
<div class="background"></div>
1+
<div class="profile" :class="{active: value}" @click.stop>
2+
<div class="header">
3+
<div class="avatar" @click.stop.prevent="$emit('input', !value)">
4+
<img ease-2 src="~avatar.jpg"/>
5+
<div class="background"></div>
6+
</div>
7+
<div class="contacts" ease-3>
8+
<h1>fnlCtrl</h1>
9+
<div>[email protected]</div>
10+
<a v-for="item in contacts" :href="item.url" ease-2 target="_blank">
11+
<icon :name="item.icon"></icon>
12+
</a>
13+
</div>
514
</div>
6-
<div class="contacts" ease-3>
7-
<h1>fnlCtrl</h1>
8-
<div>[email protected]</div>
9-
<a v-for="(name,link) in contacts" ease-2 v-link="link" target="_blank">
10-
{{{ icon[name] }}}
11-
</a>
15+
<div class="about section">
16+
宋铄运(时渊)
17+
<p class="font-song">Junior, ISEE@ZJU</p>
1218
</div>
13-
</div>
14-
<div class="about section">
15-
宋铄运(时渊)
16-
<p class="font-song">Junior, ISEE@ZJU</p>
17-
</div>
18-
<div class="skills section">
19-
<h1>Skill Points</h1>
20-
<div class="item" v-for="(name, skill) in skills" :class="'_'+skill.style.color">
21-
<div class="alias" ease-out-2 :class="skill.style.shape">
22-
{{skill.alias }}
23-
<div class="background" ease-out-2></div>
24-
</div>
25-
<div class="stars" ease-out-2>
26-
<svg :style="{width:skill.star/5*100+'%'}" height="24px">
27-
<path ease-out-2 fill="currentColor"
28-
d="M12.5,0l3.9,7.9L25,9.2l-6.2,6.1l1.4,8.7l-7.7-4.1L4.8,24l1.5-8.7L0,9.2l8.6-1.3L12.5,0z M37.5,0l3.9,7.9L50,9.2l-6.2,6.1l1.4,8.7l-7.7-4.1L29.8,24l1.5-8.7L25,9.2l8.6-1.3L37.5,0z M62.5,0l3.9,7.9L75,9.2l-6.2,6.1l1.4,8.7l-7.7-4.1L54.8,24l1.5-8.7L50,9.2l8.6-1.3L62.5,0z M87.5,0l3.9,7.9l8.6,1.3l-6.2,6.1l1.4,8.7l-7.7-4.1L79.8,24l1.5-8.7L75,9.2l8.6-1.3L87.5,0z M112.5,0l3.9,7.9l8.6,1.3l-6.2,6.1l1.4,8.7l-7.7-4.1l-7.7,4.1l1.5-8.7L100,9.2l8.6-1.3L112.5,0z"></path>
29-
</svg>
19+
<div class="skills section">
20+
<h1>Skill Points</h1>
21+
<div class="item" v-for="(skill, name) in skills" :class="'_'+skill.style.color">
22+
<div class="alias" ease-out-2 :class="skill.style.shape">
23+
{{skill.alias }}
24+
<div class="background" ease-out-2></div>
25+
</div>
26+
<div class="stars" ease-out-2>
27+
<svg :style="{width:skill.star/5*100+'%'}" height="24px">
28+
<path ease-out-2 fill="currentColor"
29+
d="M12.5,0l3.9,7.9L25,9.2l-6.2,6.1l1.4,8.7l-7.7-4.1L4.8,24l1.5-8.7L0,9.2l8.6-1.3L12.5,0z M37.5,0l3.9,7.9L50,9.2l-6.2,6.1l1.4,8.7l-7.7-4.1L29.8,24l1.5-8.7L25,9.2l8.6-1.3L37.5,0z M62.5,0l3.9,7.9L75,9.2l-6.2,6.1l1.4,8.7l-7.7-4.1L54.8,24l1.5-8.7L50,9.2l8.6-1.3L62.5,0z M87.5,0l3.9,7.9l8.6,1.3l-6.2,6.1l1.4,8.7l-7.7-4.1L79.8,24l1.5-8.7L75,9.2l8.6-1.3L87.5,0z M112.5,0l3.9,7.9l8.6,1.3l-6.2,6.1l1.4,8.7l-7.7-4.1l-7.7,4.1l1.5-8.7L100,9.2l8.6-1.3L112.5,0z"></path>
30+
</svg>
31+
</div>
3032
</div>
33+
<div v-html="styles"></div>
3134
</div>
32-
<style v-html="styles"></style>
33-
</div>
35+
</div>

‎src/icons/github.svg

+1
Loading

‎src/icons/gplus.svg

+1
Loading

‎src/icons/ic-github.svg

-1
This file was deleted.

‎src/icons/ic-gplus.svg

-1
This file was deleted.

0 commit comments

Comments
 (0)