-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
334 lines (295 loc) · 14.5 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
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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!doctype html>
<html lang="en" class="no-js">
<head>
<!-- Alternate Fixed and Scroll Backgrounds from https://codyhouse.co -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.jeffreylancaster.com/jeffreylancaster.png"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<title>jeffreylancaster.com</title>
</head>
<body>
<header class="main-header">
<div class="main-header-logo">
<a href="index.html#top" class="scroll">
. . .
<!-- <img src="img/logo.svg" alt="Logo"> -->
</a>
</div>
<nav class="main-nav js-main-nav">
<ul class="main-nav-list">
<li><a href="#top" class="scroll">Home</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#projects" class="scroll">Projects</a></li>
<li><a href="#lists" class="scroll">Lists</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
</ul>
</nav> <!-- main-nav -->
</header>
<main id="top">
<div class="fixed-bg fixed-bg--1">
<div class="fixed-bg-content">
<h1 class="typed" style="display: inline;">
I am ...
</h1>
</div>
</div>
<div class="scrolling-bg" id="about">
<div class="scrolling-bg-content">
<ul class="cards">
<li class="cards-item-one-fifth">
<div class="profile-card">
<img src="img/JRL_gif_1_sq.gif" class="profile">
</div>
</li>
<li class="cards-item-four-fifths">
<div class="profile-card">
<!-- <p>
I'm a curious thinker and doer, technologist, and educator looking for interesting problems to solve! I have a diverse background as a product developer, a project manager, a librarian, a chemist, a historian, and an artist and have worked in corporate, non-profit, and academic environments. I'm a leader who loves the challenge of quickly learning about customers and/or clients in order to make an impact. I like puns, good grammar, data, and data visualization.
</p> -->
<p>
Hello and welcome! This is a space where I play (not a portfolio) - it's where I try to organize some things that interest me and some projects I've done, and to work through or test out new ideas.
</p>
<p style="margin-top: 1em;">
You see, I've done a lot of different things and worn a number of very different hats (chemist, artist, historian, librarian, developer, educator), and that makes it hard to articulate a snippet description of "who I am" or "what I do" or "what I want to do next". I'm a curious person with a breadth and depth of interests and experiences, and I love to bring that diversity of thought to bear on new problems, some of my own making and some from other people.
</p>
<p style="margin-top: 1em;">
Have an interesting problem? <a href="#contact" class="scroll">Let's talk!</a> I'll also happily banter about puns, good grammar, science, data, data visualization, or anything else really.
</p>
<p style="text-align: right; margin-top: 2em;">
<a href="https://docs.google.com/document/d/1J81jUwlsFkPvvOcuAPBy05VgPW07-c7H5fECJsN9Rus/edit?usp=sharing" target="_blank">Full CV (Google Docs)</a>
</p>
<p style="text-align-last: justify; margin-top: 2em;" class="social">
<a href="https://www.linkedin.com/in/jeffreylancaster" target="_blank" style="color: #3371b7;"><i class="fab fa-linkedin"></i></a><!--linkedin-->
<a href="https://www.instagram.com/jeffreylancaster/" target="_blank" style="color: #000000;"><i class="fab fa-instagram"></i></a><!--instagram-->
<a href="https://www.facebook.com/jeffrey.lancaster" target="_blank" style="color: #3e5b98;"><i class="fab fa-facebook-square"></i></a><!--facebook-->
<a href="https://join.skype.com/invite/P21rQXfKVGwC" target="_blank" style="color: #28abe3;"><i class="fab fa-skype"></i></a><!--skype--><!-- onClick="javascript: alert('Skype username is: jeffrey-lancaster');" -->
<a href="https://jeffreylancaster.tumblr.com/" target="_blank" style="color: #45556c;"><i class="fab fa-tumblr-square"></i></a><!--tumblr-->
<a href="https://pinterest.com/j_lancaster/" target="_blank" style="color: #c92619;"><i class="fab fa-pinterest-square mobile-hidden"></i></a><!--pinterest-->
<a href="https://open.spotify.com/user/122824653?si=YsdQTXzaTLOrmH4gEXn5zg" style="color: #7bb342;"><i class="fab fa-spotify"></i></a><!--spotify-->
<a href="https://jeffreylancaster.blogspot.com/" target="_blank" style="color: #ec661c"><i class="fab fa-blogger mobile-hidden"></i></a><!--blogger-->
<!--<a href="http://www.google.com/profiles/jeffrey.lancaster" target="_blank">B</a>--><!--buzz-->
<!--<a href="http://www.classmates.com/people/Jeffrey-Lancaster/8677482207" target="_blank">C</a>--><!--classmates-->
<!--<a href="http://www.diigo.com/user/jeffreylancaster" target="_blank">D</a>--><!--diigo-->
<!--<a href="http://www.epernicus.com/jrl3" target="_blank">E</a>--><!--epernicus-->
<a href="https://foursquare.com/j_lancaster" target="_blank" style="color: #f94877"><i class="fab fa-foursquare mobile-hidden"></i></a><!--foursquare-->
<!--<a href="http://profiles.friendster.com/jlancaster" target="_blank">H</a>--><!--friendster-->
<!--<a href="https://plus.google.com/u/0/100912860880982944809/" target="_blank" style="color: #dd4b39;"><i class="fab fa-google-plus-square mobile-hidden"></i></a>--><!--google+-->
<!--<a href="http://alumni.kygsp.org/ProfileView.aspx?MemberID=10493" target="_blank">J</a>--><!--gsp-->
<!--<a href="https://ifttt.com/people/jeffreylancaster" target="_blank">K</a>--><!--ifttt-->
<!--<a href="http://www.mendeley.com/profiles/jeffrey-lancaster/" target="_blank">N</a>--><!--mendeley-->
<!--<a href="http://www.myspace.com/jeffreylancaster" target="_blank">O</a>--><!--myspace-->
<a href="https://www.researchgate.net/profile/Jeffrey_Lancaster/" target="_blank" style="color: #00CCBB;"><i class="fab fa-researchgate mobile-hidden"></i></a><!--researchgate-->
<!--<a href="https://twitter.com/j_lancaster" target="_blank" style="color: #4da7de;"><i class="fab fa-twitter-square"></i></a>--><!--twitter-->
<a href="https://twitter.com/j_lancaster" target="_blank" style="color: #000000;"><i class="fa-brands fa-x-twitter"></i></a><!--x-twitter-->
<!--<a href="/wp/" style="color: #464646;"><i class="fab fa-wordpress"></i></a>--><!--wordpress-->
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="fixed-bg fixed-bg--2">
<h2>"The nitrogen in our DNA, the calcium in our teeth, the iron in our blood, the carbon in our apple pies were made in the interiors of collapsing stars. We are made of starstuff."<br><br><span style="font-size: 75%;">Carl Sagan</span></h2>
</div>
<div class="scrolling-bg" id="projects">
<div class="scrolling-bg-content">
<h2>Projects</h2>
<ul class="cards">
<li class="cards-item">
<div class="card">
<a href="https://github.com/tidbyt/community/pull/1671" target="_blank">
<div class="card-image card-image-gradient"></div>
<div class="card-content">
<div class="card-title">Tidbyt: Gradient</div>
</a>
<p class="card-text">A customizable gradient display for <a href="https://tidbyt.com/" target="_blank">Tidbyt.</p>
</div>
</div>
</li>
<!--<li class="cards-item">
<div class="card">
<a href="https://github.com/tidbyt/community/pull/1625" target="_blank">
<div class="card-image card-image-word-clock"></div>
<div class="card-content">
<div class="card-title">Tidbyt: Word Clock</div>
</a>
<p class="card-text">A clock that shows the time in words for <a href="https://tidbyt.com/" target="_blank">Tidbyt.</p>
</div>
</div>
</li>-->
<li class="cards-item">
<div class="card">
<a href="https://jeffreylancaster.github.io/game-of-thrones/" target="_blank">
<div class="card-image card-image-game-of-thrones"></div>
<div class="card-content">
<div class="card-title">Game of Thrones</div>
</a>
<p class="card-text">Datasets and visualizations of HBO's <span style="font-style: italic;">Game of Thrones</span>.</p>
</div>
</div>
</li>
<li class="cards-item">
<div class="card">
<a href="https://jeffreylancaster.github.io/stranger-things/" target="_blank">
<div class="card-image card-image-stranger-things"></div>
<div class="card-content">
<div class="card-title">Stranger Things</div>
</a>
<p class="card-text">Datasets and visualizations of Netflix's <span style="font-style: italic;">Stranger Things</span>.</p>
</div>
</div>
</li>
<!--<li class="cards-item">
<div class="card">
<a href="https://jeffreylancaster.github.io/marvel/" target="_blank">
<div class="card-image card-image-marvel"></div>
<div class="card-content">
<div class="card-title">Marvel</div>
</a>
<p class="card-text">Datasets and visualizations of Marvel character and comic data.</p>
</div>
</div>
</li>-->
</ul>
<ul class="cards" style="justify-content: center; align-items: center;">
<li class="cards-item">
<div class="card">
<a href="/projects/">
<div class="card-content">
<div class="card-title" style="text-align: center;">View all</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="fixed-bg fixed-bg--3">
<!-- <h2>"I have always imagined that Paradise will be a kind of library."<br><br><span style="font-size: 75%;">Jorge Luis Borges</span></h2> -->
<h2>"Two dangers constantly threaten the world:<br>order and disorder."<br><br><span style="font-size: 75%;">Paul Valery</span></h2>
</div>
<div class="scrolling-bg" id="lists">
<div class="scrolling-bg-content">
<h2>Lists</h2>
<ul class="cards">
<li class="cards-item-quarter">
<div class="card">
<a href="/artists/">
<div class="card-image" style="background-image: url('img/artists.jpg')"></div>
<div class="card-content">
<div class="card-title">Artists</div>
</a>
<p class="card-text">A list of artists I like and information about them.</p>
<!-- <button class="btn btn-block card-btn">Button</button> -->
</div>
</div>
</li>
<li class="cards-item-quarter">
<div class="card">
<a href="/publications/">
<div class="card-image" style="background-image: url('publications/Dissertation_University_of_Oxford_2006.jpg');"></div>
<div class="card-content">
<div class="card-title">Publications</div>
</a>
<p class="card-text">A list publications I've authored.</p>
<!-- <button class="btn btn-block card-btn">Button</button> -->
</div>
</div>
</li>
<li class="cards-item-quarter">
<div class="card">
<a href="fiction.html">
<div class="card-image" style="background-image: url('img/fiction.jpg');"></div>
<div class="card-content">
<div class="card-title">Fiction</div>
</a>
<p class="card-text">Some short works of fiction I like and needed a safe place to keep them.</p>
<!-- <button class="btn btn-block card-btn">Button</button> -->
</div>
</div>
</li>
<li class="cards-item-quarter">
<div class="card">
<a href="sites.html">
<div class="card-image" style="background-image: url('img/buildnmap.png');"></div>
<div class="card-content">
<div class="card-title">Sites Designed</div>
</a>
<p class="card-text">A list of websites I've designed. Some are embarrassing.</p>
<!-- <button class="btn btn-block card-btn">Button</button> -->
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="fixed-bg fixed-bg--4" id="contact">
<h2>Let's chat?<br><span style="font-size: 75%">✉️ jeffrey [at] jeffreylancaster [dot] com</span></h2>
</div>
</main>
<script src="js/main.js"></script> <!-- Resource JavaScript -->
<!-- for typing effect -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.9/typed.min.js"></script>
<script>
var typed = new Typed('.typed', {
strings: [
"I am strategic.",
"I am a thinker.",
"I am a doer.",
"I am creative.",
"I was a chemist.",
"I am a developer.",
"I like to prototype.",
"I am an artist.",
"I am curious.",
"I am a tinkerer.",
"I am empirical.",
"I was a librarian.",
"I am independent.",
"I am a team-player.",
"I am a leader.",
"I am a communicator.",
"I love ellipses ...",
"... and interrobangs.",
"I am a problem-solver.",
"I am a technologist.",
"I am an educator."
],
typeSpeed: 40,
backDelay: 1200,
startDelay: 1000,
backSpeed: 30,
loop: true
});
</script>
<!-- for smooth scrolling -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$(".scroll").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</body>
</html>