PageSourceSearch

https://talib8335.github.io/

html talib8335.github.io collected 2026-10-03 10:03:17 UTC 77,670 bytes, 1,341 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <!-- Meta Section-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="description" content="Hello! I'm Mohammad Talib, currently pursuing my postgraduate degree in Computer Science & Engineering at the National Institute of Technology Surathkal in Karnataka">
8    <meta name="keywords" content="Mohammad Talib, Software Developer, Web Developer, NIT Surathkal">
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <title>Mohammad Talib</title>
11    <link rel="shortcut icon" href="/public/content/logo.webp" type="image/x-icon">
12    <!-- AnimateCSS -->
13    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
14    <!-- Bootstrap cdn-->
15    <link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
16      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
17      <!-- Google font -->
18      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Corinthia&&?family=Ubuntu">
19      <!-- Hamburger -->
20      <link rel="stylesheet" href="/public/dist/hamburgers/hamburger.css">
21      <!-- BalloonCSS CDN -->
22      <link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">
23      <!-- AOS -->
24      <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
25
26      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
27
28      
29      <!-- Local StyleSheet -->
30      <link rel="stylesheet" href="/public/css/resume.css">
31      <link rel="stylesheet" href="/public/css/waves.css">
32      <link rel="stylesheet" href="/public/css/about.css">
33      <link rel="stylesheet" href="/public/css/contact.css">
34      <link rel="stylesheet" href="/public/css/technical.css">
35      <link rel="stylesheet" href="/public/css/project.css">
36      <link rel="stylesheet" href="/public/css/home.css">
37      <link rel="stylesheet" href="/public/css/preloader.css">
38      <link rel="stylesheet" href="/public/css/navbar.css">
39      <link rel="stylesheet" href="/public/css/styles.css">
40    </head>
41    <body>
42      
43      <!--Pre Loader-->
44      <div class="preloader">
45        <div class="load">
46          <hr class="preloader-hr" />
47          <hr class="preloader-hr" />
48          <hr class="preloader-hr" />
49          <hr class="preloader-hr" />
50        </div>
51      </div>
52      <div class="main-content d-none">
53        
54        <!-- {{>navbar}} -->
55        <nav class="navbar navbar-expand-lg fixed-top navbar-unscrolled">
56          <div class="container-fluid">
57            <a class="navbar-brand" href="#">
58              <img src="/public/content/logo.webp" class="logo rounded-circle w-50" alt="Mohammad Talib logo">
59            </a>
60            <button class="hamburger hamburger--vortex navbar-toggler" type="button" data-bs-toggle="collapse"
61            data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
62            aria-label="Toggle navigation">
63            <span class="hamburger-box">
64              <span class="hamburger-inner"></span>
65            </span>
66            </button>
67            
68            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
69              <div class="navbar-nav ms-auto">
70                <a class="nav-link" aria-label="home link" aria-current="page" href="#home">Home</a>
71                <a class="nav-link" aria-label="about link" href="#about">About</a>
72                <a class="nav-link" aria-label="technical link" href="#technical">Technical Skills</a>
73                <a class="nav-link" aria-label="resume link" href="#resume">Resume</a>
74                <a class="nav-link" aria-label="project link" href="#project">Projects</a>
75                <a class="nav-link" aria-label="contact link" href="#contact">Contact</a>
76                <a id="nav-item" target="_blank" aria-label="Fork" data-balloon-pos="down"
77                  href="https://github.com/Talib8335" class="d-flex align-items-center justify-content-start">
78                  <button class="fork-btn" aria-label="fork btn" class="d-flex justify-content-center align-items-center">
79                  <span class="iconify" data-icon="ph:git-fork" data-width="23" data-height="23"></span>
80                  </button>
81                </a>
82              </div>
83            </div>
84          </div>
85        </nav>
86        <!-- {{>home}} -->
87        <!-- Home Section -->
88        <section id="home" class="section-primary d-flex justify-content-center align-items-end">
89          <div class="content">
90            <div class="row m-0">
91              <div class="col-12 p-0">
92                <div class="row inner-row m-0 ">
93                  <div
94                    class="col-4 p-0 home-cols d-flex align-items-end justify-content-start animate__animated animate__slideInUp">
95                    <img class="side-img side-img-left" data-tilt src="/public/content/coding-left.webp" alt="Left side image">
96                  </div>
97                  <div class="col-4 p-0 home-cols d-flex align-items-center justify-content-center">
98                    <div class="row">
99                      <div
100                        class="col-12 p-0 home-cols d-flex align-items-end justify-content-center animate__animated animate__zoomInDown animate__delay-1s">
101                        <h1 class="home-heading mb-0 text-center">Hi I'm Talib</h1>
102                      </div>
103                      <div
104                        class="col-12 p-0 home-cols home-info-div d-flex align-items-start justify-content-center animate__animated animate__zoomInUp animate__delay-2s">
105                        <h2 class="home-info mb-0 text-center">Personal Portfolio</h1>
106                      </div>
107                    </div>
108                  </div>
109                  <div
110                    class="col-4 p-0 home-cols d-flex align-items-start justify-content-end  animate__animated animate__slideInDown">
111                    <img class="side-img side-img-right" src="/public/content/coding-right.webp" alt="Right side image">
112                  </div>
113                </div>
114              </div>
115              <div class="col-12 p-0 home-cols d-flex align-items-end justify-content-center">
116                <img class="main-img" src="/public/content/programmer.webp" alt=" Programmer image">
117              </div>
118            </div>
119          </div>
120        </section>
121        <!-- {{>wavesPrimary}} -->
122        <div>
123          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
124            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
125            <defs>
126            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
127            </defs>
128            <g class="parallax">
129              <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-400)" />
130              <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
131              <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-200)" />
132              <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-100)"/>
133            </g>
134          </svg>
135        </div>
136        
137        <!-- {{>about}} -->
138        <!-- About Section -->
139        <section id="about" class="section section-secondary d-flex justify-content-center align-items-center">
140          <div class="content content-secondary">
141            <h3 class="section-heading text-center mt-3">About</h3>
142            <div class="row about-row m-0 mt-5 mb-4">
143              <div class="col-lg-6 col-sm-12 col-md-12 p-0 d-flex justify-content-center align-items-center">
144                <img class="rounded-circle profile-img" data-tilt src="/public/content/picp.webp" alt="Talib Profile Picture">
145              </div>
146              <div class="col-lg-6 col-sm-12 col-md-12 p-0 about-info-div d-flex justify-content-center align-items-center">
147                <div class="row d-flex about-info-row justify-content-center align-items-center">
148                  <p class="about-info">
149                    Hello! I'm Mohammad Talib, currently pursuing my postgraduate degree in<span> Computer Science & Engineering</span> at the<span> National Institute of Technology Surathkal (NITK)</span> in Karnataka. My academic and practical experiences have fueled my passion for<span> software Development & architecture</span> and addressing complex challenges in the tech industry.
150                    <br><br>
151            
152                    I excel in vibrant, environments where diverse ideas and perspectives lead to innovative solutions.
153                     My approach is a blend of<span>
153 analysis</span> and<span> problem-solving,</span> aimed at delivering robust and impactful<span> software solutions.</span>
154                     </p>
155                </div>
156              </div>
157            </div>
158            <h3 class="section-sub-heading section-sub-heading-primary">Interests</h3>
159            <div class="row pb-5 m-0">
160              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
161                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
162                  data-aos-delay="100">
163                  &nbsp;&nbsp;&nbsp;
164                  <span class="iconify interests-logo" data-icon="ri:html5-fill" data-width="45" data-height="40"></span>
165                  &nbsp;
166                  <h4 class="mb-0 interests-div-heading">Web Development</h4>
167                </div>
168              </div>
169              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
170                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
171                  data-aos-delay="200">
172                  &nbsp;&nbsp;&nbsp;
173                  <span class="iconify interests-logo" data-icon="akar-icons:bootstrap-fill" data-width="45"
174                  data-height="40"></span>
175                  &nbsp;&nbsp;
176                  <h4 class="mb-0 interests-div-heading">Frontend Development</h4>
177                </div>
178              </div>
179              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
180                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
181                  data-aos-delay="300">
182                  &nbsp;&nbsp;&nbsp;
183                  <span class="iconify interests-logo" data-icon="mdi:database" data-width="45" data-height="40"></span>
184                  &nbsp;
185                  <h4 class="mb-0 interests-div-heading">Backend Development</h4>
186                </div>
187              </div>
188              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
189                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
190                  data-aos-delay="400">
191                  &nbsp;&nbsp;&nbsp;
192                  <span class="iconify interests-logo" data-icon="mdi:cloud-upload" data-width="35"
193                  data-height="40"></span>
194                  &nbsp;
195                  <h4 class="mb-0 interests-div-heading">DevOps</h4>
196                </div>
197              </div>
198              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
199                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
200                  data-aos-delay="400">
201                  &nbsp;&nbsp;&nbsp;
202                  <span class="iconify interests-logo" data-icon="cib:amazon-aws" data-width="35"
203                  data-height="40"></span>
204                  &nbsp;
205                  <h4 class="mb-0 interests-div-heading">Cloud Computing</h4>
206                </div>
207              </div>
208              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
209                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
210                  data-aos-delay="100">
211                  &nbsp;&nbsp;&nbsp;
212                  <span class="iconify interests-logo" data-icon="eos-icons:dns" data-width="35" data-height="40"></span>
213                  &nbsp;
214                  <h4 class="mb-0 interests-div-heading">Domain & DNS</h4>
215                </div>
216              </div>
217              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
218                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
219                  data-aos-delay="200">
220                  &nbsp;&nbsp;&nbsp;
221                  <span class="iconify interests-logo" data-icon="mdi:code-braces" data-width="35" data-height="40"></span>
222                  &nbsp;
223                  <h4 class="mb-0 interests-div-heading">Programming</h4>
224                </div>
225              </div>
226              <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
227                <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
228                  data-aos-delay="400">
229                  &nbsp;&nbsp;&nbsp;
230                  <span class="iconify interests-logo" data-icon="fluent:people-team-16-filled" data-width="35"
231                  data-height="40"></span>
232                  &nbsp;
233                  <h4 class="mb-0 interests-div-heading">Product Management</h4>
234                </div>
235              </div>
236            </div>
237          </div>
238        </section>
239        <!-- {{>wavesSecondary}} -->
240        <div>
241          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
242            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
243            <defs>
244            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
245            </defs>
246            <g class="parallax">
247              <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-200)" />
248              <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
249              <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-400)" />
250              <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-300)"/>
251            </g>
252          </svg>
253        </div>
254        
255        <!-- {{>technicalSkills}} -->
256        <!-- Technical Skills Section -->
257        <section id="technical" class="section section-primary d-flex justify-content-center align-items-center">
258          <div class="content content-primary">
259            <h3 class="section-heading text-center mt-3">Technical Skills</h3>
260            <div class="row skills-row pb-5 m-0">
261              <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
262                <div class="skills-outer-div">
263                  <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="100">
264                    <h4 class="skills-heading">Languages</h4>
265                    <div class="row d-flex justify-content-center align-items-center">
266                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="C"
267                        data-balloon-pos="up">
268                        <span class="iconify skills-icon p-1" style="color: #00589d;" data-icon="teenyicons:c-solid"></span>
269                      </div>
270                      <div class="col-3 m-2 p-0 skills-logo d-flex justify-content-center align-items-center" aria-label="C++"
271                        data-balloon-pos="up">
272                        <span class="iconify skills-icon p-1 " style="background-color: white;"
273                        data-icon="logos:c-plusplus"></span>
274                      </div>
275                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
276                        aria-label="JavaScript" data-balloon-pos="up">
277                        <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
278                        data-icon="logos:javascript"></span>
279                      </div>
280                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
281                        aria-label="Python" data-balloon-pos="up">
282                        <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
283                        data-icon="vscode-icons:file-type-python"></span>
284                      </div>
285                      
286                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Java"
287                        data-balloon-pos="up">
288                        <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
289                        data-icon="logos:java"></span>
290                      </div>
291                    </div>
292                  </div>
293                </div>
294              </div>
295              <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
296                <div class="skills-outer-div">
297                  <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="200">
298                    <h4 class="skills-heading">Frontend</h4>
299                    <div class="row d-flex justify-content-center align-items-center">
300                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
301                        aria-label="Bootstrap" data-balloon-pos="up">
302                        <span class="iconify skills-icon p-1" style="background-color: white;"
303                        data-icon="logos:bootstrap"></span>
304                      </div>
305                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="HTML"
306                        data-balloon-pos="up">
307                        <span class="iconify skills-icon p-1" style="background-color: white;"
308                        data-icon="vscode-icons:file-type-html"></span>
309                      </div>
310                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="CSS"
311                        data-balloon-pos="up">
312                        <span class="iconify skills-icon p-1" style="background-color: white;"
313                        data-icon="vscode-icons:file-type-css"></span>
314                      </div>
315                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
316                        aria-label="TailwindCSS" data-balloon-pos="up">
317                        <span class="iconify skills-icon p-1" style="background-color: white;"
318                        data-icon="logos:tailwindcss-icon"></span>
319                      </div>
320                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
321                        aria-label="Ant Design" data-balloon-pos="up">
322                        <span class="iconify skills-icon p-1" style="background-color: white;"
323                        data-icon="logos:ant-design"></span>
324                      </div>
325                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
326                        aria-label="jQuery" data-balloon-pos="up">
327                        <span class="iconify skills-icon p-1" style="background-color: white;"
328                        data-icon="logos:jquery"></span>
329                      </div>
330                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
331                        aria-label="React" data-balloon-pos="up">
332                        <span class="iconify skills-icon p-1" style="background-color: white;"
333                        data-icon="logos:react"></span>
334                      </div>
335                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
336                        aria-label="Next.js" data-balloon-pos="up">
337                        <span class="iconify skills-icon p-1" style="background-color: white;"
338                        data-icon="logos:nextjs-icon"></span>
339                      </div>
340                      
341                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
342                        aria-label="Material-UI" data-balloon-pos="up">
343                        <span class="iconify skills-icon p-1" style="background-color: white;"
344                        data-icon="logos:material-ui"></span>
345                      </div>
346                      
347                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
348                        aria-label="Pug" data-balloon-pos="up">
349                        <span class="iconify skills-icon p-1" style="background-color: white;"
350                        data-icon="logos:pug"></span>
351                      </div>
352                      
353                    </div>
354                  </div>
355                </div>
356              </div>
357              <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
358                <div class="skills-outer-div">
359                  <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="300">
360                    <h4 class="skills-heading">Backend</h4>
361                    <div class="row d-flex justify-content-center align-items-center">
362                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
363                        aria-label="Django" data-balloon-pos="up">
364                        <span class="iconify skills-icon p-1" style="background-color: white;"
365                        data-icon="vscode-icons:file-type-django"></span>
366                      </div>
367                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
368                        aria-label="expressJS" data-balloon-pos="up">
369                        <span class="iconify skills-icon p-1" style="background-color: white;"
370                        data-icon="simple-icons:express"></span>
371                      </div>
372                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
373                        aria-label="NodeJS" data-balloon-pos="up">
374                        <span class="iconify skills-icon p-1" style="background-color: white;"
375                        data-icon="logos:nodejs-icon"></span>
376                      </div>
377                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
378                         aria-label="TypeScript" data-balloon-pos="up">
379                              <span class="iconify skills-icon p-1" style="background-color: white;"
380                                data-icon="logos:typescript-icon"></span>
381                        </div>
382
383                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
384                        aria-label="Strapi" data-balloon-pos="up">
385                        <span class="iconify skills-icon p-1" style="background-color: white;"
386                        data-icon="logos:strapi-icon"></span>
387                      </div>
388                    </div>
389                  </div>
390                </div>
391              </div>
392              <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12 d-flex justify-content-center">
393                <div class="skills-outer-div">
394                  <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="100">
395                    <h4 class="skills-heading">Cloud & DevOps</h4>
396                    <div class="row d-flex justify-content-center align-items-center">
397                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="AWS"
398                        data-balloon-pos="up">
399                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:aws"></span>
400                      </div>
401                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
402                        aria-label="Vercel" data-balloon-pos="up">
403                        <span class="iconify skills-icon p-1" style="background-color: white;"
404                        data-icon="logos:vercel-icon"></span>
405                      </div>
406                      
407                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
408                        aria-label="DigitalOcean" data-balloon-pos="up">
409                        <span class="iconify skills-icon p-1" style="background-color: white;"
410                        data-icon="logos:digital-ocean" data-width="35" data-height="40"></span>
411                      </div>
412
413                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Docker" data-balloon-pos="up">
414                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:docker" data-width="35" data-height="40"></span>
415                      </div>
416                      
417                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Redis" data-balloon-pos="up">
418                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:redis" data-width="35" data-height="40"></span>
419                      </div>
420
421                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Kubernetes" data-balloon-pos="up">
422                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:kubernetes" data-width="35" data-height="40"></span>
423                      </div>
424                      
425            
426                      
427                      
428                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Grafana" data-balloon-pos="up">
429                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:grafana" data-width="35" data-height="40"></span>
430                      </div>
431                      
432                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Prometheus" data-balloon-pos="up">
433                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:prometheus" data-width="35" data-height="40"></span>
434                      </div>
435
436                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="CloudLinux" data-balloon-pos="up">
437                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:cloudlinux" data-width="35" data-height="40"></span>
438                      </div>
439                      
440                      
441                      
442                      
443                      
444                    </div>
445                  </div>
446                </div>
447              </div>
448              <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
449                <div class="skills-outer-div">
450                  <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="200">
451                    <h4 class="skills-heading">Databases</h4>
452                    <div class="row d-flex justify-content-center align-items-center">
453                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
454                        aria-label="MongoDB" data-balloon-pos="up">
455                        <span class="iconify skills-icon p-1" style="color: #409c39; background-color: white;"
456                        data-icon="simple-icons:mongodb"></span>
457                      </div>
458                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
459                        aria-label="SQLite" data-balloon-pos="up">
460                        <span class="iconify skills-icon p-1" style="background-color: white;"
461                        data-icon="vscode-icons:file-type-sqlite"></span>
462                      </div>
463                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="mySQL"
464                        data-balloon-pos="up">
465                        <span class="iconify skills-icon p-1" style="background-color: white;"
466                        data-icon="logos:mysql-icon"></span>
467                      </div>
468                    </div>
469                  </div>
470                </div>
471              </div>
472              <div class="col-lg-4 col-md-6 mt-5 col-sm-12  d-flex justify-content-center">
473                <div class="skills-outer-div">
474                  <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="300">
475                    <h4 class="skills-heading">Tools</h4>
476                    <div class="row d-flex justify-content-center align-items-center">
477                      <div class="col-3 col-md-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
478                        aria-label="Nginx" data-balloon-pos="up">
479                        <span class="iconify skills-icon p-1" style="background-color: white;"
480                        data-icon="vscode-icons:file-type-nginx"></span>
481                      </div>
482                      <div class="col-3 col-md-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
483                        aria-label="Figma" data-balloon-pos="up">
484                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:figma"></span>
485                      </div>
486                      <div class="col-3 col-md-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
487                        aria-label="Linux" data-balloon-pos="up">
488                        <span class="iconify skills-icon p-1" style="background-color: white;"
489                        data-icon="logos:linux-tux"></span>
490                      </div>
491                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
492                        aria-label="GitHub" data-balloon-pos="up">
493                        <span class="iconify skills-icon p-1" style="background-color: white;"
494                        data-icon="logos:github-icon"></span>
495                      </div>
496                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="Git"
497                        data-balloon-pos="up">
498                        <span class="iconify skills-icon p-1" style="background-color: white;"
499                        data-icon="vscode-icons:file-type-git"></span>
500                      </div>
501                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
502                        aria-label="Replit" data-balloon-pos="up">
503                        <span class="iconify skills-icon p-1" style="background-color: white;"
504                        data-icon="vscode-icons:file-type-light-replit"></span>
505                      </div>
506                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
507                        aria-label="Postman" data-balloon-pos="up">
508                        <span class="iconify skills-icon p-1" style="background-color: white;"
509                        data-icon="logos:postman-icon"></span>
510                      </div>
511                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
512                        aria-label="VScode" data-balloon-pos="up">
513                        <span class="iconify skills-icon p-1" style="background-color: white;"
514                        data-icon="vscode-icons:file-type-vscode"></span>
515                      </div>
516                      <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="XAMPP"
517                        data-balloon-pos="up">
518                        <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:xampp"></span>
519                      </div>
520                    </div>
521                  </div>
522                </div>
523              </div>
524            </div>
525          </div>
526        </section>
527        <!-- {{>wavesPrimary}} -->
528        <div>
529          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
530            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
531            <defs>
532            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
533            </defs>
534            <g class="parallax">
535              <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-400)" />
536              <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
537              <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-200)" />
538              <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-100)"/>
539            </g>
540          </svg>
541        </div>
542        
543        <!-- Modal Structure -->
544        <div id="imageModal" class="modal" style="display: none;">
545          <div class="modal-content">
546            <span class="close" onclick="closeImageModal()">&times;</span>
547            <img id="pdfImagePreview" src="public/certificates/f.webp" alt="PDF Preview" style="width: 80%; height: 80%;">
548          </div>
549        </div>
550        <!-- {{>resume}} -->
551        <!-- Resume Section -->
552        <section id="resume" class="section section-secondary d-flex justify-content-center align-items-center">
553          <div class="content content-secondary">
554            <h3 class="section-heading text-center mt-3">Resume</h3>
555            <div class="row pb-5 m-0">
556              <div class="col-lg-6  col-md-12 col-sm-12">
557                <div class="row d-flex justify-content-center m-0">
558                  <div class="resume" data-aos="fade-up" data-aos-delay="100">
559                    <h4 class="resume-div-heading d-flex align-items-center">
560                    <span class="iconify resume-div-heading-icon" data-icon="zondicons:education"></span>Education
561                    </h4>
562                    <ul>
563                      <li class="resume-li">
564                        <span class="resume-div-sub-heading">Master of Technology (M.TECH) - CSE</span>
565                        <span class="resume-div-content">
566                          <p class="mb-0">
567                            <a href="https://www.nitk.ac.in/" target="_blank" style="text-decoration: none; color: inherit;">
568                              Institute of Technology Surathkal, Karnataka (Aug 2023 - Present)
569                            </a>
570                          </p>
571                        </span>
572                      </li>
573                      
574                      <li class="resume-li">
575                        <span class="resume-div-sub-heading">Bachelor of Technology (B.TECH) - CSE</span>
576                        <span class="resume-div-content">
577                          <p class="mb-0">
578                            <a href="https://www.igef.net/" target="_blank" style="text-decoration: none; color: inherit;">
579                              Indo Global College Of Engineering, Chandigarh (Aug 2017 - April 2021)
580                            </a>
581                          </p>
582                        </span>
583                      </li>
584                      <li class="resume-li">
585                        <span class="resume-div-sub-heading">Senior Secondary (CBSE)</span>
586                        <span class="resume-div-content">
587                          <p class="mb-0">
588                            <a href="https://vcssbp.odishavikash.com/" target="_blank" style="text-decoration: none; color: inherit;">
589                              Vikash The Concept School Sason, Sambalpur (Aug 2015 - Jun 2017)
590                            </a>
591                          </p>
592                        </span>
593                      </li>
594                      <li class="resume-li">
595                        <span class="resume-div-sub-heading">Secondary (CBSE)</span>
596                        <span class="resume-div-content">
597                          <p class="mb-0">
598                            <a href="https://davpsbasundhara.org/" target="_blank" style="text-decoration: none; color: inherit;">
599                              DAV Public School, MCL Basundhara Area (Jun 2013 - Jul 2015)
600                            </a>
601                          </p>
602                        </span>
603                      </li>
604                    </ul>
605                  </div>
606                </div>
607                <div class="row d-flex justify-content-center m-0">
608                </div>
609                <div class="row d-flex justify-content-center m-0">
610                  <div class="resume" data-aos="fade-up" data-aos-delay="100">
611                    <h4 class="resume-div-heading d-flex align-items-center">
612                    <span class="iconify resume-div-heading-icon" data-icon="fluent-mdl2:party-leader"></span>Position Of
613                    Responsibilities
614                    </h4>
615                    <ul>
616                      <li class="resume-li">
617                        <span class="resume-div-sub-heading">National Institute of Technology Surathkal</span>
618                        <span class="resume-div-content">
619                          <p class="mb-1">Teaching Assistance at NITK</p>
620                          <span class="date-badge d-inline-flex align-items-center">
621                            Sep 2024 - June 2025
622                          </span>
623                        </span>
624                      </li>
625                      <li class="resume-li">
626                        <span class="resume-div-sub-heading">Indo Global College of Engineering</span>
627                        <span class="resume-div-content">
628                          <p class="mb-1">Event Management Team</p>
629                          <span class="date-badge d-inline-flex align-items-center">
630                            Sep 2019 - March 2020
631                          </span>
632                        </div>
633                      </span>
634                    </li>
635                  </ul>
636                </div>
637                
638              </div>
639              <div class="col-lg-6 col-md-12 col-sm-12">
640                <div class="row d-flex justify-content-center m-0">
641                  <div class="resume" data-aos="fade-up" data-aos-delay="100">
642                    <h3 class="resume-div-heading d-flex align-items-center">
643                    <span class="iconify resume-div-heading-icon"
644                    data-icon="fluent:certificate-20-filled"></span>Certifications
645                    </h3>
646                    <ul>
647                      <li class="resume-li">
648                        <span class="resume-div-sub-heading">Event on Emerging Technologies For Sustainble Development</span>
649                        <span class="resume-div-content">
650                          <p class="mb-1">
651                            Issued by
652                            <a href="https://www.igef.net/" target="_blank" style="text-decoration: none; color: inherit;">
653                              IGCE & IBM
654                            </a>
655                            <a href="javascript:void(0);" onclick="showImageModal('IBM')" style="text-decoration: none; color: inherit; margin-left: 10px;" aria-label="View Certificate">
656                              <span class="iconify" data-icon="mdi:eye" data-width="24" data-height="24"></span>
657                            </a>
658                          </p>
659                          <span class="date-badge">September 2020</span>
660                        </span>
661                      </li>
662                      
663                      <li class="resume-li">
664                        <span class="resume-div-sub-heading">Advanced Diploma in Software Engineering (ADSE)</span>
665                        <span class="resume-div-content">
666                          <p class="mb-1">
667                            Issued by
668                            <a href="https://www.wapinstitute.com/" target="_blank" style="text-decoration: none; color: inherit;">
669                              Wap Institute
670                            </a>
671                            <a href="javascript:void(0);" onclick="showImageModal('adseModal')" style="text-decoration: none; color: inherit; margin-left: 10px;" aria-label="View Certificate">
672                              <span class="iconify" data-icon="mdi:eye" data-width="24" data-height="24"></span>
673                            </a>
674                          </p>
675                          <span class="date-badge">April 2020</span>
676                        </span>
677                      </li>
678                      
679                      <li class="resume-li">
680                        <span class="resume-div-sub-heading">Programming and Data Structures Deep Dive in C++</span>
681                        <span class="resume-div-content">
682                          <p class="mb-1">
683                            Issued by
684                            <a href="https://www.udemy.com/" target="_blank" style="text-decoration: none; color: inherit;">
685                              Udemy
686                            </a>
687                            <a href="javascript:void(0);
687" onclick="showImageModal('cppModal')" style="text-decoration: none; color: inherit; margin-left: 10px;" aria-label="View Certificate">
688                              <span class="iconify" data-icon="mdi:eye" data-width="24" data-height="24"></span>
689                            </a>
690                          </p>
691                          <span class="date-badge">January 2020</span>
692                        </span>
693                      </li>
694                      <li class="resume-li">
695                        <span class="resume-div-sub-heading">Python Training</span>
696                        <span class="resume-div-content">
697                          <p class="mb-1">
698                            Issued by
699                            <a href="https://spoken-tutorial.org/" target="_blank" style="text-decoration: none; color: inherit;">
700                              Spoken Tutorial by IIT Bombay
701                            </a>
702                            <a href="javascript:void(0);" onclick="showImageModal('python')" style="text-decoration: none; color: inherit; margin-left: 10px;" aria-label="View Certificate">
703                              <span class="iconify" data-icon="mdi:eye" data-width="24" data-height="24"></span>
704                            </a>
705                          </p>
706                          <span class="date-badge">November 2019</span>
707                        </span>
708                      </li>
709                      
710                      <li class="resume-li">
711                        <span class="resume-div-sub-heading">Workshop Training in Web Technologies</span>
712                        <span class="resume-div-content">
713                          <p class="mb-1">
714                            Issued by
715                            <a href="https://www.wapinstitute.com/" target="_blank" style="text-decoration: none; color: inherit;">
716                              Wap Institute
717                            </a>
718                            <a href="javascript:void(0);" onclick="showImageModal('workshop')" style="text-decoration: none; color: inherit; margin-left: 10px;" aria-label="View Certificate">
719                              <span class="iconify" data-icon="mdi:eye" data-width="24" data-height="24"></span>
720                            </a>
721                          </p>
722                          <span class="date-badge">September 2019</span>
723                        </span>
724                      </li>
725                    </ul>
726                  </div>
727                </div>
728               <!-- <div class="resume" data-aos="fade-up" data-aos-delay="200">
729                  <h3 class="resume-div-heading d-flex align-items-center text-justify">
730                  <span class="iconify resume-div-heading-icon"
731                  data-icon="material-symbols:home-work-outline-rounded"></span>Work Experience
732                  </h3>
733                </div> -->
734                
735              </div>
736            </div>
737          </div>
738        </section>
739        <!-- {{>wavesSecondary}} -->
740        <div>
741          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
742            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
743            <defs>
744            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
745            </defs>
746            <g class="parallax">
747              <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-200)" />
748              <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
749              <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-400)" />
750              <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-300)"/>
751            </g>
752          </svg>
753        </div>
754        
755        <!-- {{>projects}} -->
756        <!-- Technical Skills Section -->
757        <section id="project" class="section section-primary d-flex justify-content-center align-items-center">
758          <div class="content content-primary">
759            <h3 class="section-heading text-center mt-3">Projects</h3>
760            <div class="row skills-row pb-5 m-0">
761              <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
762                <div class="project-outer-div d-flex justify-content-center">
763                  <div class="card-body project-div" data-aos="fade-up" data-aos-delay="100">
764                    <figure class="project-figure">
765                      <img src="/public/content/port1.webp" class="project-img" alt="Portfolio Project">
766                    </figure>
767                    <div class="row pt-2">
768                      <div class="col-6 d-flex align-items-center">
769                        <h4 class="project-heading mb-0">
770                        Personal Portfolio
771                        </h4>
772                      </div>
773                      <div class="col-6 d-flex justify-content-end">
774                        <a href="https://github.com/Talib8335/Talib8335.github.io" target="_blank"
775                          aria-label="Source Code" data-balloon-pos="up">
776                          <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled"
777                          data-width="35" data-height="35"></span>
778                        </a>
779                        &nbsp;&nbsp;&nbsp;
780                        <a href="https://talib8335.github.io/" target="_blank" aria-label="Live Project"
781                          data-balloon-pos="up">
782                          <span class="iconify iconify-redirect-icon" data-icon="charm:link-external"
783                          data-width="35" data-height="35"></span>
784                        </a>
785                      </div>
786                    </div>
787                    <div class="row pt-1">
788                      <h5>
789                      <span
790                        class="d-inline-flex align-items-center justify-content-center built-with-badge hbs-badge">
791                        <span class="iconify built-with-icons"
792                        data-icon="simple-icons:handlebarsdotjs"></span>
793                        &nbsp;
794                        Handlebars
795                      </span>
796                      <span
797                        class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
798                        <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
799                        &nbsp;
800                        HTML
801                      </span>
802                      <span
803                        class="d-inline-flex align-items-center justify-content-center built-with-badge bootstrap-badge">
804                        <span class="iconify built-with-icons" data-icon="akar-icons:bootstrap-fill"></span>
805                        &nbsp;
806                        Bootstrap
807                      </span>
808                      <span
809                        class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
810                        <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
811                        &nbsp;
812                        CSS
813                      </span>
814                      <span
815                        class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
816                        <span class="iconify built-with-icons" data-icon="simple-icons:javascript"></span>
817                        &nbsp;
818                        JavaScript
819                      </span>
820                      <span
821                        class="d-inline-flex align-items-center justify-content-center built-with-badge jquery-badge">
822                        <span class="iconify built-with-icons" data-icon="akar-icons:jquery-fill"></span>
823                        &nbsp;
824                        jQuery
825                      </span>
826                      <!-- Iconify -->
827                     <span class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
828                      <i class="fas fa-icons"></i> <!-- Font Awesome icon for 'icons' -->
829                      &nbsp;
830                      Iconify
831                      </span>
832
833
834                    <!-- Vanilla Tilt -->
835                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge tailwindcss-badge">
836                      <i class="fas fa-tilt"></i> <!-- This icon does not exist in Font Awesome; replace with an appropriate icon like 'cube' -->
837                      <i class="fas fa-cube"></i> <!-- Alternative: Font Awesome 'cube' icon for 3D effect -->
838                      &nbsp;
839                      Vanilla Tilt
840                    </span>
841
842                  <!-- AOS -->
843                  <span class="d-inline-flex align-items-center justify-content-center built-with-badge nodejs-badge">
844                    <i class="fas fa-wave-square"></i> <!-- Font Awesome icon for 'wave-square' which can suggest animation -->
845                    &nbsp;
846                    AOS
847                  </span>
848                </h5>
849              </div>
850                    <p class="project-info">
851                      Single Page Responsive Portfolio Website Using HTML CSS & JavaScript, with dark theme.
852                      Compatible with all mobile devices, with a beautiful and pleasant user interface
853                    </p>
854                    <span class="date-badge">
855                      June 2024 - Aug 2024
856                    </span>
857                </div>
858              </div>
859           </div>
860
861
862           <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
863            <div class="project-outer-div d-flex justify-content-center">
864              <div class="card-body project-div" data-aos="fade-up" data-aos-delay="200">
865                <figure class="project-figure">
866                  <img src="/public/content/offload.webp" class="project-img" alt="ecom project">
867                </figure>
868                <div class="row pt-2">
869                  <div class="col-6 d-flex align-items-center">
870                    <h4 class="project-heading mb-0">
871                    Task-Offloading
872                    </h4>
873                  </div>
874                  <div class="col-6 d-flex justify-content-end">
875                    <a href="https://github.com/Talib8335/Task-Offloading.git" target="_blank" aria-label="Source Code"
876                      data-balloon-pos="up">
877                      <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled"
878                      data-width="35" data-height="35"></span>
879                    </a>
880                  </div>
881                </div>
882                <div class="row pt-1">
883                  <h5>
884                  
885                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge python-badge">
886                        <span class="iconify built-with-icons" data-icon="simple-icons:python"></span>
887                        &nbsp;Python
888                    </span>
889                
890                  <span class="d-inline-flex align-items-center justify-content-center built-with-badge docker-badge">
891                    <span class="iconify built-with-icons" data-icon="simple-icons:docker"></span>
892                    &nbsp;Docker
893                  </span>
894                  <span class="d-inline-flex align-items-center justify-content-center built-with-badge redis-badge">
895                    <span class="iconify built-with-icons" data-icon="simple-icons:redis"></span>
896                    &nbsp;Redis
897                  </span>
898                  
899
900
901
902                  </h5>
903                </div>
904                <p class="project-info">
905                This project shows the implementation of a task offloading system designed for IoT devices, leveraging fog and cloud nodes. The system dynamically selects the best node for task offloading using a Weighted Formula Method. The goal is to improve performance and reduce latency with the help of Redis caching. The entire project is containerized using Docker for easy deployment and management.
906
907
908                </p>
909                <span class="date-badge">
910                    Aug 2024 - Oct 2024
911                </span>
912              </div>
913            </div>
914          </div>
915         
916
917           <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
918            <div class="project-outer-div d-flex justify-content-center">
919              <div class="card-body project-div" data-aos="fade-up" data-aos-delay="200">
920                <figure class="project-figure">
921                  <img src="/public/content/one.webp" class="project-img" alt="ecom project">
922                </figure>
923                <div class="row pt-2">
924                  <div class="col-6 d-flex align-items-center">
925                    <h4 class="project-heading mb-0">
926                    Project Management
927                    </h4>
928                  </div>
929                  <div class="col-6 d-flex justify-content-end">
930                    <a href="https://github.com/Talib8335/Project-Management-App.git" target="_blank" aria-label="Source Code"
931                      data-balloon-pos="up">
932                      <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled"
933                      data-width="35" data-height="35"></span>
934                    </a>
935                  </div>
936                </div>
937                <div class="row pt-1">
938                  <h5>
939                  
940                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge react-badge">
941                      <span class="iconify built-with-icons" data-icon="simple-icons:react"></span>
942                      &nbsp;React
943                    </span>
944                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge antd-badge">
945                      <span class="iconify built-with-icons" data-icon="simple-icons:antd"></span>
946                      &nbsp;Ant Design
947                    </span>
948                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge typescript-badge">
949                      <span class="iconify built-with-icons" data-icon="simple-icons:typescript"></span>
950                      &nbsp;TypeScript
951                    </span>
952                  <span
953                    class="d-inline-flex align-items-center justify-content-center built-with-badge mongodb-badge">
954                    <span class="iconify built-with-icons" data-icon="simple-icons:mongodb"></span>
955                    &nbsp;
956                    MongoDB
957                  </span>
958                  <span
959                    class="d-inline-flex align-items-center justify-content-center built-with-badge nodejs-badge">
960                    <span class="iconify built-with-icons" data-icon="fontisto:nodejs"></span>
961                    &nbsp;
962                    Node.js
963                  </span>
964                  
965                  <span class="d-inline-flex align-items-center justify-content-center built-with-badge expressjs-badge">
966                    <span class="iconify built-with-icons" data-icon="simple-icons:express"></span>
967                    &nbsp;
968                    Express.js
969                  </span>
970                  
971                
972                  <span class="d-inline-flex align-items-center justify-content-center built-with-badge docker-badge">
973                    <span class="iconify built-with-icons" data-icon="simple-icons:docker"></span>
974                    &nbsp;Docker
975                  </span>
976                  <span class="d-inline-flex align-items-center justify-content-center built-with-badge redis-badge">
977                    <span class="iconify built-with-icons" data-icon="simple-icons:redis"></span>
978                    &nbsp;Redis
979                  </span>
980                  
981
982
983
984                  </h5>
985                </div>
986                <p class="project-info">
987                  Onework is a project management application designed to help teams efficiently manage tasks, communicate in real-time, and schedule meetings and collaborate through video calls. It features a microservices architecture and advanced integrations for task management and communication.
988                  
989                </p>
990                <span class="date-badge">
991                  March 2024 - May 2024
992                </span>
993              </div>
994            </div>
995          </div>
996         <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
997                <div class="project-outer-div d-flex justify-content-center">
998                  <div class="card-body project-div" data-aos="fade-up" data-aos-delay="200">
999                    <figure class="project-figure">
1000                      <img src="/public/content/ecom.webp" class="project-img" alt="ecom project">
1001                    </figure>
1002                    <div class="row pt-2">
1003                      <div class="col-6 d-flex align-items-center">
1004                        <h4 class="project-heading mb-0">
1005                        Ecommerce Platform
1006                        </h4>
1007                      </div>
1008                      <div class="col-6 d-flex justify-content-end">
1009                        <a href="https://github.com/Talib8335/Ecommerce-project" target="_blank" aria-label="Source Code"
1010                          data-balloon-pos="up">
1011                          <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled"
1012                          data-width="35" data-height="35"></span>
1013                        </a>
1014                      </div>
1015                    </div>
1016                    <div class="row pt-1">
1017                      <h5>
1018                      
1019                      <span
1020                        class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
1021                        <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
1022                        &nbsp;
1023                        HTML
1024                      </span>
1025                      <span
1026                        class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
1027                        <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
1028                        &nbsp;
1029                        CSS
1030                      </span>
1031                      <span class="d-inline-flex align-items-center justify-content-center built-with-badge tailwindcss-badge">
1032                        <span class="iconify built-with-icons" data-icon="logos:tailwindcss-icon"></span>
1033                        &nbsp;
1034                        Tailwind CSS
1035                      </span>
1036                      <span
1037                        class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
1038                        <span class="iconify built-with-icons" data-icon="simple-icons:javascript"></span>
1039                        &nbsp;
1040                        JavaScript
1041                      </span>
1042                      <span
1043                        class="d-inline-flex align-items-center justify-content-center built-with-badge jquery-badge">
1044                        <span class="iconify built-with-icons" data-icon="akar-icons:jquery-fill"></span>
1045                        &nbsp;
1046                        jQuery
1047                      </span>
1048                      <span
1049                        class="d-inline-flex align-items-center justify-content-center built-with-badge mongodb-badge">
1050                        <span class="iconify built-with-icons" data-icon="simple-icons:mongodb"></span>
1051                        &nbsp;
1052                        MongoDB
1053                      </span>
1054                      <span
1055                        class="d-inline-flex align-items-center justify-content-center built-with-badge nodejs-badge">
1056                        <span class="iconify built-with-icons" data-icon="fontisto:nodejs"></span>
1057                        &nbsp;
1058                        NodeJS
1059                      </span>
1060                      
1061                      <span class="d-inline-flex align-items-center justify-content-center built-with-badge expressjs-badge">
1062                        <span class="iconify built-with-icons" data-icon="simple-icons:express"></span>
1063                        &nbsp;
1064                        Express.js
1065                      </span>
1066
1067                      <span class="d-inline-flex align-items-center justify-content-center built-with-badge nodemon-badge">
1068                        <span class="iconify built-with-icons" data-icon="vscode-icons:file-type-nodemon"></span>
1069                        &nbsp;
1070                        Nodemon
1071                      </span>
1072
1073                      </h5>
1074                    </div>
1075                    <p class="project-info">
1076                      This is a basic eCommerce platform that follows the MVC architecture and implements a Role-Based Access Control (RBAC) design pattern. It also includes integration with a payment gateway to facilitate online transactions.
1077                      
1078                    </p>
1079                    <span class="date-badge">
1080                      May 2024 - June 2024
1081                    </span>
1082                  </div>
1083                </div>
1084              </div>
1085
1086
1087
1088              <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
1089                <div class="project-outer-div d-flex justify-content-center">
1090                  <div class="card-body project-div" data-aos="fade-up" data-aos-delay="200">
1091                    <figure class="project-figure">
1092                      <img src="/public/content/picdrive.webp" class="project-img" alt="ecom project">
1093                    </figure>
1094                    <div class="row pt-2">
1095                      <div class="col-6 d-flex align-items-center">
1096                        <h4 class="project-heading mb-0">
1097                        PicDrive Application
1098                        </h4>
1099                      </div>
1100                      <div class="col-6 d-flex justify-content-end">
1101                        <a href="https://github.com/Talib8335/PicDrive.git" target="_blank" aria-label="Source Code"
1102                          data-balloon-pos="up">
1103                          <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled"
1104                          data-width="35" data-height="35"></span>
1105                        </a>
1106                      </div>
1107                    </div>
1108                    <div class="row pt-1">
1109                      <h5>
1110                      
1111                      <span
1112                        class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
1113                        <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
1114                        &nbsp;
1115                        HTML
1116                      </span>
1117                      <span
1118                        class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
1119                        <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
1120                        &nbsp;
1121                        CSS
1122                      </span>
1123                      <span
1124                        class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
1125                        <span class="iconify built-with-icons" data-icon="simple-icons:javascript"></span>
1126                        &nbsp;
1127                        JavaScript
1128                      </span>
1129                      <span
1130                        class="d-inline-flex align-items-center justify-content-center built-with-badge jquery-badge">
1131                        <span class="iconify built-with-icons" data-icon="akar-icons:jquery-fill"></span>
1132                        &nbsp;
1133                        jQuery
1134                      </span>
1135                      <span
1136                      class="d-inline-flex align-items-center justify-content-center built-with-badge bootstrap-badge">
1137                      <span class="iconify built-with-icons" data-icon="akar-icons:bootstrap-fill"></span>
1138                      &nbsp;
1139                      Bootstrap
1140                    </span>
1141
1142                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge php-badge">
1143  <span class="iconify built-with-icons" data-icon="simple-icons:php"></span>
1144  &nbsp;PHP
1145</span>
1146<span class="d-inline-flex align-items-center justify-content-center built-with-badge mysql-badge">
1147  <span class="iconify built-with-icons" data-icon="simple-icons:mysql"></span>
1148  &nbsp;MySQL
1149</span>
1150<span class="d-inline-flex align-items-center justify-content-center built-with-badge ajax-badge">
1151  <span class="iconify built-with-icons" data-icon="simple-icons:ajax"></span>
1152  &nbsp;AJAX
1153</span>
1154<span class="d-inline-flex align-items-center justify-content-center built-with-badge sql-badge">
1155  <span class="iconify built-with-icons" data-icon="simple-icons:sql"></span>
1156  &nbsp;SQL
1157</span>
1158
1159                     
1160                     
1161
1162                     </h5>
1163                    </div>
1164                    <p class="project-info">
1165                      PICDRIVE Application is designed to save and manage important images. Similar to Google Drive, PICDRIVE allows users to upload their photos, but it offers more flexibility by enabling direct edits and changes to files after upload, making it a more versatile tool for image management.
1166                      
1167                    </p>
1168                    <span class="date-badge">
1169                      Jan 2021 - March 2021
1170                    </span>
1171                  </div>
1172                </div>
1173              </div>
1174
1175
1176            </div>
1177          </div>
1178        </section>
1179        <!-- {{>wavesPrimary}} -->
1180        <div>
1181          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
1182            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
1183            <defs>
1184            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
1185            </defs>
1186            <g class="parallax">
1187              <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-400)" />
1188              <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
1189              <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-200)" />
1190              <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-100)"/>
1191            </g>
1192          </svg>
1193        </div>
1194        
1195        <!-- {{>contact}} -->
1196        <!-- Contact Section -->
1197        <section id="contact" class="section section-secondary d-flex justify-content-center align-items-center">
1198          <div class="content">
1199            <h5 class="section-heading text-center mt-3">Contact</h5>
1200            <div class="row contact-row m-0">
1201              <div class="col-lg-6 col-md-6 col-sm-12 mt-4">
1202                <form id="form" action="" onsubmit="return false">
1203                  <div class="form-floating mb-3">
1204                    <input type="text" class="form-control" id="user_name" placeholder="Name" required>
1205                    <label for="floatingName">Name</label>
1206                  </div>
1207                  <div class="form-floating mb-3">
1208                    <input type="email" class="form-control" id="user_email" placeholder="Email" required>
1209                    <label for="floatingEmail">Email</label>
1210                  </div>
1211                  <div class="form-floating">
1212                    <textarea class="form-control" placeholder="Message" id="user_message" style="height: 150px"
1213                    required></textarea>
1214                    <label for="floatingTextarea">Message</label>
1215                  </div>
1216                  <div class="row pt-3 d-flex align-items-center">
1217                    <div class="col-6">
1218                      <a href="mailto:[email protected]" aria-label="mail link" style="text-decoration: none; color: var(--clr-accent-700)">Send me
1219                      mail directly</a>
1220                    </div>
1221                    <div class="col-6 d-flex justify-content-end align-items-center">
1222                      <button id="send-btn" aria-label="send button" type="submit" class="send-btn d-flex justify-content-center align-items-center">
1223                      Send
1224                      &nbsp;
1225                      <span class="iconify" data-icon="ri:send-plane-fill" data-width="20" data-height="20"></span>
1226                      </button>
1227                    </div>
1228                  </div>
1229                </form>
1230                <div class="toast-container position-fixed bottom-0 end-0 p-5 d-block" style="z-index: 15;">
1231                  <div id="toast" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
1232                    <div class="d-flex">
1233                      <div class="toast-body">
1234                        Messsage sent
1235                      </div>
1236                      <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
1237                    </div>
1238                  </div>
1239                </div>
1240              </div>
1241              <div class="col-lg-6 col-md-6 col-sm-12 mt-4">
1242                <div class="row">
1243                  <div class="col-12 text-end">
1244                    <h6 class="section-sub-heading">Email</h6>
1245                    <p class="mb-5">[email protected]</p>
1246                  </div>
1247                  <div class="col-12 text-end">
1248                    <h6 class="section-sub-heading">Address</h6>
1249                    <p class="m-0">MCL Basundhara Area, Sundergarh</p>
1250                    <p class="mb-5">India</p>
1251                  </div>
1252                  <div class="col-12 text-end d-flex justify-content-end">
1253                    <div class="row">
1254                      <div class="col-12">
1255                        <h6 class="section-sub-heading">Connect with me</h6>
1256                      </div>
1257                      <div class="col-12">
1258                        <a class="social-links" href="https://github.com/Talib8335" aria-label="github link" target="_blank">
1259                          <span class="iconify social-links-logo" data-icon="akar-icons:github-fill" data-width="45"
1260                          data-height="45"></span>
1261                        </a>
1262                        <a class="m-3 mt-0 mb-0 social-links" href="https://www.linkedin.com/in/talibnetwork/" aria-label="linkedin link" target="_blank">
1263                          <span class="iconify social-links-logo" data-icon="logos:linkedin-icon" data-width="45"
1264                          data-height="45"></span>
1265                        </a>
1266                        <a class="social-links " href="https://www.instagram.com/__mohammad.talib__" aria-label="instagram link" target="_blank">
1267                          <span class="iconify social-links-logo"
1268                            style="color: #ffffff; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);"
1269                          data-icon="akar-icons:instagram-fill" data-width="45" data-height="45"></span>
1270                        </a>
1271                      </div>
1272                    </div>
1273                  </div>
1274                </div>
1275              </div>
1276            </div>
1277          </div>
1278        </section>
1279        <!-- <footer> -->
1280        <div class="footer d-flex justify-content-center align-items-center">
1281          <div class="row" style="margin-right: 0; margin-left: 0">
1282            <div class="col-12 d-flex justify-content-center mt-4 mb-4">
1283              <p class="contrib-info m-0" class="m-0">Made with ❤️ by Mohammad Talib</p>
1284            </div>
1285          </div>
1286        </div>
1287        <button id="toggle-theme" class="rounded-circle d-flex align-items-center justify-content-center">
1288        <span class="iconify iconify-navbar" data-icon="ri:moon-fill" data-width="30" data-height="30"
1289        style="color: white"></span>
1290        </button>
1291        <a href="#top" id="rollUp" class="rounded-circle init btn">
1292          <span class="iconify" data-icon="material-symbols:keyboard-arrow-up-rounded" data-width="40" data-height="40"
1293          style="color: white;"></span>
1294        </a>
1295      </div>
1296      <!-- Boostrap CDN -->
1297      
1297<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
1298      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
1299      </script>
1299
1300      
1300<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
1301      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
1302      </script>
1302
1303      <!-- emailjs -->
1304      
1304<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
1305      </script>
1305
1306      
1306<script type="text/javascript">
1307      (function () {
1308      emailjs.init("");
1309      })();
1310      </script>
1310
1311      <!-- iconify -->
1312      
1312<script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>
1312
1313      <!-- jQuery -->
1314      
1314<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1314
1315      
1315<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
1316      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
1317      </script>
1317
1318      <!-- AOS -->
1319      
1319<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
1319
1320      
1320<script>
1321      document.addEventListener("DOMContentLoaded", function() {
1322      AOS.init();
1323      });
1324      </script>
1324
1325      <!-- Local JavaScript -->
1326      
1326<script src="/public/js/index.js"></script>
1326
1327      
1327<script src="/public/js/rollUp.js"></script>
1327
1328      
1328<script src="/public/js/toggleTheme.js"></script>
1328
1329      <!-- TiltJS -->
1330      
1330<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js" crossorigin="anonymous">
1331      </script>
1331
1332      
1332<script src="https://unpkg.com/[email protected]/dest/tilt.jquery.min.js" crossorigin="anonymous"></script>
1332
1333      
1333<script>
1334      createImageModal('cppModal', 'public/certificates/udemy.webp');
1335      createImageModal('adseModal', 'public/certificates/f.webp');
1336      createImageModal('workshop', 'public/certificates/workshop.webp');
1337      createImageModal('IBM', 'public/certificates/indo.webp');
1338      createImageModal('python', 'public/certificates/python.webp');
1339      </script>
1339
1340    </body>
1341  </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.