Update templates/index.html

templates/index.html

@@ -13,9 +13,17 @@
             </h1>
             <p class="lead">Explore the capabilities of modern NLP models and techniques. Enter your text and select a task to analyze.</p>
             
-            <div class="alert alert-info">
-                <i class="fas fa-info-circle"></i>
-                Ultimate guide to all the NLP concepts - Designed and developed by <strong>Aradhya Pavan</strong>
+            <div class="developer-banner">
+                <div class="d-flex align-items-center justify-content-center flex-wrap">
+                    <span class="me-2">
+                        <i class="fas fa-graduation-cap text-primary me-1"></i>
+                        <strong>Ultimate guide to all NLP concepts.</strong>
+                    </span>
+                    
+                    <button type="button" class="dev-btn" data-bs-toggle="modal" data-bs-target="#developerModal">
+                        <i class="fas fa-user-circle me-1"></i>About the developer
+                    </button>
+                </div>
             </div>
         </div>
     </div>
@@ -319,4 +327,88 @@ document.querySelectorAll('a[href*="/"]').forEach(link => {
     }
 });
 </script>
+
+<!-- Developer Modal -->
+<div class="modal fade" id="developerModal" tabindex="-1" aria-labelledby="developerModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header bg-primary text-white">
+                <h5 class="modal-title" id="developerModalLabel">
+                    <i class="fas fa-user-graduate me-2"></i>About the Developer
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-0">
+                <!-- Hero Profile Section -->
+                <div class="developer-hero">
+                    <div class="hero-background"></div>
+                    <div class="hero-content text-center text-white">
+                        <div class="profile-image-wrapper">
+                            <div class="profile-image">
+                                <i class="fas fa-user-graduate fa-3x"></i>
+                            </div>
+                        </div>
+                        <h3 class="hero-name">Aradhya Pavan H S</h3>
+                        <p class="hero-title">Full Stack Web Dev & Aspiring AI/ML Engineer</p>
+                        <p class="hero-education">M.Tech from BITS Pilani in AIML (NLP Specialization)</p>
+                    </div>
+                </div>
+                
+                <!-- Content Section -->
+                <div class="modal-content-body p-4">
+                    <!-- Vision - Full Row -->
+                    <div class="info-card">
+                        <div class="info-icon vision">
+                            <i class="fas fa-lightbulb"></i>
+                        </div>
+                        <h6>Vision</h6>
+                        <p>NLP is the backbone of modern LLMs and SLMs. Understanding it is very important. Built this site to provide intuition of NLP tasks with demonstrations of key modules.</p>
+                    </div>
+                    
+                    <!-- Future Plans - Full Row -->
+                    <div class="info-card">
+                        <div class="info-icon plans">
+                            <i class="fas fa-rocket"></i>
+                        </div>
+                        <h6>Future Plans</h6>
+                        <p>I will continue to add more modules and am working to add sections where people, students, and professionals can clearly understand how mathematical algorithms work with example demos and visualizations.</p>
+                    </div>
+                    
+                    <!-- Acknowledgments - Full Row -->
+                    <div class="info-card">
+                        <div class="info-icon thanks">
+                            <i class="fas fa-heart"></i>
+                        </div>
+                        <h6>Acknowledgments</h6>
+                        <p>Thanks to the <strong>open source community</strong> and <strong>Hugging Face platform</strong> where we can host such large applications at no cost. This is truly amazing and I'm grateful for it.</p>
+                    </div>
+                    
+                    <!-- Social Links -->
+                    <div class="social-section mt-4">
+                        <div class="row g-3">
+                            <div class="col-6">
+                                <a href="https://www.linkedin.com/in/aradhya-pavan/" target="_blank" class="social-btn linkedin">
+                                    <i class="fab fa-linkedin"></i>
+                                    <span>LinkedIn</span>
+                                </a>
+                            </div>
+                            <div class="col-6">
+                                <a href="https://github.com/aradhyapavan" target="_blank" class="social-btn github">
+                                    <i class="fab fa-github"></i>
+                                    <span>GitHub</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer bg-light">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <a href="https://www.linkedin.com/in/aradhya-pavan/" target="_blank" class="btn btn-primary">
+                    <i class="fab fa-linkedin me-1"></i>Connect
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}