index.html

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8" />
    <!-- Title-->
    <title>Keanen Bafekr Portfolio</title>
    <!-- Description-->
    <meta name="description" content="Personal Portfolio Template" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Favicons-->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="img/favicons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="img/favicons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="img/favicons/favicon-16x16.png"
    />
    <!-- Web fonts-->
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&amp;display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css"
    />
    <!-- CSS vendors-->
    <link rel="stylesheet" href="css/bootstrap-custom.css" />
    <link rel="stylesheet" href="css/ionicons.min.css" />
    <link rel="stylesheet" href="css/tiny-slider.css" />
    <link rel="stylesheet" href="css/lity.min.css" />
    <link rel="stylesheet" href="css/simplebar.min.css" />
    <link rel="stylesheet" href="css/jquery.mb.YTPlayer.min.css" />
    <!-- Main CSS-->
    <link rel="stylesheet" href="css/main.css" />
    <!-- CSS Color scheme-->
    <link
      id="color-scheme"
      rel="stylesheet"
      href="css/colors/main-moodyblue.css"
    />
    <!-- Custom CSS (Add your custom CSS styles to this file)-->
    <link rel="stylesheet" href="css/custom.css" />
  </head>

  <body class="theme-dark">
    <!-- Preloader-->
    <div class="preloader">
      <div class="preloader-block">
        <div class="preloader-icon">
          <span class="loading-dot loading-dot-1"></span
          ><span class="loading-dot loading-dot-2"></span
          ><span class="loading-dot loading-dot-3"></span>
        </div>
      </div>
    </div>
    <div id="overlay-effect"></div>
    <!-- Navbar-->
    <nav class="navbar-expand-md navbar fixed-top" id="navbar">
      <a class="navbar-brand" data-scroll="" href="#home-area">
        <!-- Navbar Logo-->
        <img class="img-fluid" src="img/Welcome-1.png" alt="Logo"
      /></a>
      <span
        class="navbar-menu ml-auto"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
        role="button"
        ><span class="btn-line"></span
      ></span>
      <div
        class="collapse navbar-collapse order-1 order-lg-0"
        id="navbarSupportedContent"
      >
        <!-- Navbar menu-->
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
          <li class="nav-item">
            <a class="nav-link" href="#resume">Résumé</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Portfolio</a>
          </li>
          <!-- <li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li> -->
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- Home-->
    <section
      class="home-area element-cover-bg"
      id="home"
      style="background-image: url(img/home.jpg)"
    >
      <div class="container h-100">
        <div class="row h-100 align-items-center justify-content-center">
          <div class="col-12 col-lg-8 home-content text-center">
            <h1 class="home-name">Keanen <span>Bafekr</span></h1>
            <h4 class="cd-headline clip home-headline">
              I’m a
              <span class="cd-words-wrapper single-headline"
                ><b class="is-visible">Software Developer</b
                ><b>Software Engineer</b><b>Full-Stack Developer</b></span
              >
            </h4>
          </div>
        </div>
      </div>
      <div class="fixed-wrapper">
        <!-- Languages list-->
        <div class="fixed-block block-left">
          <ul class="list-unstyled languages-list">
            <!-- <li><a href="#0"><span class="single-language">ENG</span></a></li>
          <li><a href="#0"><span class="single-language">JAP</span></a></li> -->
          </ul>
        </div>
        <!-- Social media icons-->
        <div class="fixed-block block-right">
          <ul class="list-unstyled social-icons">
            <!-- <li><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
            <!-- <li><a href="#0"><i class="icon ion-logo-facebook"></i></a></li> -->
            <li>
              <a
                href="https://www.linkedin.com/in/keanen-bafekr-8a498a123"
                target="_blank"
                ><i class="icon ion-logo-linkedin"></i
              ></a>
            </li>
            <li>
              <a href="https://github.com/Kbafekr" target="_blank"
                ><i class="icon ion-logo-github"></i
              ></a>
            </li>
            <!-- <li><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
          </ul>
        </div>
      </div>
    </section>
    <!-- About lightbox-->
    <div class="lightbox-wrapper" id="about" data-simplebar>
      <div class="container">
        <div class="lightbox-close">
          <div class="close-btn" data-modal-close="">
            <span class="btn-line"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="lightbox-content">
              <div class="row">
                <div class="col-12">
                  <div class="section-heading page-heading">
                    <p class="section-description">Get to know me</p>
                    <h2 class="section-title">About Me</h2>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- Info section-->
              <div class="info-section single-section">
                <div class="row align-items-center">
                  <!-- Picture part-->
                  <div class="col-12 col-lg-5 info-img">
                    <img
                      class="img-fluid img-thumbnail"
                      src="img/headshot.png"
                      alt="About Picture"
                    />
                  </div>
                  <!-- Content part-->
                  <div class="col-12 col-lg-7 info-content">
                    <div class="content-block">
                      <h2 class="content-subtitle">Who am I?</h2>
                      <h6 class="content-title">
                        I'm Keanen Bafekr, a visual Full-Stack Software Engineer
                        and Web Developer
                      </h6>
                      <div class="content-description">
                        <p>
                          I am an ambitious and passionate programmer with a
                          background in Cell Biology. I have an intense
                          curiosity bug, I just can't help figuring out how
                          things work. I'm well-versed in React, Javascript,
                          Python, and am currently enjoying learning Typescript
                          and C#. Outside of coding, I love to play video games
                          and nerd-out about Marvel movies.
                        </p>
                      </div>
                      <address class="content-info">
                        <div class="row">
                          <div class="col-12 col-md-6 single-info">
                            <span>Name:</span>
                            <p>Keanen Bafekr</p>
                          </div>
                          <div class="col-12 col-md-6 single-info">
                            <span>Email:</span>
                            <p>
                              <a href="mailto:emma@example.com"
                                >KeanenBafekr@me.com</a
                              >
                            </p>
                          </div>
                        </div>
                        <div class="row">
                          <!-- <div class="col-12 col-md-6 single-info"><span>Age:</span>
                          <p>21</p>
                        </div> -->
                          <div class="col-12 col-md-6 single-info">
                            <span>From:</span>
                            <p>Tampa, Florida</p>
                          </div>
                        </div>
                      </address>
                      <div class="d-block d-sm-flex align-items-center">
                        <a
                          class="btn content-download button-main button-scheme"
                          href="Keanen Bafekr Resume.pdf"
                          role="button"
                          >Download Résumé</a
                        >
                        <ul class="list-unstyled list-inline content-follow">
                          <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                          <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                          <li class="list-inline-item">
                            <a
                              href="https://www.linkedin.com/in/keanen-bafekr-8a498a123"
                              target="_blank"
                              ><i class="icon ion-logo-linkedin"></i
                            ></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="https://github.com/Kbafekr" target="_blank"
                              ><i class="icon ion-logo-github"></i
                            ></a>
                          </li>
                          <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-facebook"></i></a></li> -->
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Skills section-->
              <div class="services-section single-section">
                <div class="row">
                  <div class="col-12">
                    <div class="section-heading">
                      <p class="section-description">
                        Languages, Frameworks, and Tools
                      </p>
                      <h2 class="section-title">Skills</h2>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i
                        class="dev-i devicon-javascript-plain colored javascript icon service-icon"
                      ></i>
                      <h6 class="service-title">Javascript</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-python-plain icon service-icon"></i>
                      <h6 class="service-title">Python</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-typescript-plain icon service-icon"></i>
                      <h6 class="service-title">TypeScript</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-java-plain-wordmark icon service-icon"></i>
                      <h6 class="service-title">Java</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-react-original icon service-icon"></i>
                      <h6 class="service-title">React</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                   <!-- Single service-->
                   <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-visualstudio-plain icon service-icon"></i>
                      <h6 class="service-title">Visual Studio</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-angularjs-plain icon service-icon"></i>
                      <h6 class="service-title">Angular</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-csharp-plain icon service-icon"></i>
                      <h6 class="service-title">C#</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-dot-net-plain icon service-icon"></i>
                      <h6 class="service-title">Dot-Net</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-redux-original icon service-icon"></i>
                      <h6 class="service-title">Redux</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-flask-original icon service-icon"></i>
                      <h6 class="service-title">Flask</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-express-original icon service-icon"></i>
                      <h6 class="service-title">Express</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-sequelize-plain icon service-icon"></i>
                      <h6 class="service-title">Sequelize</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-sqlalchemy-plain icon service-icon"></i>
                      <h6 class="service-title">SQLAlchemy</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-html5-plain icon service-icon"></i>
                      <h6 class="service-title">HTML</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-css3-plain icon service-icon"></i>
                      <h6 class="service-title">CSS</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-postgresql-plain icon service-icon"></i>
                      <h6 class="service-title">PostgresSQL</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-nodejs-plain icon service-icon"></i>
                      <h6 class="service-title">Node.js</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-docker-plain icon service-icon"></i>
                      <h6 class="service-title">Docker</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i
                        class="devicon-amazonwebservices-original icon service-icon"
                      ></i>
                      <h6 class="service-title">AWS</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                  <!-- Single service-->
                  <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-service">
                      <i class="devicon-heroku-original icon service-icon"></i>
                      <h6 class="service-title">Heroku</h6>
                      <!-- <p class="service-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                    </div>
                  </div>
                </div>
              </div>

              <!-- Testimonials section-->
              <!-- <div class="testimonials-section single-section">
              <div class="row">
                <div class="col-12">
                  <div class="section-heading">
                    <p class="section-description">What my clients think about me</p>
                    <h2 class="section-title">Testimonials</h2>
                  </div>
                </div>
              </div>
              <div class="my-slider">
                <div class="slider-item">
                  Single review
                  <div class="single-review swiper-slide">
                    <div class="review-header d-flex justify-content-between">
                      <div class="review-client">
                        <div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-1.jpg" alt="Client">
                          <div class="client-details">
                            <h6 class="client-name">Julia Sakura</h6><span class="client-role">Envato Customer</span>
                          </div>
                        </div>
                      </div><i class="icon ion-md-quote review-icon"></i>
                    </div>
                    <p class="review-content">Emma did an excellent creative job, addressing our request quickly, and also providing her own graphic insight, being open to feedback and changes or edits when they arose. She worked with us the entire way. Highly recommended.</p>
                  </div>
                </div>
                <div class="slider-item">
                  Single review
                  <div class="single-review swiper-slide">
                    <div class="review-header d-flex justify-content-between">
                      <div class="review-client">
                        <div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-2.jpg" alt="Client">
                          <div class="client-details">
                            <h6 class="client-name">John Santana</h6><span class="client-role">Entrepreneur</span>
                          </div>
                        </div>
                      </div><i class="icon ion-md-quote review-icon"></i>
                    </div>
                    <p class="review-content">Emma did an excellent creative job, addressing our request quickly, and also providing her own graphic insight, being open to feedback and changes or edits when they arose. She worked with us the entire way. Highly recommended.</p>
                  </div>
                </div>
                <div class="slider-item">
                  Single review
                  <div class="single-review swiper-slide">
                    <div class="review-header d-flex justify-content-between">
                      <div class="review-client">
                        <div class="media"><img class="img-fluid rounded-circle client-avatar" src="img/client-3.jpg" alt="Client">
                          <div class="client-details">
                            <h6 class="client-name">Maria Wilson</h6><span class="client-role">Envato Customer</span>
                          </div>
                        </div>
                      </div><i class="icon ion-md-quote review-icon"></i>
                    </div>
                    <p class="review-content">Emma did an excellent creative job, addressing our request quickly, and also providing her own graphic insight, being open to feedback and changes or edits when they arose. She worked with us the entire way. Highly recommended.</p>
                  </div>
                </div>
              </div>
            </div>
            Pricing section
            <div class="pricing-section single-section">
              <div class="row">
                <div class="col-12">
                  <div class="section-heading">
                    <p class="section-description">Get started with my services</p>
                    <h2 class="section-title">Choose a Plan</h2>
                  </div>
                </div>
              </div>
              <div class="row align-items-center">
                Single plan
                <div class="col-lg-4">
                  <div class="single-plan mb-4 mb-sm-5"><i class="plan-icon icon ion-md-egg"></i>
                    <h3 class="plan-type">Standard</h3>
                    <h2 class="plan-price">$19/month</h2>
                    <ul class="list-unstyled plan-list">
                      <li>Mobile App Design</li>
                      <li>Responsive Design</li>
                      <li>Database Development</li>
                      <li>Web Design</li>
                      <li>24/7 Support</li>
                    </ul><a class="btn button-main button-scheme plan-btn" href="#0" role="button">Get Standard</a>
                  </div>
                </div>
                Single plan
                <div class="col-lg-4">
                  <div class="single-plan mb-4 mb-sm-5"><i class="plan-icon icon ion-ios-rocket"></i>
                    <h3 class="plan-type">Professional</h3>
                    <h2 class="plan-price">$29/month</h2>
                    <ul class="list-unstyled plan-list">
                      <li>Mobile App Design</li>
                      <li>Responsive Design</li>
                      <li>Database Development</li>
                      <li>Web Design</li>
                      <li>24/7 Support</li>
                    </ul><a class="btn button-main button-scheme plan-btn" href="#0" role="button">Get Pro</a>
                  </div>
                </div>
                Single plan
                <div class="col-lg-4">
                  <div class="single-plan mb-4 mb-sm-5"><i class="plan-icon icon ion-logo-ionic"></i>
                    <h3 class="plan-type">Business</h3>
                    <h2 class="plan-price">$39/month</h2>
                    <ul class="list-unstyled plan-list">
                      <li>Mobile App Design</li>
                      <li>Responsive Design</li>
                      <li>Database Development</li>
                      <li>Web Design</li>
                      <li>24/7 Support</li>
                    </ul><a class="btn button-main button-scheme plan-btn" href="#0" role="button">Get Business</a>
                  </div>
                </div>
              </div>
            </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Resume lightbox-->
    <div class="lightbox-wrapper" id="resume" data-simplebar>
      <div class="container">
        <div class="lightbox-close">
          <div class="close-btn" data-modal-close="">
            <span class="btn-line"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="lightbox-content">
              <div class="row">
                <div class="col-12">
                  <div class="section-heading page-heading">
                    <p class="section-description">
                      <a
                        class="btn content-download button-main button-scheme"
                        href="Keanen Bafekr Resume.pdf"
                        role="button"
                        download=""
                      >
                        Check out my Résumé
                      </a>
                    </p>
                    <h2 class="section-title">Résumé</h2>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- Resume section-->
              <div class="resume-section single-section">
                <div class="row">
                  <!-- Education part-->
                  <div class="col-12 col-md-6">
                    <div class="col-block education">
                      <h3 class="col-title">Education</h3>
                      <div class="resume-item">
                        <span class="item-arrow"></span>
                        <h5 class="item-title">Cell & Molecular Biology</h5>
                        <span class="item-details"
                          >University of South Florida / 2016 - 2020</span
                        >
                        <p class="item-description">
                          Earned a Bachelor's of Science degree while on the
                          pre-med track.
                        </p>
                      </div>
                      <div class="resume-item">
                        <span class="item-arrow"></span>
                        <h5 class="item-title">App Academy Coding Bootcamp</h5>
                        <span class="item-details"
                          >Remote / 2022</span
                        >
                        <p class="item-description">
                          Completed App Academy's intensive 24-week, 1000+ hours
                          software engineering curriculum.
                        </p>
                      </div>
                      <!-- <div class="resume-item"><span class="item-arrow"></span>
                      <h5 class="item-title">Master Degree</h5><span class="item-details">Harvard University / 2012 - 2015</span>
                      <p class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quo repudiandae.</p>
                    </div> -->
                    </div>
                  </div>
                  <!-- Experience part-->
                  <div class="col-12 col-md-6">
                  <div class="col-block experience">
                    <h3 class="col-title">Experience</h3>
                    <div class="resume-item"><span class="item-arrow"></span>
                      <h5 class="item-title">Computer Science Expert - AI</h5><span class="item-details">Scale AI / June 2023 - Present</span>
                      <p class="item-description">Worked on various projects to train generative AI models, including ranking code responses, writing code with reasoning, and editing code written by AI models for improved performance and bug fixes. Implemented rigorous testing and validation procedures, validating AI models' accuracy and reliability, leading to robust and reliable AI-driven solutions.</p>
                    </div>
                    <div class="resume-item"><span class="item-arrow"></span>
                      <h5 class="item-title">Programming Expert - AI Model Trainer</h5><span class="item-details">Appen / January 2023 - June 2023</span>
                      <p class="item-description">Demonstrated adaptability and problem-solving skills by continuously iterating on AI model training approaches, resulting in measurable improvements in AI model performance. Collaborated in a dynamic and interdisciplinary environment, contributing to developing and evaluating AI models' capabilities.</p>
                    </div>
                  </div>
                </div>

                </div>
              </div>
              <!-- Skills section-->
              <div class="skills-section single-section">
                <div class="row">
                  <div class="col-12">
                    <div class="section-heading">
                      <p class="section-description">
                        My level of knowledge in some tools
                      </p>
                      <h2 class="section-title">My Skills</h2>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12 col-md-6">
                    <div class="single-skill" data-percentage="95">
                      <div class="skill-info">
                        <span class="skill-name">Javascript</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="90">
                      <div class="skill-info">
                        <span class="skill-name">Typescript</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="80">
                      <div class="skill-info">
                        <span class="skill-name">AWS</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="90">
                      <div class="skill-info">
                        <span class="skill-name">React Js</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="85">
                      <div class="skill-info">
                        <span class="skill-name">Express.js</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-md-6">
                    <div class="single-skill" data-percentage="85">
                      <div class="skill-info">
                        <span class="skill-name">Python</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="80">
                      <div class="skill-info">
                        <span class="skill-name">Java</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="70">
                      <div class="skill-info">
                        <span class="skill-name">C#</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="80">
                      <div class="skill-info">
                        <span class="skill-name">Flask</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                    <div class="single-skill" data-percentage="90">
                      <div class="skill-info">
                        <span class="skill-name">HTML/CSS</span
                        ><span class="skill-percentage"></span>
                      </div>
                      <div class="progress skill-progress">
                        <div
                          class="progress-bar"
                          role="progressbar"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Video section-->
              <!-- <div class="video-section single-section">
              <div class="row align-items-center">
                <div class="col-12 col-lg-6 content-part">
                  <h3 class="video-title">Take a tour of my office</h3>
                  <p class="video-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cum quasi assumenda culpa praesentium consectetur voluptatibus expedita. Voluptatem tempore, aspernatur rem facilis, distinctio nemo! Odio velit, nemo dolorem voluptas!</p>
                  <p class="video-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium qui aspernatur unde mollitia, in laborum.</p>
                </div>
                <div class="col-12 col-lg-6 video-part"><a class="media-lightbox" href="https://www.youtube.com/watch?v=doteMqP6eSc" data-lightbox>
                    <div class="embed-responsive embed-responsive-16by9">
                      <div class="embed-responsive-item element-cover-bg"><span class="play-wrapper"><i class="icon ion-md-play"></i></span></div>
                    </div>
                  </a></div>
              </div>
            </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio lightbox-->
    <div class="lightbox-wrapper" id="portfolio" data-simplebar>
      <div class="container">
        <div class="lightbox-close">
          <div class="close-btn" data-modal-close="">
            <span class="btn-line"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="lightbox-content">
              <div class="row">
                <div class="col-12">
                  <div class="section-heading page-heading">
                    <p class="section-description">
                      Showcasing some of my best work
                    </p>
                    <h2 class="section-title">Portfolio</h2>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- Portfolio section-->
              <div class="portfolio-section single-section">
                <div class="row">
                  <!-- Filter nav-->
                  <div class="col-12">
                    <ul
                      class="list-inline filter-control"
                      role="group"
                      aria-label="Filter Control"
                    >
                      <li class="list-inline-item tab-active" data-filter="*">
                        All
                      </li>
                      <li class="list-inline-item" data-filter=".flask">
                        Flask
                      </li>
                      <li class="list-inline-item" data-filter=".express">
                        Express
                      </li>
                      <!-- <li class="list-inline-item" data-filter=".photos">Photos</li> -->
                    </ul>
                  </div>
                </div>
                <!-- Thumbnail list-->
                <div class="portfolio-grid row">
                  <!-- Single item-->
                  <div class="single-item col-6 col-lg-4 flask">
                    <a
                      class="portfolio-item"
                      href="img/Hootube.png"
                      data-lightbox
                    >
                      <div class="portfolio-wrapper">
                        <img
                          class="img-fluid"
                          alt="Item"
                          src="img/Hootube.png"
                        />
                        <div class="item-content">
                          <h6 class="content-title">Hootube</h6>
                          <span class="content-more">Full Screen</span>
                        </div>
                      </div>
                    </a>
                    <ul class="list-unstyled list-inline content-follow" id="portfolioFont">
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                      <li class="list-inline-item">
                        <a
                          href="https://hootube.herokuapp.com/"
                          target="_blank"
                          ><i class="devicon-heroku-original"></i

                        ></a>
                        <a
                          href="https://hootube.herokuapp.com/"
                          target="_blank"
                          > Live Site
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="https://github.com/Kbafekr/Youtube-Clone" target="_blank"
                          ><i class="icon ion-logo-github"></i
                        ></a>
                        <a
                          href="https://github.com/Kbafekr/Youtube-Clone"
                          target="_blank"
                          > Github Link
                        </a>
                      </li>
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-facebook"></i></a></li> -->
                    </ul>
                    <ul class="list-unstyled list-inline content-follow" id="portfolioFont">
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                      <li class="list-inline-item">
                        <div id="DescriptionPortfolioText">
                          A pixel-perfect clone of Youtube that includes AWS functionality, a Flask and SQLAlchemy backend with a React-Redux frontend. Upload videos, comment, make playlists and more!
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- Single item-->
                  <div class="single-item col-6 col-lg-4 express">
                    <a
                      class="portfolio-item"
                      href="img/MusicCloud.png"
                      data-lightbox
                    >
                      <div class="portfolio-wrapper">
                        <img
                          class="img-fluid"
                          alt="Item"
                          src="img/MusicCloud.png"
                        />
                        <div class="item-content">
                          <h6 class="content-title">MusicCloud</h6>
                          <span class="content-more">Full Screen</span>
                        </div>
                      </div>
                    </a>
                    <ul class="list-unstyled list-inline content-follow" id="portfolioFont">
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                      <li class="list-inline-item">
                        <a
                          href="https://musiccloud.onrender.com/"
                          target="_blank"
                          ><i class="devicon-heroku-original"></i

                        ></a>
                        <a
                          href="https://musiccloud.onrender.com/"
                          target="_blank"
                          > Live Site
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="https://github.com/Kbafekr/MusicCloud" target="_blank"
                          ><i class="icon ion-logo-github"></i
                        ></a>
                        <a
                          href="https://github.com/Kbafekr/MusicCloud"
                          target="_blank"
                          > Github Link
                        </a>
                      </li>
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-facebook"></i></a></li> -->
                    </ul>
                    <ul class="list-unstyled list-inline content-follow" id="portfolioFont">
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                      <li class="list-inline-item">
                        <div id="DescriptionPortfolioText">
                          A full-stack clone of SoundCloud featuring AWS upload functionality, an Express backend with Sequelize, and a React-Redux frontend. Upload and share songs, listen to albums, and more!
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- Single item-->
                  <div class="single-item col-6 col-lg-4 flask">
                    <a
                      class="portfolio-item"
                      href="img/Klickr.png"
                      data-lightbox
                    >
                      <div class="portfolio-wrapper">
                        <img
                          class="img-fluid"
                          alt="Item"
                          src="img/Klickr.png"
                        />
                        <div class="item-content">
                          <h6 class="content-title">Klickr</h6>
                          <span class="content-more">Full Screen</span>
                        </div>
                      </div>
                    </a>
                    <ul class="list-unstyled list-inline content-follow" id="portfolioFont">
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                      <li class="list-inline-item">
                        <a
                          href="https://klickr-aa.onrender.com"
                          target="_blank"
                          ><i class="devicon-heroku-original"></i

                        ></a>
                        <a
                          href="https://klickr-aa.onrender.com"
                          target="_blank"
                          > Live Site
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="https://github.com/ChzFlvrHrse/Klickr-Group" target="_blank"
                          ><i class="icon ion-logo-github"></i
                        ></a>
                        <a
                          href="https://github.com/ChzFlvrHrse/Klickr-Group"
                          target="_blank"
                          > Github Link
                        </a>
                      </li>
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-facebook"></i></a></li> -->
                    </ul>
                    <ul class="list-unstyled list-inline content-follow" id="portfolioFont">
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-twitter"></i></a></li> -->
                      <!-- <li class="list-inline-item"><a href="#0"><i class="icon ion-logo-instagram"></i></a></li> -->
                      <li class="list-inline-item">
                        <div id="DescriptionPortfolioText">
                          A pixel-perfect clone of Flickr that includes a Flask and SQLAlchemy backend with a React-Redux frontend. Share and upload images in an online community!
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- Single item-->
                  <!-- <div class="single-item col-6 col-lg-4 brand">
                    <a
                      class="portfolio-item"
                      href="img/item-4.jpg"
                      data-lightbox
                    >
                      <div class="portfolio-wrapper">
                        <img
                          class="img-fluid"
                          alt="Item"
                          src="img/item-4.jpg"
                        />
                        <div class="item-content">
                          <h6 class="content-title">Coffee Cup Design</h6>
                          <span class="content-more">More Info</span>
                        </div>
                      </div>
                    </a>
                  </div> -->
                  <!-- Single item-->
                  <!-- <div class="single-item col-6 col-lg-4 brand">
                    <a
                      class="portfolio-item"
                      href="img/item-5.jpg"
                      data-lightbox
                    >
                      <div class="portfolio-wrapper">
                        <img
                          class="img-fluid"
                          alt="Item"
                          src="img/item-5.jpg"
                        />
                        <div class="item-content">
                          <h6 class="content-title">T-Shirt Design</h6>
                          <span class="content-more">More Info</span>
                        </div>
                      </div>
                    </a>
                  </div> -->
                  <!-- Single item-->
                  <!-- <div class="single-item col-6 col-lg-4 photos">
                    <a
                      class="portfolio-item"
                      href="img/item-6.jpg"
                      data-lightbox
                    >
                      <div class="portfolio-wrapper">
                        <img
                          class="img-fluid"
                          alt="Item"
                          src="img/item-6.jpg"
                        />
                        <div class="item-content">
                          <h6 class="content-title">Packaging Box Mockup</h6>
                          <span class="content-more">More Info</span>
                        </div>
                      </div>
                    </a>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Blog lightbox-->
    <!-- <div class="lightbox-wrapper" id="blog" data-simplebar>
    <div class="container">
      <div class="lightbox-close">
        <div class="close-btn" data-modal-close=""><span class="btn-line"></span></div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="lightbox-content">
            <div class="row">
              <div class="col-12">
                <div class="section-heading page-heading">
                  <p class="section-description">Check out my latest blog posts</p>
                  <h2 class="section-title">My Blog</h2>
                  <div class="animated-bar"></div>
                </div>
              </div>
            </div> -->
    <!-- Blog section-->
    <!-- <div class="blog-section single-section">
              <div class="row justify-content-center">
                Single post
                <div class="col-12 col-sm-8 col-lg-4">
                  <div class="card single-post"><a class="post-img" href="#0"><img class="card-img-top" src="img/post-1.jpg" alt="Blog post"><span class="content-date">11 Dec, 20</span></a>
                    <div class="card-body post-content"><a href="#0">
                        <h5 class="card-title content-title">Top tools for Photographers</h5>
                      </a>
                      <p class="card-text content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo quam, eum alias id, repellendus magni, quas.</p>
                    </div>
                  </div>
                </div>
                Single post
                <div class="col-12 col-sm-8 col-lg-4">
                  <div class="card single-post"><a class="post-img" href="#0"><img class="card-img-top" src="img/post-2.jpg" alt="Blog post"><span class="content-date">12 Aug, 20</span></a>
                    <div class="card-body post-content"><a href="#0">
                        <h5 class="card-title content-title">Take a tour of my office</h5>
                      </a>
                      <p class="card-text content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo quam, eum alias id, repellendus magni, quas.</p>
                    </div>
                  </div>
                </div>
                Single post
                <div class="col-12 col-sm-8 col-lg-4">
                  <div class="card single-post"><a class="post-img" href="#0"><img class="card-img-top" src="img/post-3.jpg" alt="Blog post"><span class="content-date">4 Feb, 20</span></a>
                    <div class="card-body post-content"><a href="#0">
                        <h5 class="card-title content-title">How i became a Web Designer</h5>
                      </a>
                      <p class="card-text content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo quam, eum alias id, repellendus magni, quas.</p>
                    </div>
                  </div>
                </div>Single post
                <div class="col-12 col-sm-8 col-lg-4">
                  <div class="card single-post"><a class="post-img" href="#0"><img class="card-img-top" src="img/post-4.jpg" alt="Blog post"><span class="content-date">11 Dec, 19</span></a>
                    <div class="card-body post-content"><a href="#0">
                        <h5 class="card-title content-title">How to improve work performance</h5>
                      </a>
                      <p class="card-text content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo quam, eum alias id, repellendus magni, quas.</p>
                    </div>
                  </div>
                </div>
                Single post
                <div class="col-12 col-sm-8 col-lg-4">
                  <div class="card single-post"><a class="post-img" href="#0"><img class="card-img-top" src="img/post-5.jpg" alt="Blog post"><span class="content-date">15 Nov, 19</span></a>
                    <div class="card-body post-content"><a href="#0">
                        <h5 class="card-title content-title">How to work from home</h5>
                      </a>
                      <p class="card-text content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo quam, eum alias id, repellendus magni, quas.</p>
                    </div>
                  </div>
                </div>
                Single post
                <div class="col-12 col-sm-8 col-lg-4">
                  <div class="card single-post"><a class="post-img" href="#0"><img class="card-img-top" src="img/post-6.jpg" alt="Blog post"><span class="content-date">8 Aug, 19</span></a>
                    <div class="card-body post-content"><a href="#0">
                        <h5 class="card-title content-title">How to enjoy your business trip</h5>
                      </a>
                      <p class="card-text content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo quam, eum alias id, repellendus magni, quas.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->

    <!--
        </div>
      </div>
    </div>
  </div> -->
    <!-- Contact lightbox-->
    <div class="lightbox-wrapper" id="contact" data-simplebar>
      <div class="container">
        <div class="lightbox-close">
          <div class="close-btn" data-modal-close="">
            <span class="btn-line"></span>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="lightbox-content">
              <div class="row">
                <div class="col-12">
                  <div class="section-heading page-heading">
                    <p class="section-description">
                      Feel free to contact me anytime :)
                    </p>
                    <h2 class="section-title">Get in Touch</h2>
                    <div class="animated-bar"></div>
                  </div>
                </div>
              </div>
              <!-- Contact section-->
              <div class="contact-section single-section">
                <div class="row">
                  <!-- Contact form-->
                  <!-- <div class="col-12 col-lg-7">
                  <form class="contact-form" id="contact-form" action="php/contact.php">
                    <h4 class="content-title">Message Me</h4>
                    <div class="row">
                      <div class="col-12 col-md-6 form-group"><input class="form-control" id="contact-name" type="text" name="name" placeholder="Name" required=""></div>
                      <div class="col-12 col-md-6 form-group"><input class="form-control" id="contact-email" type="email" name="email" placeholder="Email" required=""></div>
                      <div class="col-12 form-group"><input class="form-control" id="contact-subject" type="text" name="subject" placeholder="Subject" required=""></div>
                      <div class="col-12 form-group form-message"><textarea class="form-control" id="contact-message" name="message" placeholder="Message" rows="5" required=""></textarea></div>
                      <div class="col-12 form-submit"><button class="btn button-main button-scheme" id="contact-submit" type="submit">Send Message</button>
                        <p class="contact-feedback"></p>
                      </div>
                    </div>
                  </form>
                </div> -->
                  <!-- Contact info-->
                  <div class="col-12 col-lg-5">
                    <div class="contact-info">
                      <h4 class="content-title">Contact Info</h4>
                      <p class="info-description">
                        Always available to collaborate and meet new people,
                        Feel free to contact me!
                      </p>
                      <ul class="list-unstyled list-info">
                        <li>
                          <div class="media align-items-center">
                            <span class="info-icon"
                              ><i class="icon ion-logo-ionic"></i
                            ></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Name</h6>
                              <span class="info-value">Keanen Bafekr</span>
                            </div>
                          </div>
                        </li>
                        <!-- <li>
                        <div class="media align-items-center"><span class="info-icon"><i class="icon ion-md-map"></i></span>
                          <div class="media-body info-details">
                            <h6 class="info-type">Location</h6><span class="info-value">4155 Mann Island, Liverpool, United Kingdom.</span>
                          </div>
                        </div>
                      </li> -->
                        <!-- <li>
                        <div class="media align-items-center"><span class="info-icon"><i class="icon ion-md-call"></i></span>
                          <div class="media-body info-details">
                            <h6 class="info-type">Call Me</h6><span class="info-value"><a href="tel:+441632967704">+44 1632 967704</a></span>
                          </div>
                        </div>
                      </li> -->
                        <li>
                          <div class="media align-items-center">
                            <span class="info-icon"
                              ><i class="icon ion-md-send"></i
                            ></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Email Me</h6>
                              <span class="info-value"
                                ><a href="mailto:KeanenBafekr@me.com"
                                  >KeanenBafekr@me.com</a
                                ></span
                              >
                            </div>
                          </div>
                        </li>
                        <li>
                          <div class="media align-items-center">
                            <span class="info-icon"
                              ><i class="icon ion-logo-linkedin"></i
                            ></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Connect with Me</h6>
                              <span class="info-value"
                                ><a
                                  href="https://www.linkedin.com/in/keanen-bafekr-8a498a123"
                                  target="_blank"
                                  >LinkedIn</a
                                ></span
                              >
                            </div>
                          </div>
                        </li>
                        <li>
                          <div class="media align-items-center">
                            <span class="info-icon"
                              ><i class="icon ion-logo-github"></i
                            ></span>
                            <div class="media-body info-details">
                              <h6 class="info-type">Collaborate with Me</h6>
                              <span class="info-value"
                                ><a
                                  href="https://github.com/Kbafekr"
                                  target="_blank"
                                  >GitHub</a
                                ></span
                              >
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Scripts-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/animatedModal.js"></script>
    <script src="js/tiny-slider.js"></script>
    <script src="js/lity.min.js"></script>
    <script src="js/simplebar.min.js"></script>
    <script src="js/jquery.mb.YTPlayer.min.js"></script>
    <script src="js/main.js"></script>
    <!-- Custom JS (Add your custom JS scripts to this file)-->
    <script src="js/custom.js"></script>
  </body>
</html>