Spaces:
Running
Running
| <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Sourish Dey - Cloud & Data Science Engineer | MLOps | AI/ML | DevOps | Cloud Computing"> | |
| <meta name="keywords" content="Cloud Engineer, Data Scientist, MLOps, DevOps, AI/ML, Portfolio"> | |
| <title>Sourish Dey | Cloud & Data Science Engineer</title> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="script.js" defer></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="font-poppins bg-gradient-to-br from-blue-50 to-teal-50 text-gray-800 transition-colors duration-300"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center pt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6" data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight"> | |
| Hi, I'm <span class="bg-gradient-to-r from-blue-600 to-teal-500 bg-clip-text text-transparent">Sourish Dey</span> | |
| </h1> | |
| <div class="text-xl md:text-2xl text-gray-600"> | |
| <span id="typewriter" class="font-medium"></span> | |
| </div> | |
| <p class="text-gray-600 max-w-lg">Cloud & Data Science Engineer with 3+ years experience in AWS, MLOps, and Kubernetes. I architect secure, scalable digital ecosystems and transform data into predictive insights.</p> | |
| <div class="flex gap-4"> | |
| <a href="#contact" class="px-6 py-3 rounded-lg bg-gradient-to-r from-blue-600 to-teal-500 text-white font-medium hover:shadow-lg transition-all duration-300">Contact Me</a> | |
| <a href="#projects" class="px-6 py-3 rounded-lg border-2 border-blue-600 text-blue-600 font-medium hover:bg-blue-50 transition-all duration-300">View Projects</a> | |
| </div> | |
| </div> | |
| <div class="relative" data-aos="fade-left"> | |
| <div class="absolute -top-6 -right-6 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute top-16 -left-6 w-72 h-72 bg-teal-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <img src="http://static.photos/technology/640x360/123" alt="Sourish Dey" class="relative z-10 w-full max-w-md rounded-2xl shadow-2xl mx-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">About Me</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h3 class="text-2xl font-semibold mb-4">Who I Am</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Experienced Cloud and Data Science Engineer with expertise in designing, implementing, and maintaining scalable cloud infrastructure and machine learning pipelines.</p> | |
| <p class="text-gray-600 dark:text-gray-300">I specialize in bridging the gap between data science and engineering, enabling organizations to deploy AI/ML models efficiently in production environments.</p> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-2xl"> | |
| <h3 class="text-xl font-semibold mb-4">Technical Skills</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <h4 class="font-medium">Cloud Platforms</h4> | |
| <p class="text-gray-600 dark:text-gray-400">AWS, GCP, Azure, Kubernetes, Docker</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Data Science</h4> | |
| <p class="text-gray-600 dark:text-gray-400">Python, TensorFlow, PyTorch, Scikit-learn, Pandas</p> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">DevOps</h4> | |
| <p class="text-gray-600 dark:text-gray-400">Terraform, CI/CD, GitHub Actions, Jenkins, ArgoCD</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-20 bg-gray-50 dark:bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Professional Experience</h2> | |
| <experience-timeline></experience-timeline> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Education</h2> | |
| <div class="space-y-8"> | |
| <div class="card p-6" data-aos="fade-up" data-aos-delay="100"> | |
| <h3 class="text-xl font-bold">Master of Science in Computer Science</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-2">University of XYZ (2020-2022)</p> | |
| <p class="text-gray-600 dark:text-gray-300">Specialized in Artificial Intelligence and Cloud Computing.</p> | |
| </div> | |
| <div class="card p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <h3 class="text-xl font-bold">Bachelor of Technology in Computer Science</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-2">ABC Institute of Technology (2016-2020)</p> | |
| <p class="text-gray-600 dark:text-gray-300">Graduated with honors in Data Science specialization.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Skills & Expertise</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="text-blue-500 mb-3"> | |
| <i data-feather="cloud" class="w-8 h-8 mx-auto"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Cloud & DevOps</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">AWS, Terraform, Kubernetes, CI/CD, DevSecOps</p> | |
| </div> | |
| <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="text-teal-500 mb-3"> | |
| <i data-feather="cpu" class="w-8 h-8 mx-auto"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">AI/ML & MLOps</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">TensorFlow, OpenCV, FastAPI, Model Deployment</p> | |
| </div> | |
| <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="300"> | |
| <div class="text-purple-500 mb-3"> | |
| <i data-feather="lock" class="w-8 h-8 mx-auto"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Zero Trust Security</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">IAM, Encryption, SIEM, Risk Mitigation</p> | |
| </div> | |
| <div class="card p-6 text-center" data-aos="zoom-in" data-aos-delay="400"> | |
| <div class="text-pink-500 mb-3"> | |
| <i data-feather="activity" class="w-8 h-8 mx-auto"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">RPA & Automation</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">UiPath, N8N, Python, Cloud Automation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-gray-50 dark:bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Featured Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="card overflow-hidden" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="http://static.photos/technology/640x360/101" alt="Cloud Migration Project" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2">Cloud Migration Platform</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Automated migration of legacy systems to cloud-native architecture.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">AWS</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">Terraform</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Kubernetes</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card overflow-hidden" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="http://static.photos/technology/640x360/102" alt="MLOps Pipeline" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2">MLOps Pipeline</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">End-to-end machine learning pipeline with automated model deployment.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded">Python</span> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">Docker</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">CI/CD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card overflow-hidden" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="http://static.photos/technology/640x360/103" alt="Data Platform" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2">Enterprise Data Platform</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Scalable data processing platform for analytics and ML.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded">GCP</span> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded">BigQuery</span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded">Airflow</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Certifications Section --> | |
| <section id="certifications" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Certifications</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="card p-6" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center gap-4"> | |
| <img src="http://static.photos/technology/200x200/104" alt="AWS Logo" class="w-12 h-12"> | |
| <div> | |
| <h3 class="font-bold">AWS Certified Solutions Architect</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">Amazon Web Services</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center gap-4"> | |
| <img src="http://static.photos/technology/200x200/105" alt="GCP Logo" class="w-12 h-12"> | |
| <div> | |
| <h3 class="font-bold">Google Cloud Professional</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">Google Cloud</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-6" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center gap-4"> | |
| <img src="http://static.photos/technology/200x200/106" alt="Kubernetes Logo" class="w-12 h-12"> | |
| <div> | |
| <h3 class="font-bold">Certified Kubernetes Administrator</h3> | |
| <p class="text-sm text-gray-600 dark:text-gray-300">Cloud Native Computing Foundation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50 dark:bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Get In Touch</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div data-aos="fade-right"> | |
| <h3 class="text-xl font-semibold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <i data-feather="mail" class="text-blue-500"></i> | |
| <span>sourish@example.com</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <i data-feather="phone" class="text-blue-500"></i> | |
| <span>+1 (123) 456-7890</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <i data-feather="map-pin" class="text-blue-500"></i> | |
| <span>San Francisco, CA</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold mb-4">Connect With Me</h3> | |
| <div class="flex gap-4"> | |
| <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors"> | |
| <i data-feather="linkedin" class="text-blue-600 dark:text-blue-400"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"> | |
| <i data-feather="github" class="text-gray-800 dark:text-gray-200"></i> | |
| </a> | |
| <a href="#" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors"> | |
| <i data-feather="twitter" class="text-blue-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="space-y-6" data-aos="fade-left"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 font-medium">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600"></textarea> | |
| </div> | |
| <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors w-full md:w-auto">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/experience-timeline.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |