-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (132 loc) · 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Andrew Quackenbos</title>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<link rel="icon" type="image/png" href="favicon.png" sizes="16x16">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script src="https://kit.fontawesome.com/0d41ee9a60.js" crossorigin="anonymous"></script>
<style>
#primary-image {
opacity: 1;
transition: opacity 1000ms;
}
.card {
min-height: 100vh;
position: relative;
}
.card-image {
margin-bottom: -1em;
}
.card-footer {
border-bottom: 1px solid #fff;
}
/* This will override a bunch of Bulma stuff so I'm going to use !important sometimes */
/* Don't be dumb and actually do this though. */
html, body, .container {
background: #202020;
}
.card {
color: #d9d9d9;
background: #454545;
}
strong, .title, .subtitle {
color: #d9d9d9 !important;
}
a.card-footer-item {
color: #dedede !important;
background: #454545 !important;
}
a.card-footer-item:hover {
color: #202020 !important;
background: #d9d9d9 !important;
}
</style>
</head>
<body>
<section class="section p-0 my-0">
<div class="container my-0">
<div class="columns is-centered my-0">
<div class="column is-half-fullhd is-7-widescreen is-two-thirds-desktop is-full-mobile is-three-quarters-tablet my-0 py-0">
<div class="card my-0">
<div class="card-image">
<figure class="image is-1by1">
<img id="primary-image" src="images/drew3.png" alt="Andrew Quackenbos"/>
</figure>
</div>
<div class="card-content mb-0 px-0">
<div class="media-content pb-1 px-5">
<p class="title is-4">Andrew Quackenbos</p>
<p class="subtitle is-5">Simple but effective.</p>
</div>
<div class="card-footer my-4 px-0">
<a href="https://linkedin.com/in/aquackenbos" target="_blank" class="card-footer-item">
<span class="icon"><i class="fab fa-linkedin"></i></span>
LinkedIn
</a>
<a href="https://github.com/AQuackenbos" target="_blank" class="card-footer-item">
<span class="icon"><i class="fab fa-github"></i></span>
GitHub
</a>
<a href="mailto:[email protected]" target="_blank" class="card-footer-item">
<span class="icon"><i class="fas fa-paper-plane"></i></span>
Email
</a>
<a href="/resume.html" target="_blank" class="card-footer-item">
<span class="icon"><i class="fas fa-file-alt"></i></span>
Resume
</a>
</div>
<div class="content px-5">
<strong>Technical Partner at Sitesquad LLC.</strong>
</div>
<div class="content px-5">
Over 10 years experience in architecting, building, and implementing modern web applications in Javascript and PHP at every level of a full stack environment.
</div>
<div class="content is-size-7 px-5">
Currently <strong>open</strong> to interesting opportunities.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
var images = [
'drew3',
'drew_cece',
'drew_kiersten2',
'drew_cece2',
]
var transitioning = false
var img = document.querySelector('#primary-image')
var lastImage = 0
var transitionDelay = 1000
img.onload = function() { img.style.opacity = 1 }
function changeImage() {
if(transitioning) return
transitioning = true
if(++lastImage >= images.length)
lastImage = 0
img.style.opacity = 0;
setTimeout(function() {
img.src = 'images/' + images[lastImage] + '.png'
initLoad = false
transitioning = false
}, transitionDelay);
}
setInterval(changeImage, 5000)
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109148272-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109148272-1');
</script>
</body>
</html>