<link rel="icon" type="image/png" href="./img/emoji/ico.jpg" hreflang="en-us" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SGBNM9778S"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SGBNM9778S');
</script>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: transparent; /* Set the background to transparent */
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
font-size: 24px;
text-decoration: none;
color: white;
}
.menu ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.menu li {
margin-right: 20px;
}
.menu a {
text-decoration: none;
color: white;
}
.burger {
display: none;
flex-direction: column;
cursor: pointer;
}
.line {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
}
@media screen and (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
background-color: #333;
width: 100%;
}
.menu.active {
display: flex;
}
.menu li {
margin-right: 0;
margin-bottom: 10px;
text-align: center;
}
.burger {
display: flex;
}
}
</style>
<!-- Favicon -->
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter/dist/alpine-typewriter.min.js" defer></script>
<!-- Page Title -->
<title>Kavindu Yasintha Silva</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134673355-1"></script>
<!-- importan this Animation Defind the sky js id ==-->
<!-- CSS Files -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="animation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Open Graph meta tags for image sharing -->
<meta http-equiv = "cookie" content = "Kavindu yasintha Silva" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta property="og:type" content="website" />
<meta property="og:url" content="www.kavinduyasintha.info/" />
<meta property="og:site_name" content="kavinduyasintha" />
<meta property="og:image" content="" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="800" />
<meta property="og:image:type" content="image/png" />
<meta property="og:locale" content="en_US" />
<link rel="stylesheet" href="css/main.css" hreflang="en-us" />
<link rel="stylesheet" href="css/main.css" hreflang="en-us" />
<link rel="stylesheet" type="text/css" href="css/a.css">
<script>
const burger = document.getElementById('burger');
const menu = document.querySelector('.menu');
burger.addEventListener('click', () => {
menu.classList.toggle('active');
});
</script>
<!-- This is the Top Section (Above Water) -->
<section>
<img src="images/land/sky.png" id="sky" class="wallpaper">
<img src="images/land/sun.png" id="sun">
<img src="images/land/mountains.png" id="mountains" class="wallpaper">
<img src="images/land/cloud.png" id="cloud">
<h2 id="text"><span>Welcome</span><br>Kavindu Yasintha 🐝</h2>
<img src="images/land/forest.png" id="forest">
<img src="images/land/bird1.png" id="bird1">
<img src="images/land/bird2.png" id="bird2">
<a href="#sec" id="explore">scroll</a>
<img src="images/land/rocks.png" id="rocks">
<img src="images/land/splash.png" id="splash">
<img src="images/land/water.png" id="water">
</section>
<!-- This is the Middle Section (Below Water) which has content -->
<div class="sec" id="sec">
<!-- Importing sea background images (on top.. so that it hides behind glass content) -->
<img src="images/sea/sea1.png" id="sea1" class="undersea">
<img src="images/sea/sea2.png" id="sea2" class="undersea">
<img src="images/sea/sea3.png" id="sea3" class="undersea">
<img src="images/sea/sea4.png" id="sea4" class="undersea">
<img src="images/sea/sea5.png" id="sea5" class="undersea">
<img src="images/sea/sea6.png" id="sea6" class="undersea">
<img src="images/sea/sea7.png" id="sea7" class="undersea">
<img src="images/sea/sea8.png" id="sea8" class="undersea">
<style>
.typewriter {
display: inline-block;
overflow: hidden; /* Hide overflowing characters */
border-right: 0.15em solid #333; /* Create the cursor effect */
white-space: nowrap; /* Prevent line breaks */
margin: 0; /* Remove default margin */
font-size: 26px; /* Adjust font size as needed */
font-family: monospace; /* Use a monospaced font for consistent spacing */
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}
/* Typing animation */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* Cursor blinking animation */
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: #333;
}
}
</style>
<!-- Text Content here -->
<div class="typewriter"></div>
<h2>Kavindu Yasintha Silva</h2>
<div id="name">Software Engineer 🐝</div>
<script>
const typewriterText = document.querySelector(".typewriter");
const phrases = [
"අයුබෝවන් 🙏",
"Hello 👋",
"Bonjour 👋",
"你好 🙌",
"Привет 🙏",
"こんにちは 🙏",
"வணக்கம் 🖐"
];
let phraseIndex = 0;
let characterIndex = 0;
function type() {
if (characterIndex < phrases[phraseIndex].length) {
typewriterText.textContent += phrases[phraseIndex][characterIndex];
characterIndex++;
setTimeout(type, 100);
} else {
setTimeout(erase, 1000);
}
}
function erase() {
if (characterIndex > 0) {
typewriterText.textContent = phrases[phraseIndex].substring(0, characterIndex - 1);
characterIndex--;
setTimeout(erase, 50);
} else {
phraseIndex = (phraseIndex + 1) % phrases.length;
setTimeout(type, 250);
}
}
type();
</script>
<br>
<div class="glass" id="about">
<h3>About</h3>
<p>
Welcome to my world of software engineering! I'm Kavindu Yasintha Silva (Sky Silva), a passionate software engineer with a drive to innovate and a dedication to excellence.<br>
<strong><span>Education:</span></strong> .<br>
University of Plymouth: Gained a solid foundation in software engineering principles, honing analytical and problem-solving skills.
NSBM Green University: Explored advanced programming paradigms, software architecture, and emerging technologies. .<br>
Expertise: My journey has led me to master a range of skills, including:<br>
</p>
</div>
<br>
<div class="glass" id="certification_badges">
<h3>certification & badges</h3>
<div class="container">
<div class="row">
<div class="col-sm">
<h5>certification</h5>
<ul>
<a href="https://coursera.org/share/e05b7c904d8cc626bf7421ab50d8583b"> <li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Google Cloud Platform Big Data and Machine Learning Fundamentals</li></a>
<a href="https://coursera.org/share/f587a1dd62902f98b5d41877e5a9eb83"> <li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Essential Google Cloud Infrastructure: Foundation</li></a>
<a href="https://coursera.org/share/dbaeefee7f6282597e478c82e2c38c8e"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Essential Google Cloud Infrastructure: Foundation</li></a>
<a href="https://www.freecodecamp.org/certification/kavinduyasintha/javascript-algorithms-and-data-structures"> <li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> JavaScript Algorithms and Data Structures</li></a>
<a href="https://www.freecodecamp.org/certification/kavinduyasintha/front-end-libraries"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Front End Libraries</li></a>
<a href="https://www.freecodecamp.org/certification/kavinduyasintha/data-visualization"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Data Visualization</li></a>
<a href="https://www.freecodecamp.org/certification/kavinduyasintha/responsive-web-design"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Responsive Web Design</li></a>
</ul>
</div>
<div class="col-sm">
<h5>badges</h5>
<ul>
<a href="https://www.youracclaim.com/badges/7e3a0888-6313-43fa-94b5-bdbd5edc0d17/public_url"> <li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> SAS Programming 1: Essentials</li></a>
<a href="https://www.youracclaim.com/badges/f256ecd7-a7a6-4231-a581-62156ae38b0d/public_url"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Correlation and Regression</li>
</a>
<a href="https://www.youracclaim.com/badges/60d64ec5-ef06-417c-9845-848b0f08388c/public_url"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Decision Making with Data</li>
</a>
<a href="https://www.youracclaim.com/badges/1973ffcc-cad8-4f92-b596-4548d226e245/public_url"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> LFD102: A Beginner's Guide to Open Source Software Development</li>
</a>
<a href="https://www.youracclaim.com/users/kavinduyasinthasilva"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> LFC210: Fundamentals of Professional Open Source Management</li>
</a>
<a href="https://www.youracclaim.com/users/kavinduyasinthasilva"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> LFC101: Inclusive Speaker Orientation</li>
</a>
<a href="https://www.youracclaim.com/users/kavinduyasinthasilva"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> LFD103: A Beginner's Guide to Linux Kernel Development</li>
</a>
<a href="https://www.youracclaim.com/users/kavinduyasinthasilva"><li class="skillz__category__item"><i class="fa fa-circle-thin" aria-hidden="true"></i> Design of Experiments</li>
</a>
</ul>
</div>
</div>
</div>
</div>
<br>
<div class="glass" id="Skills">
<h5>Skills</h5>
<div class="container">
<div class="row">
<div class="col-sm">
<h5>Languages</h5>
<ul>
<li class="skillz__category__item">GO Lang</li>
<li class="skillz__category__item">PHP</li>
<li class="skillz__category__item">C#</li>
<li class="skillz__category__item">Java, Kotlin ,Flutter</li>
<li class="skillz__category__item">C#</li>
<li class="skillz__category__item">Node.JS, Js,php</li>
<li class="skillz__category__item">Laravel</li>
</ul>
</div>
<div class="col-sm">
<h5>Frameworks</h5>
<ul>
<li class="skillz__category__item"><i class="fa fa-window-close-o" aria-hidden="true"></i> React</li>
<li class="skillz__category__item"><i class="fa fa-window-close-o" aria-hidden="true"></i> Laravel</li>
<li class="skillz__category__item"><i class="fa fa-window-close-o" aria-hidden="true"></i>Dot Net Framwork</li>
</ul>
</div>
<div class="col-sm">
<h5>Tool</h5>
<ul>
<li class="skillz__category__item"><i class="fa fa-github" aria-hidden="true"></i> Github,</li>
<li class="skillz__category__item"><i class="fa fa-cloud" aria-hidden="true"></i> Azure </li>
<li class="skillz__category__item"><i class="fa fa-amazon" aria-hidden="true"></i> Aws </li>
<li class="skillz__category__item"><i class="fa fa-google" aria-hidden="true"></i> Google Cloud </li>
<li class="skillz__category__item"><i class="fa fa-linux" aria-hidden="true"></i> Linux </li>
</ul>
</div>
</div>
</div>
</div>
<br>
<div class="glass" id="Projects">
<h5>Projects</h5>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem; background-color: #085a7a ; border-radius: 15%" >
<img src="img/sky.jpg" alt="Card image cap">
<h6 class="card-title" style="margin: 5px">Smart Parking System</h6>
<p class="card-text">"There is almost no space for parking, and they are bit difficult to find. This system can Identified Primarily by the number plates of the vehicles which obtain the driver details. Almost drivers can use any parking space from one place"</p>
<a href="https://github.com/kavindyasinthasilva/Image-Processing-Smart-parking-system" class="btn btn-primary">Github</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem; background-color: #085a7a ; border-radius: 15%" >
<img src="img/skvindu.jpg" alt="Card image cap">
<h6 class="card-title" style="margin: 5px">Keells-System</h6>
<p class="card-text">"Farming Web application - PHP"</p>
<a href="https://github.com/kavindyasinthasilva/keells-System" class="btn btn-primary">Github</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem; background-color: #085a7a ; border-radius: 15%" >
<img src="img/PN877S1.jpg" alt="Card image cap">
<h6 class="card-title" style="margin: 5px">Beauty Plus</h6>
<p class="card-text">"This application has now 30k more downlodes.The world is so busy .So I am sure this app will be used to maintain the beauty of the person who is used to mobile phones,This has been created by bringing together sources from all over the world."</p>
<a href="https://play.google.com/store/apps/details?id=com.kavinduyasintha.beauty" class="btn btn-primary">Play Store</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card" style="width: 18rem; background-color: #085a7a ; border-radius: 15%" >
<img src="img/projects/sky.jpg" alt="Card image cap">
<h6 class="card-title" style="margin: 5px">STool</h6>
<p class="card-text"> "STool" min Tool Application .it use day today life.mostly i taget
all ages and small phone. app size is 4MB .Eny one can contribute it my github"</p>
<a href="https://play.google.com/store/apps/dev?id=8885597054835947501&hl=en&gl=US" class="btn btn-primary">Play Store</a>
</div>
</div>
</div>
</div>
<br>
<div class="glass">
<a href=" https://github.com/kavindyasinthasilva"><h5>Github</h5></a>
<img width="100%" src="https://ghchart.rshah.org/kavindyasinthasilva" alt="2016rshah's Github chart" />
</div>
<!-- Importing fish and seabed images -->
<img src="images/sea/fish1.png" id="fish1" class="fishes">
<img src="images/sea/fish2.png" id="fish2" class="fishes">
<img src="images/sea/fish3.png" id="fish3" class="fishes">
<img src="images/sea/fish4.png" id="fish4" class="fishes">
<img src="images/sea/oceanbed.png" id="seabed" class="fishes">
<!-- Container for the bubble animation -->
<div class="bubbles">
<img src="images/sea/bubble.png" alt="">
<img src="images/sea/bubble.png" alt="">
<img src="images/sea/bubble.png" alt="">
<img src="images/sea/bubble.png" alt="">
<img src="images/sea/bubble.png" alt="">
<img src="images/sea/bubble.png" alt="">
<img src="images/sea/bubble.png" alt="">
</div>
</div>
<!-- Code for the footer -->
<div class="footer" id="footer">
Do Follow Me On:
<div class="wrapper">
<div class="social-media">
<div class="icon">
<i class="fa-brands fa-instagram"></i>
</div>
<span>Instagram</span>
</div>
<div class="social-media">
<div class="icon">
<i class="fa-brands fa-linkedin"></i>
</div>
<span>LinkedIn</span>
</div>
<div class="social-media">
<div class="icon">
<i class="fa-brands fa-github"></i>
</div>
<span>GitHub</span>
</div>
<div class="social-media">
<div class="icon">
<i class="fa-solid fa-link"></i>
</div>
<span>Portfolio</span>
</div>
</div>
<span>A website created by Kavindu Yasintha ❤️</span>
</div>
<!-- The button to scroll back to top -->
<a id="top" href="#"> <i class="fas fa-arrow-up"></i> </a>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>