Hugging Face's logo

Spaces:
Haseeb-001
/
portfolio
Running

App Files Community
Haseeb-001 commited on
Commit
2a6abf5
·
verified ·
1 Parent(s): 648b504

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +811 -811
index.html CHANGED
@@ -1,812 +1,812 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Abdul Haseeb | Generative AI & Data Science Engineer</title>
7
- <link rel="icon" href="YOUR_PROFILE_PICTURE_URL_HERE.png" type="image/png">
8
- <link rel="stylesheet" href="style.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
11
- <style>
12
- /* 🎨 Default Styles (will be overridden by style.css for better organization) */
13
- body {
14
- font-family: sans-serif;
15
- margin: 0;
16
- padding: 0;
17
- background-color: #121212; /* Default dark background */
18
- color: #f0f0f0; /* Default light text */
19
- transition: background-color 0.3s ease, color 0.3s ease;
20
- overflow-x: hidden; /* Prevent horizontal scroll */
21
- }
22
-
23
- .light-mode {
24
- background-color: #f8f8f8;
25
- color: #333;
26
- }
27
-
28
- /* 🌙🔆 Dark/Light Mode Toggle Button Styles */
29
- #darkModeToggle {
30
- position: fixed;
31
- top: 20px;
32
- right: 20px;
33
- background: none;
34
- border: none;
35
- color: #f0f0f0;
36
- font-size: 1.5em;
37
- cursor: pointer;
38
- z-index: 1000;
39
- transition: color 0.3s ease;
40
- }
41
-
42
- .light-mode #darkModeToggle {
43
- color: #333;
44
- }
45
-
46
- /* ✨ Custom Cursor Styles */
47
- .custom-cursor {
48
- position:fixed;
49
- width: 10px;
50
- height: 10px;
51
- border: 5px solid #00ffff; /* Neon cyan */
52
- border-radius: 50%;
53
- pointer-events: none;
54
- z-index: 1001;
55
- mix-blend-mode: difference;
56
- transition: transform 0.1s ease-out;
57
- }
58
-
59
- .click-effect {
60
- position: absolute;
61
- width: 60px;
62
- height: 60px;
63
- background-color: rgba(0, 255, 255, 0.5); /* Neon cyan with transparency */
64
- border-radius: 50%;
65
- animation: clickEffect 0.5s ease-out forwards;
66
- pointer-events:none;
67
- z-index: 1002;
68
- }
69
-
70
- @keyframes clickEffect {
71
- 0% {
72
- transform: translate(-50%, -50%) scale(0);
73
- opacity: 1;
74
- }
75
- 100% {
76
- transform: translate(-50%, -50%) scale(1.5);
77
- opacity: 0;
78
- }
79
- }
80
- </style>
81
- </head>
82
- <body>
83
-
84
- <button id="darkModeToggle">🌙</button>
85
-
86
- <div class="custom-cursor"></div>
87
-
88
- <a href="YOUR_CV_URL_HERE.pdf" download class="floating-cv-button">
89
- <i class="fas fa-download"></i> Download CV
90
- </a>
91
- <style>
92
- .floating-cv-button {
93
- position: fixed;
94
- bottom: 30px;
95
- right: 30px;
96
- background-color: #00ffff; /* Neon cyan */
97
- color: #121212;
98
- padding: 15px 25px;
99
- border-radius: 30px;
100
- text-decoration: none;
101
- font-weight: bold;
102
- box-shadow: 0 4px 8px rgba(0, 255, 255, 0.3);
103
- z-index: 999;
104
- transition: transform 0.3s ease, box-shadow 0.3s ease;
105
- }
106
-
107
- .floating-cv-button:hover {
108
- transform: translateY(-5px);
109
- box-shadow: 0 6px 12px rgba(0, 255, 255, 0.5);
110
- }
111
-
112
- .floating-cv-button i {
113
- margin-right: 10px;
114
- }
115
- </style>
116
-
117
- <div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
118
-
119
- <section id="hero" class="hero">
120
- <div class="hero-content">
121
- <h1 class="neon-text">ABDUL HASEEB</h1>
122
- <p class="hero-subtitle"><span class="typed-text"></span><span class="cursor">|</span></p>
123
- <div class="social-icons">
124
- <a href="https://www.linkedin.com/in/abdul-haseeb-980075323/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
125
- <a href="https://github.com/abdul-haseeb=0" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
126
- <a href="mailto:[email protected]" aria-label="Email"><i class="fas fa-envelope"></i></a>
127
- <a href="tel:+923261087203" aria-label="Phone"><i class="fas fa-phone"></i></a>
128
- </div>
129
- </div>
130
- </section>
131
- <style>
132
- .hero {
133
- background: linear-gradient(45deg, #1a1a1a, #222); /* Dark gradient background */
134
- color: #f0f0f0;
135
- text-align: center;
136
- padding: 150px 0;
137
- position: relative;
138
- overflow: hidden;
139
- }
140
-
141
- .hero-content {
142
- max-width: 800px;
143
- margin: 0 auto;
144
- }
145
-
146
- .neon-text {
147
- font-size: 3em;
148
- color: #fff;
149
- text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
150
- margin-bottom: 20px;
151
- }
152
-
153
- .hero-subtitle {
154
- font-size: 1.5em;
155
- font-weight: bold;
156
- margin-bottom: 30px;
157
- }
158
-
159
- .typed-text {
160
- color: #00ffff;
161
- }
162
-
163
- .cursor {
164
- display: inline-block;
165
- width: 2px;
166
- background-color: #00ffff;
167
- margin-left: 5px;
168
- animation: blink 0.7s infinite;
169
- }
170
-
171
- @keyframes blink {
172
- 0%, 100% { opacity: 1; }
173
- 50% { opacity: 0; }
174
- }
175
-
176
- .social-icons a {
177
- display: inline-block;
178
- margin: 0 15px;
179
- font-size: 1.8em;
180
- color: #f0f0f0;
181
- text-decoration: none;
182
- transition: color 0.3s ease, transform 0.3s ease;
183
- }
184
-
185
- .social-icons a:hover {
186
- color: #00ffff;
187
- transform: scale(1.1);
188
- }
189
- </style>
190
-
191
- <section id="about" class="about">
192
- <div class="container">
193
- <h2 class="section-title">About Me</h2>
194
- <div class="glassmorphism-card" data-aos="fade-right" data-aos-duration="1000">
195
- <p>👋 Hi, I'm Abdul Haseeb, an aspiring <span class="highlight">AI & Data Science Engineer</span> with a strong passion for leveraging the power of AI to solve real-world problems. I'm also a <span class="highlight">Prompt Engineer</span> and <span class="highlight">AI Developer</span>, constantly exploring the exciting frontiers of artificial intelligence.</p>
196
- <p>My journey involves hands-on experience in <span class="highlight">AI model deployment, FastAPI, Data Engineering, and Accountancy</span>. I'm particularly enthusiastic about <span class="highlight">Generative AI, LLMs, and Predictive Analytics</span>. I thrive on challenges and actively participate in hackathons to stay at the forefront of AI innovation.</p>
197
- <p>I 'm also an <span class="highlight">Accountant</span> and with a lot of hands-on experience in fabrics fields weather it's a shop or a factory. </p>
198
- <p>I'm a proactive problem-solver with a proven track record of building impactful AI-powered projects. My goal is to contribute meaningfully to the AI community and business and help shape the future through intelligent solutions.</p>
199
- </div>
200
- </div>
201
- </section>
202
- <style>
203
- .about {
204
- padding: 80px 0;
205
- background: linear-gradient(135deg, #1a1a1a, #222);
206
- color: #f0f0f0;
207
- }
208
-
209
- .about .container {
210
- max-width: 960px;
211
- margin: 0 auto;
212
- padding: 0 20px;
213
- }
214
-
215
- .section-title {
216
- font-size: 2.5em;
217
- text-align: center;
218
- margin-bottom: 40px;
219
- color: #00ffff;
220
- }
221
-
222
- .glassmorphism-card {
223
- background: rgba(255, 255, 255, 0.1);
224
- border-radius: 16px;
225
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
226
- backdrop-filter: blur(10px);
227
- -webkit-backdrop-filter: blur(10px);
228
- border: 1px solid rgba(255, 255, 255, 0.3);
229
- padding: 40px;
230
- line-height: 1.8;
231
- color: #f0f0f0;
232
- }
233
-
234
- .light-mode .glassmorphism-card {
235
- background: rgba(0, 0, 0, 0.05);
236
- border: 1px solid rgba(0, 0, 0, 0.1);
237
- color: #333;
238
- }
239
-
240
- .highlight {
241
- color: #00ffff;
242
- font-weight: bold;
243
- }
244
- </style>
245
-
246
- <section id="skills" class="skills">
247
- <div class="container">
248
- <h2 class="section-title">Tech Skills</h2>
249
- <div class="skills-grid">
250
- <div class="skill-category" data-aos="fade-up" data-aos-delay="100">
251
- <h3>Programming Languages</h3>
252
- <div class="skill-badge">Python</div>
253
- </div>
254
- <div class="skill-category" data-aos="fade-up" data-aos-delay="200">
255
- <h3>Generative AI</h3>
256
- <div class="skill-badge">Web & app</div>
257
- <div class="skill-badge">one Layer app</div>
258
- <div class="skill-badge">chatbots</div>
259
- <div class="skill-badge">RAG based apps</div>
260
- </div>
261
- <div class="skill-category" data-aos="fade-up" data-aos-delay="300">
262
- <h3>Web & App Development</h3>
263
- <div class="skill-badge">Streamlit</div>
264
- <div class="skill-badge">Gradio</div>
265
- <div class="skill-badge">FastAPI</div>
266
- <div class="skill-badge">Gen AI</div>
267
- </div>
268
- <div class="skill-category" data-aos="fade-up" data-aos-delay="400">
269
- <h3>DataBases</h3>
270
- <div class="skill-badge">Faiss</div>
271
- <div class="skill-badge">MongoDB</div>
272
- <div class="skill-badge">Postgres</div>
273
- <div class="skill-badge">SQL</div>
274
- <div class="skill-badge">No-SQL</div>
275
- </div>
276
- <div class="skill-category" data-aos="fade-up" data-aos-delay="500">
277
- <h3>Cloud Platforms</h3>
278
- <div class="skill-badge">Hugging Face</div>
279
- <div class="skill-badge">Google Colab</div>
280
- <div class="skill-badge">Neo4j</div>
281
- <div class="skill-badge">Supabase</div>
282
- <div class="skill-badge">Vercel</div>
283
- </div>
284
- <div class="skill-category" data-aos="fade-up" data-aos-delay="600">
285
- <h3>LLMs</h3>
286
- <div class="skill-badge">LLaMA</div>
287
- <div class="skill-badge">Mistral</div>
288
- <div class="skill-badge">BERT</div>
289
- </div>
290
- <div class="skill-category" data-aos="fade-up" data-aos-delay="700">
291
- <h3>AI Tools</h3>
292
- <div class="skill-badge">PubMedBERT</div>
293
- <div class="skill-badge">Med-PaLM 2</div>
294
- <div class="skill-badge">WhisperAI</div>
295
- </div>
296
- <div class="skill-category" data-aos="fade-up" data-aos-delay="800">
297
- <h3>Deployment & Tools</h3>
298
- <div class="skill-badge">GitHub</div>
299
- <div class="skill-badge">Poetry</div>
300
- <div class="skill-badge">pip</div>
301
- <div class="skill-badge">APIs</div>
302
- <div class="skill-badge">JSON</div>
303
- </div>
304
- <div class="skill-category" data-aos="fade-up" data-aos-delay="800">
305
- <h3>Data Processings</h3>
306
- <div class="skill-badge">Pandas</div>
307
- <div class="skill-badge">Numpy</div>
308
- <div class="skill-badge">OpenCV</div>
309
- <div class="skill-badge">NLTK</div>
310
- </div>
311
- </div>
312
- </div>
313
- </section>
314
- <style>
315
- .skills {
316
- padding: 80px 0;
317
- background: linear-gradient(135deg, #222, #1a1a1a);
318
- color: #f0f0f0;
319
- }
320
-
321
- .skills .container {
322
- max-width: 960px;
323
- margin: 0 auto;
324
- padding: 0 20px;
325
- }
326
-
327
- .skills-grid {
328
- display: grid;
329
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
330
- gap: 30px;
331
- margin-top: 30px;
332
- }
333
-
334
- .skill-category h3 {
335
- color: #00ffff;
336
- margin-bottom: 15px;
337
- text-align: center;
338
- }
339
-
340
- .skill-badge {
341
- background-color: rgba(0, 255, 255, 0.1);
342
- color: #00ffff;
343
- border: 1px solid #00ffff;
344
- padding: 10px 15px;
345
- border-radius: 20px;
346
- display: inline-block;
347
- margin: 5px;
348
- font-size: 0.9em;
349
- transition: background-color 0.3s ease, color 0.3s ease;
350
- }
351
-
352
- .skill-badge:hover {
353
- background-color: #00ffff;
354
- color: #121212;
355
- }
356
-
357
- .light-mode .skill-badge {
358
- background-color: rgba(0, 0, 0, 0.05);
359
- color: #333;
360
- border-color: #333;
361
- }
362
-
363
- .light-mode .skill-badge:hover {
364
- background-color: #333;
365
- color: #f8f8f8;
366
- }
367
- </style>
368
-
369
- <section id="experience" class="experience" data-aos="fade-down" data-aos-duration="1000">
370
- <div class="parallax-bg" style="background-image: url('YOUR_BACKGROUND_IMAGE_URL_HERE.jpg');"></div>
371
- <div class="container">
372
- <h2 class="section-title">Work Experience & Projects</h2>
373
- <div class="experience-item">
374
- <h3>AI Developer | Self-Initiated Projects | 2024 - Present</h3>
375
- <p>Developed AI applications focused on daily life problems in Educations, Business, HealthCare.</p>
376
- <p>Utilized AI models to enhance generative performance.</p>
377
- <p>Participated in multiple international hackathons.</p>
378
- <p>Mentored aspiring developers in Python programming and real-world AI applications.</p>
379
- </div>
380
- <div class="experience-item">
381
- <h3>Accountant & Graphic Designer</h3>
382
- <p>Managed financial records, budgeting, and reporting for various clients.</p>
383
- <p>Have a hands-on experience in Accounting and also Managed many circumstances.</p>
384
- <p>Designed professional graphics and branding materials.</p>
385
- </div>
386
- <h3 class="subsection-title">Projects</h3>
387
- <div class="project-item">
388
- <h4>Code Generator</h4>
389
- <p>Enabled users to generate clean, efficient code across multiple languages.</p>
390
- <p>Provided a user-friendly interface for task input and seamless code generation.</p>
391
- </div>
392
- <div class="project-item">
393
- <h4>AI Based Trading Indicator</h4>
394
- <p>Implemented real-time buy/sell signals for cryptocurrency trading.</p>
395
- <p>Incorporated currency conversion features and an intuitive user interface.</p>
396
- <p>Provided a user-friendly chatbot interface and friendly chat.</p>
397
- </div>
398
- <!-- <div class="project-item">
399
- <h4>Data Extraction and Accounting Automation | Python, OCR, Excel</h4>
400
- <p>Created a pipeline to extract text from images and automate debit/credit calculations.</p>
401
- <p>Enhanced workflow efficiency through automated data storage and operation.</p>
402
- </div> -->
403
- <div class="project-item">
404
- <h4>Smart Cleaner</h4>
405
- <p>Remove all noise and meaningless data from raw datasets.</p>
406
- </div>
407
- <div class="project-item">
408
- <h4>Epilepsy & Seizure Prediction Chatbot</h4>
409
- <p>Leveraged <strong>LLaMA & PubMedBERT</strong> for medical predictions and quick recommendations.</p>
410
- </div>
411
- <div class="project-item">
412
- <h4>Voice Call Bot for Medical Triage</h4>
413
- <p>Assess patient conditions and provide real-time guidance.</p>
414
- <p>Sends an <strong>alarming pop up message to nearest Hosptals</strong> according to the patients condition.</p>
415
- </div>
416
- </div>
417
- </section>
418
- <style>
419
- .experience {
420
- padding: 80px 0;
421
- position: relative;
422
- overflow: hidden;
423
- color: #f0f0f0;
424
- }
425
-
426
- .parallax-bg {
427
- position: absolute;
428
- top: 0;
429
- left: 0;
430
- width: 100%;
431
- height: 100%;
432
- background-size: cover;
433
- background-position: center;
434
- z-index: -1;
435
- filter: blur(5px); /* Optional blur for the background */
436
- transform: translateZ(-1px) scale(1.5); /* Parallax effect */
437
- }
438
-
439
- .experience .container {
440
- max-width: 960px;
441
- margin: 0 auto;
442
- padding: 0 20px;
443
- }
444
-
445
- .experience .section-title {
446
- color: #00ffff;
447
- margin-bottom: 40px;
448
- }
449
-
450
- .experience-item {
451
- background: rgba(255, 255, 255, 0.05);
452
- border-left: 3px solid #00ffff;
453
- padding: 20px;
454
- margin-bottom: 30px;
455
- border-radius: 5px;
456
- backdrop-filter: blur(5px);
457
- -webkit-backdrop-filter: blur(5px);
458
- }
459
-
460
- .light-mode .experience-item {
461
- background: rgba(0, 0, 0, 0.03);
462
- border-left-color: #333;
463
- color: #333;
464
- }
465
-
466
- .experience-item h3 {
467
- color: #00ffff;
468
- margin-top: 0;
469
- margin-bottom: 10px;
470
- }
471
-
472
- .subsection-title {
473
- color: #00ffff;
474
- margin-top: 40px;
475
- margin-bottom: 20px;
476
- font-size: 1.8em;
477
- }
478
-
479
- .project-item {
480
- background: rgba(255, 255, 255, 0.03);
481
- padding: 15px;
482
- margin-bottom: 20px;
483
- border-radius: 5px;
484
- backdrop-filter: blur(5px);
485
- -webkit-backdrop-filter: blur(5px);
486
- }
487
-
488
- .light-mode .project-item {
489
- background: rgba(0, 0, 0, 0.02);
490
- color: #333;
491
- }
492
-
493
- .project-item h4 {
494
- color: #00ffff;
495
- margin-top: 0;
496
- margin-bottom: 5px;
497
- }
498
- </style>
499
-
500
- <section id="achievements" class="achievements">
501
- <div class="container">
502
- <h2 class="section-title">Achievements & Hackathons</h2>
503
- <div class="achievement-card-container">
504
- <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000">
505
- <i class="fas fa-trophy neon-icon"></i>
506
- <h3>Joined multiple international hackathons.</h3>
507
- <p>Actively participated in various global hackathons, showcasing problem-solving and collaborative skills.</p>
508
- </div>
509
- <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="800">
510
- <i class="fas fa-brain neon-icon"></i>
511
- <h3>Accountant</h3>
512
- <p>Work as a part time <strong>accountant</strong> in multiple organizations related to Fabrics.</p>
513
- </div>
514
- <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="800">
515
- <i class="fas fa-brain neon-icon"></i>
516
- <h3>Graphic Designer</h3>
517
- <p>Worked as a <strong>Graphic Designer</strong> in printing press and got a lot of creativity and e.</p>
518
- </div>
519
- <div class="achievement-card" data-aos="flip-right" data-aos-duration="1000" data-aos-delay="600">
520
- <i class="fas fa-network-wired neon-icon"></i>
521
- <h3>Data Preprocessings</h3>
522
- <p>Learned <strong>pandas,numpy,NLTK,OpenCV</strong> for optimized processings on data.</p>
523
- </div>
524
- <div class="achievement-card" data-aos="flip-right" data-aos-duration="1000" data-aos-delay="200">
525
- <i class="fas fa-code neon-icon"></i>
526
- <h3>Created AI based code generator supporting multi-language code generation.</h3>
527
- <p>Developed an innovative AI tool capable of generating code in multiple programming languages, enhancing developer productivity.</p>
528
- </div>
529
- <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="400">
530
- <i class="fas fa-chart-line neon-icon"></i>
531
- <h3>Developed an AI based cryptocurrency trading indicator.</h3>
532
- <p>Built an AI-powered trading indicator providing buy/sell signals and USD/PKR conversion for cryptocurrency trading.</p>
533
- </div>
534
- <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="800",>
535
- <i class="fas fa-brain neon-icon"></i>
536
- <h3>Epilepsy & Seizure Prediction</h3>
537
- <p>Play a key role in Designing a <strong>chatbot with medical LLMs</strong> for real-time predictions and remedy.</p>
538
- </div>
539
- </div>
540
- </div>
541
- </section>
542
- <style>
543
- .achievements {
544
- padding: 80px 0;
545
- background: linear-gradient(45deg, #222, #1a1a1a);
546
- color: #f0f0f0;
547
- }
548
-
549
- .achievements .container {
550
- max-width: 1000px;
551
- margin: 0 auto;
552
- padding: 0 20px;
553
- }
554
-
555
- .achievement-card-container {
556
- display: grid;
557
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
558
- gap: 30px;
559
- margin-top: 30px;
560
- }
561
-
562
- .achievement-card {
563
- background: rgba(255, 255, 255, 0.05);
564
- padding: 30px;
565
- border-radius: 10px;
566
- text-align: center;
567
- transition: transform 0.3s ease, box-shadow 0.3s ease;
568
- backdrop-filter: blur(5px);
569
- -webkit-backdrop-filter: blur(5px);
570
- }
571
-
572
- .light-mode .achievement-card {
573
- background: rgba(0, 0, 0, 0.03);
574
- color: #333;
575
- }
576
-
577
- .achievement-card:hover {
578
- transform: translateY(-10px);
579
- box-shadow: 0 8px 16px rgba(0, 255, 255, 0.2);
580
- }
581
-
582
- .neon-icon {
583
- font-size: 2em;
584
- color: #00ffff;
585
- margin-bottom: 15px;
586
- text-shadow: 0 0 10px #00ffff;
587
- }
588
-
589
- .achievement-card h3 {
590
- color: #00ffff;
591
- margin-bottom: 10px;
592
- }
593
- </style>
594
-
595
- <section id="certifications" class="certifications">
596
- <div class="container">
597
- <h2 class="section-title">Certifications</h2>
598
- <div class="certification-list">
599
- <div class="certification-item" data-aos="fade-left" data-aos-duration="1000">
600
- <h3>Saylani Mass IT Training (SMIT)</h3>
601
- <p>Diploma in AI & Data Science <strong>(Ongoing)</strong></p>
602
- <p>Specialization: Agentic AI, Backend Development, Data Sciences, SQL / No-SQL</p>
603
- <p>Key Projects: RAG-based Application, Applied AI apps, Cloud Based Apps.</p>
604
- </div>
605
- <div class="certification-item" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
606
- <h3>PAKANGELS | Aptech | iCodeGuru | Aspire Pakistan</h3>
607
- <p>Generative AI (Online Certificate)</p>
608
- <p>Focus Areas: Generative AI Models, AI implementation in business, RAG-based Application, Generative AI Based App Development for daiily tasks mainly in offices.</p>
609
- </div>
610
- <div class="certification-item" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="400">
611
- <h3>iCodeGuru</h3>
612
- <p>Data Structures and Algorithms (DSA)</p>
613
- <p>Topics: Problem-solving with Python, Algorithm Optimization</p>
614
- </div>
615
- </div>
616
- </div>
617
- </section>
618
- <style>
619
- .certifications {
620
- padding: 80px 0;
621
- background: linear-gradient(135deg, #1a1a1a, #222);
622
- color: #f0f0f0;
623
- }
624
-
625
- .certifications .container {
626
- max-width: 960px;
627
- margin: 0 auto;
628
- padding: 0 20px;
629
- }
630
-
631
- .certification-list {
632
- margin-top: 30px;
633
- }
634
-
635
- .certification-item {
636
- background: rgba(255, 255, 255, 0.05);
637
- padding: 25px;
638
- margin-bottom: 20px;
639
- border-radius: 8px;
640
- border-left: 5px solid #00ffff;
641
- backdrop-filter: blur(5px);
642
- -webkit-backdrop-filter: blur(5px);
643
- }
644
-
645
- .light-mode .certification-item {
646
- background: rgba(0, 0, 0, 0.03);
647
- border-left-color: #333;
648
- color: #333;
649
- }
650
-
651
- .certification-item h3 {
652
- color: #00ffff;
653
- margin-top: 0;
654
- margin-bottom: 10px;
655
- }
656
- </style>
657
-
658
- <!-- Education -->
659
- <!-- <section id="education" class="education">
660
- <div class="container">
661
- <h2 class="section-title">Education</h2>
662
- <div class="education-item" data-aos="zoom-in" data-aos-duration="1000">
663
- <h3>Bachelor of Science in Computer Science</h3>
664
- <p>The University of Agriculture, Faisalabad</p>
665
- <p>Sep 2020 - Jun 2024</p>
666
- <p>CGPA: 3.35 / 4.00</p>
667
- </div>
668
- </div>
669
- </section>
670
- <style>
671
- .education {
672
- padding: 80px 0;
673
- background: linear-gradient(45deg, #222, #1a1a1a);
674
- color: #f0f0f0;
675
- }
676
-
677
- .education .container {
678
- max-width: 800px;
679
- margin: 0 auto;
680
- padding: 0 20px;
681
- }
682
-
683
- .education-item {
684
- background: rgba(255, 255, 255, 0.05);
685
- padding: 30px;
686
- border-radius: 10px;
687
- backdrop-filter: blur(5px);
688
- -webkit-backdrop-filter: blur(5px);
689
- }
690
-
691
- .light-mode .education-item {
692
- background: rgba(0, 0, 0, 0.03);
693
- color: #333;
694
- }
695
-
696
- .education-item h3 {
697
- color: #00ffff;
698
- margin-top: 0;
699
- margin-bottom: 10px;
700
- }
701
- </style> -->
702
-
703
- <section id="contact" class="contact">
704
- <div class="container">
705
- <h2 class="section-title">Let's Connect!</h2>
706
- <p class="contact-message">Open to AI/ML projects, collaborations, and research opportunities. Let's discuss how AI can transform the world!</p>
707
- <div class="contact-info">
708
- <p><i class="fas fa-map-marker-alt"></i> Pakistan</p>
709
- <p><i class="fas fa-envelope"></i> <a href="mailto:[email protected]">[email protected]</a></p>
710
- <p><i class="fas fa-phone"></i> <a href="tel:+923261087203">+92 326 1087203</a></p>
711
- <p><i class="fab fa-linkedin"></i> <a href="https://www.linkedin.com/in/abdul-haseeb-980075323/" target="_blank">LinkedIn</a></p>
712
- <p><i class="fab fa-github"></i> <a href="https://github.com/abdul-haseeb=0" target="_blank">GitHub</a></p>
713
- </div>
714
- </div>
715
- </section>
716
- <style>
717
- .contact {
718
- padding: 80px 0;
719
- background: linear-gradient(135deg, #222, #1a1a1a);
720
- color: #f0f0f0;
721
- text-align: center;
722
- }
723
-
724
- .contact .container {
725
- max-width: 700px;
726
- margin: 0 auto;
727
- padding: 0 20px;
728
- }
729
-
730
- .contact-message {
731
- font-size: 1.2em;
732
- margin-bottom: 30px;
733
- }
734
-
735
- .contact-info p {
736
- font-size: 1.1em;
737
- margin-bottom: 15px;
738
- }
739
-
740
- .contact-info a {
741
- color: #00ffff;
742
- text-decoration: none;
743
- transition: color 0.3s ease;
744
- }
745
-
746
- .contact-info a:hover {
747
- color: #fff;
748
- }
749
-
750
- .contact-info i {
751
- margin-right: 10px;
752
- color: #00ffff;
753
- }
754
- </style>
755
-
756
- <footer class="footer">
757
- <div class="container">
758
- <p>&copy; 2025 Abdul Haseeb. All Rights Reserved. ✨ Portfolio Designed with ❤️</p>
759
- </div>
760
- </footer>
761
- <style>
762
- .footer {
763
- background-color: #1a1a1a;
764
- color: #f0f0f0;
765
- text-align: center;
766
- padding: 30px 0;
767
- font-size: 0.9em;
768
- }
769
-
770
- .footer .container {
771
- max-width: 960px;
772
- margin: 0 auto;
773
- padding: 0 20px;
774
- }
775
- </style>
776
-
777
- <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
778
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
779
- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
780
- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
781
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
782
- <script src="script.js"></script>
783
-
784
- <script>
785
- AOS.init({
786
- once: true, // Whether animation should happen only once - while scrolling down
787
- duration: 1000, // Values from 0 to 3000, with step 50ms
788
- easing: 'ease-out-cubic', // Animation easing
789
- });
790
-
791
- // 🌠 Initialize Particles.js
792
- particlesJS('particles-js', {
793
- particles: {
794
- number: { value: 80, density: { enable: true, value_area: 800 } },
795
- color: { value: '#00ffff' },
796
- shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 } },
797
- opacity: { value: 0.5, random: true, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } },
798
- size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } },
799
- line_linked: { enable: true, distance: 150, color: '#00ffff', opacity: 0.4, width: 1 },
800
- move: { enable: true, speed: 2, direction: 'none', random: true, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } }
801
- },
802
- interactivity: {
803
- detect_on: 'canvas',
804
- events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'push' }, resize: true },
805
- modes: { grab: { distance: 140, line_linked: { opacity: 1 } }, bubble: { distance: 200, size: 40, duration: 2, opacity: 0.8, speed: 3 }, repulse: { distance: 250, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }
806
- },
807
- retina_detect: true
808
- });
809
- </script>
810
-
811
- </body>
812
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Abdul Haseeb | Generative AI & Data Science Engineer</title>
7
+ <link rel="icon" href="YOUR_PROFILE_PICTURE_URL_HERE.png" type="image/png">
8
+ <link rel="stylesheet" href="style.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
11
+ <style>
12
+ /* 🎨 Default Styles (will be overridden by style.css for better organization) */
13
+ body {
14
+ font-family: sans-serif;
15
+ margin: 0;
16
+ padding: 0;
17
+ background-color: #121212; /* Default dark background */
18
+ color: #f0f0f0; /* Default light text */
19
+ transition: background-color 0.3s ease, color 0.3s ease;
20
+ overflow-x: hidden; /* Prevent horizontal scroll */
21
+ }
22
+
23
+ .light-mode {
24
+ background-color: #f8f8f8;
25
+ color: #333;
26
+ }
27
+
28
+ /* 🌙🔆 Dark/Light Mode Toggle Button Styles */
29
+ #darkModeToggle {
30
+ position: fixed;
31
+ top: 20px;
32
+ right: 20px;
33
+ background: none;
34
+ border: none;
35
+ color: #f0f0f0;
36
+ font-size: 1.5em;
37
+ cursor: pointer;
38
+ z-index: 1000;
39
+ transition: color 0.3s ease;
40
+ }
41
+
42
+ .light-mode #darkModeToggle {
43
+ color: #333;
44
+ }
45
+
46
+ /* ✨ Custom Cursor Styles */
47
+ .custom-cursor {
48
+ position:fixed;
49
+ width: 10px;
50
+ height: 10px;
51
+ border: 5px solid #00ffff; /* Neon cyan */
52
+ border-radius: 50%;
53
+ pointer-events: none;
54
+ z-index: 1001;
55
+ mix-blend-mode: difference;
56
+ transition: transform 0.1s ease-out;
57
+ }
58
+
59
+ .click-effect {
60
+ position: absolute;
61
+ width: 60px;
62
+ height: 60px;
63
+ background-color: rgba(0, 255, 255, 0.5); /* Neon cyan with transparency */
64
+ border-radius: 50%;
65
+ animation: clickEffect 0.5s ease-out forwards;
66
+ pointer-events:none;
67
+ z-index: 1002;
68
+ }
69
+
70
+ @keyframes clickEffect {
71
+ 0% {
72
+ transform: translate(-50%, -50%) scale(0);
73
+ opacity: 1;
74
+ }
75
+ 100% {
76
+ transform: translate(-50%, -50%) scale(1.5);
77
+ opacity: 0;
78
+ }
79
+ }
80
+ </style>
81
+ </head>
82
+ <body>
83
+
84
+ <button id="darkModeToggle">🌙</button>
85
+
86
+ <div class="custom-cursor"></div>
87
+
88
+ <a href="YOUR_CV_URL_HERE.pdf" download class="floating-cv-button">
89
+ <i class="fas fa-download"></i> Download CV
90
+ </a>
91
+ <style>
92
+ .floating-cv-button {
93
+ position: fixed;
94
+ bottom: 30px;
95
+ right: 30px;
96
+ background-color: #00ffff; /* Neon cyan */
97
+ color: #121212;
98
+ padding: 15px 25px;
99
+ border-radius: 30px;
100
+ text-decoration: none;
101
+ font-weight: bold;
102
+ box-shadow: 0 4px 8px rgba(0, 255, 255, 0.3);
103
+ z-index: 999;
104
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
105
+ }
106
+
107
+ .floating-cv-button:hover {
108
+ transform: translateY(-5px);
109
+ box-shadow: 0 6px 12px rgba(0, 255, 255, 0.5);
110
+ }
111
+
112
+ .floating-cv-button i {
113
+ margin-right: 10px;
114
+ }
115
+ </style>
116
+
117
+ <div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
118
+
119
+ <section id="hero" class="hero">
120
+ <div class="hero-content">
121
+ <h1 class="neon-text">ABDUL HASEEB</h1>
122
+ <p class="hero-subtitle"><span class="typed-text"></span><span class="cursor">|</span></p>
123
+ <div class="social-icons">
124
+ <a href="https://www.linkedin.com/in/abdul-haseeb-980075323/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
125
+ <a href="https://github.com/abdul-haseeb-0" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
126
+ <a href="mailto:[email protected]" aria-label="Email"><i class="fas fa-envelope"></i></a>
127
+ <a href="tel:+923261087203" aria-label="Phone"><i class="fas fa-phone"></i></a>
128
+ </div>
129
+ </div>
130
+ </section>
131
+ <style>
132
+ .hero {
133
+ background: linear-gradient(45deg, #1a1a1a, #222); /* Dark gradient background */
134
+ color: #f0f0f0;
135
+ text-align: center;
136
+ padding: 150px 0;
137
+ position: relative;
138
+ overflow: hidden;
139
+ }
140
+
141
+ .hero-content {
142
+ max-width: 800px;
143
+ margin: 0 auto;
144
+ }
145
+
146
+ .neon-text {
147
+ font-size: 3em;
148
+ color: #fff;
149
+ text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
150
+ margin-bottom: 20px;
151
+ }
152
+
153
+ .hero-subtitle {
154
+ font-size: 1.5em;
155
+ font-weight: bold;
156
+ margin-bottom: 30px;
157
+ }
158
+
159
+ .typed-text {
160
+ color: #00ffff;
161
+ }
162
+
163
+ .cursor {
164
+ display: inline-block;
165
+ width: 2px;
166
+ background-color: #00ffff;
167
+ margin-left: 5px;
168
+ animation: blink 0.7s infinite;
169
+ }
170
+
171
+ @keyframes blink {
172
+ 0%, 100% { opacity: 1; }
173
+ 50% { opacity: 0; }
174
+ }
175
+
176
+ .social-icons a {
177
+ display: inline-block;
178
+ margin: 0 15px;
179
+ font-size: 1.8em;
180
+ color: #f0f0f0;
181
+ text-decoration: none;
182
+ transition: color 0.3s ease, transform 0.3s ease;
183
+ }
184
+
185
+ .social-icons a:hover {
186
+ color: #00ffff;
187
+ transform: scale(1.1);
188
+ }
189
+ </style>
190
+
191
+ <section id="about" class="about">
192
+ <div class="container">
193
+ <h2 class="section-title">About Me</h2>
194
+ <div class="glassmorphism-card" data-aos="fade-right" data-aos-duration="1000">
195
+ <p>👋 Hi, I'm Abdul Haseeb, an aspiring <span class="highlight">AI & Data Science Engineer</span> with a strong passion for leveraging the power of AI to solve real-world problems. I'm also a <span class="highlight">Prompt Engineer</span> and <span class="highlight">AI Developer</span>, constantly exploring the exciting frontiers of artificial intelligence.</p>
196
+ <p>My journey involves hands-on experience in <span class="highlight">AI model deployment, FastAPI, Data Engineering, and Accountancy</span>. I'm particularly enthusiastic about <span class="highlight">Generative AI, LLMs, and Predictive Analytics</span>. I thrive on challenges and actively participate in hackathons to stay at the forefront of AI innovation.</p>
197
+ <p>I 'm also an <span class="highlight">Accountant</span> and with a lot of hands-on experience in fabrics fields weather it's a shop or a factory. </p>
198
+ <p>I'm a proactive problem-solver with a proven track record of building impactful AI-powered projects. My goal is to contribute meaningfully to the AI community and business and help shape the future through intelligent solutions.</p>
199
+ </div>
200
+ </div>
201
+ </section>
202
+ <style>
203
+ .about {
204
+ padding: 80px 0;
205
+ background: linear-gradient(135deg, #1a1a1a, #222);
206
+ color: #f0f0f0;
207
+ }
208
+
209
+ .about .container {
210
+ max-width: 960px;
211
+ margin: 0 auto;
212
+ padding: 0 20px;
213
+ }
214
+
215
+ .section-title {
216
+ font-size: 2.5em;
217
+ text-align: center;
218
+ margin-bottom: 40px;
219
+ color: #00ffff;
220
+ }
221
+
222
+ .glassmorphism-card {
223
+ background: rgba(255, 255, 255, 0.1);
224
+ border-radius: 16px;
225
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
226
+ backdrop-filter: blur(10px);
227
+ -webkit-backdrop-filter: blur(10px);
228
+ border: 1px solid rgba(255, 255, 255, 0.3);
229
+ padding: 40px;
230
+ line-height: 1.8;
231
+ color: #f0f0f0;
232
+ }
233
+
234
+ .light-mode .glassmorphism-card {
235
+ background: rgba(0, 0, 0, 0.05);
236
+ border: 1px solid rgba(0, 0, 0, 0.1);
237
+ color: #333;
238
+ }
239
+
240
+ .highlight {
241
+ color: #00ffff;
242
+ font-weight: bold;
243
+ }
244
+ </style>
245
+
246
+ <section id="skills" class="skills">
247
+ <div class="container">
248
+ <h2 class="section-title">Tech Skills</h2>
249
+ <div class="skills-grid">
250
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="100">
251
+ <h3>Programming Languages</h3>
252
+ <div class="skill-badge">Python</div>
253
+ </div>
254
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="200">
255
+ <h3>Generative AI</h3>
256
+ <div class="skill-badge">Web & app</div>
257
+ <div class="skill-badge">one Layer app</div>
258
+ <div class="skill-badge">chatbots</div>
259
+ <div class="skill-badge">RAG based apps</div>
260
+ </div>
261
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="300">
262
+ <h3>Web & App Development</h3>
263
+ <div class="skill-badge">Streamlit</div>
264
+ <div class="skill-badge">Gradio</div>
265
+ <div class="skill-badge">FastAPI</div>
266
+ <div class="skill-badge">Gen AI</div>
267
+ </div>
268
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="400">
269
+ <h3>DataBases</h3>
270
+ <div class="skill-badge">Faiss</div>
271
+ <div class="skill-badge">MongoDB</div>
272
+ <div class="skill-badge">Postgres</div>
273
+ <div class="skill-badge">SQL</div>
274
+ <div class="skill-badge">No-SQL</div>
275
+ </div>
276
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="500">
277
+ <h3>Cloud Platforms</h3>
278
+ <div class="skill-badge">Hugging Face</div>
279
+ <div class="skill-badge">Google Colab</div>
280
+ <div class="skill-badge">Neo4j</div>
281
+ <div class="skill-badge">Supabase</div>
282
+ <div class="skill-badge">Vercel</div>
283
+ </div>
284
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="600">
285
+ <h3>LLMs</h3>
286
+ <div class="skill-badge">LLaMA</div>
287
+ <div class="skill-badge">Mistral</div>
288
+ <div class="skill-badge">BERT</div>
289
+ </div>
290
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="700">
291
+ <h3>AI Tools</h3>
292
+ <div class="skill-badge">PubMedBERT</div>
293
+ <div class="skill-badge">Med-PaLM 2</div>
294
+ <div class="skill-badge">WhisperAI</div>
295
+ </div>
296
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="800">
297
+ <h3>Deployment & Tools</h3>
298
+ <div class="skill-badge">GitHub</div>
299
+ <div class="skill-badge">Poetry</div>
300
+ <div class="skill-badge">pip</div>
301
+ <div class="skill-badge">APIs</div>
302
+ <div class="skill-badge">JSON</div>
303
+ </div>
304
+ <div class="skill-category" data-aos="fade-up" data-aos-delay="800">
305
+ <h3>Data Processings</h3>
306
+ <div class="skill-badge">Pandas</div>
307
+ <div class="skill-badge">Numpy</div>
308
+ <div class="skill-badge">OpenCV</div>
309
+ <div class="skill-badge">NLTK</div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </section>
314
+ <style>
315
+ .skills {
316
+ padding: 80px 0;
317
+ background: linear-gradient(135deg, #222, #1a1a1a);
318
+ color: #f0f0f0;
319
+ }
320
+
321
+ .skills .container {
322
+ max-width: 960px;
323
+ margin: 0 auto;
324
+ padding: 0 20px;
325
+ }
326
+
327
+ .skills-grid {
328
+ display: grid;
329
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
330
+ gap: 30px;
331
+ margin-top: 30px;
332
+ }
333
+
334
+ .skill-category h3 {
335
+ color: #00ffff;
336
+ margin-bottom: 15px;
337
+ text-align: center;
338
+ }
339
+
340
+ .skill-badge {
341
+ background-color: rgba(0, 255, 255, 0.1);
342
+ color: #00ffff;
343
+ border: 1px solid #00ffff;
344
+ padding: 10px 15px;
345
+ border-radius: 20px;
346
+ display: inline-block;
347
+ margin: 5px;
348
+ font-size: 0.9em;
349
+ transition: background-color 0.3s ease, color 0.3s ease;
350
+ }
351
+
352
+ .skill-badge:hover {
353
+ background-color: #00ffff;
354
+ color: #121212;
355
+ }
356
+
357
+ .light-mode .skill-badge {
358
+ background-color: rgba(0, 0, 0, 0.05);
359
+ color: #333;
360
+ border-color: #333;
361
+ }
362
+
363
+ .light-mode .skill-badge:hover {
364
+ background-color: #333;
365
+ color: #f8f8f8;
366
+ }
367
+ </style>
368
+
369
+ <section id="experience" class="experience" data-aos="fade-down" data-aos-duration="1000">
370
+ <div class="parallax-bg" style="background-image: url('YOUR_BACKGROUND_IMAGE_URL_HERE.jpg');"></div>
371
+ <div class="container">
372
+ <h2 class="section-title">Work Experience & Projects</h2>
373
+ <div class="experience-item">
374
+ <h3>AI Developer | Self-Initiated Projects | 2024 - Present</h3>
375
+ <p>Developed AI applications focused on daily life problems in Educations, Business, HealthCare.</p>
376
+ <p>Utilized AI models to enhance generative performance.</p>
377
+ <p>Participated in multiple international hackathons.</p>
378
+ <p>Mentored aspiring developers in Python programming and real-world AI applications.</p>
379
+ </div>
380
+ <div class="experience-item">
381
+ <h3>Accountant & Graphic Designer</h3>
382
+ <p>Managed financial records, budgeting, and reporting for various clients.</p>
383
+ <p>Have a hands-on experience in Accounting and also Managed many circumstances.</p>
384
+ <p>Designed professional graphics and branding materials.</p>
385
+ </div>
386
+ <h3 class="subsection-title">Projects</h3>
387
+ <div class="project-item">
388
+ <h4>Code Generator</h4>
389
+ <p>Enabled users to generate clean, efficient code across multiple languages.</p>
390
+ <p>Provided a user-friendly interface for task input and seamless code generation.</p>
391
+ </div>
392
+ <div class="project-item">
393
+ <h4>AI Based Trading Indicator</h4>
394
+ <p>Implemented real-time buy/sell signals for cryptocurrency trading.</p>
395
+ <p>Incorporated currency conversion features and an intuitive user interface.</p>
396
+ <p>Provided a user-friendly chatbot interface and friendly chat.</p>
397
+ </div>
398
+ <!-- <div class="project-item">
399
+ <h4>Data Extraction and Accounting Automation | Python, OCR, Excel</h4>
400
+ <p>Created a pipeline to extract text from images and automate debit/credit calculations.</p>
401
+ <p>Enhanced workflow efficiency through automated data storage and operation.</p>
402
+ </div> -->
403
+ <div class="project-item">
404
+ <h4>Smart Cleaner</h4>
405
+ <p>Remove all noise and meaningless data from raw datasets.</p>
406
+ </div>
407
+ <div class="project-item">
408
+ <h4>Epilepsy & Seizure Prediction Chatbot</h4>
409
+ <p>Leveraged <strong>LLaMA & PubMedBERT</strong> for medical predictions and quick recommendations.</p>
410
+ </div>
411
+ <div class="project-item">
412
+ <h4>Voice Call Bot for Medical Triage</h4>
413
+ <p>Assess patient conditions and provide real-time guidance.</p>
414
+ <p>Sends an <strong>alarming pop up message to nearest Hosptals</strong> according to the patients condition.</p>
415
+ </div>
416
+ </div>
417
+ </section>
418
+ <style>
419
+ .experience {
420
+ padding: 80px 0;
421
+ position: relative;
422
+ overflow: hidden;
423
+ color: #f0f0f0;
424
+ }
425
+
426
+ .parallax-bg {
427
+ position: absolute;
428
+ top: 0;
429
+ left: 0;
430
+ width: 100%;
431
+ height: 100%;
432
+ background-size: cover;
433
+ background-position: center;
434
+ z-index: -1;
435
+ filter: blur(5px); /* Optional blur for the background */
436
+ transform: translateZ(-1px) scale(1.5); /* Parallax effect */
437
+ }
438
+
439
+ .experience .container {
440
+ max-width: 960px;
441
+ margin: 0 auto;
442
+ padding: 0 20px;
443
+ }
444
+
445
+ .experience .section-title {
446
+ color: #00ffff;
447
+ margin-bottom: 40px;
448
+ }
449
+
450
+ .experience-item {
451
+ background: rgba(255, 255, 255, 0.05);
452
+ border-left: 3px solid #00ffff;
453
+ padding: 20px;
454
+ margin-bottom: 30px;
455
+ border-radius: 5px;
456
+ backdrop-filter: blur(5px);
457
+ -webkit-backdrop-filter: blur(5px);
458
+ }
459
+
460
+ .light-mode .experience-item {
461
+ background: rgba(0, 0, 0, 0.03);
462
+ border-left-color: #333;
463
+ color: #333;
464
+ }
465
+
466
+ .experience-item h3 {
467
+ color: #00ffff;
468
+ margin-top: 0;
469
+ margin-bottom: 10px;
470
+ }
471
+
472
+ .subsection-title {
473
+ color: #00ffff;
474
+ margin-top: 40px;
475
+ margin-bottom: 20px;
476
+ font-size: 1.8em;
477
+ }
478
+
479
+ .project-item {
480
+ background: rgba(255, 255, 255, 0.03);
481
+ padding: 15px;
482
+ margin-bottom: 20px;
483
+ border-radius: 5px;
484
+ backdrop-filter: blur(5px);
485
+ -webkit-backdrop-filter: blur(5px);
486
+ }
487
+
488
+ .light-mode .project-item {
489
+ background: rgba(0, 0, 0, 0.02);
490
+ color: #333;
491
+ }
492
+
493
+ .project-item h4 {
494
+ color: #00ffff;
495
+ margin-top: 0;
496
+ margin-bottom: 5px;
497
+ }
498
+ </style>
499
+
500
+ <section id="achievements" class="achievements">
501
+ <div class="container">
502
+ <h2 class="section-title">Achievements & Hackathons</h2>
503
+ <div class="achievement-card-container">
504
+ <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000">
505
+ <i class="fas fa-trophy neon-icon"></i>
506
+ <h3>Joined multiple international hackathons.</h3>
507
+ <p>Actively participated in various global hackathons, showcasing problem-solving and collaborative skills.</p>
508
+ </div>
509
+ <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="800">
510
+ <i class="fas fa-brain neon-icon"></i>
511
+ <h3>Accountant</h3>
512
+ <p>Work as a part time <strong>accountant</strong> in multiple organizations related to Fabrics.</p>
513
+ </div>
514
+ <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="800">
515
+ <i class="fas fa-brain neon-icon"></i>
516
+ <h3>Graphic Designer</h3>
517
+ <p>Worked as a <strong>Graphic Designer</strong> in printing press and got a lot of creativity and e.</p>
518
+ </div>
519
+ <div class="achievement-card" data-aos="flip-right" data-aos-duration="1000" data-aos-delay="600">
520
+ <i class="fas fa-network-wired neon-icon"></i>
521
+ <h3>Data Preprocessings</h3>
522
+ <p>Learned <strong>pandas,numpy,NLTK,OpenCV</strong> for optimized processings on data.</p>
523
+ </div>
524
+ <div class="achievement-card" data-aos="flip-right" data-aos-duration="1000" data-aos-delay="200">
525
+ <i class="fas fa-code neon-icon"></i>
526
+ <h3>Created AI based code generator supporting multi-language code generation.</h3>
527
+ <p>Developed an innovative AI tool capable of generating code in multiple programming languages, enhancing developer productivity.</p>
528
+ </div>
529
+ <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="400">
530
+ <i class="fas fa-chart-line neon-icon"></i>
531
+ <h3>Developed an AI based cryptocurrency trading indicator.</h3>
532
+ <p>Built an AI-powered trading indicator providing buy/sell signals and USD/PKR conversion for cryptocurrency trading.</p>
533
+ </div>
534
+ <div class="achievement-card" data-aos="flip-left" data-aos-duration="1000" data-aos-delay="800",>
535
+ <i class="fas fa-brain neon-icon"></i>
536
+ <h3>Epilepsy & Seizure Prediction</h3>
537
+ <p>Play a key role in Designing a <strong>chatbot with medical LLMs</strong> for real-time predictions and remedy.</p>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </section>
542
+ <style>
543
+ .achievements {
544
+ padding: 80px 0;
545
+ background: linear-gradient(45deg, #222, #1a1a1a);
546
+ color: #f0f0f0;
547
+ }
548
+
549
+ .achievements .container {
550
+ max-width: 1000px;
551
+ margin: 0 auto;
552
+ padding: 0 20px;
553
+ }
554
+
555
+ .achievement-card-container {
556
+ display: grid;
557
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
558
+ gap: 30px;
559
+ margin-top: 30px;
560
+ }
561
+
562
+ .achievement-card {
563
+ background: rgba(255, 255, 255, 0.05);
564
+ padding: 30px;
565
+ border-radius: 10px;
566
+ text-align: center;
567
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
568
+ backdrop-filter: blur(5px);
569
+ -webkit-backdrop-filter: blur(5px);
570
+ }
571
+
572
+ .light-mode .achievement-card {
573
+ background: rgba(0, 0, 0, 0.03);
574
+ color: #333;
575
+ }
576
+
577
+ .achievement-card:hover {
578
+ transform: translateY(-10px);
579
+ box-shadow: 0 8px 16px rgba(0, 255, 255, 0.2);
580
+ }
581
+
582
+ .neon-icon {
583
+ font-size: 2em;
584
+ color: #00ffff;
585
+ margin-bottom: 15px;
586
+ text-shadow: 0 0 10px #00ffff;
587
+ }
588
+
589
+ .achievement-card h3 {
590
+ color: #00ffff;
591
+ margin-bottom: 10px;
592
+ }
593
+ </style>
594
+
595
+ <section id="certifications" class="certifications">
596
+ <div class="container">
597
+ <h2 class="section-title">Certifications</h2>
598
+ <div class="certification-list">
599
+ <div class="certification-item" data-aos="fade-left" data-aos-duration="1000">
600
+ <h3>Saylani Mass IT Training (SMIT)</h3>
601
+ <p>Diploma in AI & Data Science <strong>(Ongoing)</strong></p>
602
+ <p>Specialization: Agentic AI, Backend Development, Data Sciences, SQL / No-SQL</p>
603
+ <p>Key Projects: RAG-based Application, Applied AI apps, Cloud Based Apps.</p>
604
+ </div>
605
+ <div class="certification-item" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
606
+ <h3>PAKANGELS | Aptech | iCodeGuru | Aspire Pakistan</h3>
607
+ <p>Generative AI (Online Certificate)</p>
608
+ <p>Focus Areas: Generative AI Models, AI implementation in business, RAG-based Application, Generative AI Based App Development for daiily tasks mainly in offices.</p>
609
+ </div>
610
+ <div class="certification-item" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="400">
611
+ <h3>iCodeGuru</h3>
612
+ <p>Data Structures and Algorithms (DSA)</p>
613
+ <p>Topics: Problem-solving with Python, Algorithm Optimization</p>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </section>
618
+ <style>
619
+ .certifications {
620
+ padding: 80px 0;
621
+ background: linear-gradient(135deg, #1a1a1a, #222);
622
+ color: #f0f0f0;
623
+ }
624
+
625
+ .certifications .container {
626
+ max-width: 960px;
627
+ margin: 0 auto;
628
+ padding: 0 20px;
629
+ }
630
+
631
+ .certification-list {
632
+ margin-top: 30px;
633
+ }
634
+
635
+ .certification-item {
636
+ background: rgba(255, 255, 255, 0.05);
637
+ padding: 25px;
638
+ margin-bottom: 20px;
639
+ border-radius: 8px;
640
+ border-left: 5px solid #00ffff;
641
+ backdrop-filter: blur(5px);
642
+ -webkit-backdrop-filter: blur(5px);
643
+ }
644
+
645
+ .light-mode .certification-item {
646
+ background: rgba(0, 0, 0, 0.03);
647
+ border-left-color: #333;
648
+ color: #333;
649
+ }
650
+
651
+ .certification-item h3 {
652
+ color: #00ffff;
653
+ margin-top: 0;
654
+ margin-bottom: 10px;
655
+ }
656
+ </style>
657
+
658
+ <!-- Education -->
659
+ <!-- <section id="education" class="education">
660
+ <div class="container">
661
+ <h2 class="section-title">Education</h2>
662
+ <div class="education-item" data-aos="zoom-in" data-aos-duration="1000">
663
+ <h3>Bachelor of Science in Computer Science</h3>
664
+ <p>The University of Agriculture, Faisalabad</p>
665
+ <p>Sep 2020 - Jun 2024</p>
666
+ <p>CGPA: 3.35 / 4.00</p>
667
+ </div>
668
+ </div>
669
+ </section>
670
+ <style>
671
+ .education {
672
+ padding: 80px 0;
673
+ background: linear-gradient(45deg, #222, #1a1a1a);
674
+ color: #f0f0f0;
675
+ }
676
+
677
+ .education .container {
678
+ max-width: 800px;
679
+ margin: 0 auto;
680
+ padding: 0 20px;
681
+ }
682
+
683
+ .education-item {
684
+ background: rgba(255, 255, 255, 0.05);
685
+ padding: 30px;
686
+ border-radius: 10px;
687
+ backdrop-filter: blur(5px);
688
+ -webkit-backdrop-filter: blur(5px);
689
+ }
690
+
691
+ .light-mode .education-item {
692
+ background: rgba(0, 0, 0, 0.03);
693
+ color: #333;
694
+ }
695
+
696
+ .education-item h3 {
697
+ color: #00ffff;
698
+ margin-top: 0;
699
+ margin-bottom: 10px;
700
+ }
701
+ </style> -->
702
+
703
+ <section id="contact" class="contact">
704
+ <div class="container">
705
+ <h2 class="section-title">Let's Connect!</h2>
706
+ <p class="contact-message">Open to AI/ML projects, collaborations, and research opportunities. Let's discuss how AI can transform the world!</p>
707
+ <div class="contact-info">
708
+ <p><i class="fas fa-map-marker-alt"></i> Pakistan</p>
709
+ <p><i class="fas fa-envelope"></i> <a href="mailto:[email protected]">[email protected]</a></p>
710
+ <p><i class="fas fa-phone"></i> <a href="tel:+923261087203">+92 326 1087203</a></p>
711
+ <p><i class="fab fa-linkedin"></i> <a href="https://www.linkedin.com/in/abdul-haseeb-980075323/" target="_blank">LinkedIn</a></p>
712
+ <p><i class="fab fa-github"></i> <a href="https://github.com/abdul-haseeb-0" target="_blank">GitHub</a></p>
713
+ </div>
714
+ </div>
715
+ </section>
716
+ <style>
717
+ .contact {
718
+ padding: 80px 0;
719
+ background: linear-gradient(135deg, #222, #1a1a1a);
720
+ color: #f0f0f0;
721
+ text-align: center;
722
+ }
723
+
724
+ .contact .container {
725
+ max-width: 700px;
726
+ margin: 0 auto;
727
+ padding: 0 20px;
728
+ }
729
+
730
+ .contact-message {
731
+ font-size: 1.2em;
732
+ margin-bottom: 30px;
733
+ }
734
+
735
+ .contact-info p {
736
+ font-size: 1.1em;
737
+ margin-bottom: 15px;
738
+ }
739
+
740
+ .contact-info a {
741
+ color: #00ffff;
742
+ text-decoration: none;
743
+ transition: color 0.3s ease;
744
+ }
745
+
746
+ .contact-info a:hover {
747
+ color: #fff;
748
+ }
749
+
750
+ .contact-info i {
751
+ margin-right: 10px;
752
+ color: #00ffff;
753
+ }
754
+ </style>
755
+
756
+ <footer class="footer">
757
+ <div class="container">
758
+ <p>&copy; 2025 Abdul Haseeb. All Rights Reserved. Portfolio Designed with ❤️</p>
759
+ </div>
760
+ </footer>
761
+ <style>
762
+ .footer {
763
+ background-color: #1a1a1a;
764
+ color: #f0f0f0;
765
+ text-align: center;
766
+ padding: 30px 0;
767
+ font-size: 0.9em;
768
+ }
769
+
770
+ .footer .container {
771
+ max-width: 960px;
772
+ margin: 0 auto;
773
+ padding: 0 20px;
774
+ }
775
+ </style>
776
+
777
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
778
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
779
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
780
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
781
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
782
+ <script src="script.js"></script>
783
+
784
+ <script>
785
+ AOS.init({
786
+ once: true, // Whether animation should happen only once - while scrolling down
787
+ duration: 1000, // Values from 0 to 3000, with step 50ms
788
+ easing: 'ease-out-cubic', // Animation easing
789
+ });
790
+
791
+ // 🌠 Initialize Particles.js
792
+ particlesJS('particles-js', {
793
+ particles: {
794
+ number: { value: 80, density: { enable: true, value_area: 800 } },
795
+ color: { value: '#00ffff' },
796
+ shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 } },
797
+ opacity: { value: 0.5, random: true, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } },
798
+ size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } },
799
+ line_linked: { enable: true, distance: 150, color: '#00ffff', opacity: 0.4, width: 1 },
800
+ move: { enable: true, speed: 2, direction: 'none', random: true, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } }
801
+ },
802
+ interactivity: {
803
+ detect_on: 'canvas',
804
+ events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'push' }, resize: true },
805
+ modes: { grab: { distance: 140, line_linked: { opacity: 1 } }, bubble: { distance: 200, size: 40, duration: 2, opacity: 0.8, speed: 3 }, repulse: { distance: 250, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }
806
+ },
807
+ retina_detect: true
808
+ });
809
+ </script>
810
+
811
+ </body>
812
  </html>