Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vishnu Mohan G | Creative Technologist</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .project-card: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); | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 1.5rem; | |
| top: 2rem; | |
| height: calc(100% - 2rem); | |
| width: 2px; | |
| background: #e5e7eb; | |
| } | |
| .skill-pill:hover { | |
| transform: scale(1.05); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .active-nav::after { | |
| width: 100%; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-sm z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-xl font-bold gradient-text">Vishnu Mohan G</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="nav-link">About</a> | |
| <a href="#skills" class="nav-link">Skills</a> | |
| <a href="#experience" class="nav-link">Experience</a> | |
| <a href="#projects" class="nav-link">Projects</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-toggle" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a> | |
| <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Skills</a> | |
| <a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Experience</a> | |
| <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Projects</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Vishnu Mohan G</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 gradient-text">Creative Technologist, Jack of all trades and Master of a few</h2> | |
| <p class="text-lg text-gray-600 mb-8">Self-taught engineer with expertise across multiple domains including AI, software development, hardware engineering, and creative technology.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Contact Me</a> | |
| <a href="#projects" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">View Projects</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 p-1 floating"> | |
| <div class="w-full h-full bg-white rounded-full flex items-center justify-center overflow-hidden"> | |
| <div class="text-center p-4"> | |
| <i class="fas fa-laptop-code text-6xl md:text-7xl text-blue-600"></i> | |
| <p class="mt-4 text-lg font-medium">Creative Technologist</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-white rounded-xl shadow-sm"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">About Me</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-4">Personal Info</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mr-3"></i> | |
| <span>Thiruvananthapuram, Kerala</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-blue-600 mr-3"></i> | |
| <span>+91 8848252058</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-blue-600 mr-3"></i> | |
| <span>[email protected]</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mt-8 mb-4">Languages</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">English</span> | |
| <span class="text-gray-600">Fluent</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Malayalam</span> | |
| <span class="text-gray-600">Native</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mt-8 mb-4">Certifications</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i> | |
| <span>Advanced Python - LinkedIn (November 2021)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i> | |
| <span>React.js Essential Training - LinkedIn (December 2021)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i> | |
| <span>IoT Foundations: Standards and Ecosystems - LinkedIn (November 2021)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-xl font-semibold mb-4">Professional Summary</h3> | |
| <p class="text-gray-700 mb-6">I am a self-taught, creative engineer with expertise in multiple domains including software, electronics, embedded systems, and mechanical engineering. I thrive on cross-domain projects, leveraging my skills and knowledge to solve complex problems from unique angles.</p> | |
| <p class="text-gray-700 mb-6">I enjoy tinkering with technology, experimenting with DIY projects, and collaborating with others to bring ideas to life. I am ambitious and driven, always seeking to push the boundaries of what is possible through the creative application of engineering principles.</p> | |
| <h3 class="text-xl font-semibold mt-8 mb-4">Profiles</h3> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.linkedin.com/in/vishnu-mohan-g-906b4232" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg flex items-center transition duration-300"> | |
| <i class="fab fa-linkedin mr-2"></i> LinkedIn | |
| </a> | |
| <a href="https://github.com/vishnu_ace" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex items-center transition duration-300"> | |
| <i class="fab fa-github mr-2"></i> GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Skills & Expertise</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- AI & ML --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-brain text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">AI & Machine Learning</h3> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Python</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">OpenAI</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Langchain</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Vector DBs</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Sagemaker</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">OCR</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">LLMGuard</span> | |
| <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Autogen</span> | |
| </div> | |
| </div> | |
| <!-- Software Development --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-code text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Software Development</h3> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Qt/PySide</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Django</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Flask</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">FastAPI</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">AWS</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">JavaScript</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">React.js</span> | |
| <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Node.js</span> | |
| </div> | |
| </div> | |
| <!-- Hardware & Engineering --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-microchip text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Hardware & Engineering</h3> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">Embedded Systems</span> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">IoT</span> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">OnShape (CAD)</span> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">TouchDesigner</span> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">Grasshopper</span> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">micropython</span> | |
| <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">C++</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-white rounded-xl shadow-sm"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Professional Experience</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="relative"> | |
| <!-- Publicis Sapient --> | |
| <div class="timeline-item mb-8 pl-10 relative"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2"> | |
| <h3 class="text-xl font-semibold">Senior Associate Data Engineering L2</h3> | |
| <span class="text-blue-600 font-medium">February 2024 - November 2024</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <span class="font-medium">Publicis Sapient</span> | |
| <span class="mx-2">•</span> | |
| <span class="text-gray-600">Bangalore - WFH</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">Focused on building Generative AI applications, leveraging:</p> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-700"> | |
| <li><span class="font-medium">RAG (Retrieval-Augmented Generation):</span> Implemented both graph-based RAG and document-based retrieval for enhanced knowledge extraction</li> | |
| <li><span class="font-medium">Graph RAG:</span> Designed and deployed knowledge graphs for semantic search and retrieval augmentation</li> | |
| <li><span class="font-medium">NER and NLP:</span> Extracted critical insights using Named Entity Recognition and natural language processing models</li> | |
| <li><span class="font-medium">Azure OpenAI & Azure AI Search:</span> Utilized Azure's AI services for large language models and enterprise search solutions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Welexit --> | |
| <div class="timeline-item mb-8 pl-10 relative"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2"> | |
| <h3 class="text-xl font-semibold">Principal Conversational AI Engineer</h3> | |
| <span class="text-purple-600 font-medium">April 2023 - October 2023</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <span class="font-medium">Welexit</span> | |
| <a href="https://www.linkedin.com/company/welexit/" target="_blank" class="ml-2 text-blue-600 hover:underline"> | |
| <i class="fas fa-external-link-alt text-sm"></i> | |
| </a> | |
| </div> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-700"> | |
| <li>Led the design, development, and deployment of MyLittleLawyer, a legal assistance chatbot</li> | |
| <li>Integrated GPT-4, Langchain, AWS Lambda, AWS API Gateway and Pinecone for real-time legal query resolution</li> | |
| <li>Built Document processing pipeline using GCP functions, Google Vision AI, Textract and Google Cloud Storage</li> | |
| <li>Engineered prompt flows, memory, and fallback systems for robust multi-turn interactions</li> | |
| <li>Built scalable backend with logging and monitoring for production readiness</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Previous Experiences --> | |
| <div class="timeline-item mb-8 pl-10 relative"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Senior Product Development Engineer</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="font-medium">Tagglabs Technologies Pvt. Ltd.</span> | |
| <a href="https://tagglabs.in/" target="_blank" class="ml-2 text-blue-600 hover:underline"> | |
| <i class="fas fa-external-link-alt text-sm"></i> | |
| </a> | |
| </div> | |
| <span class="text-gray-600">July 2020 - February 2023</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Creative Technologist, Engineer</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="font-medium">Otherlogic Experiential Pvt. Ltd.</span> | |
| <a href="https://www.otherlogic.in/" target="_blank" class="ml-2 text-blue-600 hover:underline"> | |
| <i class="fas fa-external-link-alt text-sm"></i> | |
| </a> | |
| </div> | |
| <span class="text-gray-600">June 2015 - July 2020</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Software Engineer</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="font-medium">Webzler Solutions</span> | |
| <a href="https://webzler.com/" target="_blank" class="ml-2 text-blue-600 hover:underline"> | |
| <i class="fas fa-external-link-alt text-sm"></i> | |
| </a> | |
| </div> | |
| <span class="text-gray-600">January 2014 - September 2014</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Software Engineer</h3> | |
| <div class="flex items-center mb-2"> | |
| <span class="font-medium">BridgeCandy Softwares Inc.</span> | |
| <a href="https://itquality.ca/" target="_blank" class="ml-2 text-blue-600 hover:underline"> | |
| <i class="fas fa-external-link-alt text-sm"></i> | |
| </a> | |
| </div> | |
| <span class="text-gray-600">January 2013 - August 2013</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Featured Projects</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Generative AI Integration to ROC --> | |
| <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-blue-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 mb-2">Generative AI Integration to ROC</h3> | |
| <p class="text-gray-600 mb-4">Integration of generative AI features into SBR ROC</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">February 2024 - November 2024</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MyLittleLawyer --> | |
| <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center"> | |
| <i class="fas fa-gavel text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">MyLittleLawyer</h3> | |
| <p class="text-gray-600 mb-4">A legal chatbot utilizing AWS Lambda, GPT-4 via Langchain, and Pinecone Vector DB</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">April 2023 - October 2023</span> | |
| <a href="https://mylittlelawyer.ai/?lang=en_us" target="_blank" class="text-blue-600 hover:underline flex items-center"> | |
| View <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MaskupNow --> | |
| <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center"> | |
| <i class="fas fa-head-side-mask text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">MaskupNow</h3> | |
| <p class="text-gray-600 mb-4">Contactless mask dispenser developed during COVID-19 pandemic</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">February 2020 - May 2020</span> | |
| <a href="https://swachhindia.ndtv.com/coronavirus-outbreak-mask-up-now-says-delhi-based-firm-with-their-innovative-contactless-delivery-of-face-masks-45239/" target="_blank" class="text-blue-600 hover:underline flex items-center"> | |
| News <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Baldur --> | |
| <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-yellow-500 to-orange-600 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Baldur at SBIM, Kolkata</h3> | |
| <p class="text-gray-600 mb-4">India's Largest Animated Chandelier</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">June 2017 - October 2017</span> | |
| <a href="https://www.youtube.com/watch?v=30XHQcNA1tc" target="_blank" class="text-blue-600 hover:underline flex items-center"> | |
| Video <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Rototimeline --> | |
| <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-red-500 to-pink-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 mb-2">Rototimeline</h3> | |
| <p class="text-gray-600 mb-4">Kinetic Interactive Information Display</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">January 2017 - February 2017</span> | |
| <a href="https://www.youtube.com/watch?v=cfw_q3sM_6w" target="_blank" class="text-blue-600 hover:underline flex items-center"> | |
| Demo <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pledge @ Skill India --> | |
| <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-handshake text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Pledge @ Skill India</h3> | |
| <p class="text-gray-600 mb-4">Touch screen application integrated with SMS and eMail gateways</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">April 2017 - October 2017</span> | |
| <a href="https://www.youtube.com/watch?v=DPtz_H9S5E8" target="_blank" class="text-blue-600 hover:underline flex items-center"> | |
| Video <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-white rounded-xl shadow-sm"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Education</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-2">PRS College Of Engineering and Technology</h3> | |
| <p class="text-gray-600 mb-2">Electronics and Communication - B.Tech</p> | |
| <p class="text-gray-500">2008 - 2010 (Dropout)</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-2">Technical Higher Secondary School, Muttada</h3> | |
| <p class="text-gray-600 mb-2">Plus Two</p> | |
| <p class="text-gray-500">2008 - 2010</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Get In Touch</h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-6">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Location</h4> | |
| <p class="text-gray-600">Thiruvananthapuram, Kerala</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Phone</h4> | |
| <p class="text-gray-600">+91 8848252058</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-600">[email protected]</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://www.linkedin.com/in/vishnu-mohan-g-906b4232" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="https://github.com/vishnu_ace" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-6">Send Me a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition duration-300">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-xl font-bold gradient-text">Vishnu Mohan G</p> | |
| <p class="text-gray-400">Creative Technologist, Jack of all trades and Master of a few</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a> | |
| <a href="#skills" class="text-gray-400 hover:text-white transition duration-300">Skills</a> | |
| <a href="#experience" class="text-gray-400 hover:text-white transition duration-300">Experience</a> | |
| <a href="#projects" class="text-gray-400 hover:text-white transition duration-300">Projects</a> | |
| <a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400"> | |
| <p>© 2024 Vishnu Mohan G. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation 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 | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Highlight active navigation link | |
| window.addEventListener('scroll', function() { | |
| const sections = document.querySelectorAll('section'); | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| let currentSection = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (window.scrollY >= sectionTop - 100) { | |
| currentSection = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('active-nav'); | |
| if (link.getAttribute('href') === `#${currentSection}`) { | |
| link.classList.add('active-nav'); | |
| } | |
| }); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', function() { | |
| if (window.scrollY > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', function() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vishnumg/vishnu-profile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |