-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
107 lines (90 loc) · 3.54 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
<!DOCTYPE html>
<head>
<title>Virtual Portfolio</title>
<style>body { margin: 0; overflow:hidden }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="./static_assets/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="manifest" href="./static_assets/manifest.json">
<link rel="mask-icon" href="./static_assets/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<meta name="author" content="Fang W. Shen">
<meta name="description" content="Professional Portfolio">
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" type="image/png" sizes="32x32" href="./static_assets/favicon.ico">
</head>
<body>
<canvas id="c" style="width:100vw;height:100vh;"></canvas>
<!-- Preloader -->
<div id="preload" style="
position: relative;
width: 100%;
height: 100vh;
background: black;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
transition: all 2s;
">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<!-- / Initializing -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="./client.bundle.js"></script>
<script>
// Initialize the React VR application
ReactVR.init(
'index.bundle.js?platform=vr&dev=false',
document.body,
{
cursorVisibility: 'visible',
},
);
</script>
<script type="text/javascript">
setTimeout(()=>{
$('#preload').addClass('loaded');
$('canvas').addClass('easein')
$($('canvas').parent()[1]).css('position',"fixed")
},3000)
</script>
<script type="text/javascript">
function fall() {
canvasMatrix.fillStyle = "rgba(0, 0, 0,0.09)",
canvasMatrix.fillRect(0, 0, c.width, c.height),
canvasMatrix.fillStyle = "rgb(18, 255, 28)",
canvasMatrix.font = customfont + "px Verdana";
for (var a = 0; a < letters.length; a++) {
var b = characters[Math.floor(Math.random() * characters.length)];
var x = " "+words[Math.floor(Math.random() * words.length)];
if (letters[a] * customfont > c.height && Math.random() > .995 && (letters[a] = 0)) {
}
else {
canvasMatrix.fillText(b, a * customfont, letters[a] * customfont)
canvasMatrix.fillText(x, a * customfont, letters[a] * customfont)
}
letters[a]++
}
}
var c = document.getElementById("c"),
characters = "abcdefghijklmnopqrstuvxzwy0123456789%&#?¥µ§ØΩφΣπ$Üñþ√ϖϑβξ¶Æ".split(""),
canvasMatrix = c.getContext("2d"),
words = ['Hello World','<html>','Sass {Css}','Bio-Med','Engineering','Programming','Javascript',"σ = F x n / A ", 'Grunt','Angular','Ruby','Rails','Ionic','Polymer','Δv = Δt(a)','Design','Research','Development'];
c.height = window.innerHeight;
c.width = window.innerWidth;
for (var customfont = 13, columns = c.width / customfont, letters = [], x = 0; x < columns; x++) {letters[x] = 1;}
setInterval(fall, 100)
</script>
</body>
</html>