-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
267 lines (261 loc) · 13.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitFolio</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link href="headers.css" rel="stylesheet">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
<!-- mapbox ref -->
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<script src="crime_2012_december.json"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z">
</path>
</symbol>
<symbol id="home" viewBox="0 0 16 16">
<path
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
</symbol>
<symbol id="projects" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z" />
<path
d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
<path
d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />
</symbol>
<symbol id="github" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</symbol>
<symbol id="linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</symbol>
</svg>
<header class="px-3 py-2 bg-dark text-white">
<div class="container col-md-7">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<!-- <svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap" />
</svg> -->
</a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="/" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#home" />
</svg>
Home
</a>
</li>
<li>
<a id="postf" onclick="postFunction()" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#projects" />
</svg>
Projects
</a>
</li>
<li>
<a href="https://github.com/SanaC007" target="_blank" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#github" />
</svg>
GitHub
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/sanacorreia/" target="_blank" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#linkedin" />
</svg>
Linkedin
</a>
</li>
</ul>
</div>
</div>
</header><br>
<div class="container col-md-7 text-center">
<div class="row">
<div class="col-sm">
<div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dzehcMDdltA" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div><br>
<div class="row">
<div class="col-sm">
<h6>Full Stack Developer</h6>
<h1 style="font-weight: 700;">Sana Correia</h1>
<p>As a VDC Manager, I have spent the last five years delivering an exceptional customer experience for our
clients. <br> One of my strengths is strategically deploying VDC initiatives and solutions for our
stakeholders using my
advanced knowledge in researching design technologies, which I developed working as a consultant. In addition,
I've been interested in developing my coding skills for a while, as I am passionate about harnessing
technologies to create innovative solutions. The best way to contact me is through GitHub and LinkedIn. See
links above.
</p>
</div>
</div><br>
<div class="row">
<div class="col-sm">
<div class="bg-dark row p-5 mx-auto text-light">
<h6 class="pb-4">Technologies Expertise:</h6>
<div class="col p-2 text-center">
<img src="img/html-5.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center p-1">HTML5</figcaption>
</div>
<div class="col p-2 text-center">
<img src="img/css.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center p-1">CSS3</figcaption>
</div>
<div class="col p-2 text-center">
<img src="img/javascript.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center p-1">JavaScript</figcaption>
</div>
<div class="col p-2">
<img src="img/bootstrap.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center">Bootstrap</figcaption>
</div>
<div class="col p-2">
<img src="img/Git-Icon.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center">Git</figcaption>
</div>
<div class="col p-2">
<img src="img/mongodb-icon-1.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center">MongoDB</figcaption>
</div>
<div class="col p-2">
<img src="img/mongodb-icon-1.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center">Express</figcaption>
</div>
<div class="col p-2">
<img src="img/react.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center">React</figcaption>
</div>
<div class="col p-2">
<img src="img/nodejs-1.svg" class="rounded" alt="..." width="50" height="50">
<figcaption class="figure-caption text-center">Node.js</figcaption>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div id='map' style='width: 100%; height: 400px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FuYWpjMjMiLCJhIjoiY2tvZjM4NmZwMGZqeDJybnJwYmhiN2MwcSJ9.COQyOqetF-xoUtWs_XO3rA';
var map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-73.982034, 40.751612], // starting position [lng, lat]
zoom: 12 // starting zoom
});
var marker = new mapboxgl.Marker()
.setLngLat([-73.981936, 40.751612])
.addTo(map);
</script>
<sc-caption>Based in Midtown Manhattan, NY</sc-caption>
</div>
</div><br><br>
<!-- start of project post -->
<div
data-infinite-scroll="{ "path": ".pagination__next", "append": ".article", "status": ".scroller-status", "hideNav": ".pagination" }">
<div class="divider"></div><br>
<div class="row">
<h1>Eye Movement</h1>
<p class="fs-5">Two eyes that follow your mouse movement in sync. <br><a href="https://github.com/SanaC007/Eye-Movement" class="btn btn-outline-info btn-sm"
target="_blank">Code Sample</a></p>
<div class="col-sm">
<article class="article eyes bg-dark">
<div class="eye">
<div class="ball"></div>
</div>
<div class="eye">
<div class="ball"></div>
</div>
</article>
</div>
</div><br>
<div class="divider"></div><br>
<div class="row">
<h1>PacMen Exercise</h1>
<p class="fs-5">An exercise to create a web page that produces a PacMan that move about with a click of a button. <br><a
href="https://github.com/SanaC007/PacMen-Exercise" class="btn btn-outline-info btn-sm" target="_blank">Code Sample</a></p>
<div class="col-sm">
</div>
</div>
<div class="row">
<div class="col-sm bg-dark p-0 m-0 mb-0 pb-0">
<article class="article">
<iframe src="PacMen.html" width="100%" height="500px"></iframe>
</article>
</div>
</div><br>
<div class="divider"></div><br>
<div class="row">
<h1>Real Time Bus Tracker</h1>
<p class="fs-5">This code sample demonstrates how to track public buses in real-time using MBTA API. <br><a
href="https://github.com/SanaC007/RealTimeBusTracker" class="btn btn-outline-info btn-sm" target="_blank">Code Sample</a></p>
<div class="col-sm">
<article class="article">
<iframe src="bustracker.html" width="100%" height="516px"></iframe>
<!-- <caption>List of users</caption> -->
</article>
</div>
</div><br>
<div class="divider"></div><br>
<div class="row">
<h1>Heat Maps and Map Clustering</h1>
<p class="fs-5">This is a visualization of data on a map of Chicago.</p>
<div class="col-sm">
<article class="article">
<iframe src="heatmap.html" width="100%" height="500px"></iframe>
<caption>Heatmap visualization of Chicago crime data.</caption>
</article>
</div>
</div><br>
<div class="row">
<div class="col-sm">
<article class="article">
<iframe src="mapclustering.html" width="100%" height="500px"></iframe>
<caption>Clustering visualization of Chicago crime data.</caption>
</article>
</div>
</div><br>
</div>
<p class="pagination"><a class="pagination__next" href="page2.html">Next page</a></p>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</div><br>
<footer>
<div class="bg-dark px-3 text-center">
<div class="text-small">
<footer>
<div class="bd-footer p-3 p-md-4 text-muted">Sana Correia - Full Stack Developer
<p class=" ">New York City, NY © Copyright 2021. All rights reserved.</p>
</div>
</footer>
</div>
</div>
</footer>
<script src="bootstrap.bundle.min.js"></script>
<script src="infinite-scroll.pkgd.js"></script>
<script src="script.js"></script>
</body>
</html>