-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
277 lines (241 loc) · 12.2 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
<!DOCTYPE html>
<html lang="en">
<title>Tymoore Jamal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- Website template from https://www.w3schools.com -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="icon.png"> <!-- Source: https://pixabay.com/en/transistor-symbol-electronic-31988/ -->
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('background1.png'); /*Source:http://avalonadvancedmaterials.com/rare_metals/hafnium/ */
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("background2.png"); /*Source:http://wallpapercave.com/3d-hd-backgrounds */
min-height: 400px;
}
/* Second image (Contact) */
.bgimg-3 {
background-image: url("background3.png"); /* Source: https://hdfreewallpaper.net/3d-abstract-wallpapers/3d-view-abstract-1680x1050-wallpaper/ */
min-height: 400px;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
.darken_icons{
color: black;
font-weight: bold;
}
#quotescointainer{
width: 100%;
overflow: hidden; /* contain floated elements */
}
#quotesleft {
float: left;
width: 33%;
padding-right: 30px;
padding-left: 30px;
}
#quotescenter {
float: left;
width: 33%;
padding-right: 30px;
padding-left: 30px;
}
#quotesright{
float: left;
width: 33%;
padding-right: 30px;
padding-left: 30px;
}
</style>
<script>
// google-analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-102658272-1', 'auto');
ga('send', 'pageview');
</script>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="w3-bar-item w3-button darken_icons"> HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-hide-small darken_icons"><i class="fa fa-user"></i> ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-hide-small darken_icons"><i class="fa fa-th"></i> PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small darken_icons"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="https://www.linkedin.com/in/tymoore-jamal-8127b4132/" class="w3-bar-item w3-button w3-hide-small w3-right darken_icons" target="_blank"><i class="fa fa-linkedin"> LINKEDIN</i>
<a href="https://github.com/tymoorej" class="w3-bar-item w3-button w3-hide-small w3-right darken_icons" target="_blank"><i class="fa fa-github"> GITHUB</i>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a>
</div>
</div>
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">TYMOORE <span class="w3-hide-small">JAMAL</span></span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i>Tymoore Jamal</b></p><br>
<img src="me.png" class="w3-round w3-image" alt="Photo of Me" width="350" height="333">
</div>
<div class="w3-col m6 w3-padding-large">
<br /> <br /> <br />
<h3 class="w3-center">ABOUT ME</h3>
<p>I am currently in my fourth year of studying Computer Engineering at the University of Alberta. I chose this degree for the opportunity to innovate and design solutions to the problems our society faces.<br /> <br /> I value education for the pursuit of knowledge and development of my skills. In my spare time I enjoy leading an advocacy team for a student group on campus. <br /> <br /> I believe in lifelong learning and I am passionate about what I do. My greatest goal is to apply this passion to my work and someday improve the lives of others and benefit society.</p>
</div>
</div>
<p class="w3-large w3-center w3-padding-16">Areas of interest:</p>
<p class="w3-wide w3-center"><i class="fa fa-code"></i>App Development</p>
<p class="w3-wide w3-center"><i class="fa fa-mortar-board"></i>Machine Learning</p>
<p class="w3-wide w3-center"><i class="fa fa-database"></i>Data Integration</p>
<p class="w3-wide w3-center"><i class="fa fa-thermometer-full"></i>Internet of Things</p>
</div>
<div class="bgimg-2 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">PORTFOLIO</span>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<h2 class="w3-center" id="projects" style="letter-spacing:5px;">SCHOOL PROJECTS</h2>
<br /> <br />
<div id="quotescointainer">
<div id="quotesleft">
<h4 style="text-align: center;"><b>Texas Holdem Poker</b><br />
<img src="poker.png" align="middle" width="30%" height="30%" > </h4>
<p>In this project, we implemented a version of Texas Holdem poker. This involved creating a GUI allowing users to play poker against a bot. We wrote the code for this project in Python and relied on object oriented programming, specifically inheritance. Our bot AI uses a variation of the Monte Carlo Algorithm; the bot uses this algorithm to determine its probability of winning before choosing which move to make.</p>
</div>
<div id="quotescenter">
<h4 style="text-align: center;"><b>Quickest Path Finder</b><br />
<img src="path.png" align="middle" width="30%" height="30%" > </h4>
<p>This project consists of a server client relationship between an Arduino client and a PC server running Python. It allows users to scroll through a map of Edmonton using the Arduino and select a start/end point; The Arduino then sends that information to the Python server where, using Dijkstra’s Algorithm, the shortest path is calculated and displayed on the map.</p>
</div>
<div id="quotesright">
<h4 style="text-align: center;"><b>Encrypted Communication</b><br />
<img src="encryption.png" align="middle" width="30%" height="30%"> </h4>
<p>Symmetric key encryption between two Arduinos was used in this project, allowing the users to chat privately. The communication involved a client server relationship dependent on two finite state machines. The encryption was based on both users creating a shared key from two random private keys and a public key. As each character was sent, the shared key would automatically change. The dynamic nature of the encryption increased security drastically, preventing against brute force attacks.</p>
</div>
</div>
<br />
<p class="w3-center w3-text-black"><br/><em><b> Click on the icon below to see the source code for these projects and more!</b></em></p><br />
<div class="w3-row-padding w3-center">
<a href="https://github.com/tymoorej" target="_blank"><img src="github.png" width="15%" height="15%"></a> <!--Source: https://github.com/logos -->
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- Third Parallax Image with Contact Text -->
<div class="bgimg-3 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">CONTACT</span>
</div>
</div>
<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact">
<h2 class="w3-center" style="letter-spacing:5px;">MY INFORMATION</h2>
<div class="w3-row w3-padding-32 w3-section">
<div class="w3-col m4 w3-container">
<!-- Add Google Maps -->
<div id="googleMap" class="w3-round-large" style="width:100%;height:400px;">
</div>
</div>
<div class="w3-col m8 w3-panel">
<div class="w3-large w3-margin-bottom">
<br /> <br /> <br /> <br />
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Location: Edmonton AB, Canada<br>
<i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Phone: (780) - 904 - 5172<br>
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: [email protected]<br>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-32">
<p>"If you don't stick to your values when they are being tested, they're not values: they're hobbies."<br />
-Jon Stewart</p>
<!-- <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>Top of page</a> -->
</footer>
<script>
function myMap(){
myCenter=new google.maps.LatLng(53.5444, -113.4909);
var mapOptions= {
center:myCenter,
zoom:10, scrollwheel: false, draggable: true,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onload=function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
navbar.className = "w3-bar" + " w3-card-2" + " w3-animate-top" + " w3-white";
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhqcJCTWdmC7r438naa2kDa-gYNlrCgRQ&callback=myMap"></script>
</body>
</html>