Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rakshit Ekare - Mechanical Engineer | AI/ML & IoT Specialist</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #e2e8f0; | |
| scroll-behavior: smooth; | |
| overflow-x: hidden; | |
| } | |
| .title-font { | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 8px rgba(110, 231, 183, 0.7); | |
| } | |
| .section { | |
| min-height: 100vh; | |
| padding: 80px 0; | |
| position: relative; | |
| } | |
| .gear-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .gear { | |
| position: absolute; | |
| transition: transform 0.3s ease-out; | |
| filter: drop-shadow(0 0 5px rgba(110, 231, 183, 0.7)); | |
| } | |
| .gear-large { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .gear-medium { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .card { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 12px; | |
| border: 1px solid rgba(110, 231, 183, 0.2); | |
| box-shadow: 0 0 20px rgba(110, 231, 183, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 30px rgba(110, 231, 183, 0.3); | |
| border-color: rgba(110, 231, 183, 0.5); | |
| } | |
| .tech-badge { | |
| background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%); | |
| color: #0f172a; | |
| font-weight: 600; | |
| } | |
| .highlight { | |
| background: linear-gradient(120deg, #5eead4 0%, #2dd4bf 100%); | |
| background-repeat: no-repeat; | |
| background-size: 100% 40%; | |
| background-position: 0 88%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -30px; | |
| top: 0; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #5eead4; | |
| border: 3px solid rgba(94, 234, 212, 0.3); | |
| box-shadow: 0 0 10px rgba(94, 234, 212, 0.5); | |
| } | |
| .timeline-line::before { | |
| content: ''; | |
| position: absolute; | |
| left: -24px; | |
| top: 0; | |
| width: 2px; | |
| height: 100%; | |
| background: rgba(94, 234, 212, 0.3); | |
| } | |
| .equation { | |
| position: absolute; | |
| color: rgba(94, 234, 212, 0.1); | |
| font-size: 1.2rem; | |
| font-family: 'Courier New', monospace; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .taurus-symbol { | |
| position: absolute; | |
| font-size: 2rem; | |
| color: rgba(94, 234, 212, 0.5); | |
| z-index: -1; | |
| } | |
| .mechanical-line { | |
| position: absolute; | |
| background: rgba(94, 234, 212, 0.1); | |
| z-index: -1; | |
| } | |
| .neon-border { | |
| border: 1px solid rgba(110, 231, 183, 0.3); | |
| box-shadow: 0 0 10px rgba(110, 231, 183, 0.3); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px rgba(110, 231, 183, 0.7); | |
| } | |
| input, textarea { | |
| background: rgba(15, 23, 42, 0.5); | |
| border: 1px solid rgba(110, 231, 183, 0.3); | |
| color: #e2e8f0; | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| border-color: #5eead4; | |
| box-shadow: 0 0 10px rgba(94, 234, 212, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background Elements --> | |
| <div class="gear-container" id="gearContainer"> | |
| <!-- Gears will be added here --> | |
| <!-- Mathematical equations floating in background --> | |
| <div class="equation" style="top: 15%; left: 5%;">∇⋅E = ρ/ε₀</div> | |
| <div class="equation" style="top: 25%; right: 10%;">F = ma</div> | |
| <div class="equation" style="bottom: 30%; left: 8%;">E = mc²</div> | |
| <div class="equation" style="bottom: 20%; right: 5%;">σ = Eε</div> | |
| <div class="equation" style="top: 45%; left: 20%;">τ = r × F</div> | |
| <div class="equation" style="top: 60%; right: 15%;">P = IV</div> | |
| <!-- Taurus symbols --> | |
| <div class="taurus-symbol" style="top: 10%; right: 15%;">♉</div> | |
| <div class="taurus-symbol" style="bottom: 15%; left: 10%;">♉</div> | |
| <!-- Mechanical lines --> | |
| <div class="mechanical-line" style="top: 0; left: 20%; width: 1px; height: 100%;"></div> | |
| <div class="mechanical-line" style="top: 0; right: 25%; width: 1px; height: 100%;"></div> | |
| <div class="mechanical-line" style="top: 30%; left: 0; width: 100%; height: 1px;"></div> | |
| <div class="mechanical-line" style="top: 70%; left: 0; width: 100%; height: 1px;"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-slate-900 bg-opacity-90 z-50 neon-border"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-2xl font-bold title-font text-emerald-300 neon-text">Rakshit Ekare</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-emerald-300 font-medium hover:text-white neon-text">Home</a> | |
| <a href="#about" class="text-slate-300 hover:text-emerald-300">About</a> | |
| <a href="#achievements" class="text-slate-300 hover:text-emerald-300">Achievements</a> | |
| <a href="#projects" class="text-slate-300 hover:text-emerald-300">Projects</a> | |
| <a href="#contact" class="text-slate-300 hover:text-emerald-300">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none"> | |
| <svg class="w-6 h-6 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="section flex items-center"> | |
| <div class="container mx-auto px-6"> | |
| <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 lg:text-6xl font-bold mb-6 title-font"> | |
| <span class="highlight">Rakshit Ekare</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl text-slate-300 mb-6"> | |
| Mechanical Engineer | <span class="text-emerald-300 neon-text">AI/ML & IoT Specialist</span> | |
| </h2> | |
| <p class="text-lg text-slate-300 mb-8 max-w-lg"> | |
| Winner of Tata Elxsi Teleport Season 2 | Taurus | Passionate about integrating mechanical systems with cutting-edge technologies | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="bg-emerald-500 hover:bg-emerald-600 text-slate-900 px-6 py-3 rounded-lg font-medium transition duration-300 shadow-lg shadow-emerald-500/20"> | |
| Contact Me | |
| </a> | |
| <a href="#projects" class="border border-emerald-500 text-emerald-300 hover:bg-emerald-500/10 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="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-emerald-900 to-emerald-700 flex items-center justify-center shadow-xl"> | |
| <div class="w-60 h-60 md:w-72 md:h-72 rounded-full bg-slate-900 overflow-hidden border-4 border-emerald-500/30 shadow-md"> | |
| <!-- Placeholder for profile image --> | |
| <div class="w-full h-full bg-emerald-900/50 flex items-center justify-center"> | |
| <span class="text-5xl text-emerald-300">RE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="section bg-slate-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center title-font"> | |
| About <span class="text-emerald-300">Me</span> | |
| </h2> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h3 class="text-2xl font-semibold mb-4 text-emerald-300">Who I Am</h3> | |
| <p class="text-slate-300 mb-6"> | |
| I'm a mechanical engineer with a passion for integrating traditional engineering with emerging technologies like Artificial Intelligence, Machine Learning, and the Internet of Things. | |
| </p> | |
| <p class="text-slate-300 mb-6"> | |
| As a Taurus, I bring determination and practical problem-solving to every project. My unique skill set allows me to bridge the gap between mechanical systems and digital technologies. | |
| </p> | |
| <p class="text-slate-300 mb-8"> | |
| As a winner of Tata Elxsi Teleport Season 2, I've demonstrated my ability to think outside the box and develop solutions that push the boundaries of engineering. | |
| </p> | |
| <h3 class="text-2xl font-semibold mb-4 mt-8 text-emerald-300">My Skills</h3> | |
| <div class="flex flex-wrap gap-3 mb-8"> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">AI/ML</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">IoT</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">Mechanical Design</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">Python</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">CAD</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">Data Analysis</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">Embedded Systems</span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm">Robotics</span> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="card p-8"> | |
| <h3 class="text-2xl font-semibold mb-6 text-emerald-300">Education</h3> | |
| <div class="relative pl-8 timeline-line"> | |
| <div class="mb-8 timeline-item"> | |
| <h4 class="text-lg font-semibold text-slate-100">Bachelor of Engineering in Mechanical Engineering</h4> | |
| <p class="text-slate-400">University Name | 2018 - 2022</p> | |
| <p class="text-slate-300 mt-2">Specialized in smart systems and automation</p> | |
| </div> | |
| <div class="mb-8 timeline-item"> | |
| <h4 class="text-lg font-semibold text-slate-100">AI/ML Certification</h4> | |
| <p class="text-slate-400">Online Platform | 2021</p> | |
| <p class="text-slate-300 mt-2">Completed advanced coursework in machine learning applications for engineering</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h4 class="text-lg font-semibold text-slate-100">IoT Specialization</h4> | |
| <p class="text-slate-400">Technical Institute | 2020</p> | |
| <p class="text-slate-300 mt-2">Focused on industrial IoT applications and smart manufacturing</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Achievements Section --> | |
| <section id="achievements" class="section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center title-font"> | |
| My <span class="text-emerald-300">Achievements</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="card p-8"> | |
| <div class="w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 neon-border"> | |
| <svg class="w-8 h-8 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-slate-100">Tata Elxsi Teleport Season 2 Winner</h3> | |
| <p class="text-slate-300"> | |
| Won the prestigious competition with an innovative IoT solution for industrial automation, beating hundreds of participants nationwide. | |
| </p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 neon-border"> | |
| <svg class="w-8 h-8 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-slate-100">National Robotics Competition Finalist</h3> | |
| <p class="text-slate-300"> | |
| Developed an autonomous robotic system that placed in the top 5 at the national level competition. | |
| </p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 neon-border"> | |
| <svg class="w-8 h-8 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-slate-100">Published Research Paper</h3> | |
| <p class="text-slate-300"> | |
| Authored a paper on "Machine Learning Applications in Predictive Maintenance of Mechanical Systems" published in an international journal. | |
| </p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 neon-border"> | |
| <svg class="w-8 h-8 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-slate-100">Smart Campus Innovation Award</h3> | |
| <p class="text-slate-300"> | |
| Led a team that developed an AI-powered energy management system for university campuses, winning the innovation challenge. | |
| </p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 neon-border"> | |
| <svg class="w-8 h-8 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-slate-100">Technical Speaker</h3> | |
| <p class="text-slate-300"> | |
| Invited speaker at multiple conferences on topics including "The Future of Mechanical Engineering in the AI Era" and "IoT for Smart Manufacturing". | |
| </p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 neon-border"> | |
| <svg class="w-8 h-8 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-slate-100">Patent Filed</h3> | |
| <p class="text-slate-300"> | |
| Co-inventor of a novel mechanical component with embedded IoT sensors for real-time monitoring, currently in patent process. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="section bg-slate-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center title-font"> | |
| Featured <span class="text-emerald-300">Projects</span> | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div class="card overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-emerald-900 to-emerald-700 flex items-center justify-center"> | |
| <svg class="w-20 h-20 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path> | |
| </svg> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-semibold mb-3 text-slate-100">Smart Predictive Maintenance System</h3> | |
| <p class="text-slate-300 mb-4"> | |
| An IoT-enabled mechanical system that uses machine learning to predict equipment failures before they occur, reducing downtime by 40%. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">AI/ML</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">IoT</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Python</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Embedded Systems</span> | |
| </div> | |
| <a href="#" class="text-emerald-300 font-medium hover:text-white inline-flex items-center"> | |
| View Case Study | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="card overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-cyan-900 to-cyan-700 flex items-center justify-center"> | |
| <svg class="w-20 h-20 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.350 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.350a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.350 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.350a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-semibold mb-3 text-slate-100">Autonomous Inspection Robot</h3> | |
| <p class="text-slate-300 mb-4"> | |
| A self-navigating robot that uses computer vision to inspect industrial equipment in hazardous environments, eliminating human risk. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Robotics</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Computer Vision</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">ROS</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Mechanical Design</span> | |
| </div> | |
| <a href="#" class="text-emerald-300 font-medium hover:text-white inline-flex items-center"> | |
| View Project Details | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="card overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-purple-900 to-purple-700 flex items-center justify-center"> | |
| <svg class="w-20 h-20 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path> | |
| </svg> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-semibold mb-3 text-slate-100">Energy Optimization Dashboard</h3> | |
| <p class="text-slate-300 mb-4"> | |
| A web-based dashboard that analyzes and optimizes energy consumption patterns in manufacturing plants using AI algorithms. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Data Visualization</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Machine Learning</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">JavaScript</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Energy Systems</span> | |
| </div> | |
| <a href="#" class="text-emerald-300 font-medium hover:text-white inline-flex items-center"> | |
| View Demo | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="card overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-green-900 to-green-700 flex items-center justify-center"> | |
| <svg class="w-20 h-20 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path> | |
| </svg> | |
| </div> | |
| <div class="p-8"> | |
| <h3 class="text-2xl font-semibold mb-3 text-slate-100">Smart Vibration Sensor Network</h3> | |
| <p class="text-slate-300 mb-4"> | |
| A wireless network of vibration sensors with edge computing capabilities for real-time structural health monitoring. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Edge Computing</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Wireless Sensors</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Signal Processing</span> | |
| <span class="bg-emerald-900/50 text-emerald-300 px-3 py-1 rounded-full text-xs font-medium">Mechanical Analysis</span> | |
| </div> | |
| <a href="#" class="text-emerald-300 font-medium hover:text-white inline-flex items-center"> | |
| View Technical Paper | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="section"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center title-font"> | |
| Get In <span class="text-emerald-300">Touch</span> | |
| </h2> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="card p-8 h-full"> | |
| <h3 class="text-2xl font-semibold mb-6 text-emerald-300">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-emerald-900/50 p-3 rounded-full mr-4 neon-border"> | |
| <svg class="w-6 h-6 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-slate-100">Phone</h4> | |
| <p class="text-slate-300">+91 98765 43210</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-emerald-900/50 p-3 rounded-full mr-4 neon-border"> | |
| <svg class="w-6 h-6 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-line | |
| </html> |