-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (192 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GHEF92H3V8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GHEF92H3V8');
</script>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dan Klaver Web Dev Portfolio</title>
<meta name="description" content="Display current web development portfolio">
<meta name="author" content="Dan Klaver">
<link rel="icon" href="">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Personal CSS Customizations-->
<link rel="stylesheet" href="css/customized.css">
</head>
<body id="is-preload">
<div id="page-wrapper">
<div id="wrapper">
<section class="panel banner right" id="currentpanel">
<div class="content color0 span-3-75">
<h1 class="major">Hi, my name is Dan.</h1>
<p>I am a full-stack web developer with skills that range from UX, HTML, CSS, Express.js, and React.js on the front end to Node.js and MongoDB on the back-end.</p>
</div>
<div class="image filtered span-1-75" data-position="25% 25%">
<img src="./images/slide1Image.jpg" alt="Computer on Desk">
</div>
</section>
<section class="panel spotlight medium right" id="panel">
<img id="headshot" src="./images/headshot.png">
<div class="content span-7">
<h2 class="major">About Me </h2>
<p>Before becoming a developer, I worked extensively in biostatistics, scientific research, and analytics.<br><br>
After teaching myself some basic JavaScript to connect our analytics dashboards to an API for near real-time automated access to our data,
I decided to expand on those skills by pursuing an education and training in full-stack web development.</p>
</div>
<div class="image filtered tinted" data-position="top left">
<img src="./images/slide2Image.jpg" alt="Dark Computer with Code on Desk"/>
</div>
</section>
<section class="panel banner right" id="panel">
<div class="content color0 span-3-75">
<h1 class="major">Projects</h1>
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Battleship
</a>
</h5>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
A program to play the classic game of battleship through Node.JS<br>
<a href="https://github.com/DanKlaver15/battleship">Github Repo</a><br>
<img src="images/repo-icons/battleship.jpg" id="repoImage">
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
RPSLS
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
JS OOP program to play a game of rock/paper/scissors/lizard/spock.<br>
<a href="https://github.com/DanKlaver15/RPSLS">Github Repo</a><br>
<img src="images/repo-icons/rps.jpg" id="repoImage">
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
ATM Node Project
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
Develop a small Node.JS application that works as an ATM for the user.<br>
<a href="https://github.com/DanKlaver15/ATM_Node_Project">Github Repo</a><br>
<img src="images/repo-icons/atm.jpg" id="repoImage">
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Most Wanted
</a>
</h5>
</div>
<div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="card-block">
Search through a database of people using various traits or names.<br>
<a href="https://github.com/DanKlaver15/Most_Wanted">Github Repo</a><br>
<img src="images/repo-icons/most-wanted.jpg" id="repoImage">
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingFive">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Day Trip Generator
</a>
</h5>
</div>
<div id="collapseFive" class="collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="card-block">
Randomly assign various aspects of a trip for the user.<br>
<a href="https://github.com/DanKlaver15/day-trip-generator">Github Repo</a><br>
<img src="images/repo-icons/trip.jpg" id="repoImage">
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingSix">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Placeholder for future projects.
</a>
</h5>
</div>
<div id="collapseSix" class="collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="card-block">
Placeholder for future projects.<br>
</div>
</div>
</div>
</div>
</div>
<div class="image filtered span-1-75" data-position="25% 25%">
<img src="./images/slide3Image.jpg" alt="Computer on Desk">
</div>
</section>
<section class="panel spotlight large left" id="panel">
<div class="content span-5">
<h2 class="major">Contact Me</h2>
<div class="form-group">
<form name="contactForm" id="contactForm" method="post"></form>
<fieldset>
<div class="row">
<div class="col">
<input name="contactFirstName" type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input name="contactLastName" type="text" class="form-control" placeholder="Last name">
</div>
</div>
</div>
<div class="form-group">
<input name="contactPhone" class="form-control" type="tel" id="example-tel-input" placeholder="Telephone">
</div>
<div class="form-group">
<input name="contactEmail" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
</div>
<div class="form-group">
<textarea name="contactMessage" class="form-control" id="exampleTextarea" rows="3" placeholder="Please enter your message here"></textarea>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</fieldset>
</form>
</div>
<div class="image filtered tinted" data-position="top left">
<img src="./images/slide4Image.jpg" alt="Dark Computer with Code on Desk"/>
</div>
</section>
</div>
</div>
<script src="main.js"></script>
<!-- JS Required for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>