tiny1224/devopsportfolio-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Chandika Lakshmi Sriram - DevOps Engineer</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 body {13 font-family: 'Inter', sans-serif;14 scroll-behavior: smooth;15 }16 .vanta-bg {17 position: absolute;18 top: 0;19 left: 0;20 width: 100%;21 height: 100%;22 z-index: -1;23 }24 .nav-link {25 position: relative;26 }27 .nav-link::after {28 content: '';29 position: absolute;30 width: 0;31 height: 2px;32 bottom: -2px;33 left: 0;34 background-color: #3b82f6;35 transition: width 0.3s ease;36 }37 .nav-link:hover::after {38 width: 100%;39 }40 .skill-card:hover {41 transform: translateY(-5px);42 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);43 }44 .project-card:hover {45 transform: translateY(-5px);46 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);47 }48 </style>49</head>50<body class="bg-gray-50 text-gray-800">51 <!-- Navigation -->52 <nav class="fixed w-full bg-white shadow-sm z-50">53 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">54 <div class="flex justify-between h-16">55 <div class="flex items-center">56 <span class="text-xl font-bold text-blue-500">Chandika Lakshmi Sriram</span>57 </div>58 <div class="hidden md:flex items-center space-x-8">59 <a href="#about" class="nav-link text-gray-700 hover:text-blue-500">About</a>60 <a href="#projects" class="nav-link text-gray-700 hover:text-blue-500">Projects</a>61 <a href="#skills" class="nav-link text-gray-700 hover:text-blue-500">Skills</a>62 <a href="#education" class="nav-link text-gray-700 hover:text-blue-500">Education</a>63 <a href="#certifications" class="nav-link text-gray-700 hover:text-blue-500">Certifications</a>64 <a href="#internships" class="nav-link text-gray-700 hover:text-blue-500">Internships</a>65 <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500">Contact</a>66 </div>67 <div class="md:hidden flex items-center">68 <button id="menu-btn" class="text-gray-700 hover:text-blue-500">69 <i data-feather="menu"></i>70 </button>71 </div>72 </div>73 </div>74 </nav>75 76 <!-- Mobile Menu -->77 <div id="mobile-menu" class="hidden fixed inset-0 bg-white z-40 pt-16">78 <div class="flex flex-col items-center space-y-6 py-8">79 <a href="#about" class="text-gray-700 hover:text-blue-500 text-lg">About</a>80 <a href="#projects" class="text-gray-700 hover:text-blue-500 text-lg">Projects</a>81 <a href="#skills" class="text-gray-700 hover:text-blue-500 text-lg">Skills</a>82 <a href="#education" class="text-gray-700 hover:text-blue-500 text-lg">Education</a>83 <a href="#certifications" class="text-gray-700 hover:text-blue-500 text-lg">Certifications</a>84 <a href="#internships" class="text-gray-700 hover:text-blue-500 text-lg">Internships</a>85 <a href="#contact" class="text-gray-700 hover:text-blue-500 text-lg">Contact</a>86 </div>87 </div>88 89 <!-- Hero Section -->90 <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 flex items-center min-h-screen">91 <div id="vanta-bg" class="vanta-bg"></div>92 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">93 <div class="flex flex-col md:flex-row items-center">94 <div class="md:w-1/2 mb-12 md:mb-0">95 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Chandika Lakshmi Sriram</h1>96 <h2 class="text-2xl md:text-3xl text-blue-500 mb-6">DevOps Engineer | Cloud & Automation Enthusiast</h2>97 <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl">98 Motivated Computer Science graduate with a strong interest in DevOps and Cloud Technologies. 99 Hands-on experience with CI/CD pipelines, Docker, Kubernetes, and Linux through projects and self-learning.100 </p>101 <div class="flex space-x-4">102 <a href="#contact" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition duration-300">103 Contact Me104 </a>105 <a href="#projects" class="border border-blue-500 text-blue-500 hover:bg-blue-50 px-6 py-3 rounded-lg transition duration-300">106 View Projects107 </a>108 </div>109 </div>110 <div class="md:w-1/2 flex justify-center">111 <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl">112 <img src="http://static.photos/people/640x360/1" alt="Chandika Lakshmi Sriram" class="w-full h-full object-cover">113 </div>114 </div>115 </div>116 </div>117 </section>118 119 <!-- About Section -->120 <section id="about" class="py-16 bg-white">121 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">122 <h2 class="text-3xl font-bold text-center mb-12">About Me</h2>123 <div class="flex flex-col md:flex-row items-center">124 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">125 <div class="bg-gray-100 p-6 rounded-lg shadow-md">126 <p class="text-lg text-gray-700">127 I am a recent graduate of Sri Vasavi Institute Of Engineering And Technology, where I earned my B.Tech with an 8.05 GPA. My academic journey provided a solid foundation in computer science, but it was my curiosity about how software is built, deployed, and maintained that led me to the world of DevOps.128 </p>129 <p class="text-lg text-gray-700 mt-4">130 Through hands-on projects and self-learning, I developed a strong interest in automation, cloud technologies, and containerization. I am passionate about creating efficient systems and optimizing workflows to ensure software is delivered seamlessly.131 </p>132 </div>133 </div>134 <div class="md:w-1/2">135 <div class="bg-gray-100 p-6 rounded-lg shadow-md">136 <h3 class="text-xl font-semibold mb-4">Professional Goals</h3>137 <p class="text-lg text-gray-700">138 My professional goal is to build a career as a Site Reliability Engineer (SRE), focusing on building scalable, reliable, and highly-available infrastructure. I am eager to contribute to a team where I can apply my skills and continue learning in this dynamic field.139 </p>140 <div class="mt-6 flex space-x-4">141 <a href="https://www.linkedin.com/in/chandika-lakshmi-sriram-538765228/" target="_blank" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">142 <i data-feather="linkedin" class="mr-2"></i> LinkedIn143 </a>144 <a href="https://github.com/sriramch163" target="_blank" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg transition duration-300 flex items-center">145 <i data-feather="github" class="mr-2"></i> GitHub146 </a>147 </div>148 </div>149 </div>150 </div>151 </div>152 </section>153 154 <!-- Projects Section -->155 <section id="projects" class="py-16 bg-gray-50">156 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">157 <h2 class="text-3xl font-bold text-center mb-12">Projects</h2>158 <div class="grid md:grid-cols-2 gap-8">159 <!-- Project 1 -->160 <div class="project-card bg-white p-6 rounded-lg shadow-md transition duration-300">161 <h3 class="text-xl font-semibold mb-2">Containerisation and Deployment of Wisecow Application on Kubernetes</h3>162 <p class="text-gray-600 mb-4">163 Containerized and deployed the WiseCow application on a Kubernetes environment using Docker, with automated CI/CD workflows via GitHub Actions. Secured application communication with TLS and implemented optional automation scripts for system monitoring and backup.164 </p>165 <div class="flex flex-wrap gap-2 mb-4">166 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Docker</span>167 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Kubernetes</span>168 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">GitHub Actions</span>169 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">TLS</span>170 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Bash</span>171 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Python</span>172 </div>173 <a href="https://github.com/sriramch163/wisecow" target="_blank" class="text-blue-500 hover:text-blue-600 flex items-center">174 <i data-feather="github" class="mr-2"></i> View on GitHub175 </a>176 </div>177 178 <!-- Project 2 -->179 <div class="project-card bg-white p-6 rounded-lg shadow-md transition duration-300">180 <h3 class="text-xl font-semibold mb-2">Android Malware Detection using Machine Learning</h3>181 <p class="text-gray-600 mb-4">182 Developed a machine learning-based system to detect malicious Android applications by analyzing app features and behavior patterns, enhancing device security.183 </p>184 <div class="flex flex-wrap gap-2 mb-4">185 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Python</span>186 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Pandas</span>187 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Scikit-learn</span>188 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Matplotlib</span>189 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">APKTool</span>190 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Androguard</span>191 </div>192 <a href="#" class="text-blue-500 hover:text-blue-600 flex items-center">193 <i data-feather="code" class="mr-2"></i> Coming Soon194 </a>195 </div>196 </div>197 </div>198 </section>199 200 <!-- Skills Section -->201 <section id="skills" class="py-16 bg-white">202 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">203 <h2 class="text-3xl font-bold text-center mb-12">Skills</h2>204 <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">205 <!-- Cloud -->206 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">207 <div class="flex items-center mb-3">208 <i data-feather="cloud" class="text-blue-500 mr-3"></i>209 <h3 class="text-lg font-semibold">Cloud</h3>210 </div>211 <ul class="space-y-2">212 <li class="flex items-center">213 <i data-feather="check" class="text-green-500 mr-2"></i>214 <span>AWS (EC2, VPC, Route 53)</span>215 </li>216 <li class="flex items-center">217 <i data-feather="check" class="text-green-500 mr-2"></i>218 <span>AWS IAM, S3, CloudWatch</span>219 </li>220 <li class="flex items-center">221 <i data-feather="check" class="text-green-500 mr-2"></i>222 <span>Elastic Beanstalk, EKS</span>223 </li>224 <li class="flex items-center">225 <i data-feather="check" class="text-green-500 mr-2"></i>226 <span>AWS CodeBuild, EFS</span>227 </li>228 </ul>229 </div>230 231 <!-- CI/CD -->232 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">233 <div class="flex items-center mb-3">234 <i data-feather="repeat" class="text-blue-500 mr-3"></i>235 <h3 class="text-lg font-semibold">CI/CD</h3>236 </div>237 <ul class="space-y-2">238 <li class="flex items-center">239 <i data-feather="check" class="text-green-500 mr-2"></i>240 <span>GitHub Actions</span>241 </li>242 <li class="flex items-center">243 <i data-feather="check" class="text-green-500 mr-2"></i>244 <span>GitLab CI/CD</span>245 </li>246 <li class="flex items-center">247 <i data-feather="check" class="text-green-500 mr-2"></i>248 <span>Jenkins</span>249 </li>250 </ul>251 </div>252 253 <!-- Containers -->254 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">255 <div class="flex items-center mb-3">256 <i data-feather="box" class="text-blue-500 mr-3"></i>257 <h3 class="text-lg font-semibold">Containers</h3>258 </div>259 <ul class="space-y-2">260 <li class="flex items-center">261 <i data-feather="check" class="text-green-500 mr-2"></i>262 <span>Docker</span>263 </li>264 <li class="flex items-center">265 <i data-feather="check" class="text-green-500 mr-2"></i>266 <span>Kubernetes</span>267 </li>268 <li class="flex items-center">269 <i data-feather="check" class="text-green-500 mr-2"></i>270 <span>Minikube</span>271 </li>272 </ul>273 </div>274 275 <!-- IaC -->276 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">277 <div class="flex items-center mb-3">278 <i data-feather="code" class="text-blue-500 mr-3"></i>279 <h3 class="text-lg font-semibold">Infrastructure as Code</h3>280 </div>281 <ul class="space-y-2">282 <li class="flex items-center">283 <i data-feather="check" class="text-green-500 mr-2"></i>284 <span>Terraform</span>285 </li>286 </ul>287 </div>288 289 <!-- Version Control -->290 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">291 <div class="flex items-center mb-3">292 <i data-feather="git-branch" class="text-blue-500 mr-3"></i>293 <h3 class="text-lg font-semibold">Version Control</h3>294 </div>295 <ul class="space-y-2">296 <li class="flex items-center">297 <i data-feather="check" class="text-green-500 mr-2"></i>298 <span>Git</span>299 </li>300 <li class="flex items-center">301 <i data-feather="check" class="text-green-500 mr-2"></i>302 <span>GitHub</span>303 </li>304 <li class="flex items-center">305 <i data-feather="check" class="text-green-500 mr-2"></i>306 <span>Bitbucket</span>307 </li>308 </ul>309 </div>310 311 <!-- Operating Systems -->312 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">313 <div class="flex items-center mb-3">314 <i data-feather="monitor" class="text-blue-500 mr-3"></i>315 <h3 class="text-lg font-semibold">Operating Systems</h3>316 </div>317 <ul class="space-y-2">318 <li class="flex items-center">319 <i data-feather="check" class="text-green-500 mr-2"></i>320 <span>Linux (Ubuntu, CentOS)</span>321 </li>322 <li class="flex items-center">323 <i data-feather="check" class="text-green-500 mr-2"></i>324 <span>Windows</span>325 </li>326 </ul>327 </div>328 329 <!-- Scripting -->330 <div class="skill-card bg-gray-50 p-6 rounded-lg shadow-sm transition duration-300">331 <div class="flex items-center mb-3">332 <i data-feather="terminal" class="text-blue-500 mr-3"></i>333 <h3 class="text-lg font-semibold">Scripting</h3>334 </div>335 <ul class="space-y-2">336 <li class="flex items-center">337 <i data-feather="check" class="text-green-500 mr-2"></i>338 <span>Bash</span>339 </li>340 <li class="flex items-center">341 <i data-feather="check" class="text-green-500 mr-2"></i>342 <span>Python</span>343 </li>344 </ul>345 </div>346 </div>347 </div>348 </section>349 350 <!-- Education Section -->351 <section id="education" class="py-16 bg-gray-50">352 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">353 <h2 class="text-3xl font-bold text-center mb-12">Education</h2>354 <div class="space-y-8">355 <!-- B.Tech -->356 <div class="bg-white p-6 rounded-lg shadow-md">357 <div class="flex flex-col md:flex-row md:justify-between md:items-center">358 <div>359 <h3 class="text-xl font-semibold">Sri Vasavi Institute Of Engineering And Technology, Nandamuru</h3>360 <p class="text-gray-600">B.Tech - Computer Science</p>361 </div>362 <div class="mt-4 md:mt-0">363 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">8.05 GPA</span>364 <p class="text-gray-600 mt-2">11/2021 - 04/2025</p>365 </div>366 </div>367 </div>368 369 <!-- Junior College -->370 <div class="bg-white p-6 rounded-lg shadow-md">371 <div class="flex flex-col md:flex-row md:justify-between md:items-center">372 <div>373 <h3 class="text-xl font-semibold">Narayana Junior College, Machilipatnam</h3>374 <p class="text-gray-600">MPC (Mathematics, Physics, Chemistry)</p>375 </div>376 <div class="mt-4 md:mt-0">377 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">94.3%</span>378 <p class="text-gray-600 mt-2">06/2019 - 04/2021</p>379 </div>380 </div>381 </div>382 383 <!-- School -->384 <div class="bg-white p-6 rounded-lg shadow-md">385 <div class="flex flex-col md:flex-row md:justify-between md:items-center">386 <div>387 <h3 class="text-xl font-semibold">Narayana Group Of Schools, Machilipatnam</h3>388 <p class="text-gray-600">SSC (Secondary School Certificate)</p>389 </div>390 <div class="mt-4 md:mt-0">391 <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full">9.8 GPA</span>392 <p class="text-gray-600 mt-2">06/2018 - 04/2019</p>393 </div>394 </div>395 </div>396 </div>397 </div>398 </section>399 400 <!-- Certifications Section -->401 <section id="certifications" class="py-16 bg-white">402 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">403 <h2 class="text-3xl font-bold text-center mb-12">Certifications</h2>404 <div class="grid md:grid-cols-2 gap-6">405 <!-- AWS -->406 <div class="bg-gray-50 p-6 rounded-lg shadow-sm">407 <div class="flex items-start">408 <div class="bg-blue-100 p-3 rounded-lg mr-4">409 <i data-feather="award" class="text-blue-500"></i>410 </div>411 <div>412 <h3 class="text-xl font-semibold">AWS Cloud Practitioner Essentials</h3>413 <p class="text-gray-600">Issued by: AWS</p>414 <p class="text-gray-600">Year: 2025</p>415 <a href="#" class="text-blue-500 hover:text-blue-600 mt-2 inline-block">View Certificate</a>416 </div>417 </div>418 </div>419 420 <!-- Python -->421 <div class="bg-gray-50 p-6 rounded-lg shadow-sm">422 <div class="flex items-start">423 <div class="bg-blue-100 p-3 rounded-lg mr-4">424 <i data-feather="award" class="text-blue-500"></i>425 </div>426 <div>427 <h3 class="text-xl font-semibold">Python for Data Science</h3>428 <p class="text-gray-600">Issued by: IBM</p>429 <p class="text-gray-600">Year: 2025</p>430 <a href="#" class="text-blue-500 hover:text-blue-600 mt-2 inline-block">View Certificate</a>431 </div>432 </div>433 </div>434 435 <!-- DevOps Pre-Req -->436 <div class="bg-gray-50 p-6 rounded-lg shadow-sm">437 <div class="flex items-start">438 <div class="bg-blue-100 p-3 rounded-lg mr-4">439 <i data-feather="award" class="text-blue-500"></i>440 </div>441 <div>442 <h3 class="text-xl font-semibold">DevOps Pre-Requisite Course</h3>443 <p class="text-gray-600">Issued by: KODEKLOUD</p>444 <p class="text-gray-600">Year: 2025</p>445 <a href="#" class="text-blue-500 hover:text-blue-600 mt-2 inline-block">View Certificate</a>446 </div>447 </div>448 </div>449 450 <!-- DevOps Advanced -->451 <div class="bg-gray-50 p-6 rounded-lg shadow-sm">452 <div class="flex items-start">453 <div class="bg-blue-100 p-3 rounded-lg mr-4">454 <i data-feather="award" class="text-blue-500"></i>455 </div>456 <div>457 <h3 class="text-xl font-semibold">DevOps Beginners to Advanced with Projects</h3>458 <p class="text-gray-600">Issued by: UDEMY</p>459 <p class="text-gray-600">Year: 2025</p>460 <a href="#" class="text-blue-500 hover:text-blue-600 mt-2 inline-block">View Certificate</a>461 </div>462 </div>463 </div>464 </div>465 </div>466 </section>467 468 <!-- Internships Section -->469 <section id="internships" class="py-16 bg-gray-50">470 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">471 <h2 class="text-3xl font-bold text-center mb-12">Internships</h2>472 <div class="grid md:grid-cols-2 gap-8">473 <!-- AWS AI-ML -->474 <div class="bg-white p-6 rounded-lg shadow-md">475 <h3 class="text-xl font-semibold mb-2">AWS AI-ML Virtual Internship</h3>476 <p class="text-gray-600 mb-4">AICTE & Eduskills | Jan - Mar 2024</p>477 <div class="bg-blue-50 p-4 rounded-lg">478 <h4 class="font-medium mb-2">Key Responsibilities and Achievements:</h4>479 <ul class="list-disc pl-5 space-y-1">480 <li>Gained hands-on experience in building and deploying machine learning models on AWS</li>481 <li>Developed data pipelines and deployed ML models using SageMaker</li>482 <li>Created automation scripts with Lambda</li>483 <li>Used S3, EC2, and CloudWatch to manage data and monitor application performance</li>484 </ul>485 </div>486 </div>487 488 <!-- Web Development -->489 <div class="bg-white p-6 rounded-lg shadow-md">490 <h3 class="text-xl font-semibold mb-2">Web Development Internship</h3>491 <p class="text-gray-600 mb-4">BIST Technologies | Dec 2024 - Apr 2025</p>492 <div class="bg-blue-50 p-4 rounded-lg">493 <h4 class="font-medium mb-2">Key Responsibilities and Achievements:</h4>494 <ul class="list-disc pl-5 space-y-1">495 <li>Focused on front-end development, contributing to UI/UX design</li>496 <li>Implemented new features using HTML, CSS, and JavaScript</li>497 <li>Built and deployed web applications with React and Node.js</li>498 <li>Worked with Git for version control and team collaboration</li>499 </ul>500 </div>501 </div>502 </div>503 </div>504 </section>505 506 <!-- Contact Section -->507 <section id="contact" class="py-16 bg-white">508 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">509 <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2>510 <div class="flex flex-col md:flex-row">511 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">512 <div class="bg-gray-50 p-6 rounded-lg shadow-sm">513 <h3 class="text-xl font-semibold mb-4">Contact Information</h3>514 <div class="space-y-4">515 <div class="flex items-start">516 <i data-feather="mail" class="text-blue-500 mr-3 mt-1"></i>517 <div>518 <h4 class="font-medium">Email</h4>519 <a href="mailto:sriramch584@gmail.com" class="text-blue-500 hover:text-blue-600">sriramch584@gmail.com</a>520 </div>521 </div>522 <div class="flex items-start">523 <i data-feather="linkedin" class="text-blue-500 mr-3 mt-1"></i>524 <div>525 <h4 class="font-medium">LinkedIn</h4>526 <a href="https://www.linkedin.com/in/chandika-lakshmi-sriram-538765228/" target="_blank" class="text-blue-500 hover:text-blue-600">linkedin.com/in/chandika-lakshmi-sriram</a>527 </div>528 </div>529 <div class="flex items-start">530 <i data-feather="github" class="text-blue-500 mr-3 mt-1"></i>531 <div>532 <h4 class="font-medium">GitHub</h4>533 <a href="https://github.com/sriramch163" target="_blank" class="text-blue-500 hover:text-blue-600">github.com/sriramch163</a>534 </div>535 </div>536 </div>537 </div>538 </div>539 <div class="md:w-1/2">540 <div class="bg-gray-50 p-6 rounded-lg shadow-sm">541 <h3 class="text-xl font-semibold mb-4">Send Me a Message</h3>542 <form class="space-y-4">543 <div>544 <label for="name" class="block text-sm font-medium text-gray-700">Name</label>545 <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">546 </div>547 <div>548 <label for="email" class="block text-sm font-medium text-gray-700">Email</label>549 <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">550 </div>551 <div>552 <label for="message" class="block text-sm font-medium text-gray-700">Message</label>553 <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>554 </div>555 <div>556 <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md transition duration-300">557 Send Message558 </button>559 </div>560 </form>561 </div>562 </div>563 </div>564 </div>565 </section>566 567 <!-- Footer -->568 <footer class="bg-gray-800 text-white py-8">569 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">570 <div class="flex flex-col md:flex-row justify-between items-center">571 <div class="mb-4 md:mb-0">572 <p>© 2025 Chandika Lakshmi Sriram. All Rights Reserved.</p>573 </div>574 <div class="flex space-x-6">575 <a href="https://www.linkedin.com/in/chandika-lakshmi-sriram-538765228/" target="_blank" class="hover:text-blue-400">576 <i data-feather="linkedin"></i>577 </a>578 <a href="https://github.com/sriramch163" target="_blank" class="hover:text-blue-400">579 <i data-feather="github"></i>580 </a>581 <a href="mailto:sriramch584@gmail.com" class="hover:text-blue-400">582 <i data-feather="mail"></i>583 </a>584 </div>585 </div>586 </div>587 </footer>588 589 <script>590 feather.replace();591 592 // Mobile menu toggle593 const menuBtn = document.getElementById('menu-btn');594 const mobileMenu = document.getElementById('mobile-menu');595 596 menuBtn.addEventListener('click', () => {597 mobileMenu.classList.toggle('hidden');598 });599 600 // Close mobile menu when clicking a link601 const mobileLinks = document.querySelectorAll('#mobile-menu a');602 mobileLinks.forEach(link => {603 link.addEventListener('click', () => {604 mobileMenu.classList.add('hidden');605 });606 });607 608 // Vanta.js background609 VANTA.GLOBE({610 el: "#vanta-bg",611 mouseControls: true,612 touchControls: true,613 gyroControls: false,614 minHeight: 200.00,615 minWidth: 200.00,616 scale: 1.00,617 scaleMobile: 1.00,618 color: "#3b82f6",619 backgroundColor: "#f8fafc",620 size: 0.8621 });622 623 // Smooth scrolling for anchor links624 document.querySelectorAll('a[href^="#"]').forEach(anchor => {625 anchor.addEventListener('click', function (e) {626 e.preventDefault();627 628 document.querySelector(this.getAttribute('href')).scrollIntoView({629 behavior: 'smooth'630 });631 });632 });633 </script>634</body>635</html>636 