-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (230 loc) · 9.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Place-holder" />
<meta name="author" content="Ofir Klein" />
<title>Ofir Klein's Visualization Portfolio</title>
<!-- Bootstrap CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.backup.css" rel="stylesheet" />
<!-- Font Awesome CSS from CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<!-- Google web font -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Sapere aude</a>
<div class="float-end">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Welcome Section -->
<header class="bg-secondary text-white boss-image">
<div class="container text-center ">
<h1>Ofir J. Klein</h1>
<p class="lead">
Visualization Portfolio
</p>
</div>
</header>
<!-- Projects Section -->
<section id="projects" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#" data-bs-toggle="modal" data-bs-target="#proj1"><img class="card-img-top fit-image" src="images/johnsnow.png" alt="#" /></a>
<div class="card-body">
<h4 class="card-title">
<a target="_blank" href="https://oklein1.github.io/JohnSnowMap_Visualized/">Mapping the 1854 Broad Street
Pump
Outbreak</a>
</h4>
<p class="card-text">
In August of 1854, one of the most terrifying outbreaks of disease in the history of the western world
occurred in London, England.
See how Jon Snow mapped this epidemic in his infamous spatial analysis.
</p>
</div>
</div>
</div>
<!-- Modal for above card. -->
<div class="modal fade" id="proj1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">John Snow project</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="images/johnsnow.png" class="mw-100" alt="Preview of map.">
<h5>Visit <a href="#">map</a></h5>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top fit-image" src="images/brewery_2.jpeg" alt="#" /></a>
<div class="card-body">
<h4 class="Brewery">
<a target="_blank" href="images/final_map_1200.png">Breweries in the US</a>
</h4>
<p class="card-text">
Ever wonder how many breweries are in the US? Ever want to take a trip to go visit them?
Check out this Brewery map of all breweries in the US!
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top fit-image" src="images/christmas_market.png" alt="" /></a>
<div class="card-body">
<h4 class="card-title">
<a target="_blank" href="https://oklein1.github.io/berlin-christmas-671final/">A Very Berlin Christmas
Market</a>
</h4>
<p class="card-text">
Can you smell the Glüewein? The Gingerbread Cookies? Ever want to know a little more about Berlin?
This map gives you a little taste into the Christmas Markets located in Berlin.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top fit-image" src="./images/shipwreck.png" alt="" /></a>
<div class="card-body">
<h4 class="card-title">
<a target="_blank" href="images/underwaterMuseum.png">Seattle's Underwater Museums</a>
</h4>
<p class="card-text">
Feeling the call to adventure? Yearning to explore a world right under your nose?
Learn what Seattle's underwater museums have to offer with this National Geographic inspired map!
</p>
</div>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top fit-image" src="./images/dijkstra.png" alt="" /></a>
<div class="card-body">
<h4 class="card-title">
<a target="_blank" href="https://oklein1.github.io/NYC_Subway_DijkstraGTFS/">From here to there: Dijkstra's Shortest Path</a>
</h4>
<p class="card-text">
This project is currently a stable, but buggy, proof of concept (POC).
The goal of this POC is to visualizes New York City's GTFS subway data,
allow a user to choose an origin and destination, then finally run Dijkstra's algorithm.
Before handling transfers and connectivity, the primary goal of this POC was to just perform
Dijkstra's algorithm using NYC's 1 train. Further functionality to come!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2>About me:</h2>
<div class="my-5 clearfix">
<div class="float-md-left mb-5 mr-md-4">
<img class="rounded-circle img-fluid" src="images/me_2.png" alt="" />
</div>
<p class="lead">
Welcome! My name is Ofir. I'm a Data Analyst, Functional Programmer, and Geographer. I specialize in
natural language processing,
transportation modeling, GIS analytics, and knowledge management. Currently my dissertation focuses on the
role of design in computer programming languages.
Programming languages express what we think, not how we think. By comparing Clojure (functional programming language) with Python (object oriented language),
the project focuses on the design of programming languages to show how they, in turn, set the scope, domain,
and boundaries for a totally new kind of interfacing, thinking, and way of see things. And this moment arises only
at that place, at that concrescent moment of interaction, between programmer and machine. Thus, while programming languages
express what we think, the design and interface shapes how we think.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<dt>Coding:</dt>
<dd>Python</dd>
<dd>Clojure(script)</dd>
<dd>JavaScript</dd>
<dd>Scheme</dd>
<dd>Solidity</dd>
<h3>Mapping Software:</h3>
<dl>
<dd>ArcPro</dd>
<dd>ArcMap</dd>
<dd>QGIS</dd>
<br>
</dl>
</div>
<div class="col-md-6">
<h3>Get in touch!</h3>
<ul class="list-unstyled">
<li class="">
<i class="fa fa-twitter mr-2"></i><a href="https://twitter.com/ofir_klein">@ofir_klein</a>
</li>
<li class="mr-2">
<i class="fa fa-github mr-2"></i><a href="https://github.com/Oklein1">oklein1</a>
</li>
<li class="">
<i class="fa fa-envelope mr-2"></i><a href="[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">
Have questions? Shoot me an email!
</p>
</div>
</footer>
<!-- JQuery JavaScript -->
<!-- Note: jQuery is no longer needed with Bootstrap 5 and above. -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>