-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (104 loc) · 5.24 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
<!DOCTYPE html>
<html>
<head>
<title>Matt Schlosser</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,700"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-boohttps://codepen.io/mattschlosser/pen/dEObbZ#settings-jststrap/4.3.1/js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="./style.css"/>
</head>
</html>
<body>
<header>
<div class='width-control'>
<div class='top-nav'>
<h1 > Matt Schlosser </h1>
<nav>
<a href="/">Home</a>
<!-- <a href="/contact">Contact</a> -->
</nav>
</div>
</div>
</header>
<main>
<div class='width-control'>
<content>
<h2>Introduction</h2>
<p>Hey there! My name is Matt. I'm passionate about web and software development. I've just finished all my coursework required for my Bachelor of Science in Computing Science at the University of Alberta. I anticipate to graduate this June. Below are some samples of the work I've done. I have experience in a broad range of subjects. During my time in post-secondary, I took classes in robotics, 3D graphics, computer organization and architechure, non-procedural programming languages, parallel programming, compilers, machine learning, and artificial intelligence.
In addition to my course work, I also have taught myself other technologies on the side. These include web design componnets such asHTML, CSS, Javascript, jQuery, Node.js, and React, to name a few.
Below are just a few samples of the work I have done. </p>
<h2>Featured Work</h2>
<div class='carousel'>
<div class='box'>
<img alt='screenshot' src='./img/traffic.png'/>
<p class='title'><a href='https://codepen.io/mattschlosser/full/mYEgeq' target="_new">Traffic Dashboard</a></p>
<p class='desc'>Here is a quick project I put together using <a href='https://data.edmonton.ca/'>Edmonton's Open Data API</a>. It shows all current and upcoming construction in the City of Edmonton. The different cards can be sorted by current or upcoming, and for each one, a map of the area can easily be viewed. </p>
</div>
<div class='box'>
<img alt='screenshot' src='./img/robots.jpg' />
<p class='title'><a href='https://sites.google.com/view/cs3120w17mattdarien/home' target="_new">Robotics Class</a></p>
<p class='desc'>Here is the final report from my CS 3120 robotics class at Grande Prairie Regional College. The robot had to perform a number of different tasks, incuding line following, maze navigation, and targetting. </p>
</div>
<div class='box'>
<img alt='screenshot' src='./img/roomm8s.png' />
<p class='title'><a href='https://roomm8s.net'>Roommates App</a></p>
<p class='desc'>In January 2019, I participated in a hackathon. I made a simple app with Bootstrap/Node.js/express that helps organize and share information between roommates like chores, groceries, and rent. It isn't completely finished, but you can click the link to see what I have so far. </p>
</div>
</div>
<!-- Code pen projects here. -->
<div class='portfolio'>
<h2>Acheivements</h2>
More information will be added shortly.
</content>
</div>
</main>
<footer>
<div class='width-control bot-nav'>
<div>
<table>
<tr>
<td colspan='2'><strong>Usernames:</strong></td>
</tr>
<tr>
<td><i class="github icon"></i></td>
<td><a href='https://github.com/mattschlosser' target="_new">mattschlosser</a></td>
</tr>
<tr>
<td><i class="linkedin icon"></li></td>
<td><a href="https://linkedin.com/in/mattjschlosser" target="_new">mattjschlosser</a></td>
</tr>
<tr>
<td><i class="codepen icon"></i></td>
<td><a href='https://codepen.io/mattschlosser ' target="_new">mattschlosser</a></td>
</tr>
</table>
</div>
<div class='address'>
<table>
<tr><td><strong>Contact: </strong></td></tr>
<tr><td>Matt Schlosser</td></tr>
<tr><td><a id="phone">(123) 456-7890</a></td></tr>
<tr><td ><a id="email" href="/">[email protected]</a></td></tr>
</table>
</div>
</div>
<script>
const phone = document.getElementById("phone");
const ac = "587";
const pf = "568";
const n = "3853"
const p = `${ac} ${pf}-${n}`;
phone.textContent =p;
phone.setAttribute("href", `tel:1-${ac}-${pf}-${n}`);
const e = document.getElementById("email");
u = "matt.schlosser";
d = "ualberta";
x = "ca";
const em = `${u}@${d}.${x}`;
e.textContent = em;
e.setAttribute("href", `mailto:${em}`);
</script>
</footer>
</body>