-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·187 lines (165 loc) · 10.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Victor Wang's portfolio</title>
<meta name="description" content="Hello, World! • A-Frame">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-html-shader/master/dist/aframe-html-shader.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<ul id="notifications" class="notifications">
<li>Firefox 45 is out!</li>
<li>New shirts arrived!</li>
</ul>
<div id="lorem" class="texture background-sci-fi">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate, sem in maximus gravida, ligula diam dignissim diam, sed aliquet nisl tellus quis risus. Suspendisse in turpis venenatis, molestie arcu non, feugiat ex. In non ipsum at sem molestie consectetur vel at massa. Nulla in mi accumsan risus auctor semper. Fusce et arcu eget metus ullamcorper viverra. Phasellus porta, nunc sed fermentum rutrum, lectus est commodo libero, ac consequat turpis purus nec odio. Nunc tempor elit nec nunc consectetur facilisis. Nullam venenatis arcu ut facilisis ultrices. Nullam rutrum mauris sit amet pellentesque ullamcorper. Nam ac magna aliquam, pulvinar elit eu, eleifend turpis.
</div>
<div id="short-lorem" class="texture background-sci-fi-light">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate, sem in maximus gravida, ligula diam dignissim diam, sed aliquet nisl tellus quis risus.
</div>
<div id="viveport" class="texture background-sci-fi-light">
<h3>Viveport</h3>
<p>Viveport is a content platform for virtual reality. Tech stack: Docker, Rreac.js, AWS, Jenkins, postCss</p>
<img src="img/viveport.png" alt="">
</div>
<div id="pic" class="texture background-sci-fi-light">
<img src="img/vic.jpg" alt="">
</div>
<div id="foxkeh" class="texture">
<!-- <img src="img/foxkeh.webp" alt=""> -->
<p class="intro">Hi, I'm Victor Wang, I'm a software engineer specialized in web engineering.
Particularly interested in building up MVP and entrepreneurship</p>
</div>
<div id="pcclient" class="texture background-sci-fi-light">
<!-- <img src="img/foxkeh.webp" alt=""> -->
<h3>Viveport Client</h3>
<p>Viveport Client is a PC client designed as a showcase for HTV Vive VR content, I'm responsible for developing all webviews in the app</p>
</div>
<div id="store" class="texture background-sci-fi-light">
<!-- <img src="img/foxkeh.webp" alt=""> -->
<h3>29Th of February</h3>
<p>A Famous Brand online store, supporting muti-language, muti-currency, payment flow, logistic management</p>
</div>
<div id="sodar" class="texture background-sci-fi-light">
<!-- <img src="img/foxkeh.webp" alt=""> -->
<h3>Sodar App</h3>
<p>Sodar is an e-calendar with social features that dedicates to transform the way we share, browse, and join future events.</p>
</div>
<div id="viveland" class="texture background-sci-fi-light">
<!-- <img src="img/foxkeh.webp" alt=""> -->
<h3>ViveLand</h3>
<p>ViveLand is a total solution for arcade system, I'm responsible for bulding CMS system for Administrator</p>
</div>
<div id="test" class="texture background-sci-fi-light">
<!-- <img src="img/foxkeh.webp" alt=""> -->
<h3>test la</h3>
<p>tjierjkajflasjdfjsdkfjasdkfj.</p>
</div>
<div class="splash-screen"></div>
<a-scene vr-mode-ui>
<a-entity id="camera" camera="active: true" look-controls>
<a-cursor material="color: #4CC3D9; shader: flat">
</a-entity>
<!-- 1st row -->
<a-entity class="row" rotation="0 120 0">
<!-- 1st column -->
<a-entity rotation="30 60 0">
<a-entity id="plane-1-1" class="news-entity" geometry="primitive:plane;width:5;height:5;" position="0 0 -10"
material="shader:html;target:#store;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#store;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
</a-entity>
</a-entity>
<!-- 3rd column -->
<a-entity rotation="30 0 0">
<a-entity id="plane-1-3" class="news-entity" geometry="primitive:plane;width:5;height:5;" position="0 0 -10"
material="shader:html;target:#viveport;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#short-lorem;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
</a-entity>
</a-entity>
<!-- slide in animation -->
<a-animation attribute="rotation" from="0 120 0" to="0 0 0" begin="2000" dur="1200" easing="ease-out-back"></a-animation>
</a-entity>
<!-- 2nd row -->
<a-entity class="row" rotation="0 -180 0">
<!-- 2nd column -->
<a-entity rotation="0 30 0">
<a-entity id="plane-2-2" class="news-entity" geometry="primitive:plane;width:5;height:5;" position="0 0 -10"
material="shader:html;target:#pic;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#foxkeh;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
</a-entity>
</a-entity>
<!-- 3rd column -->
<a-entity>
<a-entity id="plane-2-3" class="news-entity" position="0 0 -10" geometry="primitive:plane;width:5;height:5;"
material="shader:html;target:#foxkeh;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#foxkeh;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<!-- <a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation> -->
</a-entity>
</a-entity>
<!-- 5th column -->
<a-entity rotation="0 -60 0">
<a-entity id="plane-2-5" class="news-entity" geometry="primitive:plane;width:5;height:5;" position="0 0 -10"
material="shader:html;target:#viveland;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#viveland;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
</a-entity>
</a-entity>
<!-- slide in animation -->
<a-animation attribute="rotation" from="0 -180 0" to="0 0 0" begin="3000" dur="2400" easing="ease-out-elastic"></a-animation>
</a-entity>
<!-- 3rd row -->
<a-entity class="row" rotation="0 120 0">
<!-- 1st column -->
<a-entity rotation="-30 60 0">
<a-entity id="plane-3-1" class="news-entity" geometry="primitive:plane;width:5;height:5;" position="0 0 -10"
material="shader:html;target:#sodar;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#sodar;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
</a-entity>
</a-entity>
<!-- 4th column -->
<a-entity rotation="-30 -30 0">
<a-entity id="plane-3-4" class="news-entity" geometry="primitive:plane;width:5;height:5;" position="0 0 -10"
material="shader:html;target:#pcclient;transparent:true;ratio:width;fps:1.5;" toggle-detail="target:#pcclient;">
<a-animation attribute="position" to="0 0 -8" dur="200" begin="mouseenter"></a-animation>
<a-animation attribute="position" to="0 0 -10" dur="200" begin="mouseleave"></a-animation>
<a-animation attribute="geometry.width" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
<a-animation attribute="geometry.height" from="5" to="10" dur="500" direction="alternate" begin="click"></a-animation>
</a-entity>
</a-entity>
<!-- slide in animation -->
<a-animation attribute="rotation" from="0 120 0" to="0 0 0" begin="2000" dur="1800" easing="ease-out-back"></a-animation>
</a-entity>
<!-- <a-entity id="news-detail" geometry="primitive:plane;width:4;height:5;" rotation="0 0 0" position="5 0 -5"></a-entity> -->
<!-- <a-cylinder height="0" radius="30" position="0 0 0"></a-cylinder> -->
<!-- <a-entity>
<a-cylinder position="0 2 0" radius="11" height="5" side="back" open-ended="true" color="#FFF"></a-cylinder>
</a-entity> -->
<!-- <a-entity>
<a-cylinder position="0 -5 0" radius="10" height="1.6" side="back" open-ended="true" color="#FFF"></a-cylinder>
</a-entity> -->
<a-sky src="img/space.jpg" rotation="0 -130 0"></a-sky>
<!-- <a-sky segments-height="1" segments-width="1" color="#ECECEC"></a-sky> -->
</a-scene>
</body>
</html>