-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
436 lines (408 loc) · 16.7 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
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matthew Steedman Portfolio</title>
<link rel="stylesheet" href="styling.css" />
<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="./preloader/preloader.css" >
</head>
<body>
<!-- Preloader -->
<div class="preloader">
<div class="loader"></div>
</div>
<!-- scroll up button -->
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo">
<a href="#home">MATT<span>HEW.</span></a>
</div>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Matthew Steedman</div>
<div class="text-3">And I am a <span>Junior Web-Developer</span></div>
<a href="#contact" class="" id="">HIRE ME</a>
<div class="links_to_profiles">
<a href="https://github.com/matthewsteedman" target="_blank">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/matthew-steedman-7a17b5195/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a href="mailto:[email protected]">
<i class="fa fa-envelope"></i>
</a>
<a href="tel:0814597871">
<i class="fa fa-phone" aria-hidden="true"></i>
</a>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<h2>ABOUT ME</h2>
<img src="IMG-4963.JPG" alt="Matthew Steedman" />
<div class="column right about-content">
<div class="text">
Hi, I am Matthew Steedman and i am a <span>Web-Developer</span>
</div>
<p>
I have come to the realization that life is short and every person
has something they are passionate about. The cost of not following
your heart is spending the rest of your life wishing you had.
Therefore I have decided to follow my heart.I am a dedicated and
open-minded person aspiring to become a Full Stack Web Developer.
I am seeking to advance and pursue a career in development. I was
always very interested in learning how hardware and software
communicate. My passion for programming started as a young child
when my dad purchased our first computer and at the age of 10, I
started building my own computer by collecting offcuts and used
parts.
</p>
</div>
<a class="slide-to" href="#more-about-me">
<i class="fa fa-angle-double-down"></i>
</a>
</section>
<!-- more-about-me section start -->
<section class="more-about-me" id="more-about-me">
<!-- experiences start -->
<h3 class="headind1">My Experiences</h3>
<h3 class="heading2">Passion Board</h3>
<h4 class="subheading1">Volunteer Work</h4>
<h4 class="subheading2">Hobbies</h4>
<div id="experiences-content" class="experiences-content">
<p>October 2019
I was offered the opportunity to be part of a team of volunteers
to train about 8300 learners in the introduction to coding and digital
skills at various high schools during October 2019. The course was offered
by the Bookery Code as part of the #AfricaCodeWeek.
</p>
</div>
<!-- passion board start -->
<div class="passion-board-content">
<i class="fa fa-music"><h6>Music</h6></i>
<i class="fa fa-book"><h6>Reading</h6></i>
<i class="fa fa-gamepad"><h6>Gaming</h6></i>
<i class="fa fa-desktop"><h6>Software Development</h6></i>
<i class="fa fa-group"><h6>Socialising</h6></i>
<i class="fa fa-futbol-o"><h6>Sport</h6></i>
</div>
</div>
</section>
<!-- Projects section start -->
<section class="projects" id="project">
<h1>MY PROJECTS</h1>
<a href="https://epic-jang-960a57.netlify.app" target="_blank">
<div class="box">
<h3>Muscian Portfolio</h3>
<img src="Screenshot from 2021-01-11 09-47-47.png"/>
<p>(HTML & CSS)
The following website , was one of my first sites ever created.
Its a basic portfolio for a muscian , that show cases his talents.
This website was inspred by my love for music.
</p>
</div>
</a>
<a href="https://swegga-matthew-steedman.netlify.app/" target="_blank">
<div class="box">
<h3>Swegga Website</h3>
<img src="Swegga.png">
<p>
This my first attempt at creating a cart using javascript.
I used html and css to construct the front-end.
</p>
</div>
</a>
<a href="https://swegga-matthew-steedman.netlify.app/" target="_blank">
<div class="box">
<h3>Calculator Js</h3>
<img src="calculator.png">
<p>
My first attempt at creating a calculator using javascript.
I used html and css to construct the front end.
</p>
</div>
</a>
<a href="https://blogsfordogs.netlify.app" target="_blank">
<div class="box">
<h3>Blogs for dogs</h3>
<img src="blogsForDogs.png"/>
<p>
Blogs for dogs is a blog web app. I constructed the backend api using flask and python.
For the front end design, i used html, css and javascript.
I also included and required the recaptcha api from google.
</p>
</div>
</a>
<a href="https://repl.it/@MatthewStdmn/Lotto#.replit" target="_blank">
<div class="box">
<h3>Lotto Application
(python + tkinter)</h3>
<img src="lotto_app.png">
<p>
The Lotto application only allows 18+ Adults to enter.
All the users information is stored in a text file along with there entries,
matching numbers and the winning numbers.
</p>
</div>
</a>
<a href="https://replit.com/@MatthewStdmn/Python-temp-converter#Temp_convert.py" target="_blank">
<div class="box">
<h3>Python Temperature Converter</h3>
<img src="temp_converter.png">
<p>
A simple temperature converter. Allows the user to convert degrees-celsius(°C) to
Fahrenheit(°F) and vise versa. I created this program during the coding academy at
Lifechoices.
</p>
</div>
</a>
</section>
<!-- skils section start -->
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My Creative skills & Experience</div>
<p>
Volunteer work: October 2019 I was offered the opportunity to be
part of a team of volunteers to train about 8300 learners in the
introduction to coding and digital skills at various high schools
during October 2019. The course was offered by the Bookery Code as
part of the #AfricaCodeWeek.
</p>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Html</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>Css</span>
<span>90%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>Javascript</span>
<span>60%</span>
</div>
<div class="line java"></div>
</div>
<div class="bars">
<div class="info">
<span>Python</span>
<span>80%</span>
</div>
<div class="line python"></div>
</div>
<div class="bars">
<div class="info">
<span>C#</span>
<span>30%</span>
</div>
<div class="line C-sharp"></div>
</div>
<div class="bars">
<div class="info">
<span>Msql</span>
<span>70%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
<!-- testimonials section start -->
<section class="testimonials" id="testimonials">
<h1 class="title">TESTIMONIALS</h1>
<div class="cards" >
<div class="card">
<img src="godwin.jpeg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Godwin Dzvapatsva</b></h4>
<h5>Lecturer</h5>
<p>
Along with his undeniable talent, Matthew has always been an absolute joy to work with. He is a true team player, and always manages to foster positive discussions and bring the best out of other
students- Godwin-Head of Curriculum and Learning
</p>
</div>
</div>
<div class="card">
<img src="thapelo.jpeg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Thapelo Tsotetsi</b></h4>
<h5>Lecturer</h5>
<p>Throughout the course of six months at Lifechoices Coding Academy, Matthew has always been responsive and putting extra effort to solve arising tasks my himself before seeking for help. He's ability to work in a team and help others is remarkable.
</p>
</div>
</div>
<div class="card">
<img src="https://i.postimg.cc/8PmH38KH/Alexander-Maart-3.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alexander Maart</b></h4>
<h5>Colleague</h5>
<p>
He is a very goal drivin individual.
He is always willing to help anyone and would try and
find a solution to the best of his ability. Matthew is a passionate
coder & web developer, any employer would benefit when hiring Matthew
</p>
</div>
</div>
</div>
<div class="cards" >
<div class="card">
<img src="https://i.postimg.cc/Dwhfbzz4/Yusuf-Salie-5.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Yusuf Salie</b></h4>
<h5>Co-worker</h5>
<p>
Matthew is a studious and hardworking individual who brings his own creativity and ingenuity to any project he works on. I think he would be an excellent member of any team.
</p>
</div>
</div>
<div class="card">
<img src="https://i.postimg.cc/hP1W61Sh/Mihlali-Momoza-1.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Mihlali Momoza</b></h4>
<h5>Co-worker</h5>
<p>
Working with Matthew Steedman was one of the greatest experience ever , he is an incredibly young talented developer
but what makes him stand out its his work ethic and steady approach, i can't imagine not working with Steedman
</p>
</div>
</div>
<div class="card">
<img src="https://i.postimg.cc/bwRQ6QvF/Aashiq-Adams-4.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Aashiq Adams</b></h4>
<h5>Co-worker</h5>
<p>Matthew is a hardworking and diligent co-worker. He brings his own
creative flare to any group he is a part of, and combined with good communication
skills can create a productive and helpful environment.
He excels at problem solving as well as putting in the
hard work necessary to get ahead of the pack. Matthew is unique
and will benefit any company he is a part of</p>
</div>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact</h2>
</div>
<div class="contact-content">
<div class="column left">
<div class="text">Get in Touch</div>
<div class="links_to_profiles">
<a href="https://github.com/matthewsteedman">
<i class="fa fa-github" aria-hidden="true" style="font-size: 50px; color: darkslategrey; justify-content: space-between; margin-left: 150px;" ></i>
</a>
<a href="https://www.linkedin.com/in/matthew-steedman-7a17b5195/">
<i class="fa fa-linkedin" style="font-size: 50px; color: darkslategrey; justify-content: space-between;"></i>
</a>
<a href="mailto:[email protected]">
<i class="fa fa-envelope" style="font-size: 50px; color: darkslategrey; justify-content: space-between;"></i>
</a>
</div>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">Matthew Steedman</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt" style="font-size: xx-large;"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">143 athwood road Newfields , Cape townSouth africa</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope" style="font-size: xx-large;"></i>
<div class="info">
<div class="head">Email</div>
<a href="mailto:[email protected]">
<div class="sub-title">[email protected]</div>
</a>
</div>
</div>
<div class="row">
<i class="fa fa-phone" aria-hidden="true" style="font-size:xx-large;"></i>
<div class="info">
<div class="head">Call me</div>
<a href="tel:0814597871">
<div class="sub-title">0814597871</div>
</a>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="title">Message me</div>
<form method="POST" action="https://formspree.io/f/xwkwaylb">
<div class="fields">
<div class="field name">
<input type="text" name="name" placeholder="Name" required>
</div>
<div class="field email">
<input type="email" name="_replyto" placeholder="Email" required>
</div>
</div>
<div class="field subject">
<input type="text" name="subject" placeholder="Subject" required>
</div>
<div class="field textarea">
<textarea name="message" id="" cols="30" rows="10" placeholder="Describe" project=""></textarea>
</div>
<div class="button">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
<!-- footer section start -->
<footer>
<span>Matthew Steedman <a href="#">2021</a> <span class="far fa-copyright"></span>All rights reserved.</span>
</footer>
</section>
<script src="https://kit.fontawesome.com/1411b72f9d.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="script.js"></script>
</body>
</html>