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 164 <span class="iconify interests-logo" data-icon="ri:html5-fill" data-width="45" data-height="40"></span> 165 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 173 <span class="iconify interests-logo" data-icon="akar-icons:bootstrap-fill" data-width="45" 174 data-height="40"></span> 175 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 183 <span class="iconify interests-logo" data-icon="mdi:database" data-width="45" data-height="40"></span> 184 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 192 <span class="iconify interests-logo" data-icon="mdi:cloud-upload" data-width="35" 193 data-height="40"></span> 194 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 202 <span class="iconify interests-logo" data-icon="cib:amazon-aws" data-width="35" 203 data-height="40"></span> 204 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 212 <span class="iconify interests-logo" data-icon="eos-icons:dns" data-width="35" data-height="40"></span> 213 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
221 <span class="iconify interests-logo" data-icon="mdi:code-braces" data-width="35" data-height="40"></span> 222 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 230 <span class="iconify interests-logo" data-icon="fluent:people-team-16-filled" data-width="35" 231 data-height="40"></span> 232 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()">×</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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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.