Team Ai
Apppublic

tiny1224/devopsportfolio-pro

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
index.html636 linesDownload Raw Back to root
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