-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork.html
299 lines (281 loc) · 17.6 KB
/
work.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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!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 / 50;
// 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">
<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 selected">
<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-work">
<div class="title">
<h1 class="shadow">Work</h1>
</div>
<div class="horizontal-bars">
<div class="left-bars shared">
<h2>Sites</h2>
<div class="hidden">
<div class="card box-shadow">
<div class="design-image">
<img src="images/ash_site.png" alt="" srcset="">
</div>
<div class="text-card">
<h3>ASH Construction & Remodeling</h3>
<p>A small business, originally known as Sanders Construction, located in the Chicagoland area requested a user-friendly web presence to attract future clients. We chose to move forward with a sleek and responsive 3-page custom site built off semantic HTML, CSS, and vanilla JavaScript.</p>
<a target="_blank" href="https://www.ashconstructions.com/">
<div class="button">
VISIT SITE
</div>
</a>
</div>
</div>
<div class="gap"></div>
<div class="card box-shadow">
<div class="design-image">
<img src="images/yelpcamp.png" alt="" srcset="">
</div>
<div class="text-card">
<h3>YelpCamp</h3>
<p>Personal project that is still in development. This application is built using EJS templating and Bootstrap styling for the front-end, and Express.js and Node.js to run the back-end. MongoDB is the database employed for this application.</p>
<a target="_blank" href="https://fast-taiga-59380.herokuapp.com">
<div class="button">
VISIT SITE
</div>
</a>
</div>
</div>
<div class="gap"></div>
<div class="card box-shadow">
<div class="design-image">
<img src="images/old_portfolio.png" alt="" srcset="">
</div>
<div class="text-card">
<h3>First Portfolio Website</h3>
<p>Previous portfolio website designed and constructed while attending college. Built using HTML, CSS, and JS. Designed to showcase a variety of skills including HTML/CSS proficiency, responsive web design, and Adobe Creative Cloud.</p>
<a target="_blank" href="https://silly-shirley-353f64.netlify.app">
<div class="button">
VISIT SITE
</div>
</a>
</div>
</div>
</div>
<svg class="expander arrow-color" enable-background="new 0 0 32 32" id="Слой_1" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Double_Chevron_Down"><path d="M22.285,15.349L16,21.544l-6.285-6.196c-0.394-0.391-1.034-0.391-1.428,0c-0.394,0.391-0.394,1.024,0,1.414 l6.999,6.899c0.379,0.375,1.048,0.377,1.429,0l6.999-6.9c0.394-0.39,0.394-1.024,0-1.414 C23.319,14.958,22.679,14.958,22.285,15.349z"/><path d="M15.286,16.662c0.379,0.375,1.048,0.377,1.429,0l6.999-6.899c0.394-0.391,0.394-1.024,0-1.414 c-0.394-0.391-1.034-0.391-1.428,0L16,14.544L9.715,8.349c-0.394-0.391-1.034-0.391-1.428,0c-0.394,0.391-0.394,1.024,0,1.414 L15.286,16.662z"/></g><g/><g/><g/><g/><g/><g/>
</svg>
</div>
<div class="right-bars shared">
<h2>Designs</h2>
<div class="hidden">
<div class="card box-shadow">
<div class="design-image sm-design">
<img src="images/ash-logos.png" alt="" srcset="">
</div>
<div class="text-card">
<h3>ASH Construction & Remodeling</h3>
<p>In addition to ASH Construction's new website, they also requested a new logo design under their new image. Sketched and designed using Adode Illustrator.</p>
<div class="button js-btn">
VIEW COMP
</div>
</div>
</div>
<div class="gap"></div>
<div class="card box-shadow">
<div class="design-image sm-design">
<img src="images/bates_boys.png" alt="" srcset="">
</div>
<div class="text-card">
<h3>Bates Boys Blends</h3>
<p>Bates Boys Blends is a small business located in St. Charles, MO. The company was in need of new product labels and a banner for upcoming markets and distribution. The layout, typography, and content were all developed and approved under the direction of the business owner.</p>
<div class="button js-btn">
VIEW COMP
</div>
</div>
</div>
</div>
<svg class="expander arrow-color" enable-background="new 0 0 32 32" id="Слой_1" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Double_Chevron_Down"><path d="M22.285,15.349L16,21.544l-6.285-6.196c-0.394-0.391-1.034-0.391-1.428,0c-0.394,0.391-0.394,1.024,0,1.414 l6.999,6.899c0.379,0.375,1.048,0.377,1.429,0l6.999-6.9c0.394-0.39,0.394-1.024,0-1.414 C23.319,14.958,22.679,14.958,22.285,15.349z"/><path d="M15.286,16.662c0.379,0.375,1.048,0.377,1.429,0l6.999-6.899c0.394-0.391,0.394-1.024,0-1.414 c-0.394-0.391-1.034-0.391-1.428,0L16,14.544L9.715,8.349c-0.394-0.391-1.034-0.391-1.428,0c-0.394,0.391-0.394,1.024,0,1.414 L15.286,16.662z"/></g><g/><g/><g/><g/><g/><g/></svg>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<img id="imgLocation" src="" alt="" srcset="">
</div>
</div>
</div>
<script src="js/script.js"></script>
<script src="js/work.js"></script>
</body>
</html>