-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
349 lines (324 loc) · 17 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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyrum Butler</title>
<link rel="icon" href="./images/favicon.ico">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-container">
<a class="navbar-brand top-of-page-link" href="#top">Hyrum Butler</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list"
aria-controls="navbar-list" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list">
<ul class="navbar-nav mr-auto">
<li class="nav-item custom-nav-link-style">
<a class="nav-link" href="#profile">Profile</a>
</li>
<li class="nav-item custom-nav-link-style">
<a class="nav-link" href="#skills-section">Skills</a>
</li>
<li class="nav-item custom-nav-link-style">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item custom-nav-link-style">
<a class="nav-link" href="#blog-section">Technical Blog</a>
</li>
<li class="nav-item custom-nav-link-style">
<a class="nav-link" href="#contact-info-section-title">Contact</a>
</li>
</ul>
<div class="contact-links">
<a id="github-logo" href="https://github.com/Brazenbillygoat" target="blank"><img class="logo-image" src="./images/github-logo.png" alt="The github octocat logo"></a>
<a href="https://www.linkedin.com/in/hyrum-butler/" target="blank"><img class="logo-image" src="./images/linkedin-logo.png" alt="The github octocat logo"></a>
</div>
</div>
</nav>
<div class="top-container">
<img class="sun-img" src="./images/summertime.png" alt="Picture of the sun">
<!-- <div>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> -->
<img class="top-cloud" src="images/cloud.png" alt="Cloud image">
<h1>Hyrum Butler</h1>
<h2 id="sub-title" class="sub-title">programmer.</h2>
<img class="bottom-cloud" src="images/cloud.png" alt="Cloud image">
<img class="mountain-img" src="images/mountain.png" alt="Mountain image">
</div>
<div class="middle-container">
<div class="profile" id="profile">
<img class="profile-pic" src="./images/profile-pic.jpeg" alt="Me stiffling a laugh">
<h2>Hello.</h2>
<p>I'm a Fullstack Software Developer that loves the outdoors <em>almost</em> as much as technology!</p>
<!-- <p>Coding is a lot like mountain climbing to me: the more you work at it the better the view gets. </p>
<iframe width="560" height="315" src="https://youtu.be/X2MY4EMXBnY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
</div>
</div>
<div id="about-section" class="about-section">
<div class="my-story">
<hr class="my-story-hr"><h2 class="my-story-title">My Story</h2><hr class="my-story-hr">
<p>In 2016 I graduated from Southern Virginia University with a degree in Political Science. I was offered and accepted a position at Imex Management, managing a portfolio of
international tradeshows mainly focused in Southeast Asia. After working for about a year I realized the path I was on wasn't the career path that I wanted.
My love for problem solving and learning led me to coding. So I went back to school for Computer Science at Liberty University online while driving tractor trailors.
As my course loads became heavier I took a job driving a semi-pro hockey team's tour bus. When the pandemic hit in March of 2020 all sports concluded their seasons
and I decided to get more practical knowledge by attending Flatiron School in D.C. I have since graduated and am looking for work as a software developer.
<!-- <p>My skills include:</p>
<ul class="story-skills">
Ruby, Rails, SQL, Javascript, React, Redux, HTML, CSS, Git (version control), Rest APIs, and Bootstrap.
</ul> -->
</p>
</div>
</div>
<div class="story-hole-spacer"></div>
<div class="hole"></div>
<div class="hole-skills-spacer"></div>
<div id="skills-section" class="middle-container">
<div class="skills-title-bar">
<hr class="my-skills-hr">
<h2 class="skills-section-title">My Skills</h2>
<hr class="my-skills-hr">
</div>
<div class="skills-lists-box">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="frontend-icon" src="./images/frontend-icon.png"
alt="HTML carrots only containing a forward slash">
<h3>Frontend</h3>
<ul class="frontend-list">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
<li>Redux</li>
<li>Bootstrap</li>
<li>Rest APIs</li>
</ul>
</div>
<div class="col-md-4">
<img class="backend-icon" src="./images/backend-icon.png" alt="Gear in front of a database page">
<h3>Backend</h3>
<ul class="backend-list">
<li>Ruby</li>
<li>Rails</li>
<li>SQL</li>
<li>SQLite3</li>
<li>PostgreSQL</li>
<li>Git</li>
</ul>
</div>
<div class="col-md-4">
<img class="team-icon" src="./images/team-icon.png"
alt="HTML carrots only containing a forward slash">
<h3>Teams</h3>
<ul class="team-list">
<li>Agile/Scrum</li>
<li>Pair Programming</li>
<li>Presenting</li>
<li>Project Management</li>
</ul>
</div>
</div>
</div>
</div>
<div id="work" class="portfolio">
<hr class="my-work-hr"><h2 class="work-section-title">My Work</h2><hr class="my-work-hr">
<div class="project">
<a class="popup project-presentation-link" href="https://www.youtube.com/watch?v=X2MY4EMXBnY">
<img class="project-image" src="./images/betaclimberwelcome.png" alt="A screenshot of my beta-climbers app.">
<!-- <img class="project-play-button" src="./images/play-button.png" alt="Play button overlayed on the project thumbnail."> -->
</a>
<h3 id="beta-climbers" class="project-title">Beta Climbers</h3>
<div class="project-link">
<a href="https://beta-climbers.herokuapp.com/" target="blank">Visit Site</a>
|
<a href="https://github.com/Brazenbillygoat/betaclimbers" target="blank">View Code</a>
</div>
<p>
A social app for climbers to stay in touch and share info about climbing routes.
Made using HTML, CSS, and Ruby on Rails for the entire MVC interactions.
Climbers(users) can signup and edit their own information but not another climbers information.
<hr class="portfolio-description-divide">
<ul class="project-skills">
<li>HTML</li>
<li>CSS</li>
<li>Ruby</li>
<li>Rails</li>
<li>SQlite3 -> Postgres</li>
<li>Bcrypt</li>
<li>Web APIs</li>
</ul>
</p>
</div>
<div class="project">
<a class="popup project-presentation-link" href="https://www.youtube.com/watch?v=wdIBMDcOk6o" target="blank">
<img class="project-image" src="./images/adeliwelcome.png" alt="A screenshot of adeli's website">
</a>
<h3 class="project-title">aDeli Restaurant, Manassas</h3>
<div class="project-link">
<a href="https://happy-bartik-85cabe.netlify.app/" target="blank">Visit Site</a>
|
<a href="https://github.com/Brazenbillygoat/adeli-frontend" target="blank">View Code</a>
</div>
<p>
Pure vanilla javascript frontend allowing a user to switch between menus and simulate a cart.
Pop-up menu selection giving the user a choice of size depending on the menu item selected.
The cart persists between site visit with local storage.
<hr class="portfolio-description-divide">
<ul class="project-skills">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Rails</li>
<li>Local storage</li>
<li>Postgres</li>
</ul>
</p>
</div>
<div class="project">
<a class="popup project-presentation-link" href="https://www.youtube.com/watch?v=uhNcH-GwcW0" target="blank">
<img class="project-image" src="./images/neighborhoodheroeswelcome.png" alt="A screenshot of my neighborhood heroes app">
</a>
<h3 class="project-title">Neighborhood Heroes</h3>
<div class="project-link">
<a href="https://neighborhood-heroes-frontend.herokuapp.com/home" target="blank">Visit Site</a>
|
<a href="https://github.com/Brazenbillygoat/neighborhood-heros-frontend" target="blank">View Code</a>
</div>
<p>
An app for users to create custom tournaments and compete with eachother by creating and logging tasks for points.
React and Redux are used for smooth and quick actions during user interface.
This application has a lot of potential avenues for exploring user2user features and I looking
forward to using this as a bit of a playground for such as time goes on.
<br>The app is hosted by Heroku(a free hosting service)
and is thus a little slow upon intial opening, but that is not a reflection of the code.
<hr class="portfolio-description-divide">
<ul class="project-skills">
<li>HTML</li>
<li>CSS</li>
<li>React</li>
<li>Redux</li>
<li>Ruby</li>
<li>Rails</li>
<li>Javascript</li>
<li>Postgres</li>
<li>Bcrypt</li>
<li>Custom Built API</li>
</ul>
</p>
</div>
<div id="contact-me" class="contact-me">
<hr class="tech-blog-hr">
<h2 id="blog-section" class="blog-section-title">Technical Blog</h2>
<hr class="tech-blog-hr">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4500">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a class="blog-image-link" href="https://medium.com/@hyrum.butler3/3-common-git-pitfalls-and-how-to-self-correct-ea9bfdfcb564" target="blank">
<img class="d-block w-100 blog-image" src="./images/git-pitfalls.jpeg" alt="3 common git pitfalls and how to self correct blog tile picture.">
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="blog-caption-title">
<a class="blog-title-link" href="https://medium.com/@hyrum.butler3/3-common-git-pitfalls-and-how-to-self-correct-ea9bfdfcb564" target="blank">
3 Common Git Pitfalls and How to Self-correct
</a>
</h5>
<!-- <p>...</p> -->
</div>
</div>
<div class="carousel-item">
<a class="blog-image-link" href="https://hyrum-butler.medium.com/the-command-line-terminal-console-shell-76f5c4c34f1c" target="blank">
<img class="d-block w-100 blog-image" src="./images/commandline-blog.png" alt="The Command Line, Terminal, Console, Shell, blog title picture.">
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="blog-caption-title">
<a class="blog-title-link" href="https://hyrum-butler.medium.com/the-command-line-terminal-console-shell-76f5c4c34f1c" target="blank">
The Command Line || Terminal || Console || Shell
</a>
</h5>
<!-- <p>...</p> -->
</div>
</div>
<div class="carousel-item">
<a class="blog-image-link" href="https://medium.com/@hyrum.butler3/working-with-a-team-git-flow-ea0eeb6fe93b" target="blank">
<img class="d-block w-100 blog-image" src="./images/team-git-flow.jpeg" alt="Working with a Team -- gitflow blog title picture.">
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="blog-caption-title">
<a class="blog-title-link" href="https://medium.com/@hyrum.butler3/working-with-a-team-git-flow-ea0eeb6fe93b" target="blank">
Working with a Team -- Git-flow
</a>
</h5>
<!-- <p>...</p> -->
</div>
</div>
<div class="carousel-item">
<a class="blog-image-link" href="https://medium.com/@hyrum.butler3/contributing-to-open-source-bf27dc60d526" target="blank">
<img class="d-block w-100 blog-image" src="./images/contributing-open-source.jpeg" alt="Contributing to opensource blog title picture.">
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="blog-caption-title">
<a class="blog-title-link" href="https://medium.com/@hyrum.butler3/contributing-to-open-source-bf27dc60d526" target="blank">
Contributing to Open Source
</a>
</h5>
<!-- <p>...</p> -->
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h2 class="contact-info-section-title">Get In Touch</h2>
<h4>Email:</h4>
<p>[email protected]</p>
<h4>Phone number:</h4>
<p>(540)-816-9487</p>
<a class="btn email-link" href="mailto:[email protected]">CONTACT ME</a>
</div>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/hyrum-butler/" target="blank">LinkedIn</a>
<a class="footer-link" href="https://www.codewars.com/users/Brazenbillygoat" target="blank">Codewars</a>
<a class="footer-link" href="https://github.com/Brazenbillygoat" target="blank">Github</a>
<p>Hyrum Butler</p>
</div>
<script src="src/app.js" defer></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="src/jquery.magnific-popup.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>