generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (295 loc) · 25.3 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Faviocon icon link -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Font Awesome KIT -->
<script src="https://kit.fontawesome.com/2794adb6dc.js" crossorigin="anonymous"></script>
<!-- My own beautiful CSS bringing life to a static page (L) -->
<link rel="stylesheet" href="assets/css/style.css">
<title>Michael Dijk . com</title>
</head>
<body>
<!-- Start of Main container for the full page -->
<div class="container-fluid">
<!-- Start of Navigation top sticky -->
<header>
<nav class="navbar navbar-expand-md fixed-top bg-red">
<div class="container-fluid"> <a class="navbar-brand navbar-brand-overwrite" href="#intro-section"> <img src="assets/images/logo.png" alt="Michael Dijk's Logo" class="logo"></a>
<button class="navbar-toggler navbar-toggler-styling" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fas fa-long-arrow-alt-right" aria-hidden="true"></i> <i class="fas fa-hamburger" aria-hidden="true"></i> </button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mb-2 mb-md-0 ms-auto">
<li class="nav-item"> <a class="nav-link" aria-current="page" href="#about-section" data-toggle="collapse" data-target=".navbar-collapse.show">about</a> </li>
<li class="nav-item"> <a class="nav-link" href="#portfolio-section" data-toggle="collapse" data-target=".navbar-collapse.show">portfolio</a> </li>
<li class="nav-item"> <a class="nav-link" href="#process-section" data-toggle="collapse" data-target=".navbar-collapse.show">process</a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact-section" data-toggle="collapse" data-target=".navbar-collapse.show">contact</a> </li>
</ul>
</div>
</div>
</nav>
</header>
<!-- End of Navigation top sticky -->
<!-- Start of intro section -->
<section id="intro-section">
<div class="row intro-section-row align-content-center">
<div class="col">
<h1 class="intro-h1">Hello, I'm Michael Dijk, a creator!</h1>
<p class="intro-paragraph">I am a Designer / Junior Developer living in Ireland.</p>
<a href="#about-section" class="btn btn-warning">Get to know me... <i class="fas fa-mug-hot"></i></a> </div>
</div>
</section>
<!-- End of intro section -->
<!-- Start of about section -->
<section id="about-section">
<div class="row about-section-row align-content-center align-items-center justify-content-center">
<div class="col-12">
<h1 class="about-section-title">About</h1>
</div>
<div class="col-sm-6 col-lg-4"> <img src="assets/images/imageofmyself.png" class="photo" alt="Photo of Michael Dijk"></div>
<div class="col-sm-6 col-lg-4 about-column">
<p class="about-paragraph"> I've been working in the <i class="fas fa-microchip about-icons" aria-hidden="true"></i> industry from my early career. Currently working full-time as a level 3 Network Engineer, fixing network related issues. I have a passion for web development, and, I <i class="fas fa-heart about-icons"></i> to <i class="fas fa-code about-icons" aria-hidden="true"></i> for relaxation.</p>
<p class="about-paragraph">Apart from web development and working with IT related things, I enjoy going to the <i class="fas fa-dumbbell about-icons"></i>, watching <i class="fas fa-film about-icons"></i>.. Sometimes I like to cook, but that <del>sometimes</del> is almost never. When it happens, it's magical <em>(that's what I've heard at least</em>) </p>
<p class="about-paragraph">I'm confident in Bootstrap, CSS3, JS and HTML5. Currently studying for Python and further back-end development.</p>
<a href="assets/documents/michaeldijkresume.pdf" target="_blank" class="btn btn-warning about-button">Look at my resume... <i class="fas fa-lightbulb"></i></a>
<a href="#contact-section" class="btn btn-warning about-button">Get in touch... <i class="fas fa-envelope"></i></a>
</div>
<!-- Start of Skills icons small view-windows -->
<div class="row justify-content-around about-skills-icons-row">
<div class="col-5 about-icons1"><i class="fab fa-bootstrap"></i>
<p class="about-icons-text">Bootstrap</p>
</div>
<div class="col-5 about-icons1"><i class="fab fa-css3-alt"></i>
<p class="about-icons-text">CSS3</p>
</div>
</div>
<div class="row justify-content-around about-skills-icons-row">
<div class="col-5 about-icons1"><i class="fab fa-js-square"></i>
<p class="about-icons-text">JavaScript</p>
</div>
<div class="col-5 about-icons1"><i class="fab fa-html5"></i>
<p class="about-icons-text">HTML5</p>
</div>
</div>
<!-- End of Skills icons small view-windows -->
<!-- Start of Skills icons large view-windows -->
<div class="row justify-content-around progress-bar-row">
<div class="col-sm-12 col-lg-8">
<p>Bootstrap</p>
<div class="progress progress-bar-styling">
<div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-bg" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<p>CSS 3</p>
<div class="progress progress-bar-styling">
<div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-bg" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<p>JavaScript</p>
<div class="progress progress-bar-styling">
<div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-bg" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
<p>HTML5</p>
<div class="progress progress-bar-styling">
<div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-bg" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
</div>
</div>
<!-- End of Skills icons large view-windows -->
</div>
</section>
<!-- End of about section -->
<!-- Start of portfolio section -->
<section id="portfolio-section">
<div class="row portfolio-section-row align-content-center align-items-center justify-content-center">
<div class="col-sm-12 col-lg-8 ">
<h1 class="portfolio-section-title">Projects</h1>
<!-- Start of portfolio card section -->
<div class="row justify-content-center first-row-portfolio">
<div class="col-sm-6">
<div class="card card-main-styling"> <a href="https://dbrand.com/" target="_blank"><img src="assets/images/portfolio/dbrand.png" class="card-img-top" alt="dbrand.com - All the skins for mobile and mobile devices you need."></a>
<div class="card-body">
<h5 class="card-title card-title-text">DBRAND - Skins</h5>
<p class="card-text card-main-text">Website created for the DBRAND brand. Used a responsive navigation bar, that expands on adjusting the view-window. Grey-tones matching colouring, and a lot of images and little amounts of text.</p>
</div>
</div>
</div>
<div class="col-sm-6 portfolio-card-margin">
<div class="card card-main-styling"> <a href="https://github.com/michaeldijk/formbuilder" target="_blank"> <img src="assets/images/portfolio/form.png" class="card-img-top" alt="HTML forms framework"></a>
<div class="card-body">
<h5 class="card-title card-title-text">HTML form builder (Ongoing)</h5>
<p class="card-text card-main-text">Creating a framework, for HTML forms, to allow styling to be uniform, and less traditional. Most forms need styling applied to them, and, with this project I want to create a framework to do this in a simple and easy fashion.</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6 portfolio-card-margin">
<div class="card card-main-styling"> <a href="https://www.nu.nl/" target="_blank"><img src="assets/images/portfolio/nunl.png" class="card-img-top" alt="nu.nl News-site"></a>
<div class="card-body">
<h5 class="card-title card-title-text">nu.nl - news-site</h5>
<p class="card-text card-main-text">A Dutch news-site, focussing on content rather than design. Site is responsive, and adjusts depending on different view-windows. We've focussed on a minimal design approach, as content is king.</p>
</div>
</div>
</div>
<div class="col-sm-6 portfolio-card-margin">
<div class="card card-main-styling"> <img src="assets/images/portfolio/ongoing.png" class="card-img-top" alt="Ongoing project image">
<div class="card-body">
<h5 class="card-title card-title-text">Blackpool Church</h5>
<p class="card-text card-main-text">Currently ongoing project. Realization of getting the church of Blackpool, Cork, Ireland, visible on the internet. Allowing them to integrate wordpress for bullitens, accepting online donations.</p>
</div>
</div>
</div>
</div>
<!-- End of portfolio card section -->
</div>
</div>
</section>
<!-- End of portfolio section -->
<!-- Start of process section -->
<section id="process-section">
<div class="row process-section-row align-content-center align-items-center justify-content-center">
<div class="col-sm-12 col-lg-8">
<h1 class="process-section-title">Process</h1>
<p class="process-paragraph">I always work in a four step process. And I have described each step below. I take this approach, so my clients are always involved in each decission I make, and making sure that they are happy with the working results.</p>
</div>
<!-- Start of process cards section for small view windows -->
<div class="process-buttons-section">
<p class="process-button"><a class="btn btn-warning" data-bs-toggle="collapse" href="#process1" role="button" aria-expanded="false" aria-controls="process1">Step #1</a></p>
<div class="collapse" id="process1">
<div class="card card-body process-card-body">During initial call or meeting, depending on what is preferred, we will discuss any kind ideas you have, preferences, colours, for the site. I will then use this information, to create examples. These examples usually are created using wireframing and allows me to present the client with a good idea of what to expect. I will also discuss pricing as far as I can advise at this point, and these are subject to change. I will also advise the client what is required and what kind of hosting we most likely need to get. As this is based on freelance services, I work on 50% paid up-front, and 50% once work is completed. We also discuss milestones, so we have key-dates to work towards to, and I will discuss a shared drive/folder, to allow the client to upload any files necessary.</div>
</div>
<p class="process-button"><a class="btn btn-warning" data-bs-toggle="collapse" href="#process2" role="button" aria-expanded="false" aria-controls="process2">Step #2</a></p>
<div class="collapse" id="process2">
<div class="card card-body process-card-body">After about two working weeks, I will show you my examples. We will then discuss further what design examples work and which ones do not align with the vision the client has. From here onwards, I will then proceed to step #3, which is creating the actual site. We will then if needed re-align any milestones set, if they are still feasible, and, then plan accordingly.</div>
</div>
<p class="process-button"><a class="btn btn-warning" data-bs-toggle="collapse" href="#process3" role="button" aria-expanded="false" aria-controls="process3">Step #3</a></p>
<div class="collapse" id="process3">
<div class="card card-body process-card-body">In this step, I will present you examples, that I have created based on your input, and if not fully provided yet in previous step, you will then give me the remaining details, like specific texts, any images if not already provided and any other additional details that we would most likely need to add.</div>
</div>
<p class="process-button"><a class="btn btn-warning" data-bs-toggle="collapse" href="#process4" role="button" aria-expanded="false" aria-controls="process4">Step #4</a></p>
<div class="collapse" id="process4">
<div class="card card-body process-card-body">In this step, we will test the site extensively, once the tests have completed and the client has signed off on the testing and confirms he/she is happy with the result, we will move the site to go-live. You then have a week to test the backend access, which we could do through WordPress, or any similar CMS, and I will be available for questions. After this week, I will invoice any hours spend, on adjustments or, anything else related to the project. The reason for only entering this in a four-step process, is for the client to not get confused, about what is expected from them, and how I want to work with them, and apply their assistance to the site. The steps evolve from buttons to a static part of the site, on larger view-windows.</div>
</div>
</div>
<!-- End of process cards section for small view windows -->
<!-- Start of process section for larger view windows -->
<div class="process-columns-section">
<div class="row justify-content-center">
<div class="col-sm-6 col-lg-4 border-1 steps-larger-screens-text-left align-self-center"> Step #1 <i class="fas fa-chevron-circle-right"></i></div>
<div class="col-sm-6 col-lg-4 border-1">
<p>During initial call or meeting, depending on what is preferred, we will discuss any kind ideas you have, preferences, colours, for the site. I will then use this information, to create examples. These examples usually are created using wireframing and allows me to present the client with a good idea of what to expect. I will also discuss pricing as far as I can advise at this point, and these are subject to change. I will also advise the client what is required and what kind of hosting we most likely need to get. As this is based on freelance services, I work on 50% paid up-front, and 50% once work is completed. We also discuss milestones, so we have key-dates to work towards to, and I will discuss a shared drive/folder, to allow the client to upload any files necessary.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6 col-lg-4 border-1">
<p>After about two working weeks, I will show you my examples. We will then discuss further what design examples work and which ones do not align with the vision the client has. From here onwards, I will then proceed to step #3, which is creating the actual site. We will then if needed re-align any milestones set, if they are still feasible, and, then plan accordingly.</p>
</div>
<div class="col-sm-6 col-lg-4 border-1 steps-larger-screens-text-right align-self-center"> <i class="fas fa-chevron-circle-left"></i> Step #2 </div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6 col-lg-4 border-1 steps-larger-screens-text-left align-self-center"> Step #3 <i class="fas fa-chevron-circle-right"></i></div>
<div class="col-sm-6 col-lg-4 border-1">
<p>In this step, I will present you examples, that I have created based on your input, and if not fully provided yet in previous step, you will then give me the remaining details, like specific texts, any images if not already provided and any other additional details that we would most likely need to add.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6 col-lg-4 border-1">
<p>In this step, we will test the site extensively, once the tests have completed and the client has signed off on the testing and confirms he/she is happy with the result, we will move the site to go-live. You then have a week to test the backend access, which we could do through WordPress, or any similar CMS, and I will be available for questions. After this week, I will invoice any hours spend, on adjustments or, anything else related to the project. The reason for only entering this in a four-step process, is for the client to not get confused, about what is expected from them, and how I want to work with them, and apply their assistance to the site. The steps evolve from buttons to a static part of the site, on larger view-windows.</p>
</div>
<div class="col-sm-6 col-lg-4 border-1 steps-larger-screens-text-right align-self-center"><i class="fas fa-chevron-circle-left"></i> Step #4 </div>
</div>
</div>
<!-- End of process section for larger view windows -->
</div>
</section>
<!-- End of process section -->
<!-- Start of contact section -->
<section id="contact-section">
<div class="row contact-section-row align-content-center align-items-center justify-content-center">
<div class="col-sm-12 col-lg-8">
<h1 class="contact-section-title">Contact</h1>
<form class="row g-3" action="https://formspree.io/f/xqkgyjzk" method="POST">
<div class="col-md-4">
<label for="fname" class="form-label form-label-override">First Name</label>
<input type="text" class="form-control" id="fname" name="firstname" placeholder="Bruce" required="">
</div>
<div class="col-md-4">
<label for="lname" class="form-label form-label-override">Last Name</label>
<input type="text" class="form-control" id="lname" name="lastname" placeholder="Willis" required="">
</div>
<div class="col-md-4">
<label for="email" class="form-label form-label-override">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="brucetheman@willis.com" required="">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label form-label-override">Address</label>
<input type="text" class="form-control" id="inputAddress" name="address" placeholder="21 Spooner Street">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label form-label-override">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" name="address2" placeholder="Apartment, studio, or floor goes here...">
</div>
<div class="col-md-5">
<label for="inputCity" class="form-label form-label-override">City</label>
<input type="text" class="form-control" id="inputCity" name="city" placeholder="Mega-City One">
</div>
<div class="col-md-5">
<label for="country" class="form-label form-label-override">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="Wakanda">
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label form-label-override">Zip</label>
<input type="text" class="form-control" id="inputZip" name="zipcode" placeholder="12345abc">
</div>
<div class="col-md-12">
<label for="story" class="form-label form-label-override">Tell me your story...</label>
<textarea class="form-control" id="story" rows="5" name="story" placeholder="I would like to offer you the dream-job.." required=""></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-warning">Send</button>
</div>
</form>
</div>
</div>
</section>
<!-- End of contact section -->
<!-- Start of footer section -->
<footer>
<div class="row footer-section-row footer-section-text justify-content-center">
<div class="col-sm-12 col-lg-3">
<a href="mailto:contact@michaeldijk.com?subject=michaeldijk.com" class="footer-email"><i class="fas fa-envelope" aria-hidden="true"></i> contact@michaeldijk.com</a>
<p class="footer-text"><i class="fas fa-phone" aria-hidden="true"></i> <a href="tel:+3532231489">+353 22 31489</a></p>
</div>
<div class="col-sm-12 col-lg-3 social-icons">
<ul class="list-inline social">
<li class="list-inline-item "> <a href="https://www.facebook.com/" target="_blank"> <i class="fab fa-facebook-square footer-icons" aria-hidden="true"></i></a> </li>
<li class="list-inline-item"> <a href="https://www.twitter.com/" target="_blank"> <i class="fab fa-twitter-square footer-icons" aria-hidden="true"></i></a> </li>
<li class="list-inline-item"> <a href="https://www.instagram.com/" target="_blank"> <i class="fab fa-instagram footer-icons" aria-hidden="true"></i></a> </li>
<li class="list-inline-item"> <a href="https://www.pinterest.com/" target="_blank"> <i class="fab fa-pinterest-square footer-icons" aria-hidden="true"></i></a> </li>
<li class="list-inline-item"> <a href="https://www.linkedin.com/" target="_blank"> <i class="fab fa-linkedin footer-icons" aria-hidden="true"></i></a> </li>
</ul>
</div>
<div class="col-sm-12 col-lg-3">
<p class="footer-text"><i class="far fa-copyright" aria-hidden="true"></i> Copyright Michael Dijk, 2020/2021</p>
</div>
</div>
</footer>
<!-- End of footer section -->
</div>
<!-- End of Main container for the full page -->
<!-- Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<!-- jquery for the auto-hide script below -->
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Script to auto-hide the burger menu - Credit goes to my mentor, Antonio Rodriquez-->
<script> $(".navbar-nav li a").on("click", function () { $(".navbar-collapse").collapse("hide")}); </script>
</body>
</html>