Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Umesh Shelare | Android Developer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section class="flex flex-col md:flex-row items-center gap-12 mb-24"> | |
| <div class="md:w-1/2"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6"> | |
| Hi, I'm <span class="text-fuchsia-600">Umesh Shelare</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl text-gray-600 mb-6"> | |
| Senior Android Developer | LeetCode 500+ | System Design Expert | AI Integration Specialist | |
| </h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| I architect robust Android applications with 3+ years of experience. | |
| Passionate about clean code, Jetpack components, and mentoring developers. | |
| Open source contributor and tech community enthusiast. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#projects" class="px-6 py-3 bg-fuchsia-600 text-white rounded-lg font-medium hover:bg-fuchsia-700 transition-colors"> | |
| View My Work | |
| </a> | |
| <a href="#contact" class="px-6 py-3 border-2 border-fuchsia-600 text-fuchsia-600 rounded-lg font-medium hover:bg-fuchsia-50 transition-colors"> | |
| Contact Me | |
| </a> | |
| <a href="https://drive.google.com/file/d/your-resume-id/view" class="px-6 py-3 bg-gray-800 text-white rounded-lg font-medium hover:bg-gray-900 transition-colors flex items-center gap-2"> | |
| <i data-feather="download"></i> Resume | |
| </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 overflow-hidden border-4 border-fuchsia-600 shadow-xl"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Umesh Shelare" class="w-full h-full object-cover"> | |
| </div> | |
| <leetcode-stats></leetcode-stats> | |
| <script src="components/leetcode-stats.js"></script> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="mb-24"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| About <span class="text-fuchsia-600">Me</span> | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto"> | |
| <p class="text-lg text-gray-600 mb-6"> | |
| Senior Android Developer with 3+ years experience architecting production apps with 100K+ users. | |
| Unique combination of mobile development expertise, competitive programming skills (500+ LeetCode problems solved), | |
| and AI/ML integration experience with TensorFlow Lite models in production. | |
| </p> | |
| <p class="text-lg text-gray-600 mb-6"> | |
| Specialize in building high-performance Android applications using modern architecture patterns (MVVM, Clean Architecture), | |
| optimizing algorithms for efficiency, and implementing intelligent features with on-device machine learning. | |
| My approach combines deep theoretical CS knowledge with practical, production-tested implementation experience. | |
| </p> | |
| <p class="text-lg text-gray-600 mb-6"> | |
| Beyond coding, I actively contribute to open-source, write technical articles on Android optimization and algorithms, | |
| and mentor junior developers in both mobile development and problem-solving techniques. | |
| </p> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-8"> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg flex items-center gap-3"> | |
| <i data-feather="code" class="text-fuchsia-600"></i> | |
| <span>Kotlin/Java</span> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg flex items-center gap-3"> | |
| <i data-feather="smartphone" class="text-fuchsia-600"></i> | |
| <span>Android SDK</span> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg flex items-center gap-3"> | |
| <i data-feather="database" class="text-fuchsia-600"></i> | |
| <span>Room DB</span> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg flex items-center gap-3"> | |
| <i data-feather="zap" class="text-fuchsia-600"></i> | |
| <span>Jetpack</span> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg flex items-center gap-3"> | |
| <i data-feather="git-branch" class="text-fuchsia-600"></i> | |
| <span>Git</span> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg flex items-center gap-3"> | |
| <i data-feather="cloud" class="text-fuchsia-600"></i> | |
| <span>Firebase</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Design Section --> | |
| <section id="system-design" class="mb-24"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| System <span class="text-fuchsia-600">Design</span> | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Design Expertise</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold mb-2">Architecture Patterns</h4> | |
| <ul class="text-sm space-y-1"> | |
| <li>• Microservices</li> | |
| <li>• Event-Driven</li> | |
| <li>• CQRS</li> | |
| <li>• Clean Architecture</li> | |
| </ul> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold mb-2">Scalability</h4> | |
| <ul class="text-sm space-y-1"> | |
| <li>• Load Balancing</li> | |
| <li>• Database Sharding</li> | |
| <li>• Caching Strategies</li> | |
| <li>• CDN Implementation</li> | |
| </ul> | |
| </div> | |
| <div class="bg-fuchsia-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold mb-2">Distributed Systems</h4> | |
| <ul class="text-sm space-y-1"> | |
| <li>• CAP Theorem</li> | |
| <li>• Message Queues</li> | |
| <li>• Service Discovery</li> | |
| <li>• API Gateways</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mt-8 mb-4">Case Studies</h3> | |
| <div class="space-y-6"> | |
| <div class="border-l-4 border-fuchsia-500 pl-4"> | |
| <h4 class="font-semibold">Design WhatsApp-like Chat</h4> | |
| <p class="text-sm text-gray-600">Implemented WebSocket connections, message queues, Redis presence tracking for 10K concurrent users</p> | |
| </div> | |
| <div class="border-l-4 border-fuchsia-500 pl-4"> | |
| <h4 class="font-semibold">E-commerce Backend</h4> | |
| <p class="text-sm text-gray-600">Microservices architecture with Kafka for event-driven processing handling 100K+ transactions/day</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="mb-24"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| My <span class="text-fuchsia-600">Projects</span> | |
| </h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/101" alt="Project 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">E-Commerce App</h3> | |
| <p class="text-gray-600 mb-4">A complete shopping solution with product listings, cart functionality, and payment integration.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Kotlin</span> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">MVVM</span> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Firebase</span> | |
| </div> | |
| <a href="#" class="text-fuchsia-600 font-medium inline-flex items-center"> | |
| View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/102" alt="Project 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Fitness Tracker</h3> | |
| <p class="text-gray-600 mb-4">Track workouts, set goals, and monitor progress with this comprehensive fitness application.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Java</span> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Room DB</span> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Material Design</span> | |
| </div> | |
| <a href="#" class="text-fuchsia-600 font-medium inline-flex items-center"> | |
| View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/103" alt="Project 3" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Recipe Sharing App</h3> | |
| <p class="text-gray-600 mb-4">A community-driven platform for sharing and discovering delicious recipes with step-by-step instructions.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Kotlin</span> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Coroutines</span> | |
| <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 text-sm rounded-full">Retrofit</span> | |
| </div> | |
| <a href="#" class="text-fuchsia-600 font-medium inline-flex items-center"> | |
| View Details <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="mb-24"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| Get In <span class="text-fuchsia-600">Touch</span> | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Let's talk about your project</h3> | |
| <p class="text-gray-600 mb-6"> | |
| I'm always open to discussing new projects, creative ideas or opportunities to be part of your visions. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center"> | |
| <i data-feather="mail" class="text-fuchsia-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Email me at</p> | |
| <a href="mailto:umeshshelare09@gmail.com" class="text-gray-800 font-medium">umeshshelare09@gmail.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center"> | |
| <i data-feather="map-pin" class="text-fuchsia-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Based in</p> | |
| <span class="text-gray-800 font-medium">Pune, India</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex gap-4"> | |
| <a href="https://github.com/umeshshelare" class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center hover:bg-fuchsia-200 transition-colors"> | |
| <i data-feather="github" class="text-fuchsia-600"></i> | |
| </a> | |
| <a href="https://www.linkedin.com/in/umeshs09/" class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center hover:bg-fuchsia-200 transition-colors"> | |
| <i data-feather="linkedin" class="text-fuchsia-600"></i> | |
| </a> | |
| <a href="https://twitter.com/umeshshelare" class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center hover:bg-fuchsia-200 transition-colors"> | |
| <i data-feather="twitter" class="text-fuchsia-600"></i> | |
| </a> | |
| <a href="https://medium.com/@umeshshelare" class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center hover:bg-fuchsia-200 transition-colors"> | |
| <i data-feather="edit" class="text-fuchsia-600"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <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-2 focus:ring-fuchsia-500 focus:border-fuchsia-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-2 focus:ring-fuchsia-500 focus:border-fuchsia-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-fuchsia-500 focus:border-fuchsia-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-fuchsia-600 text-white rounded-lg font-medium hover:bg-fuchsia-700 transition-colors"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer current-year="${new Date().getFullYear()}"></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |