-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (187 loc) · 7.26 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
---
layout: default
title: AlanR.me
# everything in this multiline hero value MUST BE INDENTED BY ONE TAB
hero: |
<p>
I'm a full stack developer with an interest in networking and system administration.
</p>
<p>
I'm in <span class="hu"><i class="bi bi-geo-alt-fill"></i> Dubai</span> studying <span class="hu"><i class="bi bi-mortarboard-fill"></i> Computer Engineering</span>.
</p>
<p>
Find my portfolio and contacts below.
</p>
---
<!-- Page-specific dependencies -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script defer src="{{ site.baseurl }}/js/github.js" async></script>
<div class="section" id="intro">
<h2 class="aos stickyheader" data-aos="fadein-expand-up">EXPERIENCE</h2>
<h3 class="aos" data-aos="fadein-up"> I'm great at... </h3>
<div class="row port-cards">
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-html5-plain"></i>
<h3>HTML</h3>
<p2>Since 2015</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-css3-plain"></i>
<h3>CSS</h3>
<p2>Since 2015</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-javascript-plain"></i>
<h3>JavaScript</h3>
<p2>Since 2015</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-nodejs-plain"></i>
<h3>Node.js</h3>
<p2>Since 2018</p2>
</div>
</div>
<p2 style="opacity: 0.7">You're seeing the first three in use right now!</p2>
</div>
<h3 class="aos" data-aos="fadein-up"> I'm also experienced with... </h3>
<div class="row port-cards short">
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-python-plain"></i>
<h3>Python</h3>
<p2>Since 2017</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-tensorflow-original"></i>
<h3>TensorFlow</h3>
<p2>Since 2022</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-cplusplus-plain"></i>
<h3>C++</h3>
<p2>Since 2024</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-linux-plain"></i>
<h3>Administration</h3>
<p2>Since 2019</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-jquery-plain"></i>
<h3>jQuery</h3>
<p2>Since 2019</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-illustrator-plain"></i>
<h3>Illustrator</h3>
<p2>Since 2019</p2>
</div>
</div>
<div class="col">
<div class="card aos" data-aos="fadein-up">
<i class="devicon-go-plain"></i>
<h3>Golang</h3>
<p2>Since 2020</p2>
</div>
</div>
</div>
</div>
<div class="section" id="portfolio">
<h2 class="aos stickyheader" data-aos="fadein-expand-up">PROJECTS</h2>
<p class="aos" data-aos="fadein-up"> Check out a few of my creations. Pulled from <a href="https://github.com/{{ site.github_username }}">my GitHub</a>.</p>
<div class="row card-columns gh-projects">
<a id="nojs" class="col-sm-6" style="color: inherit;">
<div class="card aos" data-aos="fadein-up">
<h3>Enable JavaScript!</h3>
<p2>These projects are dynamically loaded in. Unfortunately you won't see them without JavaScript.</p2>
</div>
</a>
</div>
<template>
<a href="" class="col-sm-6 gx-3" style="color: inherit;">
<div class="card aos" data-aos="fadein-up">
<div class="heading">
<h3></h3>
<i class="bi bi-box-arrow-up-right arrowicon"></i>
</div>
<p2></p2>
<div class="actions">
<button>
<i class="bi-github socialicon"></i>
Repo
</button>
<div class="icons">
<span class="skills"></span>
<div class="vr"></div>
<span class="stars">
<i class="bi-star-fill"></i>
</span>
</div>
</div>
</div>
</a>
</template>
</div>
<div class="section" id="contact">
<h2 class="aos stickyheader" data-aos="fadein-expand-up">FIND ME</h2>
<div class="aos" data-aos="fadein-up" class="contact-slides" style="margin-bottom: 1em;">
<!-- icons -->
<div class="slides-container">
<div class="slides">
<div id="slide-1">
<i class="bi bi-box-arrow-up-right arrowicon"></i>
<i class="bi-envelope-fill socialicon"></i>
</a>
</div>
<div id="slide-2">
<a href="https://github.com/{{ site.github_username }}">
<i class="bi bi-box-arrow-up-right arrowicon"></i>
<i class="bi-github socialicon"></i>
<p>{{ site.github_username }}</p>
</a>
</div>
<div id="slide-3">
<a href="https://www.linkedin.com/in/{{ site.linkedin_username }}">
<i class="bi bi-box-arrow-up-right arrowicon"></i>
<i class="bi-linkedin socialicon"></i>
<p>{{ site.linkedin_username }}</p>
</a>
</div>
</div>
<a href="#slide-1" aria-label="Email"><i class="bi-envelope-fill"></i></a>
<a href="#slide-2" aria-label="GitHub"><i class="bi-github"></i></a>
<a href="#slide-3" aria-label="LinkedIn"><i class="bi-linkedin"></i></a>
</div>
</div>
</div>
<!--
<div class="section" id="fun">
<h2>Fun Tools</h2>
<div class="container" style="text-align: left; margin-bottom: 30px;">
<p2>
If you want to visit the fun tools that were previously displayed on the homepage, please click the button below.
</p2>
<br>
<a href="./funstuff.html"><input type="button" value="FUN!" class="button1"></a>
</div>
</div>
-->