-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
311 lines (252 loc) · 16.1 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
<!DOCTYPE html>
<html>
<head>
<title>Hack In Style With Faysal AL-Kharaz</title>
<!-- Linking bootstrap library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Link css document -->
<link rel="stylesheet" href="./css/index_styling.css">
<!-- Adding the needed scripts to make some basic functions work -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Link icons website -->
<link rel="icon" href="./resources/favicon/favicon.ico">
<!-- Link various fonts -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;1,300&family=Montserrat&family=Piedra&family=Sacramento&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Add a division that displays a navigation menu -->
<div class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">HACK IN STYLE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="./blog.html"> Blog </a></li>
<li class="nav-item"><a class="nav-link" href="./contact.html"> Contact Us </a></li>
</ul>
</div>
</div>
<!-- Add a division that shows the very first screen that the user will see -->
<div class="main-container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5 col-sm-12">
<img class="profile-pic" src="./resources/Background_Images/index_page/profile_pic.jpeg" alt="profile picture">
</div>
<div class="main-container-prompt col-md-7 col-sm-12">
<!-- Add the website title -->
<h1 class="main-container-title"> <\HACK IN STYLE> </h1>
<!-- Add an introductory paragraph -->
<span class="main-container-span">Hello There!
My name is Faysal Al-Kharraz, I am a software engineer who has interest in various computer
science related fields and has a passion for various other field such as sports, health and
fitness and similar topics.
<br> <br>
If you share the same interests or just want to learn more about
computer science, sports, or about me as an individual, then just grab a cup of coffee, sit
down and relax because you are about to join me on adventure of exploration. Hopefully, I will
succeed in making interesting content that meets your expectations!
<br> <br>
If you have any suggestions, I am more than happy to listen to you guys and you can easily contact
me by navigating to the 'CONTACT ME' page.
</span>
</div>
</div>
</div>
<!-- Add a horizontal rule -->
<hr>
<!-- Add a div that will mention my job experiences -->
<div class="job-container">
<h2 class="job-container-title section-title"> Job Experiences</h2>
<!-- Mention ProgressSoft -->
<img class="job-container-icon section-icon" src="./resources/Background_Images/index_page/ProgressSoft_Logo.jpg" alt="ProgressSoft Logo">
<h3>Information Security Engineer, ProgressSoft, Amman, Jordan</h3>
<!-- Add a separator -->
<div class="internal-separator"></div>
<!-- Mention Pioneers Academy -->
<img class="job-container-icon section-icon" src="./resources/Background_Images/index_page/Pioneers_Academy_Logo.png" alt="Pioneers Academy Logo">
<h3>Software Developer, Pioneers Academy, Amman, Jordan</h3>
</div>
<hr>
<!-- Add a div that will mention my certificates -->
<div class="certificates-container">
<h2 class="certificates-container-title section-title">Certificates</h2>
<!-- Mention web development -->
<img class="certificates-container-icon section-icon" src="./resources/Background_Images/index_page/web_development.png" alt="web development icon">
<h3>Web Development By Udemy</h3>
<p class="description">
In this course I was introduced to all the necessary skills and languages needed
in order to develop fully functional websites of high complexity.
<br>
<b>Status:</b> In Progress
</p>
<!-- Add a separator to make things look nicer -->
<div class="internal-separator"></div>
<!-- Mention CCNA -->
<img class="certificates-container-icon section-icon" src="./resources/Background_Images/index_page/CCNA_S_W_Logo.jpg" alt="CCNA: Switching & Routing Certificate">
<h3>CCNA: Switching & Routing Certificate</h3>
<p class="description">
In this course, I was introduced to the basics of computer networks, the role of different
components such as the switch and the router in creating those networks and most importantly
router and switch setup & configuration.
<br>
<b>Status:</b> Obtained [Valid until 21-January-2023]
</p>
</div>
<hr>
<!-- Add a div that will mention my education -->
<div class="education-container">
<h2 class="education-container-title section-title">Education</h2>
<!-- Add a separator to make things look nicer -->
<div class="internal-separator"></div>
<!-- Add the university's logo and add a brief description -->
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="university-logo logo" src="./resources/Background_Images/index_page/university_of_st_andrews.jpg" alt="University of St Andrews">
</div>
<div class="col-md-8 col-sm-12">
<span class="brief-description">
<h3>UNIVERSITY OF ST ANDREWS, SCOTLAND, UK</h3>
<br>
<p>
I am currently persuing a BSc degree in Computer Science at the University of St Andrews
and I am expected to graduate in 2021.
</p>
</span>
</div>
</div>
<!-- Add a separator to make things look nicer -->
<div class="internal-separator"></div>
<!-- Add Amman Academy's logo and add a brief description -->
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="high-school-logo logo" src="./resources/Background_Images/index_page/amman_academy_logo.jpg" alt="Amman Academy Logo">
</div>
<div class="col-md-8 col-sm-12">
<span class="brief-description amman-academy">
<h3>Amman Academy, Amman, Jordan</h3>
<br>
<p>
I was an IB [International Baccalaureate] student at that school where I graduated with a 41/45.
</p>
</span>
</div>
</div>
</div>
<hr>
<!-- Add a div that will mention my skills [programming and general skills] -->
<div class="skills-container">
<h2 class="skills-container-title section-title">Skills</h2>
<!-- This section will focus on the programming skills -->
<img class="skills-container-icon section-icon" src="./resources/Background_Images/index_page/coding.png" alt="coding icon">
<h3>Programming Skills</h3>
<p class="description">
sql | java | python | css | html | javascript | node | react |
bootstrap | c | haskell | mongodb
</p>
<!-- Separating programming and general skills -->
<div class="internal-separator"></div>
<!-- This section will focus on the general skills -->
<img class="skills-container-icon section-icon" src="./resources/Background_Images/index_page/languages.png" alt="globe icon">
<h3>General Skills</h3>
<p class="description">
Arabic [native language] | English [second language] | public speaking
</p>
</div>
<hr>
<!-- Add a div that will mention my hobbies -->
<div class="hobbies-container">
<h2 class="hobbies-container-title section-title">Hobbies</h2>
<!-- Add details about reading -->
<img class="hobbies-container-icon section-icon" src="./resources/Background_Images/index_page/study.png" alt="reading icon">
<h3>Reading</h3>
<p class="description">
I have recently started enjoying reading, therefore I do not have any preferences in terms of
genres if you ask me. Nonetheless, I did notice that I like Terry Pritchet's style. My favourite book so
far is one that I am currently reading and it is called 'Guns Germs and Steel'.
</p>
<!-- Separating programming and general skills -->
<div class="internal-separator"></div>
<!-- Add details about playing sports -->
<img class="hobbies-container-icon section-icon" src="./resources/Background_Images/index_page/soccer.png" alt="sports icon">
<h3>Playing Sports</h3>
<p class="description">
My favourite sport is football (soccer) but I do enjoy playing other sports such as volleyball,
golf, squash, badminton, etc.
</p>
<!-- Separating programming and general skills -->
<div class="internal-separator"></div>
<!-- Add details about playing chess -->
<img class="hobbies-container-icon section-icon" src="./resources/Background_Images/index_page/chess.png" alt="chess icon">
<h3>Playing Chess</h3>
<p class="description">
I have recently started enjoying playing chess, but I never got into the details of the game.
For instance, I have never studied chess and learnt strategies.
</p>
<!-- Separating programming and general skills -->
<div class="internal-separator"></div>
<!-- Add details about playing video games -->
<img class="hobbies-container-icon section-icon" src="./resources/Background_Images/index_page/game-controller.png" alt="video games icon">
<h3>Gaming</h3>
<p class="description">
Although I am not a full time gamer, but I do enjoy playing video games every once and a while. My
favourite games would be CSGO and FIFA.
</p>
<!-- Separating programming and general skills -->
<div class="internal-separator"></div>
<!-- Add details about food -->
<img class="hobbies-container-icon section-icon" src="./resources/Background_Images/index_page/kitchen.png" alt="food icon">
<h3>Trying New & Exotic Foods</h3>
<p class="description">
I have a passion for food. Although I do not enjoy making the food but I do certainly
do enjoy eating it. As a food lover, I do enjoy trying new exotic dishes from all around
the world, and I look forward on sharing my taste testing experiences with you.
</p>
<!-- Separating programming and general skills -->
<div class="internal-separator"></div>
<!-- Add details about podcasts -->
<img class="hobbies-container-icon section-icon" src="./resources/Background_Images/index_page/podcast.png" alt="podcast icon">
<h3>Listening to Podcasts</h3>
<p class="description">
I enjoy listening to podcasts and some of my favourite podcasts includes 'The Joe Rogan Experience',
'Ear Biscuits' and 'Jenna Julien Podcast'.
</p>
</div>
<hr>
<!-- Add a division that will contain copyrights and hyperlinks to my various social media -->
<div class="final-container">
<!-- Adding a title for the user to to know the content of this section -->
<h2 class="final-container-title section-title">Stay Up To Date And Get In Touch</h2>
<!-- Adding an icon for aesthetics reasons -->
<img class="final-container-icon section-icon" src="./resources/Background_Images/index_page/mental.png" alt="mental icon">
<!-- Adding a paragraph as a small conclusion -->
<p class="final-container-conclusion paragraph">
My aim is to create a community where everyone can be themselves and enjoy not only being members, but also
contributors to this community. I want you to be able to express your thoughts and share your experiences and
opinions with me and the rest of the individuals here. If you would like to contribute to the making of this
community, then feel free to contact me using the 'Contact Me' page. In addition, feel free to follow me on
the following social media platforms.
</p>
<!-- Add the list of social media that visitors could follow me on -->
<a href="https://www.facebook.com/faysal.kharraz"><img class="social-media-icon" src="./resources/Background_Images/index_page/facebook.png" alt="facebook icon"></a>
<a href="https://twitter.com/FaysalKharraz"><img class="social-media-icon" src="./resources/Background_Images/index_page/twitter.png" alt="twitter icon"></a>
<a href="https://www.linkedin.com/in/faysal-al-kharraz-29b11815b"><img class="social-media-icon" src="./resources/Background_Images/index_page/linkedin.png" alt="linkedin icon"></a>
<!-- Attribute section to the website for copyright purposes -->
<div class="final-container-attribution-section">
Attribution to:
<br>
Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div>
<!-- Copyright section to protect my website -->
<div class="final-container-copyright">
<p>© 2020 Faysal Al-Kharaz</p>
</div>
</div>
</body>
</html>