-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
429 lines (360 loc) · 16.8 KB
/
index.html
File metadata and controls
429 lines (360 loc) · 16.8 KB
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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Muli&family=Roboto&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/abba1294b8.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-167308131-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-167308131-1');
</script>
<link rel="shortcut icon" type="image/png" href="/sunglassesEmoji.png"/>
<title>ALAN!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="https://www.youtube.com/watch?v=6kYco2Zt-cM" target='_blank'>Alan Houston</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i id='menuIcon' class='fa fa-bars'></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/alanhouston" target="_blank">LinkedIn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/AlanHouston" target="_blank">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://alanhouston.dev/resume/AlanHouston.pdf" target="_blank">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href='mailto:alanhouston5000@gmail.com'>Contact</a>
</li>
</ul>
</div>
</nav>
<header>
<h1 id='title' class='headerText'><span id='howdy'>Howdy!</span> I'm <span class='headerHighlight'>Alan</span>, a <span class='headerHighlight'>solutions engineer</span> in <span class='headerHighlight'>Austin, TX</span>. Welcome to my <span class='headerHighlight'>little landing page</span>; thanks for stoppin' by.</h1>
<!-- add the badass links -->
</header>
<section id='about'>
<div class='sectionInner'>
<h2 class='sectionTitle'>Interested in getting to know Alan?</h2>
<hr id='aboutHr'>
<h4 class='sectionSub' id='aboutSub'>You're in luck; here you go</h4>
<p>I'm a husband, uncle, brother, son, dog dad, good neighbor, rocker, Austinite, software engineer, and, most of all, I’m your buddy. One of my favorite things to do is have a good laugh. When schedules allow, I like to take trips with the best travel partner, my super cool wife, Janeese. She's my best buddy.</p>
<p>I love the holidays, mostly because of the lights. And unlike most, I rather enjoy the music; it makes me think of the holidays, which somewhat signals a self-fulfilling prophecy, however with more of a truthy expectation. Halloween is also very important 'holiday' to Janeese and me; we love creating and sporting hilarious and awesome costumes.</p>
<p>Aside from laughing, banging on my Apple Magic Keyboard, dressing up for Halloween, putting up Christmas lights, traveling, and spending time with my awesome wife, I enjoy exercising, watching silly movies & TV shows, listening to music, playing music, doing yardwork, cooking, cheering on Austin FC & the Astros, and socializing with my pals.</p>
<p>When I was in my early twenties, I often wondered what the acceptable age would be for people to start calling me Al. Well, I've stopped wondering. My rad wife, many family members, and close friends now frequently refer to me as Al. Hard to say when it all started, but I finally made it!</p>
<p>If you have any questions pertaining to what I have just explained regarding how I spend my free time, go ahead and reach out! If you have any other questions, fire away. In either case, we live in the future; I check my email and various inboxes, so you can expect a timely response. Thanks for reading!</p>
<div id='contactBtnWrap'>
<a id='contactBtn' class='btn' href='mailto:alanhouston5000@gmail.com'>Send an Email to Al</a>
</div>
</div>
</section>
<section id='projects'>
<div class='sectionInner'>
<h2 class='sectionTitle'>What have I done?!</h2>
<hr class='projectsHr'>
<h4 id='pjHeadSub' class='sectionSub'>This is what I have done</h4>
</div>
<div class='sectionInner'>
<div id='pro'>
<h3 class='sectionTitle'>Professionally</h3>
<hr class='projectsHr'>
<h4 class='sectionSub'>L7 Informatics, Senior Solutions Engineer</h4>
<p>I have been at L7 Informatics since December of 2021, and my experience has been amazing. I am constantly exposed to many life science topics that I never expected to learn! I spend my days juggling and moving quickly. I design, develop, manage, and deliver demonstrations of L7's benchmark product, <a href='https://l7informatics.com/esp/' target="_blank">ESP</a>, a unified scientific data and process management platform. I also contributions to standard and core content as I work closely with both the product and engineering teams to ensure best practices of the platform. I'm also in close touch with implementation and customer support teams as my unique product knowledge is needed. I put a lot into my job, so I, unfortunately, have less time to update this super cool web page.</p>
<h4 class='sectionSub'>Vybe Software, Web Developer</h4>
<p>I was employed for about a year and a half (June 1, 2019 - November 2020) at Vybe Software. During my time on the team, I contributed to three main products: Leia: Website Builder v2, Leia for Real Estate, and Leia for Campaigns. Aside from my developer tasks, I was integral in testing and QA prior to releasing each product. I also spent some of time researching and writing blog posts, which can be found <a href='https://heyleia.com/blog' target="_blank">here</a>; I designed and built those pages, too. I spent about three months learning WordPress and built plugins and themes that, ideally, would have been released so WordPress users could integrate tools from Leia into their projects. If you're interested in hearing about the fate of Vybe, <a href='mailto:alanhouston5000@gmail.com'>contact me</a>, and we can discuss.</p>
<div id='leiaBlockWrap' class='row justify-content-around'>
<div class='leiaBlock col-lg-3 col-md-12'>
<a class='leiaTitle' href='https://heyleia.com' target='_blank'>Leia: Website Builder</a>
<hr class='leiaHr'>
<p>Vybe released this version in December 2019, and I was tasked with designing section templates, which total over 250. Since its release, I've written multiple PHP endpoints for minor updates.</p>
</div>
<div class='leiaBlock col-lg-3 col-md-12'>
<a class='leiaTitle' target='_blank'>Leia for Real Estate</a>
<hr class='leiaHr'>
<p>Never released, Leia for Real Estate, is a website builder for real estate agents! I wrote the JS, REST API for the search widget and results display. For real estate specificity, I designed new section templates and rewrote placeholder text. Real estate data is hard to come by, so we were never able to properly release this awesome product.</p>
</div>
<div class='leiaBlock col-lg-3 col-md-12'>
<a class='leiaTitle' target='_blank'>Leia for Campaigns</a>
<hr class='leiaHr'>
<p>We began building this one for those running for political office. The main differences from this and Leia Regulár are the donate and volunteer sections. I only somewhat enjoyed having to research campaign websites from both parties in summer 2020. This product is also offline per the demise of Vybe.</p>
</div>
</div>
</div>
</div>
<div class='sectionInner'>
<div id='unPro'>
<h3 class='sectionTitle'>Professionally, but not Professional</h3>
<hr class='projectsHr'>
<h4 class='sectionSub'>Austin Coding Academy</h4>
<p>I built the Armstrong App at the beginning of 2019 as I was nearing the completion of my studies at Austin Coding Academy. It is a tracker for a pull-up program I participated in the second half of 2018. It has tremendously helped my pull-up numbers, and I continue to use aspects of the program in my daily exercises. If you're interested in a fun challenge that will make you stronger, give it a go; there's a link to the program with a description in the app. I created the app in order to facilitate comparing current session data with past results. Honestly, it's quite stale as I haven't gotten around to adding authentication for multiple users, and I have yet to add any graphs or flair, and the styling is minimal, but feel free to take a moment to peruse the app and source code. It's just a fun example of how I started my engineering journey. Maybe someday I'll make it super cool.</p>
<div id='armstrongBtnWrap' class='row'>
<div class='col-md-4 col-sm-12'>
<a class='armstrongBtn btn' href='https://alanhouston.dev/theArmstrongProgram/' target="_blank">Armstrong App</a>
</div>
<div class='col-md-4 col-sm-12'>
<a class='armstrongBtn btn' href='https://github.com/AlanHouston/theArmstrongProgram' target="_blank">Front End Source Code</a>
</div>
<div class='col-md-4 col-sm-12'>
<a class='armstrongBtn btn' href='https://github.com/AlanHouston/ArmstrongServer' target="_blank">Server Source Code</a>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar text-center">
<a id='bottomNav' class="navbar-brand" href=''>©2024 Alan Houston</a>
</nav>
<style>
/*RGB: (0, 177, 64)*/
/*#67a3a1*/
/*#cfb845*/
:root {
--main_solid: #67a3a1;
--sec_solid: #cfb845;
}
body {
color: rgb(50,50,50);
}
nav {
background: var(--main_solid);
padding-left: 80px !important;
}
.nav-link, .navbar-brand {
color: white;
transition: 0.3s;
}
.nav-link:hover, .navbar-brand:hover {
color: #141414;
}
.nav-link {
margin: 0 10px;
}
.navbar-brand {
text-transform: uppercase;
}
.navbar-toggler-icon {
border-color: #141414;
}
#menuIcon {
font-size: 30px;
color: white;
}
header {
padding: 120px 80px;
margin: 0;
background: rgba(20,20,20,0.8);
}
#title {
font-size: 44px;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 90px;
color: rgb(148, 144, 144);
}
#howdy {
color: white;
font-size: 84px;
}
.headerHighlight {
color: var(--sec_solid);
}
hr {
width: 10%;
margin: 10px auto 15px;
border: 3px double rgb(50,50,50);
}
#sub {
font-size: 20px;
font-style: italic;
color: white;
}
section {
padding: 40px 80px;
}
#about {
background: var(--main_solid);
color: #141414;
}
.sectionInner {
background: rgba(255,255,255,0.9);
border-radius: 4px;
padding: 40px;
margin-bottom: 20px;
}
.sectionTitle {
text-align: center;
font-size: 40px;
letter-spacing: 1px;
}
#aboutHr {
border-color: var(--sec_solid);
}
.bld-spn {
font-weight: 600;
}
.sectionSub {
text-align: center;
margin: 40px 0 20px;
font-size: 18px;
letter-spacing: 1px;
font-style: italic;
text-transform: uppercase;
}
p {
margin-bottom: 20px;
line-height: 1.75;
letter-spacing: .01em;
}
#contactBtnWrap {
text-align: center;
margin: 35px 0 10px;
}
.btn {
padding: 4px 30px;
border-radius: 4px;
transition: 0.3s;
letter-spacing: 1px;
color: white;
cursor: pointer;
text-decoration: none;
}
#contactBtn {
font-size: 30px;
border: 3px dashed rgb(50,50,50);
background: rgb(50,50,50);
}
#contactBtn:hover {
color: rgb(50,50,50);
background: white;
}
#projects {
background: var(--sec_solid);
}
.projectsHr {
border-color: var(--main_solid);
}
#pjHeadSub {
margin-bottom: 0;
}
#leiaBlockWrap {
margin: 30px 0 10px;
}
.leiaBlock {
text-align: center;
/* background: var(--main_solid); */
background: rgb(50,50,50);
border-radius: 4px;
padding: 25px 25px 5px;
}
.leiaTitle {
color: white !important;
font-size: 24px;
text-align: center;
margin-bottom: 15px;
}
.leiaHr {
border-color: white;
}
.leiaBlock p {
text-align: left;
font-size: 16px;
line-height: 1.25;
color: white;
}
#unPro p span {
color: purple;
font-style: italic;
font-weight: bold;
}
p a {
color: rgb(50,50,50);
text-decoration: underline;
}
p a:hover {
color: rgb(50,50,50);
}
#armstrongBtnWrap {
text-align: center;
margin-top: 30px;
}
.armstrongBtn {
border: 2px solid var(--main_solid);
background: var(--main_solid);
}
.armstrongBtn:hover {
color: var(--main_solid);
background: white;
}
@media only screen and (max-width : 991px) {
.nav-link {
margin: 0;
}
.leiaBlock {
margin-bottom: 15px;
}
}
@media only screen and (max-width : 767px) {
header {
padding: 100px 50px;
}
#title {
font-size: 28px;
line-height: 40px;
}
#howdy {
font-size: 44px;
}
section {
padding: 10px;
}
.armstrongBtn {
margin-bottom: 15px;
width: 260px;
}
}
@media only screen and (max-width : 575px) {
nav {
padding-left: 30px !important;
}
header {
padding: 100px 30px;
}
.sectionInner {
padding: 20px;
}
.sectionTitle {
font-size: 30px;
margin-top: 20px;
}
#contactBtn {
margin-bottom: 20px;
}
#pjHeadSub {
margin-bottom: 20px;
}
}
@media only screen and (max-width : 400px) {
.sectionInner {
padding: 10px;
}
}
</style>
</body>
</html>