-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
825 lines (750 loc) · 37.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
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
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
<!DOCTYPE html>
<html>
<head>
<title>Kushan Tharaka Peiris Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="shortcut icon" href="icon/img_20190308_wa0037_2.png">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300,700,800" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="color/default.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo text or image-->
<a class="navbar-brand wow flip" href="index.html">Kushan<br>Tharaka</a>
</div>
<div class="navigation collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="current" ><a href="#intro" class="wow bounceInDown">Home</a></li>
<li><a href="#about" class="wow bounceInDown">About</a></li>
<li><a href="#services" class="wow bounceInDown">Achievements</a></li>
<li><a href="#portfolio" class="wow bounceInDown">Projects</a></li>
<li><a href="#team" class="wow bounceInDown">Contributions</a></li>
<li><a href="#Contact" class="wow bounceInDown">Contact</a></li>
<li><a href="#tech" class="wow bounceInDown">Tech.</a></li>
</ul>
</div>
</div>
</nav>
<!--My CV download Button-->
<a href="CV/KushanTharakaInternship.pdf">
<button onclick="cvDownloadFunction()" id="myCvBtn" title="Download My CV" class="wow flip"> <strong>My CV</strong></button>
</a>
<!-- intro area -->
<section id="intro">
<div class="intro-container">
<div id="introCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="item active">
<div class="carousel-background"><img src="img/intro/mySelf.jpg" alt=""></div>
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animated fadeInDown">Kushan Tharaka</h2>
<p class="animated fadeInUp"> domain
Welcome to my_portfolio <br>
I have list-down most of works I have done with IT section.
</p>
<a href="#about" class="btn-get-started animated fadeInUp">Read More Will U</a>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="item">
<div class="carousel-background"><img src="img/intro/editingPlusMe.jpg" alt="giftedLoading..."></div>
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animated fadeInDown">A Undergraduate</span></h2>
<p class="animated fadeInUp">
With a great passionate about the industry, <br >
Always updating knowlede with the industry <br >
Adaptivity<br>
Work as a group<br>
Best practise of Agile Scrum<br>
Knowlede about patterns and architectures
</p>
<a href="#about" class="btn-get-started animated fadeInUp">Read More</a>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="item">
<div class="carousel-background"><img src="img/intro/nsbm.jpg" alt=""></div>
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animated fadeInDown">National School of Business Management</span></h2>
<p class="animated fadeInUp">
One of proud undergraduate in <strong>NSBM green university</strong> , got most of knowlede <br>
experience, courage in there.<br>
<strong>
How to work,<br>
How to manage<br>
How to break into units<br>
Everthing learned from there so gratitude is this.
</strong>
💟
</p>
<a href="#about" class="btn-get-started animated fadeInUp">Read More</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#introCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#introCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
<!-- #intro -->
<!-- About -->
<section id="about" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>About MySelf</h2>
<div class="heading-line"></div>
<p>
Currently, I am a <strong>Software Engineering</strong> undergraduate,
in the <a href="https://www.nsbm.ac.lk/"
data-toggle="tooltip" data-placement="right" title="Direct link to NSBM green university ">
National School of Business Management.
</a>
<br>
I am passionate about web technologies /
desktop application developing /
mobile application developing /
process & project management /
testing software and algorithms.
</p>
</div>
</div>
</div>
<div class="row wow fadeInUp">
<div class="col-md-6 about-img">
<img src="img/learning.png" alt="">
</div>
<div class="col-md-6 content">
<h2>
I am holding 3.8 GPA in my UGC degree. <br>
Degree Duration 2017 - 2021<br>
<strong>Third year second semister @2020</strong>
</h2>
<h3>
<strong>Secondry Education</strong>
<table>
<tr>
<td> Stream </td>
<td>-</td>
<td>
<strong> Physical Science Stream</strong>
</td>
</tr>
<tr>
<td>Results </td>
<td>-</td>
<td>C. Maths: <strong>C</strong>   Physics: <strong>C </strong>   Chem: <strong>C</strong></td>
</tr>
<tr>
<td> School</td>
<td>-</td>
<td>Kalutara Vidyalaya Kalutara</td>
</tr>
</table>
</h3>
<p>
I am passionate about <strong>Software Development</strong> so that was the main reason for follow-up this course.
I have involved some main projects in my university which are familier with the arduino, web based development,
operating systems and cloud configurations, securtity assurance.<br>
I am so familier with the technologies that using in the industry always update those knowledge from tech-meetups and forums
that I have taken part.
</p>
</div>
</div>
</div>
</section>
<!-- Parallax 1 -->
<!-- <section id="parallax1" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container" align="center">
<div class="row">
<div class="col-md-12">
<div class="color-light">
<h2 class="wow bounceInDown" data-wow-delay="0.5s">Innotec 2019</h2>
<p class="lead wow bounceInUp" data-wow-delay="1s">
</p>
</div>
</div>
</div>
</div>
</section>
-->
<!-- Services -->
<section id="services" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2 class="wow heartBeat"> Achievements ❣ </h2>
<div class="heading-line wow shake"></div>
<p class="wow shake">The things that I have achieved in past two years in my university life 💟</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carousel-service" class="service carousel slide">
<!-- slides -->
<div class="carousel-inner">
<!-- slide 01 -->
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4> ➡ Enterprenuer Club Contest 2k19</h4>
<p>In 2019 the "Enterprenuer Club" in NSBM organized a <br>
Enterprenuer idea contest and I was able to win the fourth place of the competition <br>
I have implemented a <strong> Wedding Planning Site</strong> from jsp and servlets<br>
The idea was selected as one of attractive ideas in the whole contest.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<a href="https://www.facebook.com/nsbm.lk/videos/771582963303977/">
<img src="img/screenshots/editingPlusMe.jpg" class="img-responsive" alt="Enterprenuer Club Contest 2k19" data-toggle="tooltip" data-placement="right" title="Winning Forth place of the whole competition,Dean presenting the gift. " />
</a>
</div>
</div>
</div>
</div>
<!-- slide 02 -->
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4> ➡ Web Gaming Contest 2k17</h4>
<p>
This was simple contest by <strong>Faculty of Computing</strong> for us<br>
We have to prepared well designed 2D web game <br>
I was able make a nice console with help of <strong>Construct 2 engine</strong><br>
So,<strong> me and my team </strong> was able to win 2<sup>nd</sup> place in the competition
</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="img/screenshots/webGaming2k18.jpg" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<!-- slide 03
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="img/screenshots/" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
-->
<!-- slide 04
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Web & Mobile Apps</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="img/screenshots/3.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
-->
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<!-- <li data-target="#carousel-service" data-slide-to="2"></li> -->
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section id="portfolio" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2 class="wow flipInY ">Projects That I Have Done</h2>
<div class="heading-line"></div>
<p class="wow tada">
I have gallery down some of my project those I have keep on my <br>
<a href="https://github.com/KushanTharaka97"><strong>Github</strong></a> account.Most of repos are created last year.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul id="og-grid" class="og-grid">
<li>
<a href="https://github.com/KushanTharaka97/prospera-jsp-servelet-web-site" data-largesrc="img/works/1.jpg" data-title="Pet Care Web Site"
data-description="PetCaring full functional website,
I was developed as a concept for making it easy for Veterinarythings in Sri Lanka.
It was a production-ready website and the database is based on MySQL at the moment.
We have provided functions as ask questions from a specific clinic,
choose proper pet clinic for the pets, make an appointment, or get details about the pet clinic of the area.
On the other hand, we have provided a better platform for clinics to market themselves from this web site.
The process facilities all the things they can show to the public.
This will next big step if we make it to work.">
<img src="img/works/thumbs/petCare.jpg" alt="PetCare Loading.." style="width: 250px;height: 250px;" class="wow fadeInUp" data-toggle="tooltip" data-placement="right" title="Created PetClinic Booking system with jsp/servlets"/>
</a>
</li>
<li>
<a href="https://github.com/KushanTharaka97/wedding-planning-website" data-largesrc="img/works/wedding_planning.gif" data-title="Wedding Planning Web Site"
data-description="Wedding Planning Site was a winning idea,
I won the entrepreneur club competition because of this web site,
however, the web site is developed with JSP/Servlet based environment.
The external database is MySQL database because
of some JavaScript we can't recommend as production-ready but this is a fully functional web site for using.
I have categorized three user groups as admin, service providers, and normal legitimate users.
Service providers can make their advertisements on our website, publish it, make their details,
and so on.
Then normal users can select the services that they are looking for at their wedding. ">
<img src="img/works/thumbs/plan.jpeg" alt="" style="width: 250px;height: 250px;" class="wow fadeInDown" data-toggle="tooltip" data-placement="right" title="Wedding Planning site created" />
</a>
</li>
<li>
<a href="https://github.com/KushanTharaka97/resource-management-system" data-largesrc="img/works/ResourceManagementSystemPic.gif"
data-title="Resource Management Dash Board"
data-description="
Resource management system,
We developed this for a specific organization(Water Purification).
They gave some requirements to our business analysis and she made SRS we
made this huge system according to that specific SRS report.
The whole system that we built contains two phrases Web and desktop
which is concatenated in the MySQL database.
The flow is like we are keeping records about the employ present absent through the database,
the employes can update their presence by the web app,
web app only active inside the ground(we have used localhost mechanism for it),
of course, we keep recording about wastages so admin can keep up with the store,
all the details can update from web app by employers when they are their shift.
The system was well functioning according to that environment.">
<img src="img/works/thumbs/what-is-dashboard.jpg" alt="management-dashbord" style="width: 250px;height: 250px;" class="wow fadeInUp" data-toggle="tooltip" data-placement="right" title="Resource Management System By JAVA"/>
</a>
</li>
<li>
<a href="https://github.com/KushanTharaka97/TravelGuide" data-largesrc="img/works/travel_guide_me.gif" data-title="Android Application: TravelGuide "
data-description="The mobile app that is specifically dedicated to travelers,
the app is built on the native platform so the speed is higher than others.
In this app, I want to learn the native architecture and framework.
How to data parse Uri, adapter concept and etc.
So when we consider the app the app has few countries and their details,
we can make favorite or not, keep a quick memo about the country,
look at the stored details and so on,
the UI also designed according to UX laws so User Experience will be so high.">
<img src="img/works/thumbs/mobile_application.jpeg" alt="Mobile Application Development" style="width: 250px;height: 250px;" class="wow fadeInDown" data-toggle="tooltip" data-placement="right" title="Mobile Application Development" />
</a>
</li>
<li>
<a href="https://kushantharaka97.github.io/DevCourses/" data-largesrc="img/works/dev_course.gif" data-title="Free online courses"
data-description="Free online courses console is a charity service because I say I have created that just for my colleagues who are willing to learn new things.
Most of the courses that I have found which are free
I have gathered all to one specific place and do this.
So most of my colleagues were able to find out the right content at the right time,
and I had a huge number of positive feedbacks also.
That was happy at that moment.
This is just a web front with bootstrap tech.">
<img src="img/works/thumbs/dev.jpg" alt="Online Free Course Console" style="width: 250px;height: 250px;" class="wow fadeInLeft" data-toggle="tooltip" data-placement="right" title="Created a site for my collegues, in qurentine free courses" />
</a>
</li>
<li>
<a href="https://github.com/KushanTharaka97/miwok_tranlator2020_KT_petProjects" data-largesrc="img/works/Miwok.gif" data-title="Miwok Language App"
data-description="
The Miwok app was a test project about adapter class in android,
however, Miwok language is now a rare language in Native-America
so I have found some words from their vocabulary and make
my mobile app as
I wish to improve my knowledge about android.">
<img src="img/works/thumbs/miwok.jpeg"alt="management-dashbord" style="width: 250px;height: 250px;" class="wow fadeInRight" data-toggle="tooltip" data-placement="right" title="Simple Native android app for miwok language" />
</a>
</li>
<li>
<a href="https://github.com/KushanTharaka97/petsApp" data-largesrc="img/works/pets_app.gif" data-title="Pet Care android Native "
data-description="PET Cate Aappp was made because it is a new thing that we can invent to the society which is related to embark also,
simply I wanted to make an app to store stray dogs who haven't owners,
take them and give a proper family to adopt that dog.
From my app, anyone can enter data about found dog,
it's going to local storage and finally, we send that data to our cloud storage,">
<img src="img/works/thumbs/pet_care_app.jpg" alt="management-dashbord" style="width: 250px;height: 250px;" class="wow fadeInLeft" data-toggle="tooltip" data-placement="right" title = "Android Native App for Pets who haven't house(Embark relatd)" />
</a>
</li>
<li>
<a href="https://kushantharaka97.github.io/EPreparationWebFront/index.html" data-largesrc="img/works/exam_preparations.gif" data-title="Exam Preparation Web-Front"
data-description="web front I have created because share some useful notes with colleagues.
It was a bootstrap based web page and make the thing than I wanted to.">
<img src="img/works/thumbs/exam_preparation.png" alt="exam-preparation" style="width: 250px;height: 250px;" class="wow fadeInRight" data-toggle="tooltip" data-placement="right" title="simple web frontend created for batch mates to get exam preparation notes resources" />
</a>
</li>
<!--- Uncomment these when you have done new projects
<li>
<a href="#" data-largesrc="img/works/9.jpg" data-title="Portfolio title" data-description="Lorem ipsum dolor sit amet, ex pri quod ferri fastidii. Mazim philosophia eum ad, facilisis laboramus te est. Eam magna fabellas ut. Ne vis diceret accumsan salutandi, pro in impedit accusamus dissentias, ut nonumy eloquentiam ius.">
<img src="img/works/thumbs/9.jpg" alt="img01" />
</a>
</li>
<li>
<a href="#" data-largesrc="img/works/10.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim.">
<img src="img/works/thumbs/10.jpg" alt="img01" />
</a>
</li>
<li>
<a href="#" data-largesrc="img/works/11.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="img/works/thumbs/11.jpg" alt="img01" />
</a>
</li>
<li>
<a href="#" data-largesrc="img/works/12.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="img/works/thumbs/12.jpg" alt="img01" />
</a>
</li>
-->
</ul>
</div>
</div>
</div>
</section>
<!-- Parallax 2 -->
<section id="parallax2" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="clients">
<!--
<li class="wow fadeInDown" data-wow-delay="0.3s"><a href="#"><img src="img/clients/1.png" alt="" /></a></li>
<li class="wow fadeInDown" data-wow-delay="0.6s"><a href="#"><img src="img/clients/2.png" alt="" /></a></li>
<li class="wow fadeInDown" data-wow-delay="0.9s"><a href="#"><img src="img/clients/3.png" alt="" /></a></li>
<li class="wow fadeInDown" data-wow-delay="1.1s"><a href="#"><img src="img/clients/4.png" alt="" /></a></li>
-->
</ul>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2 class="wow bounceInDown">Contributions</h2>
<div class="heading-line"></div>
<p class="wow bounceInUp">
❤My Contributions as a undergraduate. ➰
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInUp" data-wow-delay="0.1s">
<a href="https://medium.com/@kushanpeiris1118">
<img src="img/team/medium.jpg" alt="Medium Logo Loading..." class="img-circle img-responsive"
data-toggle="tooltip" data-placement="right" title="Click on the logo to browse Medium my profile"/>
</a>
<h4>
Medium
</h4>
<p>Article Writer 📝</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInUp">
<a href="https://github.com/KushanTharaka97">
<img src="img/team/github.png" alt="GitHub Logo Loading" class="img-circle img-responsive"
data-toggle="tooltip" data-placement="right" title="Click on the logo to browse GitHub my profile" />
</a>
<h4>GitHub</h4>
<p>Github contributor</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInUp">
<a href="https://www.hackerrank.com/tharakakushan">
<img src="img/team/hackerrank.jpg" alt="Loading Hackerrank Logo..." class="img-circle img-responsive"
data-toggle="tooltip" data-placement="right" title="Click on the logo to browse hackerRank my profile" />
</a>
<h4>HackerRank</h4>
<p>Developer</p>
</div>
</div>
<!----->
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInUp">
<a href="https://www.linkedin.com/in/kushantharaka/">
<img src="img/team/linkedin.png" alt="Lading Linkedin Logo ..." class="img-circle img-responsive"
data-toggle="tooltip" data-placement="right" title="Click on the logo to browse linkedin my profile"/>
</a>
<h4>Linkedin</h4>
<p>Kushan Tharaka</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact
<section id="contact" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Contact us</h2>
<div class="heading-line"></div>
<p>If you have any question or just want to say 'hello' to Alstar web studio please fill out form below and
we will be get in touch with you within 24 hours. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form action="" method="post" class="form-horizontal contactForm" role="form">
<div class="col-md-offset-2 col-md-8">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4"
data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email"
data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4"
data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us"
placeholder="Message"></textarea>
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="submit" class="btn btn-theme btn-lg btn-block">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
-->
<!-- Bottom widget -->
<section id="Contact">
<section id=" bottom-widget" class="home-section bg-white">
<div class="container">
<div class="row">
<!---
<div class="col-md-4">
<div class="contact-widget wow bounceInLeft">
<i class="fa fa-map-marker fa-4x"></i>
<h5>Main Office</h5>
<p>
109 Borough High Street,<br />London SE1 1NL
</p>
</div>
</div>
-->
<div class="col-md-6">
<div class="contact-widget wow bounceInLeft">
<i class="fa fa-phone fa-4x"></i>
<h5>Call</h5>
<p>
071 60 63 463
</p>
</div>
</div>
<div class="col-md-6">
<div class="contact-widget wow bounceInRight">
<i class="fa fa-envelope fa-4x"></i>
<h5>Email us</h5>
<p>
tharakakushan@gmail.com <br /> pktpeiris@students.nsbm.lk
</p>
</div>
</div>
</div>
<div class="row mar-top30">
<div class="col-md-12">
<h5>We're on social networks</h5>
<table align="center">
<tr>
<td>
<a href="https://www.facebook.com/kushan.tharaka.7758/">
<img src="img/social_media/facebook.png"
data-toggle="tooltip" data-placement="right" title="Click for my Facebook"
class="wow bounceInRight">
</a>
</td>
<td>
<a href="https://www.instagram.com/tharaka_kushan/">
<img src="img/social_media/instegram.png"
data-toggle="tooltip" data-placement="right" title="Click for my Instegram"
class="wow bounceInUp">
</a>
</td>
<td>
<a href="mailto:tharakakushan@gmail.com">
<img src="img/social_media/email.png"
data-toggle="tooltip" data-placement="right" title="Click for private email me"
class="wow bounceInDown">
</a>
</td>
<td>
<a href="mailto:pktpeiris@students.nsbm.lk">
<img src="img/social_media/outlook.png"
data-toggle="tooltip" data-placement="right" title="Click for official email Me"
class="wow bounceInLeft">
</a>
</td>
</tr>
</table>
<!---
<ul class="social-network">
<li><a href="#">
<span class="fa-stack fa-2x">
<a href="https://www.facebook.com/kushan.tharaka.7758/">
<img src="img/social_media/facebook.png">
</a>
</span></a>
</li>
<li><a href="#">
<span class="fa-stack fa-2x">
<img src="img/social_media/instagram.png">
</span></a>
</li>
<li><a href="#">
<span class="fa-stack fa-2x">
<img src="img/social_media/medium.png">
</span></a>
</li>
<li><a href="#">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pinterest fa-stack-1x fa-inverse"></i>
</span></a>
</li>
</ul>
-->
</div>
</div>
</div>
</section>
</section>
<!--Familier Technologies-->
<section id="tech">
<div class="container">
<div class="row">
<h3>Familier Technologies</h3>
<div class="col-md-12">
<!--Basic Languages-->
<img src="img/tech/java.jpg" alt="java" style="height:250px;width:250px;" class="wow bounceInRight">
<img src="img/tech/android.jpg" alt="android" style="height:250px;width:250px;" class="wow bounceInLeft">
<img src="img/tech/linux.png" alt="linux" style="height:250px;width:250px;" class="wow bounceInUp">
<img src="img/tech/python.png" alt="python" style="height:150px;width:150px;" class="wow bounceInDown">
<img src="img/tech/c.jpeg" alt="C language" style="height:250px;width:250px;" class="wow bounceInRight">
</div>
</div>
<div class="col-md-12">
<!--databases-->
<img src="img/tech/mySQL.jpeg" alt="MySQL" style="height:250px;width:250px;" class="wow bounceInRight">
<img src="img/tech/oracleDB.jpeg" alt="Oracle Db" style="height:250px;width:250px;" class="wow bounceInRight">
<img src="img/tech/Json.png" alt="JSON" style="height:250px;width:250px;" class="wow bounceInRight">
</div>
<div class="col-md-12">
<!--Web Technologies-->
<img src="img/tech/bootstrap.jpg" alt="Bootstrap" style="height:250px;width:250px;border-radius: 42%;" class="wow bounceInDown">
<img src="img/tech/php.jpg" alt="php" style="height:150px;width:250px;" class="wow bounceInUp">
<img src="img/tech/js.jpg" alt="JS" style="height:250px;width:250px;" class="wow bounceInRight">
</div>
<div class="col-md-12">
<!--IDE-->
<img src="img/tech/InteliJ.jpeg" alt="inteliJ" style="height:250px;width:250px;" class="wow bounceInDown">
<img src="img/tech/eclipse.png" alt="Eclipse" style="height:150px;width:250px;" class="wow bounceInDown">
<img src="img/tech/VS.png" alt="Vs Code" style="height:250px;width:250px;" class="wow bounceInDown">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="wow wobble">Copyright © KT. All rights reserved.</p>
<div class="credits" class="wow pulse">
Created By Kushan Tharaka</a>
</div>
</div>
</div>
</div>
</footer>
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
<!-- js -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/grid.js"></script>
<script src="js/stellar.js"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Custom Javascript File -->
<script src="js/custom.js"></script>
</body>
</html>