index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
    data-id="anjisvj" data-description="Support me on Buy me a coffee!"
    data-message="Thank you for visiting! Now you can keep me awake with some coffee ☕️ " data-color="#40DCA5"
    data-position="Right" data-x_margin="18" data-y_margin="18"></script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-ETPDNG19ZF"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag('config', 'G-ETPDNG19ZF');
  </script>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <!-- Primary Meta Tags -->
  <title>Anjula Shanaka | GSoC '22 @openMRS | CTO @SEF | SE @ascii | Undergraduate</title>
  <meta name="title" content="Anjula Shanaka | GSoC '22 @openMRS | CTO @SEF | SE @ascii | Undergraduate">
  <meta name="description"
    content="I'm a second-year physical science undergraduate at the University of Sri Jayawardenepura who loves tech.">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://anjula.tech/">
  <meta property="og:title" content="Anjula Shanaka | GSoC '22 @openMRS | CTO @SEF | SE @ascii | Undergraduate">
  <meta property="og:description"
    content="I'm a second-year physical science undergraduate at the University of Sri Jayawardenepura who loves tech.">
  <meta property="og:image" href="img/profile.jpg">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://anjula.tech/">
  <meta property="twitter:title" content="Anjula Shanaka | GSoC '22 @openMRS | CTO @SEF | SE @ascii | Undergraduate">
  <meta property="twitter:description"
    content="I'm a second-year physical science undergraduate at the University of Sri Jayawardenepura who loves tech.">
  <meta property="twitter:image" href="img/profile.jpg">

  <!-- Favicons -->
  <link href="img/favicon.ico" rel="icon">
  <link href="img/favicon.ico" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Roboto:100,300,400,500,700|Philosopher:400,400i,700,700i"
    rel="stylesheet">
  <!-- Bootstrap css -->
  <!-- <link rel="stylesheet" href="css/bootstrap.css"> -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Libraries CSS Files -->
  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="lib/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet">
  <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="lib/animate/animate.min.css" rel="stylesheet">
  <link href="lib/modal-video/css/modal-video.min.css" rel="stylesheet">

  <!-- Main Stylesheet File -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <header id="header" class="header header-hide pt-2">
    <div class="container">

      <div id="logo" class="pull-left">
        <h1><a href="#body" class="scrollto"><span>A</span>njula <span>S</span>hanaka</a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="#body"><img src="img/logo.png" alt="" title="" /></a>-->
      </div>

      <nav id="nav-menu-container">
        <ul class="nav-menu">
          <li class="menu-active"><a href="#hero">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#education">Education</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#experience">Experience</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#knowledge">Knowledge Sharing</a></li>
          <!-- <li class="menu-has-children"><a href="">Drop Down</a>
                  <ul>
                    <li><a href="#">Drop Down 1</a></li>
                    <li><a href="#">Drop Down 3</a></li>
                    <li><a href="#">Drop Down 4</a></li>
                    <li><a href="#">Drop Down 5</a></li>
                  </ul>
                </li> -->
          <li><a href="#simulations">Simulations</a></li>
          <!-- <li><a href="#contact">Contact</a></li> -->
        </ul>
      </nav><!-- #nav-menu-container -->
    </div>
  </header><!-- #header -->

  <!--==========================
  Hero Section
============================-->
  <section id="hero" class="wow fadeIn">
    <div class="hero-container pt-5">
      <h1>Anjula Shanaka</h1>
      <h2>SE @Tilli | CTO @SEF | GSoC '22 @openMRS</h2>
      <img src="img/image.png" alt="Hero Imgs">
      <a href="#about" class="btn-get-started scrollto">About Me</a>
      <div class="btns">
        <a href="https://github.com/anjula-sack" target="_blank"><i class="fa fa-github fa-3x"></i> Github</a>
        <a href="https://gitlab.com/anjula-sack" target="_blank"><i class="fa fa-gitlab fa-3x"></i> Gitlab</a>
        <a href="https://www.medium.com/@anjulashanaka" target="_blank"><i class="fa fa-medium fa-3x"></i>
          medium</a>
        <a href="https://www.youtube.com/channel/UCLjQYVhICeegPX6ah4-dQpw" target="_blank"><i
            class="fa fa-youtube fa-3x"></i>
          Youtube</a>
        <a href="https://www.facebook.com/anjula.shanaka" target="_blank"><i class="fa fa-facebook fa-3x"></i>
          facebook</a>
        <a href="https://linkedin.com/in/anjula-sack" target="_blank"><i class="fa fa-linkedin fa-3x"></i> linkedin</a>
        <a href="https://docs.google.com/document/d/1gkvfwb1J_JHN9UdOeG6Q8PAvWTyMHPUjC2N2nbfqK0Q/edit?usp=sharing"
          target="_blank"><i class="fa fa-file-text fa-3x"></i> CV</a>
      </div>
    </div>
  </section><!-- #hero -->


  <!--==========================
  About Section
============================-->
  <section id="about" class="about-us padd-section wow fadeInUp">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-7 col-lg-10">
          <div class="about-content">
            <h2 style="text-align: center;">About Me</h2>
            <p>Versatile and results-driven Software Engineer with a proven track record of delivering innovative
              solutions in various domains including education technology, healthcare, and social impact initiatives.
              Possessing strong expertise in full-stack development, software testing, and project management, with a
              keen focus on leveraging emerging technologies to address complex challenges.

            </p>
            <p>Experienced in mentoring and collaborating with teams to drive project success and enhance product
              quality. Skilled in developing scalable web applications, integrating APIs, and implementing advanced
              features to meet evolving user needs.

              Demonstrated leadership as a Chief Technical Officer, guiding engineering teams and overseeing the
              development of impactful projects. Committed to continuous learning and staying updated with the latest
              industry trends to deliver cutting-edge solutions. Passionate about utilizing technology for positive
              societal change and contributing to meaningful projects.
            </p>
          </div>
        </div>

      </div>
    </div>
  </section>

  <section id="education" class="padd-section wow fadeInUp">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6 col-lg-10">
          <div class="section-title">
            <h2 style="text-align: center;">Education</h2>
          </div>
          <h3 style="font-weight: 200;">University of Sri Jayawardenapura (2021 - 2024)</h3>
          <div class="about-content">
            <div class="row pt-4">
              <div class="col-lg-6">
                <h4>Physical Science - ICT</h4>
              </div>
              <div class="col-lg-5">
                <ul style="list-style-type: none;">
                  <li>Mathematics</li>
                  <li>Physics </li>
                  <li>Information & Communication Tech.</li>
                </ul>
              </div>
            </div>
            <h3 style="font-weight: 200;">St. Anthony's College Kandy (2006 - 2019)</h3>
            <div class="about-content">
              <div class="row pt-4">
                <div class="col-lg-6">
                  <h4>G. C. E. Advanced Level Examination – 2019</h4>
                </div>
                <div class="col-lg-5">
                  <ul style="list-style-type: none;">
                    <li>Combined Mathematics B</li>
                    <li>Physics C</li>
                    <li>Information & Communication Tech. B</li>
                    <li>General English A</li>
                  </ul>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-6">
                  <h4>G. C. E. Ordinary Level Examination – 2016</h4>
                </div>
                <div class="col-lg-5">
                  <ul style="list-style-type: none;">
                    <li>Result – 9A’s</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
  </section>


  <!--==========================
  Skills Section
============================-->

  <section id="skills" class="padd-section text-center wow fadeInUp">

    <div class="container">
      <div class="section-title text-center">
        <h2>Skills</h2>
        <p class="separator">Some of the things that I learned along my journey so far...</p>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/react/react-original.svg" alt="img" class="img-fluid">
            <h4>React Js</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/javascript/javascript-original.svg" alt="img" class="img-fluid">
            <h4>JavaScript</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/typescript/typescript-original.svg" alt="img" class="img-fluid">
            <h4>TypeScript</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/vuejs/vuejs-original.svg" alt="img" class="img-fluid">
            <h4>Vue Js</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/git/git-original.svg" alt="img" class="img-fluid">
            <h4>GIT</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/java/java-original.svg" alt="img" class="img-fluid">
            <h4>Java</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/python/python-original.svg" alt="img" class="img-fluid">
            <h4>Python</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/django/django-original.svg" alt="img" class="img-fluid">
            <h4>Django</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/c/c-original.svg" alt="img" class="img-fluid">
            <h4>C</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/amazonwebservices/amazonwebservices-original.svg" alt="img" class="img-fluid">
            <h4>AWS</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/jquery/jquery-original.svg" alt="img" class="img-fluid">
            <h4>jquery</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/mysql/mysql-original.svg" alt="img" class="img-fluid">
            <h4>MySQL</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/html5/html5-original.svg" alt="img" class="img-fluid">
            <h4>HTML</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/css3/css3-original.svg" alt="img" class="img-fluid">
            <h4>CSS</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/bootstrap/bootstrap-plain.svg" alt="img" class="img-fluid">
            <h4>bootstrap</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/docker/docker-original.svg" alt="img" class="img-fluid">
            <h4>Docker</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/heroku/heroku-original.svg" alt="img" class="img-fluid">
            <h4>Heroku</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/travis/travis-plain.svg" alt="img" class="img-fluid">
            <h4>Travis</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/redux/redux-original.svg" alt="img" class="img-fluid">
            <h4>Redux</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/nodejs/nodejs-original.svg" alt="img" class="img-fluid">
            <h4>Node Js</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/express/express-original.svg" alt="img" class="img-fluid">
            <h4>Express Js</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/mongodb/mongodb-original.svg" alt="img" class="img-fluid">
            <h4>Mongodb</h4>
          </div>
        </div>

        <div class="col-6 col-md-6 col-lg-2">
          <div class="feature-block">
            <img src="img/icons/firebase/firebase-logo.png" alt="img" class="img-fluid" style="height: 80px;">
            <h4>firebase</h4>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--==========================
  Projects Section
============================-->
  <section id="projects" class="padd-section text-center wow fadeInUp">

    <div class="container">
      <div class="section-title text-center">

        <h2>Projects</h2>
        <p class="separator">The projects I've been working so far...</p>

      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/cloud.svg" alt="img" class="img-fluid">
            <h4>Cohort Builder</h4>
            <h5>OpenMRS</h5>
            <p>2022</p>
            <p>The Cohort Builder is a tool in OpenMRS 3.0 in the Reporting Compatibility module that lets the user
              perform ad-hoc queries for patients with defined characteristics,
              and combines multiple queries into more complex ones. [TypeScript, ReactJs, Carbon components]</p>
            <a href="https://github.com/openmrs/openmrs-esm-cohortbuilder" target="_blank"><i
                class="fa fa-github fa-3x"></i> Github</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/code.svg" alt="img" class="img-fluid">
            <h4>promiseQ web app</h4>
            <h5>promiseQ</h5>
            <p>2021</p>
            <p>promiseQ utilizes machine learning recognition and human
              verification to provide accurate and fast decisions on alarm detections.

              [VueJs, Veutify, Firebase]
            </p>
            <a href="https://promiseq.com/">Visit promiseQ</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/paint-palette.svg" alt="img" class="img-fluid">
            <h4>promiseQ Home page</h4>
            <h5>promiseQ</h5>
            <p>2021</p>
            <p>Revamped the whole website to make it more professional
              [NextJs, ReactJs,, Material UI]
            </p>
            <a href="https://promiseq.com/">Visit promiseQ</a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/cloud-computing.svg" alt="img" class="img-fluid">
            <h4>Expert Republic Enterprise</h4>
            <h5>Rootcode Labs</h5>
            <p>2020 - 2021</p>
            <p>Worked on creating the official expub enterprise website [ReactJs, Typescript, Tailiwind CSS]</p>
            <a href="http://enterprise.expub.rootcode.software/">Visit Expub Enterprise</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/vector.svg" alt="img" class="img-fluid">
            <h4>DHIS2 Connector Module</h4>
            <h5>OpenMRS</h5>
            <p>2020 - 2021</p>
            <p>Contributed for OpenMRS on fixing the bugs in the DHIS2 Connector Module [JavaScript, JSP, jQuery
              ]</p>
            <a href="https://github.com/openmrs/openmrs-module-dhisconnector/pulls?q=is%3Apr+author%3A%40me+is%3Aclosed"
              target="_blank"><i class="fa fa-github fa-3x"></i> Github</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/pixel.svg" alt="img" class="img-fluid">
            <h4>Project GIC</h4>
            <h5>Rootcode Labs</h5>
            <p>2020</p>
            <p>Worked on implementing a better UI [JavaScript, jQuery, HTML, CSS, Bootstrap,
              Django]</p>
            <a href="http://lrimsfaoaf.ait.ac.th/">Visit GIC</a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/cloud.svg" alt="img" class="img-fluid">
            <h4>SEF ScholarX</h4>
            <h5>Sustainable Education Foundation (SEF)</h5>
            <p>2020</p>
            <p>Worked on the frontend for SEF ScholarX project [React Js, TypeScript, Ant Design]</p>
            <a href="https://github.com/sef-global/scholarx-frontend" target="_blank"><i class="fa fa-github fa-3x"></i>
              Github</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/planet.svg" alt="img" class="img-fluid">
            <h4>Aphelia Web</h4>
            <h5>Rootcode Labs</h5>
            <p>2020</p>
            <p>Created the Aphelia web to showcase the aphelia AI (Resume parser) [React Js, JavaScript,
              React-bootstrap]</p>
            <a href="https://aphelia.ai/">Visit Aphelia</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/asteroid.svg" alt="img" class="img-fluid">
            <h4>App Manager</h4>
            <h5>Entgra Pvt Ltd.</h5>
            <p>2020</p>
            <p>Migrated ant design v3 components to ant design v4 components [React Js, JavaScript, Ant
              design]</p>
            <a href="https://gitlab.com/entgra/carbon-device-mgt/-/merge_requests?scope=all&utf8=%E2%9C%93&state=merged&author_username=anjula-sack"
              target="_blank"><i class="fa fa-gitlab fa-3x"></i> Github</a> &nbsp;
            <a href="https://medium.com/@anjulashanaka/are-you-stuck-with-v3-ant-design-components-877aaf95dd62"
              target="_blank"><i class="fa fa-medium fa-3x"></i> Medium</a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/design-tool.svg" alt="img" class="img-fluid">
            <h4>SEF Academix</h4>
            <h5>Sustainable Education Foundation (SEF)</h5>
            <p>2020</p>
            <p>Created the frontend for SEF Academix project [React Js, TypeScript, Ant Design]</p>
            <a href="https://github.com/sef-global/academix-frontend" target="_blank"><i class="fa fa-github fa-3x"></i>
              Github</a> &nbsp;
            <a href="https://medium.com/@anjulashanaka/say-goodbye-to-runtime-errors-with-typescript-7afbae84e75f"
              target="_blank"><i class="fa fa-medium fa-3x"></i> Medium</a></br>
            <a href="https://sefglobal.org/academix" target="_blank"></i>Visit AcadeMix</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/code.svg" alt="img" class="img-fluid">
            <h4>SEF YouTube Video Gallery</h4>
            <h5>Sustainable Education Foundation (SEF)</h5>
            <p>2020</p>
            <p>Created a video gallery using YouTube API. [SpringBoot, JS, Ajax, Jquery]</p>
            <a href="https://github.com/sef-global/sef-site/tree/master/src/main/webapp/scholarx" target="_blank"><i
                class="fa fa-github fa-3x"></i> Github</a>&nbsp;
            <a href="https://medium.com/@anjulashanaka/a-simple-video-gallery-with-youtube-api-4c697990653f"
              target="_blank"><i class="fa fa-medium fa-3x"></i> Medium</a></br>
            <a href="https://sefglobal.org/onelive/archive" target="_blank"></i> Visit OneLive</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/cloud-computing.svg" alt="img" class="img-fluid">
            <h4>SACK Live Score </h4>
            <h5>St. Anthony’s College Kandy</h5>
            <p>2020</p>
            <p>Contributed SACK Live Score platform. [SpringBoot, Websocket, JS, Streaming Text Oriented
              Messaging(STOMP)]</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/pixel.svg" alt="img" class="img-fluid">
            <h4>SEF website</h4>
            <h5>Sustainable Education Foundation (SEF)</h5>
            <p>2019 - Present</p>
            <p>Contributed SEF website with fixing issues. [HTML, CSS, Bootstrap, JavaScript]</p>
            <a href="https://github.com/sef-global/sef-site/issues?q=author%3Aanjula-sack+" target="_blank"><i
                class="fa fa-github fa-3x"></i> Github</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/paint-palette.svg" alt="img" class="img-fluid">
            <h4>Sack.edu.lk</h4>
            <h5>St. Anthony’s College Kandy</h5>
            <p>2018 - 2019</p>
            <p>In charge of maintaining the college website. Also, handled the news site which was built using
              Wordpress. [Wordpress]</p>
            <a href="https://www.sack.edu.lk/">Visit site</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/vector.svg" alt="img" class="img-fluid">
            <h4>Line Follower</h4>
            <h5>Robofest</h5>
            <p>2017</p>
            <p>Made a line following robot using Arduino for ROBOFEST 2017 the Annual Robotic Competition
              organized by the Faculty of Engineering of SLIIT (Sri Lanka Institute of Information
              Technology). [Arduino]</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/cloud.svg" alt="img" class="img-fluid">
            <h4>Parking Sensor</h4>
            <h5>St. Anthony’s College Kandy</h5>
            <p>2016</p>
            <p>Created a parking sensor using Arduino that can be used for any vehicle easily. [Arduino]</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/paint-palette.svg" alt="img" class="img-fluid">
            <h4>Sack.edu.lk</h4>
            <h5>St. Anthony’s College Kandy</h5>
            <p>2018 - 2019</p>
            <p>In charge of maintaining the college website. Also, handled the news site which was built using
              Wordpress. [Wordpress]</p>
            <a href="https://www.sack.edu.lk/">Visit site</a>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/vector.svg" alt="img" class="img-fluid">
            <h4>Line Follower</h4>
            <h5>Robofest</h5>
            <p>2017</p>
            <p>Made a line following robot using Arduino for ROBOFEST 2017 the Annual Robotic Competition
              organized by the Faculty of Engineering of SLIIT (Sri Lanka Institute of Information
              Technology). [Arduino]</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-4 pb-5 pt-5">
          <div class="feature-block">
            <img src="img/svg/cloud.svg" alt="img" class="img-fluid">
            <h4>Parking Sensor</h4>
            <h5>St. Anthony’s College Kandy</h5>
            <p>2016</p>
            <p>Created a parking sensor using Arduino that can be used for any vehicle easily. [Arduino]</p>
          </div>
        </div>
      </div>
    </div>

  </section>

  <!--==========================
  Experience Section
============================-->
  <section id="experience" class="padd-section text-center wow fadeInUp">

    <div class="container section-title">
      <h2>Experience</h2>
      <div style="text-align: start;">
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Software Engineer</h4>
            <h5>Tilli</h5>
            <p>2023 September - Present</p>
            <p>In my role as a software engineer at Tilli, I played a crucial role in developing the Teacher Dashboard
              for this innovative Social-Emotional Learning (SEL) app. Tasked with creating a user-friendly and
              efficient interface, I collaborated closely with the design and product teams to translate their vision
              into a functional and engaging platform. My responsibilities included implementing key features, ensuring
              seamless integration with the Tilli app, and optimizing the dashboard's performance.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Google Summer of Code Mentor</h4>
            <h5>OpenMRS</h5>
            <p>2023 May - 2023 September</p>
            <p>As a mentor for the Google Summer of Code 2023 projects under OpenMRS, I have had the privilege of
              working with two exceptional students on their respective projects: O3 - Enhancing Component Test Coverage
              and Quality for OpenMRS 3, and Extending E2E Automated Tests for the OpenMRS 3.0 RefApp.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Quality Assuarance Engineering Fellow</h4>
            <h5>OpenMRS</h5>
            <p>2023 February - 2023 August</p>
            <p>As a QA Fellow at openMRS, I was responsible for ensuring the quality and reliability of the O3 platform.
              My key responsibilities included designing, implementing and executing manual and automated testing plans,
              reporting and tracking issues, and collaborating with developers to resolve bugs. Additionally, I
              contributed to the development of testing frameworks and documentation.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Software Engineer</h4>
            <h5>ASCII (Private) Limited </h5>
            <p>2022 November - 2023 June</p>
            <p>As a member of the team responsible for developing a comprehensive ticket management platform, I gained
              valuable experience in creating a system that streamlines the process of handling incoming tickets from
              various sources such as Zendesk and Jira.

              This platform not only helps teams effectively manage their workload but also allows management to
              maintain a clear hierarchy among employees, ensuring that all tickets are completed to a high standard.
            </p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Community Developer</h4>
            <h5>Lanka Software Foundation</h5>
            <p>2022 July - 2023 July</p>
            <p>Contributed to the front-end development of the project Elixir, an open-source application that helps the
              Red Cross Association address the acute medical supply shortage in Sri Lanka, raising over $500,000 worth
              of medicine.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Chief Technology Officer</h4>
            <h5>Sustainable Education Foundation (SEF)</h5>
            <p>2022 January - Present</p>
            <p>Contributing to the SEF Dev Team as a Chief Technology Officer And responsible to ensure that the SEF is
              moving forward in a way that is efficient, effective, and aligned with our company goals.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Software Engineer</h4>
            <h5>Sustainable Education Foundation (SEF)</h5>
            <p>2020 February - 2022 January</p>
            <p>Worked as a software engineer to the SEF Dev Team. While leading the ScholarX Squad which focus on
              the development of the ScholarX platform</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Web Developer</h4>
            <h5>promiseQ</h5>
            <p>2021 July - 2022 December</p>
            <p>Worked as a part-time software developer to develop software to reduce the false alarms in security
              cameras using machine learning.
            </p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Google Summer of Code Intern</h4>
            <h5>OpenMRS</h5>
            <p>2022 July - 2022 September</p>
            <p>Rebuilt the OpenMRS Cohort Builder. The Cohort Builder is a tool in OpenMRS 3.0 in the Reporting
              Compatibility module that lets the user perform ad-hoc queries for patients</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Intern Software Engineer</h4>
            <h5>Rootcode Labs</h5>
            <p>2020 July - 2021 July</p>
            <p>Worked with a professional team to build web-based applications which help millions of people around the
              world. Mainly worked on web development. Also worked on CI/CD pipelines and other DevOps tasks as well.
            </p>
          </div>
        </div>

        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>President</h4>
            <h5>Antonian Computer Fraternity, St. Anthony’s College Kandy</h5>
            <p>2018 - 2019</p>
            <p>Organized workshops to empower the tech knowledge of St. Anthony’s College students.</p>
            <ul style="list-style-type: none;">
              <li>Design Relay – A graphic designing workshop collaboration with Sustainable Education
                Foundation (SEF)
              </li>
              <li>Microbit – Microbit workshop collaboration with Microbit Slug.</li>
              <li>Arduino – A workshop in basic knowledge in Arduino programming.</li>
              <li>Conducted a video editing workshop on how to edit videos in Adobe After Effects. Had the
                responsibility of maintaining the school website.
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Vice Secretary</h4>
            <h5>Astronomical Society, St. Anthony’s College Kandy</h5>
            <p>2017 - 2019</p>
            <p>Inspired students to improve their own knowledge about the universe. Conducted evening classes
              for the students to improve their knowledge about our origin.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Graphic Designer</h4>
            <h5>Interact Club, St. Anthony’s College Kandy</h5>
            <p>2020</p>
            <p>Had the responsibility of taking care of all the graphic content. Was in charge of main events
              including interact day.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Member</h4>
            <h5>Antonian Computer Fraternity, St. Anthony’s College Kandy</h5>
            <p>2015 - 2018</p>
            <p>Was a member of a team who participated in the school category of ROBOFEST 2017 the Annual
              Robotic Competition organized by the Faculty of
              Engineering of SLIIT (Sri Lanka Institute of Information Technology). Represented St. Anthony’s
              college on various including Ranabima College
              Kandy exhibition 2016/17 and Kandy Girls High school science exhibition 2018.
              Participate ICT day Mahamaya Girls College kandy 2018 and Hillwood College ICT day 2016.</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-12 pb-5">
          <div>
            <h4>Member</h4>
            <h5>Antonian Media Unit, St. Anthony’s College Kandy</h5>
            <p>2015 - 2018</p>
            <p>Assisted live streaming for the Trinity-Antonian big match. Assisted organizing Media Night
              2015</p>
          </div>
        </div>
      </div>
    </div>
    </div>

    <div class="container">
      <div class="row">
      </div>
    </div>
  </section>

  <!--==========================
Blog Section
============================-->
  <section id="blog" class="padd-section wow fadeInUp">

    <div class="container">
      <div class="section-title text-center">

        <h2>Latest blog posts</h2>
        <p class="separator">Usually I write a blog post every month. These are the Latest ones</p>

      </div>
    </div>

    <div class="container">
      <div class="row blog__slider">

      </div>
    </div>
  </section>

  <section id="knowledge" class="padd-section wow fadeInUp">

    <div class="container">
      <div class="section-title text-center">

        <h2>Latest knowledge sharing sessions</h2>
        <p class="separator">As a software engineer at SEF dev team. We have knowledge sharing sessions. These are the
          sessions I did.</p>
      </div>
    </div>

    <div class="container">
      <div id="knowledge-sharing-videos" class="row">
      </div>
      <div class="d-flex justify-content-center">
        <button id="knowledge-sharing-videos-view-more" class="btn btn-success"
          onclick="fetchYoutubeVideos('knowledge')">View More</button>
      </div>
    </div>
  </section>

  <section id="web-development" class="padd-section wow fadeInUp">

    <div class="container">
      <div class="section-title text-center">

        <h2>Web Development Sessions</h2>
        <p class="separator">As a software engineer at SEF dev team. We have knowledge sharing sessions. These are the
          sessions I did.</p>
      </div>
    </div>

    <div class="container">
      <div id="web-development-videos" class="row">
      </div>
      <div class="d-flex justify-content-center">
        <button id="web-development-videos-view-more" class="btn btn-success"
          onclick="fetchYoutubeVideos('sessions')">View More</button>
      </div>
    </div>
  </section>

  <section id="simulations" class="padd-section wow fadeInUp">

    <div class="container">
      <div class="section-title text-center">
        <h2>Simulations</h2>
        <p class="separator">These are some of the simulations I tried recreating using Unity Game Engine</p>
      </div>
    </div>

    <div class="container">
      <div id="simulation-videos" class="row">
      </div>
      <div class="d-flex justify-content-center">
        <button id="simulation-videos-view-more" class="btn btn-success"
          onclick="fetchYoutubeVideos('simulations')">View More</button>
      </div>
    </div>
  </section>

  <section>
    <div class="container">
      <div>
        <div class="section-title text-center">
          <h3 style="font-weight: 300;">Wanna know me better? Follow me on social media</h3>
        </div>
        <div class="btns pb-5" style="text-align: center;">
          <a href="https://github.com/anjula-sack" target="_blank"><i class="fa fa-github fa-3x"></i> Github</a>
          &nbsp; &nbsp; &nbsp;
          <a href="https://gitlab.com/anjula-sack" target="_blank"><i class="fa fa-gitlab fa-3x"></i> Gitlab</a>
          &nbsp; &nbsp; &nbsp;
          <a href="https://www.medium.com/@anjulashanaka" target="_blank"><i class="fa fa-medium fa-3x"></i>
            medium</a> &nbsp; &nbsp; &nbsp;
          <!--                <a href="https://www.facebook.com/anjula.shanaka" target="_blank"><i class="fa fa-facebook fa-3x"></i>-->
          <!--                    facebook</a> &nbsp; &nbsp; &nbsp;-->
          <a href="https://linkedin.com/in/anjula-sack" target="_blank"><i class="fa fa-linkedin fa-3x"></i>
            linkedin</a> &nbsp; &nbsp; &nbsp;
        </div>
      </div>
    </div>
  </section>
  <!--==========================
  Screenshots Section
============================-->
  <!-- <section id="screenshots" class="padd-section text-center wow fadeInUp">

  <div class="container">
    <div class="section-title text-center">
      <h2>App Gallery</h2>
      <p class="separator">Integer cursus bibendum augue ac cursus .</p>
    </div>
  </div>

  <div class="container">
    <div class="owl-carousel owl-theme">

      <div><img src="img/screen/1.jpg" alt="img"></div>
      <div><img src="img/screen/2.jpg" alt="img"></div>
      <div><img src="img/screen/3.jpg" alt="img"></div>
      <div><img src="img/screen/4.jpg" alt="img"></div>
      <div><img src="img/screen/5.jpg" alt="img"></div>
      <div><img src="img/screen/6.jpg" alt="img"></div>
      <div><img src="img/screen/7.jpg" alt="img"></div>
      <div><img src="img/screen/8.jpg" alt="img"></div>
      <div><img src="img/screen/9.jpg" alt="img"></div>

    </div>
  </div>

</section> -->

  <!--==========================
  Team Section
============================-->
  <!-- <section id="team" class="padd-section text-center wow fadeInUp">

  <div class="container">
    <div class="section-title text-center">

      <h2>Team Member</h2>
      <p class="separator">Integer cursus bibendum augue ac cursus .</p>

    </div>
  </div>

  <div class="container">
    <div class="row">

      <div class="col-md-6 col-md-4 col-lg-3">
        <div class="team-block bottom">
          <img src="img/team/1.jpg" class="img-responsive" alt="img">
          <div class="team-content">
            <ul class="list-unstyled">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <span>manager</span>
            <h4>Kimberly Tran</h4>
          </div>
        </div>
      </div>

     <div class="col-md-6 col-md-4 col-lg-3">
        <div class="team-block bottom">
          <img src="img/team/2.jpg" class="img-responsive" alt="img">
          <div class="team-content">
            <ul class="list-unstyled">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <span>manager</span>
            <h4>Kimberly Tran</h4>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-md-4 col-lg-3">
        <div class="team-block bottom">
          <img src="img/team/3.jpg" class="img-responsive" alt="img">
          <div class="team-content">
            <ul class="list-unstyled">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <span>manager</span>
            <h4>Kimberly Tran</h4>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-md-4 col-lg-3">
        <div class="team-block bottom">
          <img src="img/team/4.jpg" class="img-responsive" alt="img">
          <div class="team-content">
            <ul class="list-unstyled">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <span>manager</span>
            <h4>Kimberly Tran</h4>
          </div>
        </div>
      </div>

    </div>
  </div>
</section> -->


  <!--==========================
  Testimonials Section
============================-->

  <!-- <section id="testimonials" class="padd-section text-center wow fadeInUp">
  <div class="container">
    <div class="row justify-content-center">

      <div class="col-md-8">

        <div class="testimonials-content">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

            <div class="carousel-inner" role="listbox">

              <div class="carousel-item  active">
                <div class="top-top">

                  <h2>Our Users Speack volumes us</h2>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries.</p>
                  <h4>Kimberly Tran<span>manager</span></h4>

                </div>
              </div>

              <div class="carousel-item ">
                <div class="top-top">

                  <h2>Our Users Speack volumes us</h2>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries.</p>
                  <h4>Henderson<span>manager</span></h4>

                </div>
              </div>

              <div class="carousel-item ">
                <div class="top-top">

                  <h2>Our Users Speack volumes us</h2>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries.</p>
                  <h4>David Spark<span>manager</span></h4>

                </div>
              </div>

            </div>

            <div class="btm-btm">

              <ul class="list-unstyled carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ul>

            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</section> -->

  <!--==========================
  Newsletter Section
============================-->
  <!-- <section id="newsletter" class="newsletter text-center wow fadeInUp">
  <div class="overlay padd-section">
    <div class="container">

      <div class="row justify-content-center">
        <div class="col-md-9 col-lg-6">
          <form class="form-inline" method="POST" action="#">

            <input type="email" class="form-control " placeholder="Email Adress" name="email">
            <button type="submit" class="btn btn-default"><i class="fa fa-location-arrow"></i>Subscribe</button>

          </form>

        </div>
      </div>

        <ul class="list-unstyled">
          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
          <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        </ul>


    </div>
  </div>
</section> -->

  <!--==========================
  Contact Section
============================-->
  <!-- <section id="contact" class="padd-section wow fadeInUp">

  <div class="container">
    <div class="section-title text-center">
      <h2>Contact</h2>
      <p class="separator">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
    </div>
  </div>

  <div class="container">
    <div class="row justify-content-center">

      <div class="col-lg-3 col-md-4">

        <div class="info">
          <div>
            <i class="fa fa-map-marker"></i>
            <p>A108 Adam Street<br>New York, NY 535022</p>
          </div>

          <div class="email">
            <i class="fa fa-envelope"></i>
            <p>info@example.com</p>
          </div>

          <div>
            <i class="fa fa-phone"></i>
            <p>+1 5589 55488 55s</p>
          </div>
        </div>

        <div class="social-links">
          <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
          <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
          <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
          <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
          <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
        </div>

      </div>

      <div class="col-lg-5 col-md-8">
        <div class="form">
          <div id="sendmessage">Your message has been sent. Thank you!</div>
          <div id="errormessage"></div>
          <form action="" method="post" role="form" class="contactForm">
            <div class="form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
              <div class="validation"></div>
            </div>
            <div class="text-center"><button type="submit">Send Message</button></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section> -->
  <!-- #contact -->

  <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

  <script src="https://apis.google.com/js/api.js"></script>
  <!-- JavaScript Libraries -->
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/jquery/jquery-migrate.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="lib/superfish/hoverIntent.js"></script>
  <script src="lib/superfish/superfish.min.js"></script>
  <script src="lib/easing/easing.min.js"></script>
  <script src="lib/modal-video/js/modal-video.js"></script>
  <script src="lib/owlcarousel/owl.carousel.min.js"></script>
  <script src="lib/wow/wow.min.js"></script>
  <!-- Contact Form JavaScript File -->
  <script src="contactform/contactform.js"></script>

  <!-- Template Main Javascript File -->
  <script src="js/main.js"></script>
</body>

</html>