-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (199 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emanuel Flores - Front-end/UI Developer</title>
<link rel="icon" type="image/png" href="images/favicon.png"/>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/javascript" src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
// The amount of circles we want to make:
var count = 150;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: [0, 0],
radius: 10,
fillColor: 'white',
strokeColor: 'grey'
});
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
var maxPoint = new Point(view.size.width, 0);
var randomPoint = Point.random();
var point = maxPoint * randomPoint;
point.y = view.size.height +5;
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.y -= item.bounds.width / 40;
// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.bottom < 0) {
item.position = point;
}
}
}
</script>
</head>
<body>
<nav class="navbar hover">
<ul class="navbar-nav">
<li class="logo">
<div class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</div>
</li>
<li class="nav-item" id="home_page">
<a href="#" class="nav-link selected">
<svg class="teal-color" version=
"1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 247.789 247.789" style="enable-background:new 0 0 247.789 247.789;" xml:space="preserve">
<path d="M223.779,122.895c-3.313,0-6,2.687-6,6v106.895h-64.384v-67.102c0-3.313-2.687-6-6-6h-47c-3.313,0-6,2.687-6,6v53.207
c0,3.313,2.687,6,6,6s6-2.687,6-6v-47.207h35v61.102H30.01V88.929l93.884-75.239l96.132,77.04c2.586,2.073,6.362,1.655,8.434-0.93
c2.072-2.586,1.656-6.361-0.93-8.434L127.646,1.318c-2.192-1.758-5.312-1.758-7.504,0L20.258,81.366
c-1.421,1.139-2.248,2.86-2.248,4.682v155.741c0,3.313,2.686,6,6,6h199.769c3.314,0,6-2.687,6-6V128.895
C229.779,125.581,227.093,122.895,223.779,122.895z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<span class="link-text">home</span>
</a>
</li>
<li class="nav-item" id="work_page">
<a href="#" class="nav-link">
<svg class="teal-color" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100.353 100.353" style="enable-background:new 0 0 100.353 100.353;" xml:space="preserve">
<g>
<path d="M83.873,4.861H16.131c-6.07,0-11.009,4.939-11.009,11.009v46.622
c0,6.069,4.938,11.007,11.009,11.007h24.068v18.64H21.544c-0.829,0-1.5,0.671-1.5,1.5s0.671,1.5,1.5,1.5h20.155h16.605h20.155
c0.829,0,1.5-0.671,1.5-1.5s-0.671-1.5-1.5-1.5H59.804v-18.64h24.068c6.068,0,11.005-4.938,11.005-11.007V15.87
C94.878,9.8,89.941,4.861,83.873,4.861z M16.131,7.861h67.742c4.414,0,8.005,3.593,8.005,8.009v35.35H8.123V15.87
C8.123,11.453,11.715,7.861,16.131,7.861z M56.805,92.139H43.2v-18.64h13.605V92.139z M83.873,70.499H58.305H41.7H16.132
c-4.416,0-8.009-3.592-8.009-8.007v-8.271h83.755v8.271C91.878,66.907,88.287,70.499,83.873,70.499z"/>
<path d="M50.002,57.055c-3.097,0-5.616,2.518-5.616,5.612s2.519,5.612,5.616,5.612
c3.095,0,5.612-2.518,5.612-5.612C55.614,59.573,53.097,57.055,50.002,57.055z M50.002,65.279c-1.442,0-2.616-1.172-2.616-2.612
s1.173-2.612,2.616-2.612c1.44,0,2.612,1.172,2.612,2.612S51.442,65.279,50.002,65.279z"/>
</g>
</svg>
<span class="link-text">work</span>
</a>
</li>
<li class="nav-item" id="about_page">
<a href="#" class="nav-link">
<svg class="teal-color" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g>
<g>
<path class="st43" d="M25.2,48.4c-11.3,0-20.5-9.2-20.5-20.5S13.9,7.3,25.2,7.3s20.5,9.2,20.5,20.5S36.5,48.4,25.2,48.4z
M25.2,9.3C15,9.3,6.7,17.6,6.7,27.8S15,46.4,25.2,46.4s18.5-8.3,18.5-18.5S35.4,9.3,25.2,9.3z"/>
</g>
<g>
<path class="st43" d="M25.2,19.1c-0.6,0-1-0.4-1-1v-1.7c0-0.6,0.4-1,1-1s1,0.4,1,1v1.7C26.2,18.7,25.8,19.1,25.2,19.1z"/>
<path class="st43" d="M25.2,40.2c-0.6,0-1-0.4-1-1V22.1c0-0.6,0.4-1,1-1s1,0.4,1,1v17.1C26.2,39.8,25.8,40.2,25.2,40.2z"/>
</g>
</g>
</svg>
<span class="link-text">about</span>
</a>
</li>
<li class="nav-item">
<a href="mailto:[email protected]" class="nav-link">
<svg class="teal-color" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path class="st0" d="M22.3,3.2H2.5c-0.6,0-1.1,0.5-1.1,1.1v14.7c0,0.6,0.5,1.1,1.1,1.1h19.8c0.6,0,1.1-0.5,1.1-1.1V4.3
C23.4,3.7,22.9,3.2,22.3,3.2z M22.7,18.9c0,0.2-0.2,0.4-0.4,0.4H2.5c-0.2,0-0.4-0.2-0.4-0.4V4.3c0-0.2,0.2-0.4,0.4-0.4h19.8
c0.2,0,0.4,0.2,0.4,0.4L22.7,18.9L22.7,18.9z M21.6,4.6c-0.1,0-0.2,0-0.3,0.1l-8.5,7.1c-0.3,0.2-0.7,0.2-0.9,0L3.5,4.7
C3.4,4.6,3.2,4.6,3.1,4.7S2.9,4.8,2.9,4.9c0,0.1,0,0.3,0.1,0.3l8.5,7.1c0.5,0.5,1.3,0.5,1.9,0l8.5-7.1c0.1-0.1,0.1-0.2,0.1-0.2
c0-0.1,0-0.2-0.1-0.3C21.8,4.7,21.7,4.7,21.6,4.6z M8.5,12.3c-0.1,0-0.3,0-0.4,0.1L3,18c-0.1,0.1-0.1,0.2-0.1,0.4
c0,0.1,0.1,0.2,0.3,0.3c0.1,0,0.3,0,0.4-0.1L8.6,13c0.1-0.1,0.1-0.2,0.1-0.4S8.6,12.4,8.5,12.3z M16.7,12.5
c-0.1-0.1-0.2-0.1-0.4-0.1c-0.1,0-0.2,0.1-0.3,0.3c0,0.1,0,0.3,0.1,0.4l5.1,5.5c0.1,0.1,0.4,0.1,0.5,0c0.1-0.1,0.2-0.4,0-0.5
L16.7,12.5z"/>
</svg>
<span class="link-text">contact</span>
</a>
</li>
</ul>
</nav>
<div class="animated fadeIn">
<canvas id="myCanvas" resize="true"></canvas>
<div class="main">
<div class="welcome">
<div class="welcome-text">
<h1 class="welcome-heading">
Emanuel Flores,<br>
Front-end<span id="welcome">/</span>UI Developer
</h1>
<p class="welcome-info">
Hello. I design stuff and build things on the internet.
</p>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>