-
Notifications
You must be signed in to change notification settings - Fork 0
/
experience.html
161 lines (150 loc) · 9.7 KB
/
experience.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/mainStyles.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand h1" href="index.html">
Dan Byler
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="experience.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row d-flex flex-row my-3">
<div class="col-md-6">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="./assets/images/UCL.png" alt="universal chimney lining screen capture">
<div class="card-body">
<h5 class="card-title">Universal Chimney Lining</h5>
<p class="card-text">
The client Isaac Windle, owner of Universal Chimney, wanted a profile site to communicate his business to prospective clients. The design goal was a minimalist single page site.
<br/>
<br/>
I used Adobe XD to create the design, bootstrap to frame out the site, CSS flexbox and other custom CSS to fine tune element placement, and a combination of vanilla Javascript and jQuery to handle the interactive elements.
<br>
<br>
The site is an ongoing project and, if you check back, you will see updates from time to time.
Most recently I researched and added some SEO elements to help generate organic leads. Doing things like adding a robots.txt file, sitemap, image "alt" descriptors, and header meta tags. I never knew the world of SEO was so big! I believe I could spend months and years learning all the ins and outs.
</p>
<a target="_blank" href="https://www.universalchimneylining.com/" class="btn btn-primary">Published
Site</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="./assets/images/bamazon.png" alt="bamazon screen capture">
<div class="card-body">
<h5 class="card-title">Bamazon</h5>
<p class="card-text">
I really enjoyed creating this application. Tracking data from the DB through the server is like solving scifi novel
mysteries! It's an interactive eComm inventory system. The user places an order via the command line (CLI) and the inventory updates. It's built with Javascript and is powered by Node JS.
I used a MySQL database and the NPM package
“Inquirer”. There is a video of the functionality on the GitHub repo linked below.
</p>
<a target="_blank" href="https://github.com/dByler1/Bamazon" class="btn btn-primary">GitHub
Repo</a>
</div>
</div>
</div>
</div>
<div class="row d-flex flex-row my-3">
<div class="col-md-6">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="./assets/images/GL.png" alt="UCL Screen capture">
<div class="card-body">
<h5 class="card-title">General Listings</h5>
<p class="card-text">
General Listings is an application that connects home owners and home service professionals. It is a work in progress.
<br/>
<br/>
It uses the MVC model and has a Node/Express server, Mongo DB, Mongoose controller, and React frontend. This app allows users to create a profile, and customers to search for and browse profiles. On the roadmap is allowing users to upload images, de-bugging some React issues, switching to MySQL DB.
</p>
<a target="_blank" href="https://github.com/dByler1/ucl" class="btn btn-primary">GitHub Repo</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="./assets/images/hummus.png" alt="dan's hummus screen capture">
<div class="card-body">
<h5 class="card-title">Dan's Hummus</h5>
<p class="card-text">
Custom made for my hummus project, the challenge here was design and copywriting. It has a bootstrap front end. It was a lot of fun exploring bootstrap’s new, built in flexbox pieces. I am using a google form iframe to collect hummus orders (which I make and deliver). This gives me a baseline eComm ability.
</p>
<a target="_blank" href="https://danshummus.com/" class="btn btn-primary">Published Site</a>
</div>
</div>
</div>
</div>
<div class="row d-flex flex-row my-3">
<div class="col-md-6">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="./assets/images/hangman.png" alt="Hangman Screen capture">
<div class="card-body">
<h5 class="card-title">Hangman Game</h5>
<p class="card-text">
A fun hangman game written in JS. The logic is modularized for easy consumption and to support multiple players concurrently. I gained experience with vanilla JS, loop logic, JS Classes, and pair programming.
</p>
<a target="_blank" href="https://github.com/dByler1/Hangman-Game" class="btn btn-primary">GitHub Repo</a>
<a target="_blank" href="https://dbyler1.github.io/Hangman-Game/" class="btn btn-primary">Play the Game</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="./assets/images/friendFinder.png" alt="Friend Finder Screen capture">
<div class="card-body">
<h5 class="card-title">Friend Finder</h5>
<p class="card-text">
This is a friend finder application. It's a node/express server that takes a survey, compares results against a database, and returns the 'best friend'. It has a bootstrap front with jQuery handling the front end interaction.
</p>
<a target="_blank" href="https://github.com/dByler1/FriendFinder" class="btn btn-primary">GitHub Repo</a>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col d-flex flex-column align-items-center">
<p>
© Dan Byler 2018
</p>
</div>
</div>
<div class="row justify-content-center">
<a target="_blank" href="https://www.linkedin.com/in/dannybyler/"> <img class="contact_img" src="./assets/images/if_linkedin_834713.png" /></a>
<a target="_blank" href="https://github.com/dByler1"> <img class="contact_img" src="./assets/images/if_github_circle_black_107161.png" /></a>
</div>
</footer>
<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>