-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (232 loc) · 11.3 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
<!DOCTYPE html>
<html>
<head>
<title>Abid Ali</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<header id="header">
<div class="inner">
<div class="header-overley"></div>
<h1>
<span class="hi">Hi 😀</span> I am Abid Ali. Co-Founder at
<a class="ooptech d-block"> Maahir Technologies</a>
And software engineer at Breu Inc.
</h1>
</div>
</header>
<!-- Main -->
<div id="main">
<!-- One -->
<section id="one">
<header class="major">
<h2 class="color-white">My Areas of expertise are following:</h2>
<h4>Languages:</h4>
<h2 class="font-2rem gap12 expertise d-flex flex-wrap align-center">
<div class="border-blue d-flex gap12 align-center" title="HTML5">
<span><i class="fab fa-html5"></i></span>
<span>(HTML5)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="CSS3">
<span><i class="fab fa-css3"></i></span>
<span>(CSS3)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="SASS">
<span><i class="fab fa-sass"></i></span>
<span>(SASS)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Bootstrap">
<span><i class="fab fa-bootstrap"></i></span>
<span>(Bootstrap 4-5)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="javaScript">
<span><i class="fab fa-js-square"></i></span>
<span>(javaScript)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="jQuery">
<span><img class="verticalMiddle" src="images/jquery-icon.svg" width="30px" alt="" /></span>
<span>(jQuery)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="React.js">
<span><i class="fab fa-react"></i></span>
<span>(React.js)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Next.js">
<span><svg width="82" height="40" viewBox="0 0 148 90" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="
background: #fff;
transform: translateX(4%);
shape-rendering: auto;
">
<path
d="M34.992 23.495h27.855v2.219H37.546v16.699h23.792v2.219H37.546v18.334h25.591v2.219H34.992v-41.69zm30.35 0h2.96l13.115 18.334 13.405-18.334L113.055.207 83.1 43.756l15.436 21.429H95.46L81.417 45.683 67.316 65.185h-3.018L79.85 43.756 65.343 23.495zm34.297 2.219v-2.219h31.742v2.219h-14.623v39.47h-2.554v-39.47H99.64zM.145 23.495h3.192l44.011 66.003L29.16 65.185 2.814 26.648l-.116 38.537H.145v-41.69zm130.98 38.801c-.523 0-.914-.405-.914-.928 0-.524.391-.929.913-.929.528 0 .913.405.913.929 0 .523-.385.928-.913.928zm2.508-2.443H135c.019.742.56 1.24 1.354 1.24.888 0 1.391-.535 1.391-1.539v-6.356h1.391v6.362c0 1.808-1.043 2.849-2.77 2.849-1.62 0-2.732-1.01-2.732-2.556zm7.322-.08h1.379c.118.853.95 1.395 2.149 1.395 1.117 0 1.937-.58 1.937-1.377 0-.685-.521-1.097-1.708-1.377l-1.155-.28c-1.62-.38-2.36-1.166-2.36-2.487 0-1.602 1.304-2.668 3.26-2.668 1.82 0 3.15 1.066 3.23 2.58h-1.354c-.13-.828-.85-1.346-1.894-1.346-1.1 0-1.832.53-1.832 1.34 0 .642.472 1.01 1.64 1.284l.987.243c1.838.43 2.596 1.178 2.596 2.53 0 1.72-1.33 2.799-3.453 2.799-1.987 0-3.323-1.029-3.422-2.637z"
fill="#000" fill-rule="nonzero"></path>
</svg></span>
<span>(Next.js)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Redux">
<span><img class="verticalMiddle" src="images/redux.svg" width="30px" alt="" /></span>
<span>(Redux)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Materi Ui">
<span><img class="verticalMiddle" src="images/material-ui.svg" width="30px" alt="" /></span>
<span>(Material Ui)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Responsive design">
<span><img class="verticalMiddle" src="images/responsive.png" width="30px" alt="" /></span>
<span>(Responsive Design)</span>
</div>
<h4>Tools:</h4>
</h2>
<h2 class="font-2rem gap12 tools d-flex flex-wrap align-center">
<div class="border-blue d-flex gap12 align-center" title="VS Code">
<span><img class="verticalMiddle" src="images/vs-code.svg" width="30px" alt="" /></span>
<span>(VS Code)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="NPM">
<span><i class="fab fa-npm"></i></span>
<span>(NPM)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="YARN">
<span><i class="fab fa-yarn"></i></span>
<span>(YARN)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Github">
<span><i class="fab fa-github"></i></span>
<span>(Github)</span>
</div>
<div class="border-blue d-flex gap12 align-center" title="Git">
<span><i class="fab fa-git-alt"></i></span>
<span>(Git)</span>
</div>
</h2>
</header>
<h4>“Websites promote you 24/7: No employee will do that.”</h4>
</section>
<!-- Two -->
<section id="two">
<h2 class="color-white border-bottom-blue">Recent Work</h2>
<div class="recent-work-grid">
<div class="recent-col">
<h2 class="text-center color-white">Sundial Home Products</h2>
<p class="text-center">
Reinventing The Shopping Club for Home! Join by December 1st and
get Early Access, and Exclusive dea.
</p>
<h3 class="text-center">
<a href="http://sundialhome.com/" target="_blank" class=" color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">Breu Technologies</h2>
<p class="text-center">
A framework, designed from the experiences of delivering and running complex and large scale B2B
platforms that turn-over 850+ m€ in up to 50 countries.
</p>
<h3 class="text-center">
<a href="https://breu.io/" target="_blank" class="color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">Sire Printing</h2>
<p class="text-center">
Sire Printing is a comprehensive services printing organization
that offers high-grade by-products to a low price in the market..
</p>
<h3 class="text-center">
<a href="https://sireprinting.com/" target="_blank" class=" color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">Nozl</h2>
<p class="text-center">Distributed, outbound rate-limiter with smart schema validation</p>
<h3 class="text-center">
<a href="https://nozl.dev/" target="_blank" class="color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">SoccerBx</h2>
<h3 class="text-center">
<a href="https://soccerbx.com/" target="_blank" class=" color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">Meta Talent</h2>
<h3 class="text-center">
<a href="https://meta-talent.netlify.app/" target="_blank" class=" color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">Qubit Lab</h2>
<h3 class="text-center">
<a href="https://qubitlab.net/" target="_blank" class=" color-green">Check it out</a>
</h3>
</div>
<div class="recent-col">
<h2 class="color-white text-center">July</h2>
<h3 class="text-center">
<a href="https://july-1e435.web.app/" target="_blank" class=" color-green">Check it out</a>
</h3>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner text-center">
<ul class="icons">
<li title="LinkedIn">
<a href="https://www.linkedin.com/in/abslepy/" target="_blank" class="border-none">
<svg xmlns="http://www.w3.org/2000/svg" width="34"
style="background-color: #fff; border-radius: 5px" color="#0a66c2" height="34"
viewBox="0 0 34 34" class="global-nav__logo">
<title>LinkedIn</title>
<g>
<path
d="M34,2.5v29A2.5,2.5,0,0,1,31.5,34H2.5A2.5,2.5,0,0,1,0,31.5V2.5A2.5,2.5,0,0,1,2.5,0h29A2.5,2.5,0,0,1,34,2.5ZM10,13H5V29h5Zm.45-5.5A2.88,2.88,0,0,0,7.59,4.6H7.5a2.9,2.9,0,0,0,0,5.8h0a2.88,2.88,0,0,0,2.95-2.81ZM29,19.28c0-4.81-3.06-6.68-6.1-6.68a5.7,5.7,0,0,0-5.06,2.58H17.7V13H13V29h5V20.49a3.32,3.32,0,0,1,3-3.58h.19c1.59,0,2.77,1,2.77,3.52V29h5Z"
fill="currentColor"></path>
</g>
</svg></a>
</li>
<li title="Github">
<a href="https://github.com/absleepy" target="_blank" class="border-none">
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16"
version="1.1" width="32" aria-hidden="true">
<path fill-rule="evenodd" fill="#fff"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg></a>
</li>
<li title="Skype">
<a href="skype:live:.cid.a6ccfac5ff1d5276?chat" class="border-none">
<img src="images/skype-icon.svg" width="100%" style="max-width: 30px" alt="" />
</a>
</li>
<li title="Instagram">
<a target="_blank" class="border-none" href="https://www.instagram.com/abslepy/">
<img src="images/instagram.png" width="100%" style="max-width: 30px" alt="" />
</a>
</li>
<li title="Codepen">
<a target="_blank" class="border-none" href="https://codepen.io/code-with-ab">
<svg class="codepenLogo" fill="#fff" height="34" width="34" viewBox="0 0 100 100">
<path
d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z">
</path>
</svg>
</a>
</li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>