Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Parthib Karak - Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0ADB5A', | |
| secondary: '#0e7490', | |
| dark: '#0f172a', | |
| accent: '#1e293b' | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite' | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1a2c42 100%); | |
| color: #e2e8f0; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #0ADB5A 0%, #22d3ee 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-glow { | |
| box-shadow: 0 0 50px 10px rgba(10, 219, 90, 0.2); | |
| } | |
| .skill-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(10, 219, 90, 0.3); | |
| } | |
| .project-card:hover .project-image { | |
| transform: scale(1.05); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, #0ADB5A 0%, #22d3ee 100%); | |
| border-radius: 10px; | |
| } | |
| .grid-stack { | |
| position: relative; | |
| } | |
| .grid-layer:nth-child(1) { | |
| transform: rotate(3deg); | |
| } | |
| .grid-layer:nth-child(2) { | |
| transform: rotate(-2deg); | |
| } | |
| .grid-layer:nth-child(3) { | |
| transform: rotate(1deg); | |
| } | |
| .line { | |
| position: relative; | |
| height: 1px; | |
| width: 100%; | |
| background: linear-gradient(90deg, transparent 0%, #0ADB5A 50%, transparent 100%); | |
| margin: 40px 0; | |
| } | |
| .dot { | |
| position: absolute; | |
| top: -4px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #0ADB5A; | |
| animation: move 3s linear infinite; | |
| } | |
| @keyframes move { | |
| 0% { left: 0; } | |
| 100% { left: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative overflow-x-hidden"> | |
| <!-- Animated background elements --> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute top-20 -left-40 w-96 h-96 bg-cyan-900 rounded-full mix-blend-soft-light filter blur-3xl opacity-20"></div> | |
| <div class="absolute top-1/2 right-0 w-80 h-80 bg-teal-800 rounded-full mix-blend-soft-light filter blur-3xl opacity-20"></div> | |
| <div class="absolute bottom-0 left-1/3 w-72 h-72 bg-emerald-900 rounded-full mix-blend-soft-light filter blur-3xl opacity-20"></div> | |
| </div> | |
| <!-- Floating particles --> | |
| <div class="particles"> | |
| <div class="absolute top-1/4 left-1/4 w-4 h-4 rounded-full bg-emerald-400 animate-pulse-slow"></div> | |
| <div class="absolute top-1/3 right-1/3 w-2 h-2 rounded-full bg-cyan-400 animate-pulse-slow"></div> | |
| <div class="absolute bottom-1/4 left-2/3 w-3 h-3 rounded-full bg-teal-400 animate-pulse-slow"></div> | |
| <div class="absolute bottom-1/2 right-1/4 w-3 h-3 rounded-full bg-emerald-300 animate-pulse-slow"></div> | |
| </div> | |
| <!-- Header Section --> | |
| <header class="relative min-h-screen flex flex-col items-center justify-center pt-16 px-4"> | |
| <div class="absolute top-5 right-5 flex space-x-4"> | |
| <div class="flex items-center px-3 py-1 rounded-full bg-accent text-sm"> | |
| <i class="fas fa-eye mr-2 text-emerald-400"></i> | |
| <span>Profile Views: 21,356</span> | |
| </div> | |
| <a href="https://twitter.com/babaii_0007" target="_blank" class="flex items-center px-3 py-1 rounded-full bg-blue-500 hover:bg-blue-600 transition"> | |
| <i class="fab fa-twitter mr-2"></i> | |
| <span>Follow @babaii_0007</span> | |
| </a> | |
| </div> | |
| <!-- Hero Content --> | |
| <div class="relative z-10 text-center max-w-4xl w-full"> | |
| <div class="mb-8 animate-float"> | |
| <div class="bg-accent rounded-xl p-1 inline-block hero-glow"> | |
| <img src="https://camo.githubusercontent.com/069e3ef2850e722ccaef748bf8cdadafeed9fd4a9ee1436daebd7e820f4402a7/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f666c6578692d636f64696e672e61707073706f742e636f6d2f6f2f64656d706769372d35323066386435662d363364342d343435332d383832322d6462633134396165323766382e6769663f616c743d6d6564696126746f6b656e3d39316330633762322d393363332d343032392d623031312d316138373033633537333064" | |
| class="rounded-xl max-w-full max-h-64 mx-auto" alt="Coding Animation"> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4"> | |
| Hey there, I'm <span class="gradient-text">Parthib Karak</span> 👋 | |
| </h1> | |
| <div class="typing-container bg-accent rounded-lg py-3 px-6 max-w-md mx-auto border border-emerald-500/30"> | |
| <div class="flex items-center justify-center"> | |
| <div class="h-8 overflow-hidden"> | |
| <div class="typing-text"> | |
| <span class="text-emerald-400 font-semibold">Python Backend Developer</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h2 class="text-2xl font-semibold text-emerald-300 mb-6">Crafting Intelligence at the Intersection of AI and Development</h2> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <div class="px-4 py-2 rounded-full bg-emerald-900/30 border border-emerald-400/30"> | |
| <i class="fas fa-server mr-2 text-emerald-400"></i>Backend Systems | |
| </div> | |
| <div class="px-4 py-2 rounded-full bg-cyan-900/30 border border-cyan-400/30"> | |
| <i class="fas fa-brain mr-2 text-cyan-400"></i>Machine Learning | |
| </div> | |
| <div class="px-4 py-2 rounded-full bg-teal-900/30 border border-teal-400/30"> | |
| <i class="fas fa-robot mr-2 text-teal-400"></i>AI Development | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 w-full text-center"> | |
| <a href="#about" class="inline-flex flex-col items-center text-emerald-400 hover:text-emerald-300 transition"> | |
| <span class="mb-2">Explore My Work</span> | |
| <i class="fas fa-chevron-down text-xl animate-bounce"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"><span class="gradient-text">About Me</span></h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-300"> | |
| Passionate developer specializing in creating intelligent systems with Python, | |
| machine learning frameworks, and AI technologies. Committed to exploring cutting-edge technologies. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Currently Working On --> | |
| <div class="border border-emerald-500/30 rounded-2xl p-6 bg-accent transition-all duration-300 hover:bg-accent/80"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-3 text-emerald-400"> | |
| <i class="fas fa-laptop-code text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Currently Working On</h3> | |
| </div> | |
| <div class="bg-dark rounded-xl p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="mr-2 w-4 h-4 rounded-full bg-emerald-500 animate-pulse"></div> | |
| <h4 class="text-lg font-semibold text-emerald-300">🌟 Melody Voice Assistant</h4> | |
| </div> | |
| <p class="text-gray-300"> | |
| Your friendly, AI-powered voice assistant, always ready to help! | |
| </p> | |
| <div class="mt-4"> | |
| <img src="https://camo.githubusercontent.com/0e2953d98b21eda5a158939ea202c7c07b16b0dc0dc5c1e269826c29a01a974f/68747470733a2f2f7777772e77656232347a6f6e652e636f6d2f77702d636f6e74656e742f75706c6f6164732f323032322f31302f34363230372d70726f6772616d6d65722d312e676966" | |
| class="rounded-lg w-full" alt="Coding GIF"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Growing Skills --> | |
| <div class="border border-cyan-500/30 rounded-2xl p-6 bg-accent transition-all duration-300 hover:bg-accent/80"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-3 text-cyan-400"> | |
| <i class="fas fa-seedling text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Growing My Skills In</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i> | |
| <span class="font-medium">Machine Learning Frameworks: Scikit-learn, TensorFlow, Keras</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i> | |
| <span class="font-medium">Generative AI Models & Implementations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i> | |
| <span class="font-medium">Large Language Models and RAG Systems</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-chevron-right text-xs mr-3 text-cyan-400"></i> | |
| <span class="font-medium">Cloud Infrastructure: AWS, GCP, Azure</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Work & Projects --> | |
| <div class="border border-teal-500/30 rounded-2xl p-6 bg-accent transition-all duration-300 hover:bg-accent/80"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-3 text-teal-400"> | |
| <i class="fas fa-briefcase text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Work & Projects</h3> | |
| </div> | |
| <p class="mb-4 text-gray-300"> | |
| Explore all my work and project demos on my portfolio website: | |
| </p> | |
| <a href="https://portfolio-parthib-flask.vercel.app/" | |
| class="inline-flex items-center px-4 py-2 bg-teal-600 hover:bg-teal-700 rounded-full transition"> | |
| <span>Visit My Portfolio</span> | |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| <div class="mt-6"> | |
| <h4 class="font-semibold text-teal-300 mb-2">Expertise Highlights:</h4> | |
| <div class="bg-dark rounded-xl p-4"> | |
| <p class="flex items-center"> | |
| <i class="fab fa-react mr-2 text-sky-400"></i> | |
| <span>React Frontend Development</span> | |
| </p> | |
| <p class="flex items-center mt-2"> | |
| <i class="fas fa-brain mr-2 text-purple-400"></i> | |
| <span>Machine Learning Solutions</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Divider with animation --> | |
| <div class="line relative my-16 max-w-4xl mx-auto"> | |
| <div class="dot"></div> | |
| </div> | |
| <!-- Skills Section --> | |
| <section class="py-16 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-2"><span class="gradient-text">Technical Skills</span></h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-300"> | |
| Tools and technologies I use to build powerful solutions | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6"> | |
| <!-- Skill Cards --> | |
| <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-emerald-400 mb-2"> | |
| <i class="fab fa-python"></i> | |
| </div> | |
| <span class="font-medium">Python</span> | |
| </div> | |
| <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-cyan-400 mb-2"> | |
| <i class="fab fa-js"></i> | |
| </div> | |
| <span class="font-medium">JavaScript</span> | |
| </div> | |
| <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-emerald-400 mb-2"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <span class="font-medium">TensorFlow</span> | |
| </div> | |
| <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-cyan-400 mb-2"> | |
| <i class="fab fa-react"></i> | |
| </div> | |
| <span class="font-medium">React</span> | |
| </div> | |
| <div class="skill-card border border-teal-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-teal-400 mb-2"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <span class="font-medium">MongoDB</span> | |
| </div> | |
| <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-emerald-400 mb-2"> | |
| <i class="fab fa-aws"></i> | |
| </div> | |
| <span class="font-medium">AWS</span> | |
| </div> | |
| <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-cyan-400 mb-2"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <span class="font-medium">GCP</span> | |
| </div> | |
| <div class="skill-card border border-teal-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-teal-400 mb-2"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <span class="font-medium">Django</span> | |
| </div> | |
| <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-emerald-400 mb-2"> | |
| <i class="fab fa-docker"></i> | |
| </div> | |
| <span class="font-medium">Docker</span> | |
| </div> | |
| <div class="skill-card border border-cyan-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-cyan-400 mb-2"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <span class="font-medium">SQL</span> | |
| </div> | |
| <div class="skill-card border border-teal-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-teal-400 mb-2"> | |
| <i class="fab fa-git-alt"></i> | |
| </div> | |
| <span class="font-medium">Git</span> | |
| </div> | |
| <div class="skill-card border border-emerald-500/20 rounded-xl p-5 bg-accent transition-all duration-300 flex flex-col items-center justify-center"> | |
| <div class="text-4xl text-emerald-400 mb-2"> | |
| <i class="fas fa-terminal"></i> | |
| </div> | |
| <span class="font-medium">Linux</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section class="py-20 bg-accent/20"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-2"><span class="gradient-text">Featured Projects</span></h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-300"> | |
| Explore my recent work in AI and full-stack development | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card rounded-2xl overflow-hidden bg-dark border border-emerald-500/20"> | |
| <div class="overflow-hidden"> | |
| <div class="project-image h-48 bg-gradient-to-r from-emerald-900/30 to-cyan-900/30 flex items-center justify-center transition duration-500"> | |
| <i class="fas fa-robot text-6xl text-emerald-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold">Celebrity Face Recognition</h3> | |
| <div class="flex"> | |
| <span class="bg-emerald-900/50 text-xs px-2 py-1 rounded mr-1">Jupyter</span> | |
| <span class="bg-emerald-900/50 text-xs px-2 py-1 rounded">ML</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mt-2"> | |
| An AI-powered facial recognition system that identifies celebrities using deep learning and computer vision. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex"> | |
| <div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 mr-2"></div> | |
| <span class="text-sm text-emerald-400">Active</span> | |
| </div> | |
| <a href="#" class="text-sm flex items-center hover:text-emerald-400 transition"> | |
| <span>View Project</span> | |
| <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card rounded-2xl overflow-hidden bg-dark border border-cyan-500/20"> | |
| <div class="overflow-hidden"> | |
| <div class="project-image h-48 bg-gradient-to-r from-cyan-900/30 to-blue-900/30 flex items-center justify-center transition duration-500"> | |
| <i class="fas fa-file-pdf text-6xl text-cyan-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold">Chat with Multiple PDFs</h3> | |
| <div class="flex"> | |
| <span class="bg-cyan-900/50 text-xs px-2 py-1 rounded mr-1">Python</span> | |
| <span class="bg-cyan-900/50 text-xs px-2 py-1 rounded">LLM</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mt-2"> | |
| An AI-powered chatbot leveraging Gemini LLM to process and analyze multiple PDFs for information retrieval. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex"> | |
| <div class="w-2 h-2 rounded-full bg-cyan-500 mt-1.5 mr-2"></div> | |
| <span class="text-sm text-cyan-400">Active</span> | |
| </div> | |
| <a href="#" class="text-sm flex items-center hover:text-cyan-400 transition"> | |
| <span>View Project</span> | |
| <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card rounded-2xl overflow-hidden bg-dark border border-teal-500/20"> | |
| <div class="overflow-hidden"> | |
| <div class="project-image h-48 bg-gradient-to-r from-teal-900/30 to-emerald-900/30 flex items-center justify-center transition duration-500"> | |
| <i class="fas fa-shopping-cart text-6xl text-teal-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold">Fine-tuning Gemini on E-commerce Data</h3> | |
| <div class="flex"> | |
| <span class="bg-teal-900/50 text-xs px-2 py-1 rounded mr-1">Python</span> | |
| <span class="bg-teal-900/50 text-xs px-2 py-1 rounded">NLP</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mt-2"> | |
| Fine-tuning Gemini LLM with custom e-commerce data to enhance product recommendations and customer support. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex"> | |
| <div class="w-2 h-2 rounded-full bg-teal-500 mt-1.5 mr-2"></div> | |
| <span class="text-sm text-teal-400">Active</span> | |
| </div> | |
| <a href="#" class="text-sm flex items-center hover:text-teal-400 transition"> | |
| <span>View Project</span> | |
| <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-card rounded-2xl overflow-hidden bg-dark border border-cyan-500/20"> | |
| <div class="overflow-hidden"> | |
| <div class="project-image h-48 bg-gradient-to-r from-blue-900/30 to-sky-900/30 flex items-center justify-center transition duration-500"> | |
| <i class="fas fa-stethoscope text-6xl text-sky-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold">Medical Bot with Gemini</h3> | |
| <div class="flex"> | |
| <span class="bg-sky-900/50 text-xs px-2 py-1 rounded mr-1">Jupyter</span> | |
| <span class="bg-sky-900/50 text-xs px-2 py-1 rounded">AI</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mt-2"> | |
| An AI-powered healthcare chatbot using Gemini LLM to provide medical answers and health advice. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex"> | |
| <div class="w-2 h-2 rounded-full bg-sky-500 mt-1.5 mr-2"></div> | |
| <span class="text-sm text-sky-400">Active</span> | |
| </div> | |
| <a href="#" class="text-sm flex items-center hover:text-sky-400 transition"> | |
| <span>View Project</span> | |
| <i class="fas fa-arrow-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="https://github.com/babaiii07?tab=repositories" | |
| class="inline-flex items-center px-5 py-3 bg-primary hover:bg-emerald-500 text-dark font-bold rounded-full transition"> | |
| <i class="fab fa-github mr-2"></i> | |
| <span>View All Projects on GitHub</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"><span class="gradient-text">Let's Connect</span></h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-300"> | |
| Have a project in mind or want to discuss AI development? Get in touch with me! | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <!-- Contact Information --> | |
| <div class="bg-accent border border-emerald-500/20 rounded-2xl p-8"> | |
| <div class="flex items-center mb-8"> | |
| <div class="text-5xl text-emerald-400"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold">Get in Touch</h3> | |
| <p class="text-gray-300">I'm always open to new opportunities</p> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="text-emerald-400 mt-1 mr-4"> | |
| <i class="fas fa-at"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Email</h4> | |
| <a href="mailto:parthibkarak2004@gmail.com" class="text-emerald-300 hover:text-emerald-200"> | |
| parthibkarak2004@gmail.com | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-emerald-400 mt-1 mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Location</h4> | |
| <p class="text-gray-300">West Bengal, India</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-emerald-400 mt-1 mr-4"> | |
| <i class="fas fa-code-branch"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Collaboration</h4> | |
| <p class="text-gray-300">Available for freelance projects and research collaborations</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold mb-4">Connect with me:</h4> | |
| <div class="flex space-x-4"> | |
| <a href="https://twitter.com/babaii_0007" target="_blank" class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="https://linkedin.com/in/parthib-karak-9a0bb1286/" target="_blank" class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center hover:bg-blue-800 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="https://stackoverflow.com/users/27420096/parthib-karak" target="_blank" class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center hover:bg-orange-600 transition"> | |
| <i class="fab fa-stack-overflow"></i> | |
| </a> | |
| <a href="https://www.instagram.com/babaiii_0007/" target="_blank" class="w-12 h-12 rounded-full bg-pink-600 flex items-center justify-center hover:bg-pink-700 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://leetcode.com/u/parthib_007/" target="_blank" class="w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center hover:bg-yellow-600 transition"> | |
| <i class="fas fa-code"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- GitHub Stats --> | |
| <div class="space-y-6"> | |
| <div class="bg-accent border border-emerald-500/20 rounded-2xl p-5"> | |
| <h3 class="text-xl font-bold mb-3 flex items-center"> | |
| <i class="fab fa-github mr-2 text-purple-400"></i> | |
| GitHub Activity | |
| </h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-dark p-3 rounded-lg"> | |
| <div class="text-2xl font-bold text-center text-emerald-400">237+</div> | |
| <div class="text-sm text-center text-gray-300">Contributions</div> | |
| </div> | |
| <div class="bg-dark p-3 rounded-lg"> | |
| <div class="text-2xl font-bold text-center text-cyan-400">14+</div> | |
| <div class="text-sm text-center text-gray-300">Repositories</div> | |
| </div> | |
| <div class="bg-dark p-3 rounded-lg"> | |
| <div class="text-2xl font-bold text-center text-emerald-400">2k+</div> | |
| <div class="text-sm text-center text-gray-300">Commits</div> | |
| </div> | |
| <div class="bg-dark p-3 rounded-lg"> | |
| <div class="text-2xl font-bold text-center text-cyan-400">21k+</div> | |
| <div class="text-sm text-center text-gray-300">Profile Views</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-accent border border-emerald-500/20 rounded-2xl p-5"> | |
| <h3 class="text-xl font-bold mb-3 flex items-center"> | |
| <i class="fas fa-trophy mr-2 text-yellow-400"></i> | |
| GitHub Trophies | |
| </h3> | |
| <div class="flex"> | |
| <div class="flex-1 text-center"> | |
| <div class="text-3xl text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="text-sm mt-1">Stars</div> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <div class="text-3xl text-gray-400"> | |
| <i class="fas fa-code-commit"></i> | |
| </div> | |
| <div class="text-sm mt-1">Commits</div> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <div class="text-3xl text-amber-700"> | |
| <i class="fas fa-code-branch"></i> | |
| </div> | |
| <div class="text-sm mt-1">Repositories</div> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <div class="text-3xl text-sky-400"> | |
| <i class="fas fa-upload"></i> | |
| </div> | |
| <div class="text-sm mt-1">Pushes</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-6"> | |
| <a href="https://github.com/babaiii07" | |
| class="inline-flex items-center px-5 py-3 bg-gray-800 hover:bg-gray-700 text-white font-medium rounded-full transition"> | |
| <i class="fab fa-github mr-2"></i> | |
| <span>Visit My GitHub Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-10 border-t border-emerald-500/10"> | |
| <div class="max-w-6xl mx-auto px-4 text-center"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-cyan-500 rounded-full"></div> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-2">Parthib Karak</h2> | |
| <p class="text-gray-400 mb-6">AI Developer & Python Backend Specialist</p> | |
| <div class="flex justify-center space-x-4 mb-6"> | |
| <a href="mailto:parthibkarak2004@gmail.com" class="text-emerald-400 hover:text-emerald-300"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <a href="https://github.com/babaiii07" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="https://twitter.com/babaii_0007" class="text-blue-400 hover:text-blue-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="https://linkedin.com/in/parthib-karak-9a0bb1286/" class="text-blue-500 hover:text-blue-400"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="https://leetcode.com/u/parthib_007/" class="text-amber-500 hover:text-amber-400"> | |
| <i class="fas fa-code"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-500 text-sm"> | |
| © 2023 Parthib Karak. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <!-- Floating action button --> | |
| <a href="#" class="fixed right-6 bottom-6 w-12 h-12 rounded-full bg-emerald-500 flex items-center justify-center text-white text-xl shadow-lg hover:bg-emerald-600 transition-all"> | |
| <i class="fas fa-arrow-up"></i> | |
| </a> | |
| <script> | |
| // Typing effect simulation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const textElements = [ | |
| "Python Backend Developer", | |
| "Machine Learning Engineer", | |
| "AI Developer" | |
| ]; | |
| let currentText = 0; | |
| let currentChar = 0; | |
| let isDeleting = false; | |
| const typingSpeed = 120; | |
| const deleteSpeed = 60; | |
| const pauseDuration = 1800; | |
| const typeText = () => { | |
| const textElement = document.querySelector('.typing-text'); | |
| const text = textElements[currentText]; | |
| if (isDeleting) { | |
| textElement.innerHTML = `<span class="text-emerald-400 font-semibold">${text.substring(0, currentChar - 1)}</span>`; | |
| currentChar--; | |
| } else { | |
| textElement.innerHTML = `<span class="text-emerald-400 font-semibold">${text.substring(0, currentChar + 1)}</span>`; | |
| currentChar++; | |
| } | |
| if (!isDeleting && currentChar === text.length) { | |
| setTimeout(() => isDeleting = true, pauseDuration); | |
| } else if (isDeleting && currentChar === 0) { | |
| isDeleting = false; | |
| currentText = (currentText + 1) % textElements.length; | |
| } | |
| const speed = isDeleting ? deleteSpeed : typingSpeed; | |
| setTimeout(typeText, speed); | |
| }; | |
| setTimeout(typeText, typingSpeed); | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |