index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="description" content="Boris Edison is a full-stack developer and open-source contributor, specializing in JavaScript, web development, 
  and modern tech stacks.">

  <meta name="keywords" content="Boris Edison, software developer, pandevs.org, pandevsorg, pandevs org, rumblesheet.js, rumblesheetjs, rumblesheet js, RumblesheetJS, Rumblesheet.JS,
    full-stack engineer, open-source contributor, JavaScript, TypeScript, web development, frontend, 
    backend, coding, software engineering, programming, tech blog, web apps, modern frameworks, UI/UX">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boris Edison</title>
  <link rel="shortcut icon" href="/public/content/favicon.webp" type="image/x-icon">

  <!-- AnimateCSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

  <!-- AOS -->
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

  <!-- Bootstrap cdn-->
  <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Google font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Corinthia&&?family=Ubuntu">

  <!-- Hamburger -->
  <link rel="stylesheet" href="/public/dist/hamburgers/hamburger.css">

  <!-- Local StyleSheet -->
  <link rel="stylesheet" href="/public/css/resume.css">
  <link rel="stylesheet" href="/public/css/waves.css">
  <link rel="stylesheet" href="/public/css/about.css">
  <link rel="stylesheet" href="/public/css/contact.css">
  <link rel="stylesheet" href="/public/css/technical.css">
  <link rel="stylesheet" href="/public/css/project.css">
  <link rel="stylesheet" href="/public/css/home.css">
  <link rel="stylesheet" href="/public/css/preloader.css">
  <link rel="stylesheet" href="/public/css/navbar.css">
  <link rel="stylesheet" href="/public/css/styles.css">

</head>

<body>

  <div class="preloader">
    <div class="load">
      <hr class="preloader-hr" />
      <hr class="preloader-hr" />
      <hr class="preloader-hr" />
      <hr class="preloader-hr" />
    </div>
  </div>

  <div class="main-content d-none">

    <!-- {{>navbar}} -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-unscrolled">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="/public/content/logo.webp" class="logo rounded-circle" style="" alt="Boris Edison logo">
        </a>
        <button class="hamburger hamburger--vortex navbar-toggler" type="button" data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto">
            <a class="nav-link" aria-label="home link" aria-current="page" href="#home">Home</a>
            <a class="nav-link" aria-label="about link" href="#about">About</a>
            <a class="nav-link" aria-label="technical link" href="#technical">Technical Skills</a>
            <a class="nav-link" aria-label="resume link" href="#resume">Resume</a>
            <a class="nav-link" aria-label="project link" href="#project">Projects</a>
            <a class="nav-link" aria-label="contact link" href="#contact">Contact</a>
            <a id="nav-item" target="_blank" aria-label="Fork" data-balloon-pos="down"
              href="https://github.com/BorisEdison/Honey-Badger"
              class="d-flex align-items-center justify-content-start">
              <button class="fork-btn" aria-label="fork btn" class="d-flex justify-content-center align-items-center">
                <span class="iconify" data-icon="ph:git-fork" data-width="23" data-height="23"></span>
              </button>
            </a>
          </div>
        </div>
      </div>
    </nav>

    <!-- {{>home}} -->
    <!-- Home Section -->
    <section id="home" class="section-primary d-flex justify-content-center align-items-end">
      <div class="content">

        <div class="row m-0">
          <div class="col-12 p-0">
            <div class="row inner-row m-0 ">
              <div
                class="col-4 p-0 home-cols d-flex align-items-end justify-content-start animate__animated animate__slideInUp">
                <img class="side-img side-img-left" src="/public/content/coding-left.webp" alt="Left side image">
              </div>
              <div class="col-4 p-0 home-cols d-flex align-items-center justify-content-center">
                <div class="row">
                  <div
                    class="col-12 p-0 home-cols d-flex align-items-end justify-content-center animate__animated animate__zoomInDown animate__delay-1s">
                    <h1 class="home-heading mb-0 text-center">Boris Edison</h1>
                  </div>
                  <div
                    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">
                    <h2 class="home-info mb-0 text-center">Yudhishtira @<a class="pandevs-link"
                        href="https://pandevs.org" target="_blank">pandevs.org</a></h1>
                  </div>
                </div>
              </div>
              <div
                class="col-4 p-0 home-cols d-flex align-items-start justify-content-end  animate__animated animate__slideInDown">
                <img class="side-img side-img-right" src="/public/content/coding-right.webp" alt="Right side image">
              </div>
            </div>
          </div>
          <div class="col-12 p-0 home-cols d-flex align-items-end justify-content-center">
            <img class="main-img" src="/public/content/programmer.webp" alt=" Programmer image">
          </div>
        </div>

      </div>

    </section>


    <!-- {{>wavesPrimary}} -->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <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" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-400)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-200)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-100)" />
        </g>
      </svg>
    </div>


    <!-- {{>about}} -->
    <!-- About Section -->
    <section id="about" class="section section-secondary d-flex justify-content-center align-items-center">

      <div class="content content-secondary">

        <h3 class="section-heading text-center mt-3">About</h3>

        <div class="row about-row m-0 mt-5 mb-4">

          <div class="col-lg-6 col-sm-12 col-md-12 p-0 d-flex justify-content-center align-items-center">
            <img class="rounded-circle profile-img" src="/public/content/boris-2.webp" alt="Boris Profile Picture">
          </div>

          <div class="col-lg-6 col-sm-12 col-md-12 p-0 about-info-div d-flex justify-content-center align-items-center">
            <div class="row d-flex about-info-row justify-content-center align-items-center">
              <p class="about-info">
                Hello, I'm Boris Edison, a recent <span>Computer Engineering</span> graduate from Don Bosco Institute of
                Technology.
                I'm passionate about <span>software architecture</span> and <span>solving complex problems. </span>
                I thrive in collaborative environments and enjoy working with diverse personalities.
                Let's connect and explore opportunities to innovate together!
                <br><br>

                When I'm not coding I do touch typing on
                <a href="https://www.keybr.com/profile/v28on8s" target="_blank" aria-label="keybr link">keybr.com<span
                    class="iconify" data-icon="charm:link-external" data-width="23" data-height="23"></span>.</a>
                Once my fingers have given up, I watch some <span>tennis</span> and <span>formula 1!</span>
              </p>
            </div>

          </div>

        </div>

        <h3 class="section-sub-heading section-sub-heading-primary">Interests</h3>

        <div class="row pb-5 m-0">

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="100">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="ri:html5-fill" data-width="35" data-height="35"></span>
              &nbsp;
              <h4 class="mb-0 interests-div-heading">Web Development</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="200">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="akar-icons:bootstrap-fill" data-width="35"
                data-height="35"></span>
              &nbsp;&nbsp;
              <h4 class="mb-0 interests-div-heading">Frontend Development</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="300">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="mdi:database" data-width="35" data-height="35"></span>
              &nbsp;
              <h4 class="mb-0 interests-div-heading">Backend Development</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="400">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="material-symbols:keyboard" data-width="35"
                data-height="35"></span>
              &nbsp;
              <h4 class="mb-0 interests-div-heading">Touch Typing</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="100">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="eos-icons:dns" data-width="35" data-height="35"></span>
              &nbsp;
              <h4 class="mb-0 interests-div-heading">Domain & DNS</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="200">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="mdi:code-braces" data-width="35" data-height="35"></span>
              &nbsp;
              <h4 class="mb-0 interests-div-heading">Programming</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="300">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="cib:amazon-aws" data-width="35" data-height="35"></span>
              &nbsp;&nbsp;
              <h4 class="mb-0 interests-div-heading">Web Hosting</h4>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-sm-6 p-0 d-flex justify-content-center align-items-center">
            <div class="interests-div d-flex justify-content-start align-items-center" data-aos="fade-up"
              data-aos-delay="400">
              &nbsp;&nbsp;&nbsp;
              <span class="iconify interests-logo" data-icon="fluent:people-team-16-filled" data-width="35"
                data-height="35"></span>
              &nbsp;
              <h4 class="mb-0 interests-div-heading">Product Management</h4>
            </div>
          </div>
        </div>

      </div>

    </section>


    <!-- {{>wavesSecondary}} -->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <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" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-200)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-400)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-300)" />
        </g>
      </svg>
    </div>


    <!-- {{>technicalSkills}} -->
    <!-- Technical Skills Section -->
    <section id="technical" class="section section-primary d-flex justify-content-center align-items-center">

      <div class="content content-primary">
        <h3 class="section-heading text-center mt-3">Technical Skills</h3>

        <div class="row skills-row pb-5 m-0">

          <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="skills-outer-div">
              <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="100">
                <h4 class="skills-heading">Languages</h4>
                <div class="row d-flex justify-content-center align-items-center">
                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center" aria-label="C"
                    data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="color: #00589d;" data-icon="teenyicons:c-solid"></span>
                  </div>

                  <div class="col-3 m-2 p-0 skills-logo d-flex justify-content-center align-items-center"
                    aria-label="C++" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1 " style="background-color: white;"
                      data-icon="logos:c-plusplus"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Python" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
                      data-icon="vscode-icons:file-type-python"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="JavaScript" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
                      data-icon="logos:javascript"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="TypeScript" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
                      data-icon="devicon:typescript"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Java" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;" data-height="60"
                      data-icon="logos:java"></span>
                  </div>

                </div>

              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="skills-outer-div">
              <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="200">
                <h4 class="skills-heading">Frontend</h4>

                <div class="row d-flex justify-content-center align-items-center">

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="HTML" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-html"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="CSS" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-css"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="TailwindCSS" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:tailwindcss-icon"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Angular" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="devicon:angular"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Bootstrap" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:bootstrap"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Handlebars" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:handlebars"></span>
                  </div>

                </div>

              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="skills-outer-div">
              <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="300">
                <h4 class="skills-heading">Backend</h4>

                <div class="row d-flex justify-content-center align-items-center">
                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Django" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-django"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="expressJS" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="simple-icons:express"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="NodeJS" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:nodejs-icon"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Strapi" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:strapi-icon"></span>
                  </div>
                </div>

              </div>
            </div>
          </div>


          <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12 d-flex justify-content-center">
            <div class="skills-outer-div">
              <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="100">
                <h4 class="skills-heading">Cloud</h4>

                <div class="row d-flex justify-content-center align-items-center">
                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="AWS" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;" data-icon="logos:aws"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Heroku" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:heroku-icon"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Netlify" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-netlify"></span>
                  </div>

                </div>

              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="skills-outer-div">
              <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="200">
                <h4 class="skills-heading">Databases</h4>

                <div class="row d-flex justify-content-center align-items-center">
                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="MongoDB" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="color: #409c39; background-color: white;"
                      data-icon="simple-icons:mongodb"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="SQLite" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-sqlite"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="mySQL" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:mysql-icon"></span>
                  </div>

                </div>

              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mt-5 col-sm-12  d-flex justify-content-center">
            <div class="skills-outer-div">
              <div class="card-body skills-div" data-aos="fade-up" data-aos-delay="300">
                <h4 class="skills-heading">Tools</h4>

                <div class="row d-flex justify-content-center align-items-center">
                  <div class="col-3 col-md-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Nginx" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-nginx"></span>
                  </div>

                  <div class="col-3 col-md-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Figma" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:figma"></span>
                  </div>

                  <div class="col-3 col-md-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Linux" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:linux-tux"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="GitHub" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:github-icon"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Git" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-git"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Replit" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-light-replit"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="Postman" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:postman-icon"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="VScode" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="vscode-icons:file-type-vscode"></span>
                  </div>

                  <div class="col-3 m-2 skills-logo p-0 d-flex justify-content-center align-items-center"
                    aria-label="XAMPP" data-balloon-pos="up">
                    <span class="iconify skills-icon p-1" style="background-color: white;"
                      data-icon="logos:xampp"></span>
                  </div>

                </div>

              </div>
            </div>
          </div>

        </div>

      </div>
    </section>

    <!-- {{>wavesPrimary}} -->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <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" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-400)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-200)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-100)" />
        </g>
      </svg>
    </div>


    <!-- {{>resume}} -->
    <!-- Resume Section -->
    <section id="resume" class="section section-secondary d-flex justify-content-center align-items-center">

      <div class="content content-secondary">
        <h3 class="section-heading text-center mt-3">Resume</h3>

        <div class="row pb-5 m-0">
          <div class="col-lg-6  col-md-12 col-sm-12">
            <div class="row d-flex justify-content-center m-0">
              <div class="resume" data-aos="fade-up" data-aos-delay="100">
                <h4 class="resume-div-heading d-flex align-items-center">
                  <span class="iconify resume-div-heading-icon" data-icon="zondicons:education"></span>Education
                </h4>
                <ul>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Honors in Data Science</span>
                    <span class="resume-div-content">
                      <p class="mb-0">University of Mumbai (July 2022 - May 2024)</p>
                    </span>
                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Bachelor of Engineering - Computer Engineering</span>
                    <span class="resume-div-content">
                      <p class="mb-0">CGPA - 9.05</p>
                      <p class="mb-0">University of Mumbai (Aug 2020 - May 2024)</p>
                    </span>

                  </li>

                </ul>
              </div>

            </div>


            <div class="row d-flex justify-content-center m-0">

              <div class="resume" data-aos="fade-up" data-aos-delay="100">
                <h3 class="resume-div-heading d-flex align-items-center">
                  <span class="iconify resume-div-heading-icon"
                    data-icon="fluent:certificate-20-filled"></span>Certifications
                </h3>
                <ul>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">The Complete Node.js Developer Course</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Issued by Udemy</p>
                      <span class="date-badge">
                        Dec 2022
                      </span>
                    </span>

                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">SQL for Data Science</span>
                    <span class="resume-div-content">
                      <p class="mb-1">Issued by Great Learning</p>
                      <span class="date-badge">
                        March 2022
                      </span>
                    </span>

                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Python Data Structures</span>
                    <span class="resume-div-content">
                      <p class="mb-1">Issued by University of Michigan</p>
                      <span class="date-badge">
                        August 2020
                      </span>
                    </span>

                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Programming for Everybody (Getting Started with Python)</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Issued by University of Michigan</p>
                      <span class="date-badge">
                        July 2020
                      </span>
                    </span>

                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Build a Full Website using Wordpress</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Coursera Project Network</p>
                      <span class="date-badge">
                        May 2020
                      </span>
                    </span>

                  </li>

                </ul>
              </div>
            </div>

          </div>


          <div class="col-lg-6 col-md-12 col-sm-12">
            <div class="row d-flex justify-content-center m-0">

              <div class="resume" data-aos="fade-up" data-aos-delay="200">
                <h3 class="resume-div-heading d-flex align-items-center text-justify">
                  <span class="iconify resume-div-heading-icon"
                    data-icon="material-symbols:home-work-outline-rounded"></span>Work Experience
                </h3>
                <ul>
                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Zeus Learning</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Software Engineer</p>

                      <div class="row">
                        <div class="col-10 d-inline-flex justify-content-start align-items-center">
                          <span class="date-badge d-inline-flex align-items-center">
                            Jun 2024 - Present
                          </span>
                        </div>
                      </div>

                    </span>
                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Aadhar Medical and Educational Trust</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Web Development Intern</p>

                      <div class="row">
                        <div class="col-10 d-inline-flex justify-content-start align-items-center">
                          <span class="date-badge d-inline-flex align-items-center">
                            Sep 2022 - Oct 2022
                          </span>
                        </div>

                        <div class="col-2 d-flex justify-content-end" aria-label="Know More"
                          data-balloon-pos="up-right">
                          <button
                            class="km-amt-btn rounded-circle p-0 km-btn d-flex justify-content-center align-items-center"
                            aria-label="know more button">
                            <span class="iconify km-icon"
                              data-icon="material-symbols:keyboard-arrow-down-rounded"></span>
                          </button>
                        </div>
                      </div>

                    </span>

                    <ul style="list-style-type:disc; text-align:justify"
                      class="p-3 pt-2 pb-0 resume-info-ul km-amt-info d-none">
                      <li>
                        Developed Responsive Static Website for "Aadhar Medical and Educational Trust"
                      </li>

                      <li>
                        Setup domain and hosted the website at
                        <a class="project-redirect-link d-inline-flex" target="_blank" aria-label="amt link"
                          href="https://aadharmedicaltrust.org/">
                          aadharmedicaltrust.org
                        </a>
                      </li>

                      <li>
                        <b>Technologies:</b> HTML, CSS, JavaScript, Bootstrap, jQuery, Git, GitHub
                      </li>
                    </ul>
                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Don Bosco Institute of Technology</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Software Intern</p>

                      <div class="row">
                        <div class="col-10 d-inline-flex justify-content-start align-items-center">
                          <span class="date-badge d-inline-flex align-items-center">
                            Feb 2022 - Nov 2022
                          </span>
                        </div>
                        <div class="col-2 d-flex justify-content-end" aria-label="Know More"
                          data-balloon-pos="up-right">
                          <button
                            class="km-mpt-btn rounded-circle p-0 km-btn d-flex justify-content-center align-items-center">
                            <span class="iconify km-icon" data-icon="material-symbols:keyboard-arrow-down-rounded"
                              aria-label="know more button"></span>
                          </button>
                        </div>
                      </div>

                    </span>
                    <ul style="list-style-type:disc; text-align:justify"
                      class="p-3 pt-2 pb-0 resume-info-ul km-mpt-info d-none">
                      <li>Developed MPT(Mentorship Program Tracker) which aims to make tracking the progress of the
                        mentees
                        easier and digital for all educational institutions
                      </li>

                      <li>Worked on implementing HTML, CSS, Bootstrap, and Javascript to make a fully functional and
                        responsive website
                      </li>

                      <li>Worked on building the backend for the project using Django an open-source python web
                        framework
                      </li>

                      <li>Worked on building sign in and sign up page, the faculty , admin and student dashboards,
                        student
                        profiles, meeting scheduling, details regarding meetings and activity logs
                      </li>

                      <li> Developed a custom admin panel with logs and user lists for ease of access to the user with
                        admin
                        role using DataTables to provide tables with search, filter, pagination and sorting features
                      </li>

                      <li>
                        Worked on implementing ChartJS for visualization of data in marks module
                      </li>

                      <li>
                        <b>Technologies:</b> HTML, CSS, JavaScript, Bootstrap, jQuery, Django, Jinja, SQLite, ChartJS,
                        DataTables
                      </li>

                      <li>
                        <b>Tools:</b> VScode, Figma, DrawSQL, Git, GitHub
                      </li>
                    </ul>
                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Anti-Plastic Brigade Charitable Trust</span>

                    <span class="resume-div-content">
                      <p class="mb-1">Web Development Intern</p>

                      <div class="row">
                        <div class="col-10 d-inline-flex justify-content-start align-items-center">
                          <span class="date-badge d-inline-flex align-items-center">
                            Oct 2021 - Feb 2022
                          </span>
                        </div>
                        <div class="col-2 d-flex justify-content-end" aria-label="Know More"
                          data-balloon-pos="up-right">
                          <button
                            class="km-apb-btn rounded-circle p-0 km-btn d-flex justify-content-center align-items-center">
                            <span class="iconify km-icon" data-icon="material-symbols:keyboard-arrow-down-rounded"
                              aria-label="know more button"></span>
                          </button>
                        </div>
                      </div>

                    </span>
                    <ul style="list-style-type:disc; text-align:justify"
                      class="p-3 pt-2 pb-0 resume-info-ul km-apb-info d-none">
                      <li>
                        Developed Responsive Static Website for "Anti-Plastic Brigade Charitable Trust"
                      </li>

                      <li>
                        APBCT is a Registered NGO from Thane working mainly for Solid Waste Management along with other
                        Green Activities since 2017
                      </li>

                      <li>
                        Setup domain and hosted the website at
                        <a class="project-redirect-link d-inline-flex" aria-label="apb link" target="_blank"
                          href="https://anti-plasticbrigade.com/">
                          anti-plasticbrigade.com
                        </a>
                      </li>

                      <li>
                        <b>Technologies:</b> HTML, CSS, JavaScript, Bootstrap, jQuery, Git, GitHub
                      </li>
                    </ul>
                  </li>

                </ul>
              </div>
            </div>

            <div class="row d-flex justify-content-center m-0">
              <div class="resume" data-aos="fade-up" data-aos-delay="100">
                <h4 class="resume-div-heading d-flex align-items-center">
                  <span class="iconify resume-div-heading-icon" data-icon="fluent-mdl2:party-leader"></span>Position Of
                  Responsibilities
                </h4>
                <ul>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Colosseum DBIT</span>
                    <span class="resume-div-content">
                      <p class="mb-1">Web Development Head</p>
                      <span class="date-badge d-inline-flex align-items-center">
                        Feb 2023 - Mar 2023
                      </span>
                    </span>
                  </li>

                  <li class="resume-li">
                    <span class="resume-div-sub-heading">Hysteria DBCL</span>
                    <span class="resume-div-content">
                      <p class="mb-1">Web Development Head</p>
                      <span class="date-badge d-inline-flex align-items-center">
                        Jan 2023 - Feb 2023
                      </span>
              </div>
              </span>

              </li>

              </ul>
            </div>

          </div>

        </div>

      </div>

    </section>

    <!-- {{>wavesSecondary}} -->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <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" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-200)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-400)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-300)" />
        </g>
      </svg>
    </div>


    <!-- {{>projects}} -->
    <!-- Technical Skills Section -->
    <section id="project" class="section section-primary d-flex justify-content-center align-items-center">

      <div class="content content-primary">
        <h3 class="section-heading text-center mt-3">Projects</h3>

        <div class="row skills-row pb-5 m-0">

          <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="project-outer-div d-flex justify-content-center">
              <div class="card-body project-div" data-aos="fade-up" data-aos-delay="100">

                <figure class="project-figure">
                  <a href="https://borisedison.in/" target="_blank" aria-label="Live Project" data-balloon-pos="up">
                    <img src="/public/content/hb.webp" class="project-img" alt="Honey Badger Project">
                  </a>
                </figure>

                <div class="row pt-2">
                  <div class="col-6 d-flex align-items-center">
                    <h4 class="project-heading mb-0">
                      Honey Badger
                    </h4>
                  </div>

                  <div class="col-6 d-flex justify-content-end">
                    <a href="https://github.com/BorisEdison/Honey-Badger" target="_blank" aria-label="Source Code"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled" data-width="35"
                        data-height="35"></span>
                    </a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="https://borisedison.in/" target="_blank" aria-label="Live Project" data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="charm:link-external" data-width="35"
                        data-height="35"></span>
                    </a>
                  </div>

                </div>

                <div class="row pt-1">
                  <h5>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge nodejs-badge">
                      <span class="iconify built-with-icons" data-icon="fontisto:nodejs"></span>
                      &nbsp;
                      NodeJS
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge express-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:express"></span>
                      &nbsp;
                      Express
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge hbs-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:handlebarsdotjs"></span>
                      &nbsp;
                      Handlebars
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
                      <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
                      &nbsp;
                      HTML
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge bootstrap-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:bootstrap-fill"></span>
                      &nbsp;
                      Bootstrap
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
                      <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
                      &nbsp;
                      CSS
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:javascript"></span>
                      &nbsp;
                      JavaScript
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge jquery-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:jquery-fill"></span>
                      &nbsp;
                      jQuery
                    </span>

                  </h5>
                </div>

                <p class="project-info">
                  Single Page Responsive Portfolio Website Using HTML CSS & JavaScript, with dark theme.
                  Compatible with all mobile devices, with a beautiful and pleasant user interface
                </p>

                <span class="date-badge">
                  Dec 2022 - Jan 2023
                </span>

              </div>
            </div>
          </div>

          <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="project-outer-div d-flex justify-content-center">
              <div class="card-body project-div" data-aos="fade-up" data-aos-delay="200">

                <figure class="project-figure">
                  <img src="/public/content/mpt.webp" class="project-img" alt="MPT project">
                </figure>

                <div class="row pt-2">
                  <div class="col-6 d-flex align-items-center">
                    <h4 class="project-heading mb-0">
                      MPT
                    </h4>
                  </div>

                  <div class="col-6 d-flex justify-content-end">

                    <a href="https://github.com/BorisEdison/MPT" target="_blank" aria-label="Source Code"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled" data-width="35"
                        data-height="35"></span>
                    </a>

                    &nbsp;&nbsp;&nbsp;

                    <a href="https://mpt.borisedison.in/" target="_blank" aria-label="Live Project"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="charm:link-external" data-width="35"
                        data-height="35"></span>
                    </a>

                  </div>

                </div>

                <div class="row pt-1">
                  <h5>
                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge django-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:django-fill"></span>
                      &nbsp;
                      Django
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge jinja-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:jinja"></span>
                      &nbsp;
                      Jinja
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge python-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:python-fill"></span>
                      &nbsp;
                      Python
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge chartjs-badge">
                      <span class="iconify built-with-icons" data-icon="file-icons:chartjs"></span>
                      &nbsp;
                      ChartJS
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
                      <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
                      &nbsp;
                      HTML
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
                      <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
                      &nbsp;
                      CSS
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge bootstrap-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:bootstrap-fill"></span>
                      &nbsp;
                      Bootstrap
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:javascript"></span>
                      &nbsp;
                      JavaScript
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge jquery-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:jquery-fill"></span>
                      &nbsp;
                      jQuery
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge sqlite-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:sqlite"></span>
                      &nbsp;
                      SQLite
                    </span>

                  </h5>
                </div>

                <p class="project-info">
                  A website for tracking all the progress in the student-teacher mentoring program
                </p>

                <span class="date-badge">
                  Feb 2022 - Nov 2022
                </span>

              </div>

            </div>
          </div>

          <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="project-outer-div d-flex justify-content-center">
              <div class="card-body project-div" data-aos="fade-up" data-aos-delay="100">

                <figure class="project-figure">
                  <img src="/public/content/diffuser.webp" class="project-img" alt="Diffuser Project">
                </figure>

                <div class="row pt-2">
                  <div class="col-6 d-flex align-items-center">
                    <h4 class="project-heading mb-0">
                      Diffuser
                    </h4>
                  </div>

                  <div class="col-6 d-flex justify-content-end">

                    <a href="https://github.com/BorisEdison/Diffuser" target="_blank" aria-label="Source Code"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled" data-width="35"
                        data-height="35"></span>
                    </a>

                    &nbsp;&nbsp;&nbsp;

                    <a href="https://diffuser.borisedison.in/" target="_blank" aria-label="Live Project"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="charm:link-external" data-width="35"
                        data-height="35"></span>
                    </a>

                  </div>

                </div>

                <div class="row pt-1">
                  <h5>
                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge django-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:django-fill"></span>
                      &nbsp;
                      Django
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge python-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:python-fill"></span>
                      &nbsp;
                      Python
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
                      <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
                      &nbsp;
                      HTML
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
                      <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
                      &nbsp;
                      CSS
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge bootstrap-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:bootstrap-fill"></span>
                      &nbsp;
                      Bootstrap
                    </span>
                  </h5>
                </div>

                <p class="project-info">
                  A web-app to blog, made using Django and Bootstrap. Users can Register for an account
                  and
                  start blogging
                </p>

                <span class="date-badge">
                  Jul 2022 - Oct 2022
                </span>

              </div>
            </div>
          </div>

          <div class="col-lg-6 col-md-12 mt-5 p-0 col-sm-12  d-flex justify-content-center">
            <div class="project-outer-div d-flex justify-content-center">

              <div class="card-body project-div" data-aos="fade-up" data-aos-delay="200">

                <figure class="project-figure">
                  <a href="https://apb.borisedison.in" target="_blank" aria-label="Live Project" data-balloon-pos="up">
                    <img src="/public/content/apb.webp" class="project-img" alt="APBCT Project">
                  </a>
                </figure>

                <div class="row pt-2">
                  <div class="col-6 d-flex align-items-center">
                    <h4 class="project-heading mb-0">
                      APB
                    </h4>
                  </div>

                  <div class="col-6 d-flex justify-content-end">

                    <a href="https://github.com/BorisEdison/APB" target="_blank" aria-label="Source Code"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="ant-design:github-filled" data-width="35"
                        data-height="35"></span>
                    </a>

                    &nbsp;&nbsp;&nbsp;

                    <a href="https://apb.borisedison.in" target="_blank" aria-label="Live Project"
                      data-balloon-pos="up">
                      <span class="iconify iconify-redirect-icon" data-icon="charm:link-external" data-width="35"
                        data-height="35"></span>
                    </a>

                  </div>

                </div>

                <div class="row pt-1">
                  <h5>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge html-badge">
                      <span class="iconify built-with-icons" data-icon="ri:html5-fill"></span>
                      &nbsp;
                      HTML
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge css-badge">
                      <span class="iconify built-with-icons" data-icon="ion:logo-css3"></span>
                      &nbsp;
                      CSS
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge bootstrap-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:bootstrap-fill"></span>
                      &nbsp;
                      Bootstrap
                    </span>

                    <span
                      class="d-inline-flex align-items-center justify-content-center built-with-badge javascript-badge">
                      <span class="iconify built-with-icons" data-icon="simple-icons:javascript"></span>
                      &nbsp;
                      JavaScript
                    </span>

                    <span class="d-inline-flex align-items-center justify-content-center built-with-badge jquery-badge">
                      <span class="iconify built-with-icons" data-icon="akar-icons:jquery-fill"></span>
                      &nbsp;
                      jQuery
                    </span>

                  </h5>
                </div>

                <p class="project-info">
                  Website for “ANTI-PLASTIC BRIGADE CHARITABLE TRUST” which is a Registered NGO from Thane
                  working mainly for Solid Waste Management along with other Green Activities since 2017
                </p>

                <span class="date-badge">
                  Oct 2021 - Feb 2022
                </span>
              </div>
            </div>
          </div>

        </div>

      </div>

    </section>

    <!-- {{!-- {{>wavesPrimary}}

        {{>accomplishments}}

          {{>wavesSecondary}}

        {{>research}}  --}} -->


    <!-- {{>wavesPrimary}} -->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <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" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--clr-accent-400)" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--clr-accent-300)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--clr-accent-200)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--clr-accent-100)" />
        </g>
      </svg>
    </div>


    <!-- {{>contact}} -->
    <!-- Contact Section -->
    <section id="contact" class="section section-secondary d-flex justify-content-center align-items-center">

      <div class="content">
        <h5 class="section-heading text-center mt-3">Contact</h5>

        <div class="row contact-row m-0">

          <div class="col-lg-6 col-md-6 col-sm-12 mt-4">
            <form id="form" action="" onsubmit="return false">
              <div class="form-floating mb-3">
                <input type="text" class="form-control" id="user_name" placeholder="Name" required>
                <label for="floatingName">Name</label>
              </div>

              <div class="form-floating mb-3">
                <input type="email" class="form-control" id="user_email" placeholder="Email" required>
                <label for="floatingEmail">Email</label>
              </div>

              <div class="form-floating">
                <textarea class="form-control" placeholder="Message" id="user_message" style="height: 150px"
                  required></textarea>
                <label for="floatingTextarea">Message</label>
              </div>

              <div class="row pt-3 d-flex align-items-center">
                <div class="col-6">
                  <a href="mailto:borisedison@gmail.com" aria-label="mail link"
                    style="text-decoration: none; color: var(--clr-accent-700)">Send me
                    mail directly</a>
                </div>
                <div class="col-6 d-flex justify-content-end align-items-center">
                  <button id="send-btn" aria-label="send button" type="submit"
                    class="send-btn d-flex justify-content-center align-items-center">
                    Send
                    &nbsp;
                    <span class="iconify" data-icon="ri:send-plane-fill" data-width="20" data-height="20"></span>
                  </button>
                </div>
              </div>
            </form>

            <div class="toast-container position-fixed bottom-0 end-0 p-5 d-block" style="z-index: 15;">
              <div id="toast" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                  <div class="toast-body">
                    Sorry, the service is currently not active
                  </div>
                  <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
                </div>
              </div>
            </div>

          </div>

          <div class="col-lg-6 col-md-6 col-sm-12 mt-4">
            <div class="row">
              <div class="col-12 text-end">
                <h6 class="section-sub-heading">Email</h6>
                <p class="mb-5">borisedison@gmail.com</p>
              </div>

              <div class="col-12 text-end">
                <h6 class="section-sub-heading">Address</h6>
                <p class="m-0">Mumbai, Maharashtra</p>
                <p class="mb-5">India</p>
              </div>

              <div class="col-12 text-end d-flex justify-content-end">
                <div class="row">
                  <div class="col-12">
                    <h6 class="section-sub-heading">Connect with me</h6>
                  </div>
                  <div class="col-12">
                    <a class="social-links" href="https://github.com/BorisEdison" aria-label="github link"
                      target="_blank">
                      <span class="iconify social-links-logo" data-icon="akar-icons:github-fill" data-width="45"
                        data-height="45"></span>
                    </a>
                    <a class="m-3 mt-0 mb-0 social-links" href="https://www.linkedin.com/in/borisedison/"
                      aria-label="linkedin link" target="_blank">
                      <span class="iconify social-links-logo" data-icon="logos:linkedin-icon" data-width="45"
                        data-height="45"></span>
                    </a>
                    <a class="social-links " href="https://www.instagram.com/_boris_edison_/"
                      aria-label="instagram link" target="_blank">
                      <span class="iconify social-links-logo"
                        style="color: #ffffff; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);"
                        data-icon="akar-icons:instagram-fill" data-width="45" data-height="45"></span>
                    </a>
                  </div>

                </div>

              </div>

            </div>
          </div>

        </div>

      </div>

    </section>

    <!-- <footer> -->
    <div class="footer d-flex justify-content-center align-items-center">
      <div class="row" style="margin-right: 0; margin-left: 0">
        <div class="col-12 d-flex justify-content-center mt-4 mb-4">
          <p class="contrib-info m-0" class="m-0">Made with ❤️ by Boris Edison</p>
        </div>
      </div>
    </div>

    <button id="toggle-theme" class="rounded-circle d-flex align-items-center justify-content-center">
      <span class="iconify iconify-navbar" data-icon="ri:moon-fill" data-width="30" data-height="30"
        style="color: white"></span>
    </button>

    <a href="#top" id="rollUp" class="rounded-circle init btn">
      <span class="iconify" data-icon="material-symbols:keyboard-arrow-up-rounded" data-width="40" data-height="40"
        style="color: white;"></span>
    </a>

  </div>

  <!-- AOS -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

  <!-- BalloonCSS CDN -->
  <link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

  <!-- Boostrap CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
    </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>

  <!-- iconify -->
  <script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>

  <!-- jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>

  <!-- Local JavaScript -->
  <script src="/public/js/index.js"></script>
  <script src="/public/js/rollUp.js"></script>
  <script src="/public/js/toggleTheme.js"></script>

</body>

</html>