forked from farhansalam/farhansalam.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·473 lines (400 loc) · 20.4 KB
/
index.html
File metadata and controls
executable file
·473 lines (400 loc) · 20.4 KB
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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
<head>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./assets/css/vendor/animate.css">
<link rel="stylesheet" type="text/css" href="./assets/css/vendor/swiper.min.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./assets/css/vendor/foundation.min.css">
<link rel="stylesheet" type="text/css" href="./assets/css/custom.css">
<link rel="stylesheet" type="text/css" href="./assets/css/contact.css">
<link rel="stylesheet" type="text/css" href="./assets/css/custom_parallax.css">
<link rel="stylesheet" type="text/css" href="./assets/css/tiles.css">
<title>Farhan Salam | Web Application Developer</title>
<meta name="Description" content="My name is Farhan Salam and I'm a Full Stack Web Developer">
</head>
<body>
<!-- Menu -->
<div id="menu" style="display: none">
<div>
<ul>
<li><a class="smooth-scroll" href="#story"><strong>Short Story</strong></a></li>
<li><a class="smooth-scroll" href="#expertise"><strong>My Expertise</strong></a></li>
<li><a class="smooth-scroll" href="#working-with-me"><strong>Working With Me</strong></a></li>
<li><a href="contact.html"><strong>Let's Hear It From You</strong></a></li>
</ul>
</div>
<hr class='menu_ruler'/>
<div class='margin_menu'><h4>Website Development <b>|</b> Web Database Development and Maintaince <b>|</b> Debuging PHP <b>|</b> Application development on Ruby on Rails</></div>
<div class="footer_social margin_menu margin">
<a href="https://github.com/farhansalam"><img title="GitHub" src="assets/images/social/git.svg" alt="GitHub" width="30" height="30" /></a>
<a href="skype:farhansalam69?chat"><img title="Skype" src="assets/images/social/skype.svg" alt="farhansalam69" width="30" height="30" /></a>
<a href="https://www.linkedin.com/in/farhansalam"><img title="linkedin" src="assets/images/social/linkedin.svg" alt="LinkedIn" width="30" height="30" /></a>
<a href="https://angel.co/farhan-salam"><img title="angellist" src="assets/images/social/angellist.svg" alt="Angel List" width="25" height="25" /></a>
<a href="https://www.upwork.com/freelancers/~01ae4d3d4a8551966b#/"><img title="upwork" src="assets/images/social/upwork.png" alt="Upwork" width="30" height="30" /></a>
<a href="https://twitter.com/farhanussalam"><img title="Twitter" src="assets/images/social/twitter.svg" alt="Twitter" width="30" height="30" /></a>
<a href="http://stackoverflow.com/users/902991/farhan-salam"><img title="Twitter" src="assets/images/social/stackoverflow.png" alt="Stack Overflow" width="30" height="30" /></a>
</div>
</div>
<!-- Menu bar -->
<div class="menu-bar">
<div class="nav-icon2 menu-bar-item-right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="fs-logo menu-bar-item-left">
<a href="index.html"><img src="assets/images/crazy.png"></a>
</div>
</div>
<!-- Menu bar end -->
<div class="row extend ">
<div class="background-image">
<div class="background-image-layer"></div>
</div>
<div id="top-menu-bar" class="">
<div class="fs-logo">
<a href="index.html"><img src="assets/images/crazy.png"></a>
</div>
<div class="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="row description-section">
<div class="large-centered columns">
<h1 class=" white-text text-centered"><span class="logo"><b>Hello World.</b></span></h1>
<h3 class=" white-text text-centered"><span class="logo">My name is <strong>Farhan Salam</strong> and I'm a Full Stack Web Developer</span></h3>
</div>
<div class="large-centered columns">
<div class="main-button-container">
<a class='main-button' href="./contact.html">CONTACT</a>
<a class='main-button' href="./resume.html">RESUME</a>
</div>
</div>
</div>
<div class="large-centered columns arrow-container">
<a class="smooth-scroll" href="#story" >
<img class="down-arrow" src="assets/images/Untitled-1_allwhite.png">
</a>
</div>
</div>
<!-- testing -->
<div class="scrollable">
<div id="story" class="row story ">
<!-- <div class="story-background"></div> -->
<div class=" large-centered columns">
<h2 class=" description">Short Story</h2></div>
<div>
<h2 class="subheader story">I am a
<s>Software Engineer</s>
problem solver. I like to solve problems and code
is a means to an end. That's why I
don't stick to just one language. I have
an OCD about code quality and structure. I aim to build creative and
visually beautiful web apps with sensual user experience.
I also am a Star Wars geek and a gamer.
To get my mind off these worldly pleasures I explore
nature, that might explain the mountains I guess.
Wanna know more?
<a href="contact.html">Lets talk!</a>
</h2></div>
</div>
<div id="expertise" class="row">
<hr/>
</div>
<!--parallax end-->
<div class=" large-centered columns">
<h2 class=" description">Expertise</h2></div>
<div>
<h2 class="subheader story">I do these things because I love it and also because I need to pay the bills </h2></div>
<div class="row tiles">
<div class="large-centered columns">
<ul class="masonry-list">
<!-- PHP -->
<li class="tile-facebook">
<a href="#">
<div class="tile-primary-content">
</div>
<div class="tile-secondary-content">
<p>• Business Web Application Development </p>
<p>• Design Architecture Development </p>
<p>• Library Development </p>
<p>• Code Debuging </p>
<p>• Unit Testing </p>
<p>• Frameworks: Laravel, CodeIgniter and Kohana </p>
</div>
</a>
</li>
<!-- /php -->
<!-- frontend_development -->
<li class="tile-person">
<a href="#">
<div class="tile-primary-content">
<img src="./assets/images/frontend_development.png" alt="">
</div>
<div class="tile-secondary-content">
<div id="front-end-logos"></div>
</div>
</a>
</li>
<!-- /frontend -->
<!-- nodejs -->
<li class="tile-job">
<a href="#">
<div class="tile-primary-content">
<p>Web Application Development using frameworks like ExpressJs and Meteor</p>
</div>
<div class="tile-secondary-content">
<p>I love to work with Node JS because of its: </p>
<p>• <span>non-blocking I/O API that optimizes an application's throughput</span></p>
<p>• implication of real-time web applications with push technology over websockets</p>
<p>• event driven concurrency model</p>
</div>
</a>
</li>
<!-- /nodejs -->
<!-- DBs -->
<li class="tile-twitter">
<a href="">
<div class="tile-primary-content">
</div>
<div class="tile-secondary-content dbs">
<div id="cloud"></div>
</div>
</a>
</li>
<!-- DB -->
<!-- CMS -->
<li class="tile-client">
<a href="#">
<div class="tile-primary-content">
<p id="cms">Content Management Systems</p>
</div>
<div class="tile-secondary-content">
<div id="cms-logos"></div>
</div>
</a>
</li>
<!-- /cms -->
<!-- Ruby -->
<li class="tile-case">
<a href="#">
<div class="tile-primary-content php">
</div>
<div class="tile-secondary-content">
<p>• Web Application Development</p>
<p>• API Development</p>
<p>• RSpec Testing</p>
<p>• Gem development</p>
</div>
</a>
</li>
<!-- /ruby -->
</ul>
</div>
<!-- ^ column div end -->
</div>
<!-- ^ row div end -->
<div id="working-with-me" class="row">
<hr>
</div>
<!--pipes-->
<div class="row">
<div class="large-centered columns">
<h2 class="text-centered">Working with me</h2>
<h4 class="subheader story">You have an idea? But you're not even sure how plausible it is? These are the projects where I excel. I'll consider your idea and provide what is needed to make it a reality i.e a budget and a time plan. </h4>
</div>
<div id="pipeline-container" class="large-centered columns">
<div id="pipeline">
<div class="pipe vertical centered top">
<div class="circle centered"></div>
</div>
<div class="circle mobile"></div>
<div class="pipe vertical ">
<div class="circle sided"></div>
<div class="pipelineText">I'll turn your designs to code and in my attempt to make the best of everything for your benefit, while making suggestions on potential improvements.</div>
</div>
<div class="circle mobile"></div>
<div class="pipe vertical ">
<div class="circle sided"></div>
<div class="pipelineText">
During production, I always keep in close contact with you; keeping everyone up to speed on what is going on.</div>
</div>
<div class="circle mobile"></div>
<div class="pipe vertical ">
<div class="circle sided"></div>
<div class="pipelineText">
Debugging and testing is a constant part of the process, but as the project nears its finish line I, obviously, invest extra into those efforts.</div>
</div>
<div class="circle mobile"></div>
<div class="pipe vertical ">
<div class="circle sided"></div>
<div class="pipelineText">Which leaves us sometime to lavish affection on the product; fitting it with that extra polish and finesse.</div>
</div>
<div class="circle mobile"></div>
<!-- <div class="pipe vertical ">
<div class="circle sided"></div>
</div> -->
<div class="pipe vertical centered bottom ">
<div class="circle centered bottom"></div>
</div>
<div class="pipelineText centered">Last step: The Release. Kick off your shoes and while I enjoy the happy satisfied faces.</div>
</div>
</div>
</div>
<!--<div class="reference-hr">-->
<div class="row">
<hr>
</div>
<!-- References -->
<div class="swiper-container row">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="row">
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
<div class="small-4 columns">
<div class="reference-picture" style="margin-left:auto; margin-right:auto;">
<img class="reference-img" title="Rohit" src="assets/images/references/ro.jpg" alt="ref" />
</div>
</div>
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
<blockquote>I have worked with Farhan for approximately two years. Farhan has become an extremely productive member of the team. He always has a "I can" mentality and he works extremely hard on delivering. He is able to do this under extreme pressure while working remotely and independently. While we onboard new people, he is often looked to bring people up to speed as his communication skills and knowledge of all parts of the stack puts him in a unique position to help. It is often amazing to see how quickly he can convey information effectively.
<br>
It has been a pleasure seeing him grow, and I am excited to see what he does next!</blockquote>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text reference-title">
<strong>Rohit Prakash</strong>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
Co-founder and CEO of <a href="https://townsquared.com">Townsquared</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row clearfix">
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
<div class="small-4 columns">
<div class="reference-picture" style="margin-left:auto; margin-right:auto;">
<img class="reference-img" title="Nipul" src="assets/images/references/nipul.jpg" alt="ref" />
</div>
</div>
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
</div>
<div class="row clearfix">
<div class="small-centered columns reference-text">
<blockquote>Farhan worked for my company as on offshore developer for several years. He consistently performed well independently and collaboratively with our US engineering team. He clearly communicated progress and managed his time well across several projects concurrently despite the 10+ hour time difference. He implemented our data analytics and contributed to our core product in javascript and ruby on rails. He is a natural problem solver and learns quickly when needed.</blockquote>
</div>
</div>
<div class="row clearfix">
<div class="small-centered columns reference-text reference-title">
<strong>Nipul Patel</strong>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
Co-founder at <a href="https://townsquared.com">Townsquared</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
<div class="small-4 columns">
<div class="reference-picture" style="margin-left:auto; margin-right:auto;">
<img class="reference-img" title="Tan-ya" src="assets/images/references/tan-ya.jpg" alt="ref" />
</div>
</div>
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
<blockquote>Farhan was an invaluable teammate, helping to create analytics tools and other backend features. He was also a patient teacher, collaborating with product team members to improve our instrumentation. His optimism, ownership, and strong communication skills created a great working rapport despite working remotely.</blockquote>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text reference-title">
<strong>Tan-ya Gerrodette</strong>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
Brand and Visual Design Lead at <a href="https://townsquared.com">Townsquared</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
<div class="small-4 columns">
<div class="reference-picture" style="margin-left:auto; margin-right:auto;">
<img class="reference-img" title="Abhi" src="assets/images/references/abhi.jpg" alt="ref" />
</div>
</div>
<div class="small-4 columns"><div class="progress large-6 round"></div></div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
<blockquote>Farhan has very strong technical and communication skills. In the months that I worked with him at Townsquared, he contributed to backend code in Ruby on Rails and NodeJS, helped us move ahead with release automation, and, in collaboration with our product managers, dove deep into building insightful analytics dashboards. Farhan was able to work independently and figure things out without help, as well as guide other engineers in our offshore team. He is capable, responsible, and a pleasure to work with.</blockquote>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text reference-title">
<strong>Abhijeet Vijayakar</strong>
</div>
</div>
<div class="row">
<div class="small-centered columns reference-text">
VP Engineering at <a href="https://townsquared.com">Townsquared</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class='large-12 columns footer margin'>
<h2/><strong>Say Hi</strong></h2>
<div class="footer_social">
<a href="https://github.com/farhansalam"><img title="GitHub" src="assets/images/social/git.svg" alt="GitHub" width="30" height="30" /></a>
<a href="skype:farhansalam69?chat"><img title="Skype" src="assets/images/social/skype.svg" alt="farhansalam69" width="30" height="30" /></a>
<a href="https://www.linkedin.com/in/farhansalam"><img title="linkedin" src="assets/images/social/linkedin.svg" alt="LinkedIn" width="30" height="30" /></a>
<a href="https://angel.co/farhan-salam"><img title="angellist" src="assets/images/social/angellist.svg" alt="Angel List" width="25" height="25" /></a>
<a href="https://www.upwork.com/freelancers/~01ae4d3d4a8551966b#/"><img title="upwork" src="assets/images/social/upwork.png" alt="Upwork" width="30" height="30" /></a>
<a href="https://twitter.com/farhanussalam"><img title="Twitter" src="assets/images/social/twitter.svg" alt="Twitter" width="30" height="30" /></a>
<a href="http://stackoverflow.com/users/902991/farhan-salam"><img title="Twitter" src="assets/images/social/stackoverflow.png" alt="Stack Overflow" width="35" height="35" /></a>
</div>
<hr></hr>
<span><h5>Website Development <b>|</b> Web Database Development and Maintaince <b>|</b> Debuging PHP <b>|</b> Application development on Ruby on Rails</h5></span>
<div class='row '>
<div class='large-4 medium-4 small-4 column'>
<h2>Email</h2>
<h4> <a href="mailto:farhan.salam@hotmail.com" target="_blank" class='contact_text'>farhan.salam@hotmail.com</a></h4></div>
<div class='large-4 medium-4 small-4 columns '>
<h2>Call</h2>
<h4>+92 333 5116 667</h4></div>
<div class='large-4 medium-4 small-4 columns'>
<h2>Need Help?</h2>
<h4><a href='contact.html'>Hire me today</a></h4></div>
</div>
</div>
<link rel="shortcut icon" type="image/png" href="./assets/images/crazy.ico.png"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./assets/js/vendor/swiper.jquery.min.js"></script>
<script src="./assets/js/custom.js"></script>
<script src="./assets/js/tiles.js"></script>
</body>