-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
308 lines (227 loc) · 12 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
<!doctype html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134614351-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-134614351-1');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Abir Seth Portfolio</title>
<meta name="description" content="Hey there! Check out Abir Seth's portfolio.">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="fav-icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="fav-icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav-icon/favicon-16x16.png">
<link rel="manifest" href="fav-icon/site.webmanifest">
<link rel="mask-icon" href="fav-icon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One|Quicksand|Righteous" rel="stylesheet">
<link rel="shortcut icon" href="#" type="#">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/particles.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
$("body").removeClass("loading");
})
//]]>
</script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<div class="display">
<body class="loading home devant">
<nav>
<div class="social-icons">
<a class="social-icon social-icon--github" href="https://github.com/ayseth" target="_blank">
<i class="fab fa-github"></i>
<div class="tooltip">Github</div>
</a>
<a class="social-icon social-icon--twitter" href="https://twitter.com/aysait101" target="_blank">
<i class="fab fa-twitter"></i>
<div class="tooltip">Twitter</div>
</a>
<a class="social-icon social-icon--linkedin" href="https://linkedin.com/in/aysait/" target="_blank">
<i class="fab fa-linkedin"></i>
<div class="tooltip">LinkedIn</div>
</a>
<a class="social-icon social-icon--facebook" href="https://www.facebook.com/aysait101" target="_blank">
<i class="fab fa-facebook"></i>
<div class="tooltip">Facebook</div>
</a>
<a class="social-icon social-icon--resume" href="https://drive.google.com/file/d/16F2Ae1zKlB3MVEaEm-Ok60jY9KIkMA5W/view" target="_blank">
<i class="fas fa-file-archive"></i>
<div class="tooltip">Résumé</div>
</a>
<div id="btn">
</div>
</div>
<svg class="nav" id="right" width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg class="nav" id="bottom" width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg class="nav" id="left" width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg class="nav" id="top" width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</nav>
<section id="home" class="home panel done">
<h1>Abir Yusuf Sait <br><small>Full-Stack Web Developer</small></h1>
<svg id="home_animation" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="home_to_profile" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</section>
<div id="particles-js" style="background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;">
</div>
<script>
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
<svg id="profile_to_home" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<div class="img_primary">
<svg id="profile_img" width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<section id="profile">
<div class="primary">
<h2><small>About Me</small></h2>
<p>I'm Abir Sait, born on 11th July 1997. <br>Self-motivated Full Stack Web Developer and Computer Scientist, based in Jeddah, K.S.A, that
can help contribute to your profitability. A quick learner who is looking
for the right opportunity to prove herself preferably as a junior
back-end developer.I spend most of my leisure time learning to code efficiently.</p>
</div>
<div class="sub_profile read">
<div class="svg">
<img src="img/book.svg" alt="">
</div>
<h3><small>I love reading </small>books</h3>
<p>Reading has been my passion since I can remember. <br> I like to read fiction novels the most. I won't say I read <br> too many books, but I read all the books around <br> me when I'm too tired of coding and my mind needs a break.<br></p>
</div>
<div class="sub_profile experiment">
<div class="svg">
<svg id="experiment" width="160" height="160" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<h3><small>I love to </small>experiment</h3>
<p>I learnt coding mostly through experiments, <br>usually breaking down professional codes and <br> tweaking the software just to add my touch.</p>
</div>
<div class="sub_profile sketch">
<div class="svg">
<img src="img/pencil.svg" alt="">
</div>
<h3><small>I love to </small>sketch</h3>
<p> I've been told by those around me that I've <br> got artistic skills but I'm too busy with other <br> passions to have time for this one ;). Regardless, <br> I do sketch from time to time for a change. <br></p>
</div>
</section>
<svg id="skill_to_profile" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="profile_to_skill" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="big_circle" width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<img id="circle_dot" src="img/circle_dot.svg" alt="">
<div id="big_circle_text">
<h2><small>My<br></small>Skills <small></small></h2>
<p>The size of the bubble indicates how good I am at that skill <br></p>
</div>
<section id="skills" style="background-color: #ea9a9d;" >
<h3 class="circle_text front-end">Front-<small>End</small></h3>
<h2 class="circle_text html">HTML</h2>
<h2 class="circle_text css"><small>CSS</small></h2>
<h2 class="circle_text js">jQuery</h2>
<h2 class="circle_text bootstrap"><small>Bootstrap</small></h2>
<h3 class="circle_text back-end">Back-<small>End</small></h3>
<h2 class="circle_text cms">Python</h2>
<h2 class="circle_text python">Flask</h2>
<h2 class="circle_text php">PHP</h2>
<h2 class="circle_text asp"><small>ASP.NET <br> MVC</small></h2>
<h3 class="circle_text os">Other Programming Skills</h3>
<h2 class="circle_text sql">SQL</h2>
<h2 class="circle_text cs">C#</h2>
<h2 class="circle_text java">Java</h2>
<h2 class="circle_text cpp">C/C++</h2>
<h3 class="circle_text software">Softwares</h3>
<h2 class="circle_text photoshop">Photoshop</h2>
<h2 class="circle_text adobexd">Adobe XD</h2>
<h2 class="circle_text git">Git</h2>
<h2 class="circle_text linux">Linux<br>Servers</h2>
<h2 class="circle_text PSQL">PSQL</h2>
<h2 class="circle_text Vagrant">Vagrant</h2>
<svg id="all" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="front" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="back" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="os" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="software" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</section>
<svg id="skill_to_education" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<section id="education" style="background-color: #a2cecd" >
<div class="img_primary2">
<svg id="education_img" width="160" height="160" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div id="timeline">
<img src="img/edu@1x.svg" id="timeline1" style="height: 634px;
width: 997px;" alt="">
<img src="img/edu2@1x.svg" id="timeline2" style="height: 289px;" alt="">
<img src="img/edu2@1x.svg" id="timeline3" style="height: 289px;" alt="">
</div>
<div class="education">
<h2><small>Education</small></h2>
<div id="uni"class="university" >
<p>
<img src="img/university.svg" style="height: 111px;" alt="">
I completed my Bachelor's of Science in Computer Science on May 2018 with a first class degree from Alagappa University, India. Main subjects included Data structures, RDBMS and Internet Programming. Final project was based on front-end HTML/CSS one page webpage. </p></div>
<p class="date1">September 2015 - May 2018</p>
<div class="udacity" >
<p>
<img src="img/udacity-2.svg" alt="">
Later the same year I completed Full-Stack Web Developer Nanodegree from Udacity, an intense 3 months course from October - December 2018. The programme consisted of 3 main projects to graduate. Major project was based on Python framework Flask. </p></div>
<p class="date2">October 2018 - December 2018</p>
</div>
</section>
<section id="projects">
<div class="pro_head" id="pro_head">
<small>Projects</small>
</div>
<div class="presentation">
<svg id="imac" width="360" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
<div id="macbook">
<img class="macbook" src="img/macbook.svg" alt="">
<img class="macbook_bottom" src="img/macbook_bottom.svg" alt="">
</div>
<div class="site_imac item-cat">
<img src="img/sites/item-catalog.png" alt="item-cat" style="height: 184px;">
</div>
<img class="site_macbook item-cat" src="img/sites/item-catalog2.png" alt="item-cat" style="
height: 137px;">
<img class="site_prez brilliant" src="img/sites/brilliantt.png" alt="brilliant">
<img class="site_prez blog" src="img/sites/cms-blog.png" alt="blog">
</div>
<div class="site" id="item-cat">
<h2>item-catalog</h2>
<p>An application that provides a list of items within a variety of categories as well as provide a user registration and authentication system. Created using Python ~2.7 for back-end, html, css and bootstrap framework for front-end
<br>Check out the source code below.
<!-- <button id="ic"><a href="https://github.com/ayseth/item-catalog"></a>Check source code</button> -->
<!-- small href="https://github.com/ayseth/item-catalog">here</small> -->
</p>
</div>
<div class="site" id="brilliant">
<h2>101brilliant</h2>
<p>One page webpage made with HTML, Bootstrap framework, jQuery and
various JS libraries and plugins. This was my final project at university. Added a few libraries to modify the look.
<br>Check out the source code below.</a>
</p>
</div>
<div class="site" id="blog">
<h2>ayseth.blog</h2>
<p>A CMS that allows admins to create, update, edit and delete posts. Admin
dashboard provides full access over users activities.
<br>Check out the source code below</small>
</p>
</div>
</section>
<div id="small"><p>The portfolio cannot be viewed on mobile phones. Please check it through pc or a higher resolution screen. Thanks :D</p></div>
<div id="mobile"><p>The portfolio cannot be viewed on mobile phones. Please check it through pc or a higher resolution screen. Thanks :D</p></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>