-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
703 lines (640 loc) · 39.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Krishanthan | Software Engineer & Cybersecurity Enthusiast</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css" rel="stylesheet" /> -->
<link rel="stylesheet" href="contactStyle.css"/>
</head>
<body class="max-w-screen overflow-x-hidden max-h-screen">
<!-- Loading Screen -->
<div class="loader max-w-screen">
<div class="loader-dots flex">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Custom Cursor -->
<div class="custom-cursor max-w-screen"></div>
<!-- Scroll Progress Bar -->
<div class="progress-animation max-w-screen">
<div class="progress-bar"></div>
</div>
<!-- Theme Toggle -->
<div class="theme-toggle max-w-screen">
<i class="fas fa-moon"></i>
</div>
<!-- Header/Navbar -->
<header class="fixed max-w-screen w-full card-custom shadow-md z-50 transition duration-300">
<div class="container mx-auto px-6 py-3">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-custom">
<a href="#" class="flex items-center">
<span class="text-3xl mr-2">R</span>
<span class="hidden md:block">Krishanthan</span>
</a>
</div>
<nav>
<ul class="nav-links flex md:flex-row flex-col flex space-x-8 items-center">
<li><a href="#home" class="hover:text-gray-custom transition duration-300">Home</a></li>
<li><a href="#about" class="hover:text-gray-custom transition duration-300">About</a></li>
<li><a href="#skills" class="hover:text-gray-custom transition duration-300">Skills</a></li>
<li><a href="#projects" class="hover:text-gray-custom transition duration-300">Projects</a></li>
<li><a href="#experience" class="hover:text-gray-custom transition duration-300">Experience</a></li>
<li><a href="#blogs" class="hover:text-gray-custom transition duration-300">Blogs</a></li>
<li><a href="#contact" class="hover:text-gray-custom transition duration-300">Contact</a></li>
<li><a href="#" class="bg-gray-600 text-white px-4 py-2 rounded-full hover:bg-gray-700 transition duration-300 animated-btn">Resume</a></li>
</ul>
</nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</div>
</header>
<div class="toast-container" id="toast-container"></div>
<!-- Hero Section -->
<div class="max-w-6xl mx-auto">
<section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden">
<!-- Particles Background -->
<div id="particles-js"></div>
<div class="container mx-auto px-6 z-10">
<div class="flex flex-col-reverse md:flex-row items-center justify-between">
<div class="md:w-2/3 text-center md:text-left" data-aos="fade-right" data-aos-duration="1000">
<p class="text-gray-custom font-medium mb-4">Hello, I'm</p>
<h1 class="text-5xl md:text-6xl font-bold mb-6">Krishanthan
<span class="typing-text"></span>
</h1>
<h2 class="text-2xl md:text-3xl font-light mb-8">Software Developer</h2>
<p class="text-gray-custom mb-8 max-w-lg mx-auto md:mx-0">I build innovative software solutions. Let's create secure and impactful digital experiences together.</p>
<div class="flex space-x-4 justify-center md:justify-start">
<a href="#contact" class="bg-gray-600 text-white px-6 py-3 rounded-full font-medium hover:bg-gray-700 transition duration-300 animated-btn">Get in Touch</a>
<a href="#projects" class="border-2 border-gray-600 text-gray-custom px-6 py-3 rounded-full font-medium hover:bg-gray-600 hover:text-white transition duration-300">View Projects</a>
</div>
<div class="flex mt-8 space-x-6 justify-center md:justify-start">
<a href="https://github.com/krishanthan4" class="text-gray-700 hover:text-gray-custom transition duration-300" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github text-2xl"></i>
</a>
<a href="https://linkedin.com/in/ramakrishnan-krishanthan-8a6864241/" class="text-gray-700 hover:text-gray-custom transition duration-300" target="_blank" rel="noopener noreferrer">
<i class="fab fa-linkedin text-2xl"></i>
</a>
</div>
</div>
<div class="md:w-1/3 mb-12 md:mb-0" data-aos="fade-left" data-aos-duration="1000">
<div class="relative">
<div class="w-64 h-64 md:w-80 md:h-80 bg-gray-500 rounded-full absolute top-4 left-4 opacity-20 floating"></div>
<img src="photo1.jpeg" alt="Krishanthan" class="w-64 h-64 md:w-80 md:h-80 object-cover rounded-full relative z-10 glow">
</div>
</div>
</div>
</div>
<div class="scroll-down text-center">
<div class="text-sm text-gray-500 mb-2">Scroll Down</div>
<i class="fas fa-chevron-down text-gray-custom"></i>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-3xl font-bold mb-4">About Me</h2>
<div class="w-16 h-1 bg-gray-600 mx-auto mb-8"></div>
<p class="max-w-3xl mx-auto text-gray-custom">Get to know me better - my journey, passions, and what drives me in the world of software engineering and cybersecurity.</p>
</div>
<div class="flex flex-col md:flex-row items-center space-y-12 md:space-y-0">
<div class="md:w-5/12" data-aos="fade-right" data-aos-duration="1000">
<div class="relative">
<img src="photo2.jpeg" alt="About Me" class="card-3d shadow-lg absolute shadow-gray-600 inset-0 bg-gray-600 rounded-lg transform rotate-3">
<img src="photo2.jpeg" alt="About Me" class="relative rounded-lg shadow-lg shadow-gray-600 card-3d">
</div>
</div>
<div class="md:w-7/12 md:pl-12" data-aos="fade-left" data-aos-duration="1000">
<p class="text-gray-custom mb-6">
Hey there! I'm Krishanthan, a passionate Developer Exploring different technologies in the Software Engineering specially in Web and Mobile development . The Technologies I mostly used are Next JS,Tailwindcss, zustand ,prisma ,MySQL,PostgreSQL ,Java ,Hibernate ,Jakarta EE,Expo (React Native) and sometimes PHP as well.
</p>
<p class="text-gray-custom mb-6">
I was an Self thought Cybersec Guy who was passionate about web application security and Bug hunting.I spent time learning and playing CTFs on HackTheBox and TryHackMe. However, I had to pause all cybersec works due to university commitments
</p>
<div class="grid grid-cols-2 gap-6 mb-8">
<div>
<h3 class="font-bold mb-3 text-gray-custom">Education</h3>
<p class="text-gray-custom">BE.Software Engineering (U.G.)</p>
</div>
<div>
<h3 class="font-bold mb-3 text-gray-custom">Location</h3>
<p class="text-gray-custom">Sri Lanka</p>
</div>
<div>
<h3 class="font-bold mb-3 text-gray-custom">Languages</h3>
<p class="text-gray-custom">English,Sinhala, Tamil</p>
</div>
<div>
<h3 class="font-bold mb-3 text-gray-custom">Interests</h3>
<p class="text-gray-custom">Web And Mobile Development</p>
</div>
</div>
<a href="#contact" class="bg-gray-600 text-white px-6 py-3 rounded-full font-medium hover:bg-gray-700 transition duration-300 animated-btn inline-block">Let's Connect</a>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-6 mt-20">
<div class="card-custom rounded-lg p-6 shadow-lg text-center transform hover:scale-105 transition duration-300" data-aos="zoom-in" data-aos-delay="100">
<div class="mb-2 text-3xl text-4xl font-bold">33+</div>
<p class="text-gray-custom">Projects Completed</p>
</div>
<div class="card-custom rounded-lg p-6 shadow-lg text-center transform hover:scale-105 transition duration-300" data-aos="zoom-in" data-aos-delay="200">
<div class="mb-2 text-3xl md:text-4xl font-bold">15+</div>
<p class="text-gray-custom">Technologies Mastered</p>
</div>
<div class="card-custom rounded-lg p-6 shadow-lg text-center transform hover:scale-105 transition duration-300" data-aos="zoom-in" data-aos-delay="400">
<div class="mb-2 text-3xl md:text-4xl font-bold">100+</div>
<p class="text-gray-custom">Cups of Coffee</p>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20 ">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-3xl font-bold mb-4">My Skills</h2>
<div class="w-16 h-1 bg-gray-600 mx-auto mb-8"></div>
<p class="max-w-3xl mx-auto text-gray-custom">My technical expertise and capabilities that help me deliver high-quality solutions in software development and cybersecurity.</p>
</div>
<div class="flex flex-col md:flex-row space-y-12 md:space-y-0">
<!-- Development Skills -->
<div class="md:w-1/2 md:pr-8" data-aos="fade-right" data-aos-duration="1000">
<h3 class="text-xl font-semibold mb-8 flex items-center">
<i class="fas fa-code text-gray-custom mr-3 text-2xl"></i>
Software Development
</h3>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="font-medium">Web Application Development</span>
<span>98%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 98%"></div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="font-medium">Mobile App Development</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="font-medium">Desktop App Development</span>
<span>80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%"></div>
</div>
</div>
<h3 class="text-xl font-semibold my-8 flex items-center">
<i class="fas fa-laptop-code text-gray-custom mr-3 text-2xl"></i>
Languages & Frameworks
</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="technology-item flex items-center">
<i class="fab fa-js text-2xl mr-3 text-gray-custom"></i>
<span>Next.js</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-css3-alt text-2xl mr-3 text-gray-custom"></i>
<span>TailwindCSS</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-react text-2xl mr-3 text-gray-custom"></i>
<span>Expo (React Native)</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-node-js text-2xl mr-3 text-gray-custom"></i>
<span>ExpressJS</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-java text-2xl mr-3 text-gray-custom"></i>
<span>Jakarta EE</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-react text-2xl mr-3 text-gray-custom"></i>
<span>Zustand</span>
</div>
<div class="technology-item flex items-center">
<i class="fas fa-database text-2xl mr-3 text-gray-custom"></i>
<span>PostgreSQL</span>
</div>
<div class="technology-item flex items-center">
<i class="fas fa-database text-2xl mr-3 text-gray-custom"></i>
<span>SQLite</span>
</div>
<div class="technology-item flex items-center">
<i class="fas fa-database text-2xl mr-3 text-gray-custom"></i>
<span>MySQL</span>
</div>
<div class="technology-item flex items-center">
<i class="fas fa-database text-2xl mr-3 text-gray-custom"></i>
<span>Firebase Firestore</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-android text-2xl mr-3 text-gray-custom"></i>
<span>Native Android (Java)</span>
</div>
<div class="technology-item flex items-center">
<i class="fas fa-leaf text-2xl mr-3 text-gray-custom"></i>
<span>Hibernate</span>
</div>
<div class="technology-item flex items-center">
<i class="fas fa-database text-2xl mr-3 text-gray-custom"></i>
<span>Prisma</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-js text-2xl mr-3 text-gray-custom"></i>
<span>TypeScript</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-java text-2xl mr-3 text-gray-custom"></i>
<span>Java</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-php text-2xl mr-3 text-gray-custom"></i>
<span>PHP</span>
</div>
<div class="technology-item flex items-center">
<i class="fab fa-java text-2xl mr-3 text-gray-custom"></i>
<span>Swing</span>
</div>
</div>
</div>
<!-- Security Skills -->
<div class="md:w-1/2 md:pl-8" data-aos="fade-left" data-aos-duration="1000">
<h3 class="text-xl font-semibold mb-8 flex items-center">
<i class="fas fa-shield-alt text-gray-custom mr-3 text-2xl"></i>
Cybersecurity
</h3>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="font-medium">Web Security</span>
<span>25%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 25%"></div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="font-medium">Network Security</span>
<span>10%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 10%"></div>
</div>
</div>
<h3 class="text-xl font-semibold my-8 flex items-center">
<i class="fas fa-tools text-gray-custom mr-3 text-2xl"></i>
Security Tools I Used In Past
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="badge-item">
<span class="badge">Linux</span>
</div>
<div class="badge-item">
<span class="badge">Burp Suite</span>
</div>
<div class="badge-item">
<span class="badge">FFUF</span>
</div>
<div class="badge-item">
<span class="badge">Rustscan</span>
</div>
<div class="badge-item">
<span class="badge">OWASP ZAP</span>
</div>
<div class="badge-item">
<span class="badge">Nmap</span>
</div>
<div class="badge-item">
<span class="badge">Snort</span>
</div>
<div class="badge-item">
<span class="badge">SQLmap</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-3xl font-bold mb-4">My Projects</h2>
<div class="w-16 h-1 bg-gray-600 mx-auto mb-8"></div>
<p class="max-w-3xl mx-auto text-gray-custom">A showcase of my recent work, personal projects, and contributions that demonstrate my skills and expertise.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="100" data-category="web">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="Edutube - Free Courses By Youtube" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">Edutube - Free Courses By Youtube</h3>
<p class="mb-4">Edutube is a web app built with the YouTube API, designed as a premium-style platform for watching courses.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">NextJS</span>
<span class="badge">Tailwind</span>
<span class="badge">Zustand</span>
<span class="badge">Prisma</span>
<span class="badge">Postgres</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="200" data-category="mobile">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="AI English Teacher App" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">AI English Teacher App</h3>
<p class="mb-4">An OpenAI-based AI English practicing mobile app made for personal use.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">Expo</span>
<span class="badge">OpenAI</span>
<span class="badge">Langchain</span>
<span class="badge">Prisma</span>
<span class="badge">Nativewind</span>
<span class="badge">Zustand</span>
<span class="badge">Postgres</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="300" data-category="security">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="Zero Addiction - IOT Project" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">Zero Addiction - IOT Project</h3>
<p class="mb-4">An IoT project designed to control mobile addiction, built with ESP32 and a mobile app featuring a gamified approach.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">JavaEE</span>
<span class="badge">Hibernate</span>
<span class="badge">MySQL</span>
<span class="badge">Expo</span>
<span class="badge">Nativewind</span>
<span class="badge">Zustand</span>
<span class="badge">Arduino</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 4 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="100" data-category="web">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="Let's Chat - Messaging Mobile App" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">Let's Chat - Messaging Mobile App</h3>
<p class="mb-4">A messaging application with chatting and stories features.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">Expo</span>
<span class="badge">Nativewind</span>
<span class="badge">Zustand</span>
<span class="badge">JavaEE</span>
<span class="badge">Hibernate</span>
<span class="badge">MySQL</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 5 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="200" data-category="mobile">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="BeFit - Native Android App" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">BeFit - Native Android App</h3>
<p class="mb-4">An e-commerce mobile application.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">Java</span>
<span class="badge">Material3</span>
<span class="badge">SQLite</span>
<span class="badge">Firebase Firestore</span>
<span class="badge">FCM</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 6 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="300" data-category="security">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="BeFit - E-Commerce Web App v2" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">BeFit - E-Commerce Web App v2</h3>
<p class="mb-4">An e-commerce application specially made for six different sports items.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">NextJS</span>
<span class="badge">Tailwind</span>
<span class="badge">Zustand</span>
<span class="badge">JavaEE</span>
<span class="badge">Hibernate</span>
<span class="badge">MySQL</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 7 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="100" data-category="web">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="BeFit - E-Commerce Web App v1" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">BeFit - E-Commerce Web App v1</h3>
<p class="mb-4">An e-commerce application made with PHP and MySQL.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">HTML</span>
<span class="badge">JS</span>
<span class="badge">Tailwind</span>
<span class="badge">PHP</span>
<span class="badge">MySQL</span>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-gray-200 transition duration-300"></a>
<i class="fas fa-external-link-alt"></i> GitHub
</a>
</div>
</div>
</div>
<!-- Project 8 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="200" data-category="web">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="Newbie Investor" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">Newbie Investor</h3>
<p class="mb-4">An all-in-one investment guiding central hub.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">NextJS</span>
<span class="badge">Tailwind</span>
<span class="badge">Zustand</span>
<span class="badge">Postgres</span>
<span class="badge">Prisma</span>
</div>
</div>
</div>
<!-- Project 9 -->
<div class="project-card" data-aos="fade-up" data-aos-delay="300" data-category="web">
<img src="https://linda-hoang.com/wp-content/uploads/2014/10/img-placeholder-dark.jpg" alt="WhatYouFeel" class="w-full h-64 object-cover rounded-t-lg">
<div class="project-info">
<h3 class="text-xl font-bold mb-2">WhatYouFeel</h3>
<p class="mb-4">A personal journal that looks like a social media platform.</p>
<div class="flex space-x-2 mb-4">
<span class="badge">NextJS</span>
<span class="badge">Tailwind</span>
<span class="badge">Zustand</span>
<span class="badge">Postgres</span>
<span class="badge">Prisma</span>
</div>
</div>
</div>
</div>
<div class="text-center mt-16" data-aos="fade-up">
<a href="https://github.com/krishanthan4" class="bg-gray-600 text-white px-6 py-3 rounded-full font-medium hover:bg-gray-700 transition duration-300 animated-btn inline-block">View All Projects</a>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-20 ">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-3xl font-bold mb-4">Work Experience</h2>
<div class="w-16 h-1 bg-gray-600 mx-auto mb-8"></div>
<p class="max-w-3xl mx-auto text-gray-custom">My professional journey and experience in software development and cybersecurity.</p>
</div>
<div class="timeline">
<!-- Experience 1 -->
<div class="timeline-container left" data-aos="fade-right">
<div class="exp-card card-custom p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">Indie Developer</h3>
<h4 class="text-gray-custom mb-4">Self Employed • 2024 - Present</h4>
<p class="text-gray-custom mb-4">Building random SaaS projects that come to my mind.</p>
<div class="flex flex-wrap">
<span class="badge mr-2 mb-2">Web Apps</span>
<span class="badge mr-2 mb-2">Mobile Apps</span>
</div>
</div>
</div>
<!-- Experience 2 -->
<!-- <div class="timeline-container right" data-aos="fade-left">
<div class="exp-card card-custom p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">Cybersecurity Intern</h3>
<h4 class="text-gray-custom mb-4">SecureDefense Inc. • 2021 - 2022</h4>
<p class="text-gray-custom mb-4">Conducted vulnerability assessments, performed penetration testing, and developed security protocols for client applications.</p>
<div class="flex flex-wrap">
<span class="badge mr-2 mb-2">Pen Testing</span>
<span class="badge mr-2 mb-2">OWASP</span>
<span class="badge mr-2 mb-2">Kali Linux</span>
<span class="badge mr-2 mb-2">Security Audits</span>
</div>
</div>
</div> -->
<!-- Experience 3 -->
<!-- <div class="timeline-container left" data-aos="fade-right">
<div class="exp-card card-custom p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">Frontend Developer</h3>
<h4 class="text-gray-custom mb-4">WebCraft Studios • 2020 - 2021</h4>
<p class="text-gray-custom mb-4">Designed and implemented responsive user interfaces for web applications, collaborating with UX designers to enhance user experience.</p>
<div class="flex flex-wrap">
<span class="badge mr-2 mb-2">HTML/CSS</span>
<span class="badge mr-2 mb-2">JavaScript</span>
<span class="badge mr-2 mb-2">React</span>
<span class="badge mr-2 mb-2">UI/UX</span>
</div>
</div>
</div> -->
</div>
</div>
</section>
<!-- Blogs Section -->
<section id="blogs" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-3xl font-bold mb-4">My Blog</h2>
<div class="w-16 h-1 bg-gray-600 mx-auto mb-8"></div>
<p class="max-w-3xl mx-auto text-gray-custom">Sharing my thoughts, experiences, and knowledge in software development and cybersecurity.</p>
</div>
<iframe src='https://widgets.sociablekit.com/medium-publication-feed/iframe/25488659' frameborder='0' width='100%' height='1000'></iframe>
<div class="text-center mt-16" data-aos="fade-up">
<a href="https://medium.com/@Rkrishanthan" class="bg-gray-600 text-white px-6 py-3 rounded-full font-medium hover:bg-gray-700 transition duration-300 animated-btn inline-block">View All Posts</a>
</div>
</div>
</section>
<!-- Contact Form -->
<div id="contact" class="max-w-screen" data-aos="fade-left" data-aos-duration="1000">
<section class="contact-section">
<div class="floating-particles" id="particles"></div>
<div class="section-header">
<h2 class="section-title">Get In Touch</h2>
<p class="section-subtitle">I'm always open to discussing new projects, creative ideas or opportunities to be part of your vision.</p>
</div>
<div class="contact-details card-custom">
<div class="email-container">
<span class="email-label">Email me at:</span>
<a href="mailto:[email protected]" class="email-address">[email protected]</a>
</div>
<div class="linkedin-container">
<p class="linkedin-text">For quick chat, contact me from LinkedIn</p>
<a href="https://linkedin.com/in/ramakrishnan-krishanthan-8a6864241/" class="linkedin-link" target="_blank">Connect on LinkedIn</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-6 bg-black text-white text-center">
<div class="container mx-auto px-6">
<p>© 2023 Krishanthan. All rights reserved.</p>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script> -->
<script src="script.js"></script>
<script>
AOS.init();
</script>
</body>
</html>