-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (156 loc) · 8.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlogBard</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/783fb9a3cd.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav><b>
<img src="img/Log.png" class="logo" height="120px" width="100px">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<!--<li><a href="#services">Services</a></li>-->
<li><a href="#portfolio">My Blogs</a></li>
<li><a href="#contact">Contact</a></li></b>
</ul>
</nav>
<div class="header-text">
<h2>Navigating the <br><span style="color: #000000"><span style="color: #fba527">"</span>Digital Frontier<span style="color: #fba527">"</span></span> <br>with Nayani Tharushika</h2>
</div>
</div>
</div>
<!----------about-------------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="img/pp.jpeg" height="300" width="360">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>"Hello there! I'm Nayani Tharushika, a dedicated undergraduate student at Sabaragamuwa University in Sri Lanka, and I'm thrilled to welcome you to my IT-centric blog. As an avid explorer of the intricate world of Information Technology, I've crafted this space to share my passion for coding, emerging technologies, and the latest trends in the IT landscape.<br><br>
Within these digital pages, you'll find a mix of insightful articles, practical tutorials, and personal reflections, catering to both IT enthusiasts and those looking to dip their toes into the tech world. Being a student myself, I understand the importance of making complex IT topics approachable, and I strive to provide content that is both informative and engaging.<br><br>
Join me on this journey as we unravel the fascinating facets of Information Technology together. Whether you're navigating the challenges of coursework or simply curious about the ever-evolving tech sphere, there's something here for everyone. Let's connect, learn, and explore the boundless possibilities that the world of IT has to offer. Thanks for visiting, and I hope you enjoy the insights and experiences I share on this platform!"
</p>
</div>
</div>
</div>
</div>
<!-----------------portfolio------------>
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Blogs</h1>
<div class="work-list">
<div class="work">
<img src="img/iot.png" height="200" width="300" >
<div class="layer">
<h3>Internet of Things</h3>
<p>"Explore the transformative impact of IoT on our daily lives in this insightful blog."</p>
<a href="https://iotbyblogbard.blogspot.com/2023/11/internet-of-things.html"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="img/ml.png" height="200" width="300">
<div class="layer">
<h3>Machine Learning</h3>
<p>"Unveiling the magic of machine learning...."</p>
<a href="https://mlbyblogbard.blogspot.com/2023/11/what-is-machine-learning.html"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="img/dl.jpg" height="200" width="300" >
<div class="layer">
<h3>Deep Learning</h3>
<p>"Delve into the future with our blog on the transformative wonders of deep learning."</p>
<a href="https://mlbyblogbard.blogspot.com/2024/02/what-is-deep-learning.html"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="img/g.jpg" height="200" width="300" >
<div class="layer">
<h3>Generative AI</h3>
<p>"Creativity knows no bounds with generative AI at the helm, where innovation and imagination converge in the digital realm."</p>
<a href="https://mlbyblogbard.blogspot.com/2024/03/what-is-generative-ai.html"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
<a href="https://www.blogger.com/blog/posts/68531688426204422" class="btn">See more</a>
</div>
</div>
<!------------contact------------->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i> [email protected]</p>
<p><i class="fa-solid fa-phone"></i> +94764331908</p>
<div class="social-icons">
<a href="https://www.facebook.com/nayani.tharushika.50?mibextid=ZbWKwL"><i class="fa-brands fa-facebook"></i></a>
<a href="https://github.com/untabepala"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/nayani-tharushika-09b03a247/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://www.kaggle.com/"><i class="fa-brands fa-kaggle"></i></a>
<a href="https://instagram.com/nayanitharushika?igshid=OGQ5ZDc2ODk2ZA=="><i class="fa-brands fa-instagram"></i></a>
</div>
<a href="https://untabepala.github.io/" download class="btn btn2">View My Portfolio</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<input type="text" name="Blogname" placeholder="Blog Title" required>
<textarea name="Message" rows="6" placeholder="Write Here..."></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="linke">
<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="nayani-tharushika-09b03a247" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://lk.linkedin.com/in/nayani-tharushika-09b03a247?trk=profile-badge"></a></div>
</div>
<div class="copyright">
<p>Copyright <i class="fa-regular fa-copyright" style="color: #ffffff;"></i> Nayani Tharushika.</p>
</div>
</div>
<script>
var tablinks=document.getElementsByClassName("tab-links");
var tabcontents=document.getElementsByClassName("tab-contents");
function opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link");
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbyCPajCLxX4NBsC_gBFqNCRtk-7ZrV6ZhCl3AvKqDq6aBpitGWlQBGS7Eu52B9xyujXlw/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML="Message sent Successfully"
setTimeout(function(){
msg.innerHTML=""
},5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>