Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Amal SP | AI Engineer & Data Scientist</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #5f0685 0%, #7c3aed 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .skill-pill { | |
| transition: all 0.3s ease; | |
| } | |
| .skill-pill:hover { | |
| transform: scale(1.05); | |
| } | |
| .section-divider { | |
| position: relative; | |
| height: 80px; | |
| overflow: hidden; | |
| } | |
| .section-divider::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| height: 100%; | |
| background: linear-gradient(135deg, #5f0685 0%, #7c3aed 100%); | |
| clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800 bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="gradient-bg text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden border-4 border-indigo-500 shadow-lg bg-white flex items-center justify-center"> | |
| <span><img src="https://media.licdn.com/dms/image/v2/D5603AQGZHT4-xINn8w/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1672069896276?e=1758758400&v=beta&t=YNhOVmbz-e7WMq4wV7hSWSWks2jhA78uLolyGMLUTu4" alt="Profile Photo of Amal SP"AS></span> | |
| </div> | |
| <h1 class="text-2xl font-bold">Amal SP</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#about" class="hover:text-indigo-200 transition">About</a> | |
| <a href="#experience" class="hover:text-indigo-200 transition">Experience</a> | |
| <a href="#projects" class="hover:text-indigo-200 transition">Projects</a> | |
| <a href="#skills" class="hover:text-indigo-200 transition">Skills</a> | |
| <a href="#contact" class="hover:text-indigo-200 transition">Contact</a> | |
| </nav> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="#about" class="block py-2 hover:text-indigo-200 transition">About</a> | |
| <a href="#experience" class="block py-2 hover:text-indigo-200 transition">Experience</a> | |
| <a href="#projects" class="block py-2 hover:text-indigo-200 transition">Projects</a> | |
| <a href="#skills" class="block py-2 hover:text-indigo-200 transition">Skills</a> | |
| <a href="#contact" class="block py-2 hover:text-indigo-200 transition">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">AI Engineer & Data Scientist</h1> | |
| <p class="text-xl md:text-2xl mb-8">Building intelligent systems that solve real-world problems with Generative AI and Machine Learning</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Get In Touch</a> | |
| <a href="#projects" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition">View Projects</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">About Me</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> | |
| <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-indigo-500 shadow-lg"> | |
| <img src="https://media.licdn.com/dms/image/v2/D5603AQGZHT4-xINn8w/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1672069896276?e=1758758400&v=beta&t=YNhOVmbz-e7WMq4wV7hSWSWks2jhA78uLolyGMLUTu4" alt="Profile Photo of Amal SP" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h3 class="text-2xl font-semibold mb-4 text-gray-800">Hello, I'm Amal SP</h3> | |
| <p class="text-lg mb-6 text-gray-600"> | |
| AI Engineer and Data Scientist with a strong foundation in Generative AI (GenAI), Retrieval-Augmented Generation (RAG), and Large Language Models (LLMs). I specialize in creating scalable, intelligent applications that deliver measurable impact. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-indigo-500 mr-3 text-xl"></i> | |
| <span class="text-gray-700">Thiruvananthapuram, India</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-indigo-500 mr-3 text-xl"></i> | |
| <span class="text-gray-700">[email protected]</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone text-indigo-500 mr-3 text-xl"></i> | |
| <span class="text-gray-700">+91 702569917</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-graduation-cap text-indigo-500 mr-3 text-xl"></i> | |
| <span class="text-gray-700">MSc in Data Science</span> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex space-x-4"> | |
| <a href="https://linkedin.com/in/amalsp" target="_blank" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="https://github.com/amalsp" target="_blank" class="bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Education</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">Master of Science in Data Science</h3> | |
| <p class="text-gray-600">University of Kerala</p> | |
| </div> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">2022–2024</span> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">CGPA: 8.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">Bachelor of Mathematics</h3> | |
| <p class="text-gray-600">University of Kerala</p> | |
| </div> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">2017–2020</span> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">CGPA: 7.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Work Experience</h2> | |
| <div class="max-w-4xl mx-auto space-y-8"> | |
| <!-- Experience 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-4 border-indigo-500 card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">AI Engineer Intern</h3> | |
| <p class="text-gray-600">Forcefriction</p> | |
| </div> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">Apr 2025 – Present</span> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Built an AI article generation engine using Mistral 7B, RAG, Streamlit, and FastAPI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Reduced inference latency by 30% with quantization and batching techniques</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Designed chunk-based prompt engineering for structured article outputs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-4 border-indigo-500 card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">Data Scientist</h3> | |
| <p class="text-gray-600">Upwork (Freelance)</p> | |
| </div> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">Nov 2024 – Mar 2025</span> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Developed ETL pipelines and web scraping solutions for 6+ clients across industries</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Automated data cleaning workflows in Python, Excel, and Google Sheets</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Delivered customized data solutions with 100% client satisfaction rate</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-4 border-indigo-500 card-hover transition"> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">Data Science Intern</h3> | |
| <p class="text-gray-600">Pramana AyurTech</p> | |
| </div> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">May 2024 – Dec 2024</span> | |
| </div> | |
| <div class="mt-4"> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Built an Ayurvedic chatbot using LLMs, LangChain, and LangGraph</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Enhanced reasoning capabilities with prompt chaining and knowledge graph integration</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Contributed to the development of AI-powered traditional medicine solutions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Featured Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto"> | |
| <!-- Project 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">AI Article Generator</h3> | |
| <p class="text-gray-600 mb-4">GenAI engine with Mistral 7B, RAG, LangChain, and FAISS for structured article generation</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">Mistral 7B</span> | |
| <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">RAG</span> | |
| <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">LangChain</span> | |
| <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">FAISS</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Achieved 30% latency reduction</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition"> | |
| <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center"> | |
| <i class="fas fa-comment-medical text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Medical Chatbot</h3> | |
| <p class="text-gray-600 mb-4">Doctor recommendation chatbot with Gemini-1.5-Flash and semantic search (FAISS)</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">Gemini-1.5</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">FAISS</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">FastAPI</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">Streamlit</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Integrated knowledge graphs</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3: Customer Segmentation --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition"> | |
| <div class="h-48 bg-gradient-to-r from-blue-500 to-cyan-600 flex items-center justify-center"> | |
| <i class="fas fa-chart-pie text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Customer Segmentation</h3> | |
| <p class="text-gray-600 mb-4">Implemented customer segmentation using K-means clustering with data visualization for targeted marketing</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">K-means</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Scikit-learn</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Matplotlib</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Seaborn</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Pandas</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">NumPy</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Identified 5 distinct segments for improved strategies</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Technical Skills</h2> | |
| <!-- Programming Languages & Data Manipulation --> | |
| <div class="max-w-4xl mx-auto mb-10"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center"> | |
| <i class="fas fa-code mr-2 text-indigo-500"></i> Programming Languages & Data Manipulation | |
| </h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Python</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">SQL</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Pandas</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">NumPy</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">HTML</span> | |
| <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">CSS</span> | |
| </div> | |
| </div> | |
| <!-- Machine Learning & Deep Learning Frameworks --> | |
| <div class="max-w-4xl mx-auto mb-10"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center"> | |
| <i class="fas fa-cubes mr-2 text-indigo-500"></i> Machine Learning & Deep Learning Frameworks | |
| </h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">TensorFlow</span> | |
| <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">PyTorch</span> | |
| <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">Scikit-learn</span> | |
| <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">Keras</span> | |
| <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">Hugging Face Transformers</span> | |
| </div> | |
| </div> | |
| <!-- AI/ML Tools & Vector Databases --> | |
| <div class="max-w-4xl mx-auto mb-10"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center"> | |
| <i class="fas fa-robot mr-2 text-indigo-500"></i> AI/ML Tools & Vector Databases | |
| </h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">LangChain</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">LangGraph</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">FAISS</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">Gemini</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">Pinecone</span> | |
| <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">OpenAI API</span> | |
| </div> | |
| </div> | |
| <!-- Data Visualization & Specializations --> | |
| <div class="max-w-4xl mx-auto"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center"> | |
| <i class="fas fa-star mr-2 text-indigo-500"></i> Data Visualization & Specializations | |
| </h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Matplotlib</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Seaborn</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Tableau</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Machine Learning</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">NLP</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Deep Learning</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">LLMs</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Prompt Engineering</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Web Scraping</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">ETL</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Predictive Analytics</span> | |
| <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Clustering Algorithms</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Certifications Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Certifications</h2> | |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Certification 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-certificate text-indigo-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Google Cloud Career Readiness</h3> | |
| <p class="text-gray-600 text-sm">Google Cloud</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Certification 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fab fa-python text-blue-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Python for Everybody Specialization</h3> | |
| <p class="text-gray-600 text-sm">University of Michigan</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Certification 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-laptop-code text-green-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">HackerRank Problem Solving (Basic)</h3> | |
| <p class="text-gray-600 text-sm">HackerRank</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Certification 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-database text-red-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Foundations of Data Science</h3> | |
| <p class="text-gray-600 text-sm">Google</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Soft Skills Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Soft Skills</h2> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-indigo-50 rounded-lg p-4 text-center"> | |
| <i class="fas fa-lightbulb text-indigo-600 text-3xl mb-2"></i> | |
| <h3 class="font-medium text-gray-800">Adaptive Learning</h3> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 text-center"> | |
| <i class="fas fa-clock text-indigo-600 text-3xl mb-2"></i> | |
| <h3 class="font-medium text-gray-800">Time Management</h3> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 text-center"> | |
| <i class="fas fa-users text-indigo-600 text-3xl mb-2"></i> | |
| <h3 class="font-medium text-gray-800">Team Collaboration</h3> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 text-center"> | |
| <i class="fas fa-comments text-indigo-600 text-3xl mb-2"></i> | |
| <h3 class="font-medium text-gray-800">Communication</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-4"></i> | |
| <div> | |
| <p class="font-medium">Email</p> | |
| <p>[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone mt-1 mr-4"></i> | |
| <div> | |
| <p class="font-medium">Phone</p> | |
| <p>+91 702569917</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-4"></i> | |
| <div> | |
| <p class="font-medium">Location</p> | |
| <p>Thiruvananthapuram, India</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold mb-4">Connect With Me</h3> | |
| <div class="flex space-x-4"> | |
| <a href="https://linkedin.com/in/amalsp" target="_blank" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-50 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="https://github.com/amalsp" target="_blank" class="bg-white text-gray-800 p-3 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Send Me a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"></textarea> | |
| </div> | |
| <button type="submit" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition w-full">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <p>© 2024 Amal SP. All rights reserved.</p> | |
| <p class="mt-2 text-gray-400">AI Engineer & Data Scientist</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |