-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (273 loc) · 9.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brian's Portfolio | Full Stack Engineer | Web Developer | SEO</title>
<meta name="description" content="Brian's Portfolio" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<hr />
<header>
<div>
<h1>Brian Hook</h1>
<h2>Software Engineer</h2>
</div>
<nav>
<!-- Navigation links that snap to content-->
<h3>jump to..</h3>
<ol>
<li><a href="#intro">intro</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ol>
</nav>
</header>
<hr />
<main>
<!-- contains all content besides header and footer -->
<section id="intro">
<div class="group">
<div class="item">
<img
class="centered-image ghost"
src="images/headshot.png"
alt="Brian Hook profile picture"
/>
</div>
<div class="item">
<h2>Hello!</h2>
<p>
My name is Brian Hook and I am a software engineer in the
Chicagoland area.
</p>
<p>
I recently completed Thinkful's Engineering Coding Bootcamp and am
using my previous 6+ years of SEO and Web Development experience
to springboard into a full-time software engineering career!
</p>
</div>
</div>
</section>
<section id="projects">
<h2>Projects</h2>
<!-- <p class="centered"></p> -->
<div class="group">
<!-- Holds all projects -->
<div class="item mat project">
<!-- "item" holds one project each. "mat" adds grey background, use on every other item until new css is written for nth child -->
<h3>Reservation System for Restaurants</h3>
<ul>
<li>
full stack application that allows restaurant personnel of fine
dining establishments to handle incoming reservation requests,
as well as keep track of available tables as parties arrive and
depart.
</li>
<a
href="https://raw.githubusercontent.com/BrianHook1183/Restaurant-Reservations_Fullstack-Capstone/main/readme-screenshots/dashboard.jpg"
target="blank"
>
<img
src="images/dashboard.jpg"
alt="screenshot of the dashboard view for the restaurant reservation system"
height="200"
title="Dashboard view"
/>
</a>
<li>
<a
href="https://github.com/BrianHook1183/Restaurant-Reservations_Fullstack-Capstone#readme"
target="blank"
>...more screenshots</a
>
</li>
<li>
Skills Used:
<ul>
<li>
<strong>Front-end:</strong> React (router, hooks, error
boundaries, etc...), Bootstrap, e2e tests
</li>
<li>
<strong>Back-end:</strong>: Node, Express, Knex, PostgreSQL
(via ElephantSQL), Jest
</li>
</ul>
</li>
<li>
<a
href="https://github.com/BrianHook1183/Restaurant-Reservations_Fullstack-Capstone"
target="blank"
>Github repo</a
>
|
<a
href="https://final-capstone-frontend.herokuapp.com/"
target="blank"
>Live app</a
>
</li>
</ul>
</div>
<div class="item project">
<h3>Flashcards</h3>
<ul>
<li>Project Title</li>
<li>Project Description</li>
<li>
Skills Used:
<ul>
<li>React, Responsive Design, Unit Testing</li>
</ul>
</li>
<li>
<a
href="https://github.com/BrianHook1183/Flashcards_React"
target="blank"
>Github repo</a
>
| <a href="http://comingsoon.com/" target="blank">Live app</a>
</li>
</ul>
</div>
<div class="item mat project">
<h3>(placeholder #3)</h3>
<ul>
<li>Project Title</li>
<li>Project Description</li>
<li>
Skills Used:
<ul>
<li>Node, Express, Knex, Postgres</li>
</ul>
</li>
<li>
<a
href="https://github.com/BrianHook1183?tab=repositories"
target="blank"
>Github repo</a
>
| <a href="http://comingsoon.com/" target="blank">Live app</a>
</li>
</ul>
</div>
</div>
</section>
<section id="about">
<h2>More About Myself</h2>
<div class="group">
<div class="item">
<h3>Coding Passion / Teamwork</h3>
<p>
I became interested in coding when I saw how complex problems
could be solved with simple solutions. While I sometimes enjoy the
challenge of relying on myself to work through road-blocks, I
would rather collaborate with others to share knowledge and new
perspectives that help everyone involved succeed.
</p>
</div>
<div class="item">
<h3>Services Offered</h3>
<p>List of services I can provide a client:</p>
<ul>
<li>Web Development</li>
<li>Front-end Engineering</li>
<li>Software Design</li>
<li>Search Engine Optimization</li>
</ul>
</div>
</div>
<hr />
<div class="group">
<div class="item">
<!-- TO DO add three side by side photos representing interests -->
<h3>Hobbies</h3>
<p>I also have many interests outside of coding, including:</p>
<ul>
<li>
<a href="https://www.flickr.com/photos/brianhook/"
>wildlife photography</a
>
</li>
<li>music / recording</li>
<li>hanging out with my free-range rabbits</li>
</ul>
</div>
<div class="item">
<h3>Fun Fact</h3>
<p>
I grew up in a town an hour north of Chicago and still reside in
the nearby vibrant yet sadly vibranium-less, Wauconda(forever),
IL.
</p>
<img
class="centered-image small ghost2"
src="images/black-panther-mask.png"
alt="black panther logo"
/>
</div>
</div>
</section>
<section id="contact">
<h2>Links / Contact</h2>
<div class="group">
<div class="item">
<p>
You can find more information regarding my past experience on
<a href="https://www.linkedin.com/in/brian-hook-65021165"
>LinkedIn</a
>, and current projects through my
<a href="https://github.com/BrianHook1183/">GitHub</a>.
</p>
<!-- TO DO add in LinkedIn and github icons, maybe instead of text all together -->
</div>
<div class="item">
<p>Feel free to contact me through this form:</p>
<div class="mat">
<form action="https://formspree.io/xzbjjrkb" method="POST">
<fieldset>
<label for="your-name">Your name:</label>
<input
id="your-name"
type="text"
name="name"
placeholder="Enter your name"
required
/>
<label for="your-email">Your email:</label>
<input
id="your-email"
type="text"
name="email"
placeholder="Enter your email"
required
/>
<label for="your-message">Your message:</label>
<textarea
id="your-message"
name="message"
placeholder="Enter your message"
required
></textarea>
<button type="submit">Send</button>
</fieldset>
</form>
</div>
</div>
</div>
</section>
</main>
<hr />
<footer>
<p>Copyright Brian Hook 2022</p>
</footer>
<hr />
</body>
</html>