Spaces:

SRVCP
/

RakeshPortfolio

Running

App Files Files Community

SRVCP commited on Oct 25, 2025

Commit

e91c622

verified ·

1 Parent(s): bc4aaec

Upload 5 files

Browse files

Files changed (6) hide show

.gitattributes +2 -0
Photo.jpeg +3 -0
Rakesh Resume.pdf +3 -0
index.html +288 -19
script.js +399 -0
styles.css +679 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+Photo.jpeg filter=lfs diff=lfs merge=lfs -text
+Rakesh[[:space:]]Resume.pdf filter=lfs diff=lfs merge=lfs -text

Photo.jpeg ADDED Viewed

Git LFS Details

SHA256: 43632736f4237926f6cf5fea8b4b81b71e3e165c744c716a4ee762b09d0a01f0
Pointer size: 131 Bytes
Size of remote file: 120 kB

Rakesh Resume.pdf ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:f51f685ba29349a207425f6280447fb14f02394dee2e5c8046df6dd24149fb3b
+size 186268

index.html CHANGED Viewed

@@ -1,19 +1,288 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Rakesh Kumar — AI Product Manager Portfolio</title>
+  <meta name="description" content="Rakesh Kumar | AI Product Manager & AI Lead with 7+ years experience in AI, healthcare, and e-commerce. Portfolio, case studies, and achievements." />
+  <meta property="og:title" content="Rakesh Kumar — AI Product Manager Portfolio" />
+  <meta property="og:description" content="AI Product Manager & AI Lead | Building AI agents, RAG platforms, data products. Explore case studies and achievements." />
+  <meta name="theme-color" content="#0ea5e9" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <header class="site-header">
+    <nav class="container nav">
+      <a class="brand" href="#top" aria-label="Rakesh Kumar Home">
+        <svg class="logo" viewBox="0 0 64 64" role="img" aria-label="RK logo" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="g" x1="0" x2="1">
+              <stop offset="0%" stop-color="#0ea5e9"/>
+              <stop offset="100%" stop-color="#22c55e"/>
+            </linearGradient>
+          </defs>
+          <circle cx="32" cy="32" r="30" fill="url(#g)"/>
+          <text x="50%" y="54%" text-anchor="middle" font-size="28" font-family="Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial" font-weight="800" fill="#ffffff">RK</text>
+        </svg>
+        <span>Rakesh Kumar</span>
+      </a>
+      <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">☰</button>
+      <ul class="nav-links" id="navLinks">
+        <li><a href="#about">About</a></li>
+        <li><a href="#metrics">Impact</a></li>
+        <li><a href="#experience">Experience</a></li>
+        <li><a href="#cases">Case Studies</a></li>
+        <li><a href="#skills">Skills</a></li>
+        <li><a href="#contact">Contact</a></li>
+        <li><button id="themeToggle" class="ghost">🌙</button></li>
+      </ul>
+    </nav>
+  </header>
+  <main id="top">
+    <!-- Hero -->
+    <section class="hero container" id="about">
+      <div class="hero-text">
+        <div class="profile-container">
+          <img src="Photo.jpeg" alt="Rakesh Kumar - AI Product Manager" class="profile-avatar" />
+        </div>
+        <h1>AI Product Manager & AI Lead</h1>
+        <p class="hero-subtitle">7+ years building agentic AI, RAG platforms, data products, and high-impact customer experiences across healthcare, e-commerce, and IT.</p>
+        <div class="cta">
+          <a class="btn primary" href="#cases">View Case Studies</a>
+          <a class="btn" href="Rakesh Resume.pdf" download="Rakesh_Kumar_Resume.pdf" aria-label="Download resume as PDF">Download Resume</a>
+          <a class="btn ghost" href="https://www.linkedin.com/in/rakesh-kumar-2a308b50" target="_blank" rel="noopener">LinkedIn</a>
+        </div>
+        <ul class="quick-facts">
+          <li>📍 Location: India</li>
+          <li>📧 Email: <a href="mailto:p18rakeshk@iima.ac.in">p18rakeshk@iima.ac.in</a></li>
+          <li>📱 Phone: <a href="tel:+919004260456">+91-9004260456</a> / <a href="tel:+916359017259">6359017259</a></li>
+        </ul>
+      </div>
+    </section>
+    <!-- Impact Metrics -->
+    <section class="section container" id="metrics">
+      <h2>Product Impact</h2>
+      <div class="cards">
+        <article class="card kpi"><h3>70%+</h3><p>Manual tasks reduced using agentic AI workflows</p></article>
+        <article class="card kpi"><h3>80%</h3><p>Faster insight generation with BI dashboards</p></article>
+        <article class="card kpi"><h3>10×</h3><p>Clinical research turnaround acceleration</p></article>
+        <article class="card kpi"><h3>85%</h3><p>ML + LLM diet engine accuracy</p></article>
+        <article class="card kpi"><h3>20k+</h3><p>Users onboarded in 90 days (coach-driven wellness)</p></article>
+        <article class="card kpi"><h3>$50k+/mo</h3><p>Incremental revenue via recommendations</p></article>
+        <article class="card kpi"><h3>3×</h3><p>Experimentation velocity (AI playground)</p></article>
+        <article class="card kpi"><h3>1M INR</h3><p>GMV leakage prevented per month</p></article>
+      </div>
+    </section>
+    <!-- Experience Timeline -->
+    <section class="section container" id="experience">
+      <h2>Professional Experience</h2>
+      <ol class="timeline">
+        <li>
+          <div class="time">Feb 2023 – Present</div>
+          <div class="content">
+            <div class="company-icon">🏥</div>
+            <h3>AI Product Manager & AI Lead — Dr. Reddy's (Svaas Wellness)</h3>
+            <ul>
+              <li>Built agentic AI framework to automate workflows and fine-tune LLMs; reduced manual tasks by 70%.</li>
+              <li>Architected RAG pipeline for clinical intelligence with customized data cleaning and ingestion; 5% better retrieval score than Azure managed services.</li>
+              <li>Designed Deep Research Agent for clinical studies; cut research turnaround time by 10×.</li>
+              <li>Architected GenAI voice agent for clinical support with <4s latency enabling real-time interactions.</li>
+              <li>Developed internal AI Playground for rapid product and design teams; 3× faster prototyping and AI experimentation.</li>
+              <li>Engineered ML + LLM-based diet engine achieving 85% accuracy.</li>
+              <li>Integrated RAG agent into BI dashboards; 80% faster insight generation and self-serve analytics.</li>
+              <li>Implemented symptom analyzer and health risk assessment tool impacting 5k+ users in 4 months.</li>
+            </ul>
+          </div>
+        </li>
+        <li>
+          <div class="time">Dec 2021 – Jan 2023</div>
+          <div class="content">
+            <div class="company-icon">🏥</div>
+            <h3>Product Manager (Customer Success, New Initiatives, Platform) — MediBuddy</h3>
+            <ul>
+              <li>Built tool generating valuable customer feedback; improved adoption and messaging.</li>
+              <li>Scaled B2B CS support and automated systems; raised CSAT from 2.8 to 4 and first contact resolution by 10%.</li>
+              <li>Launched social media automation; boosted organic reach.</li>
+              <li>Accelerated refunds with all payment sources; automated claims with third parties and insurers.</li>
+            </ul>
+          </div>
+        </li>
+        <li>
+          <div class="time">Jul 2020 – Dec 2021</div>
+          <div class="content">
+            <div class="company-icon">👗</div>
+            <h3>Data Product Manager — eShakti</h3>
+            <ul>
+              <li>Improved conversion by 7% for new users via enhanced product discovery funnel.</li>
+              <li>Increased customization usage by 9% with $30,000+ per month CLV uplift.</li>
+              <li>Improved onsite search and sorting; 5% overall sales increase and $15,000/month reduction in overstock.</li>
+              <li>Built recommendation engine yielding $50,000+/month incremental revenue and 8% retention improvement.</li>
+            </ul>
+          </div>
+        </li>
+        <li>
+          <div class="time">Jul 2015 – Apr 2018</div>
+          <div class="content">
+            <div class="company-icon">💻</div>
+            <h3>Software Engineer — Capgemini India Pvt. Ltd.</h3>
+            <ul>
+              <li>Resolved 10+ post-production issues; stabilized a web application.</li>
+              <li>30% reduction in waiting time with 15+ new features enhancing UX.</li>
+              <li>Cut lead time of an upload service by 60% and reduced report generation time by 50%.</li>
+              <li>Developed and trained ML models using RNN, NN, and CNN for training programs.</li>
+            </ul>
+          </div>
+        </li>
+      </ol>
+    </section>
+    <!-- Case Studies -->
+    <section class="section container" id="cases">
+      <h2>Selected Case Studies</h2>
+      <div class="cases">
+        <details class="case">
+          <summary>
+            <h3>Agentic AI Platform — Healthcare</h3>
+            <p class="tags"><span>AI Agents</span> <span>LLM</span> <span>Automation</span></p>
+          </summary>
+          <div class="case-details">
+            <h4>Problem</h4>
+            <p>Manual processes and slow iteration for AI features across teams.</p>
+            <h4>Action</h4>
+            <p>Built a reusable agentic AI framework, custom data pipelines, and evaluation harness; integrated into BI stack.</p>
+            <h4>Impact</h4>
+            <p>70% reduction in manual tasks; 3× faster prototyping; 80% quicker insight generation.</p>
+            <h4>Business Case</h4>
+            <p>Addressed inefficiencies in healthcare workflows by leveraging AI to automate repetitive tasks, enabling faster decision-making and resource allocation for clinical teams.</p>
+            <h4>PRD Highlights</h4>
+            <ul>
+              <li>Core Features: Agentic workflows, LLM fine-tuning, RAG integration for BI dashboards.</li>
+              <li>Success Metrics: Task reduction >70%, insight generation time <20% of original.</li>
+              <li>Tech Stack: Python, LangChain, custom RAG pipelines.</li>
+              <li>Stakeholders: Product, Design, Clinical teams.</li>
+            </ul>
+          </div>
+        </details>
+        <details class="case">
+          <summary>
+            <h3>Deep Research Agent — Clinical Studies</h3>
+            <p class="tags"><span>RAG</span> <span>Search</span> <span>Healthcare</span></p>
+          </summary>
+          <div class="case-details">
+            <h4>Problem</h4>
+            <p>Clinicians needed rapid, reliable summaries from large corpora.</p>
+            <h4>Action</h4>
+            <p>Architected custom retrieval with domain-specific cleaning, chunking, and evaluation.</p>
+            <h4>Impact</h4>
+            <p>10× faster research turnaround with improved retrieval scores.</p>
+            <h4>Business Case</h4>
+            <p>Accelerated clinical research processes to bring insights to market faster, reducing time-to-decision in drug development and patient care.</p>
+            <h4>PRD Highlights</h4>
+            <ul>
+              <li>Core Features: Advanced RAG with custom data ingestion, low-latency querying.</li>
+              <li>Success Metrics: Turnaround time reduction to 10%, retrieval accuracy >95%.</li>
+              <li>Tech Stack: Vector DB, custom embeddings, evaluation harness.</li>
+              <li>Stakeholders: Clinicians, Researchers.</li>
+            </ul>
+          </div>
+        </details>
+        <details class="case">
+          <summary>
+            <h3>Recommendations at Scale — eCommerce</h3>
+            <p class="tags"><span>Recommender Systems</span> <span>Data Platform</span> <span>Experimentation</span></p>
+          </summary>
+          <div class="case-details">
+            <h4>Problem</h4>
+            <p>Low discovery and high overstock.</p>
+            <h4>Action</h4>
+            <p>Built hybrid recommendation engine and improved onsite search & sorting.</p>
+            <h4>Impact</h4>
+            <p>+$50k/month incremental revenue, +7% new-user conversion, −$15k/month overstock.</p>
+            <h4>Business Case</h4>
+            <p>Enhanced product discovery to drive sales and reduce inventory costs in fashion e-commerce, improving customer satisfaction and retention.</p>
+            <h4>PRD Highlights</h4>
+            <ul>
+              <li>Core Features: Hybrid recs (content+collaborative), A/B testing framework.</li>
+              <li>Success Metrics: Conversion uplift >5%, revenue increment >$50k/mo.</li>
+              <li>Tech Stack: ML models, data pipelines, experimentation tools.</li>
+              <li>Stakeholders: Marketing, Sales, Data teams.</li>
+            </ul>
+          </div>
+        </details>
+      </div>
+    </section>
+    <!-- Other Projects -->
+    <section class="section container" id="projects">
+      <h2>Other Projects</h2>
+      <div class="cards">
+        <article class="card project">
+          <h3>GenAI Voice Agent</h3>
+          <p>Architected low-latency voice agent for real-time clinical support interactions.</p>
+          <p class="tags"><span>GenAI</span> <span>Voice</span> <span>Healthcare</span></p>
+          <p><strong>Impact:</strong> Enabled seamless support with <4s latency.</p>
+        </article>
+        <article class="card project">
+          <h3>ML + LLM Diet Engine</h3>
+          <p>Engineered hybrid engine for personalized diet recommendations with 85% accuracy.</p>
+          <p class="tags"><span>ML</span> <span>LLM</span> <span>Wellness</span></p>
+          <p><strong>Impact:</strong> Improved user health outcomes in wellness platform.</p>
+        </article>
+        <article class="card project">
+          <h3>Symptom Analyzer & Risk Assessment</h3>
+          <p>Implemented AI tool for health risk evaluation, reaching 5k+ users in 4 months.</p>
+          <p class="tags"><span>AI</span> <span>Health Tech</span></p>
+          <p><strong>Impact:</strong> Enhanced early detection and user engagement.</p>
+        </article>
+        <article class="card project">
+          <h3>Internal AI Playground</h3>
+          <p>Developed platform for rapid AI prototyping, accelerating experimentation by 3×.</p>
+          <p class="tags"><span>AI Tools</span> <span>Prototyping</span></p>
+          <p><strong>Impact:</strong> Faster iteration for product and design teams.</p>
+        </article>
+      </div>
+    </section>
+    <!-- Skills -->
+    <section class="section container" id="skills">
+      <h2>Skills</h2>
+      <ul class="chips">
+        <li>Product Strategy</li><li>Roadmapping</li><li>AI/ML</li><li>LLM & RAG</li><li>GenAI Voice</li><li>Experimentation</li>
+        <li>Metrics & Analytics</li><li>UX Research</li><li>SQL</li><li>Python</li><li>Data Platforms</li>
+        <li>CRM</li><li>Health Tech</li><li>E-commerce</li><li>Project Management</li>
+      </ul>
+      <h3 class="sub">Education</h3>
+      <ul class="edu">
+        <li><strong>Indian Institute of Management Ahmedabad (IIMA)</strong> — MBA (2018–2020)</li>
+        <li><strong>Indian Institute of Technology Ropar (IIT Ropar)</strong> — B.Tech, Mechanical Engineering (2011–2015)</li>
+      </ul>
+      <h3 class="sub">Certifications</h3>
+      <p>IBM AI Product Manager, IBM AI Developer, Google Digital Marketing, Six Sigma Green Belt, LLM Courses.</p>
+    </section>
+    <!-- Contact -->
+    <section class="section container" id="contact">
+      <h2>Contact</h2>
+      <div class="contact">
+        <a class="btn primary" href="mailto:p18rakeshk@iima.ac.in">Email Me</a>
+        <a class="btn" target="_blank" rel="noopener" href="https://www.linkedin.com/in/rakesh-kumar-2a308b50">LinkedIn</a>
+        <a class="btn ghost" href="#top">Back to top ↑</a>
+      </div>
+    </section>
+  </main>
+  <footer class="site-footer">
+    <div class="container">
+      <small>© <span id="year"></span> Rakesh Kumar — AI Product Manager. Hosted on Hugging Face Spaces.</small>
+    </div>
+  </footer>
+  <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,399 @@

+// Portfolio Website JavaScript
+// Interactive functionality for navigation, theme toggle, and user experience
+(function() {
+    'use strict';
+    // DOM Elements
+    const themeToggle = document.getElementById('themeToggle');
+    const navToggle = document.querySelector('.nav-toggle');
+    const navLinks = document.querySelector('.nav-links');
+    const header = document.querySelector('.site-header');
+    const resumeBtn = document.getElementById('resumeBtn');
+    // Theme Management
+    class ThemeManager {
+        constructor() {
+            this.currentTheme = localStorage.getItem('theme') || 'light';
+            this.init();
+        }
+        init() {
+            this.applyTheme(this.currentTheme);
+            this.updateThemeIcon();
+            if (themeToggle) {
+                themeToggle.addEventListener('click', () => this.toggleTheme());
+            }
+        }
+        toggleTheme() {
+            this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+            this.applyTheme(this.currentTheme);
+            this.updateThemeIcon();
+            localStorage.setItem('theme', this.currentTheme);
+        }
+        applyTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+        }
+        updateThemeIcon() {
+            if (themeToggle) {
+                themeToggle.innerHTML = this.currentTheme === 'light' ? '🌙' : '☀️';
+                themeToggle.setAttribute('aria-label',
+                    `Switch to ${this.currentTheme === 'light' ? 'dark' : 'light'} mode`);
+            }
+        }
+    }
+    // Navigation Management
+    class NavigationManager {
+        constructor() {
+            this.isMenuOpen = false;
+            this.init();
+        }
+        init() {
+            // Mobile menu toggle
+            if (navToggle && navLinks) {
+                navToggle.addEventListener('click', () => this.toggleMobileMenu());
+            }
+            // Close mobile menu when clicking on links
+            if (navLinks) {
+                navLinks.addEventListener('click', (e) => {
+                    if (e.target.tagName === 'A') {
+                        this.closeMobileMenu();
+                    }
+                });
+            }
+            // Close mobile menu when clicking outside
+            document.addEventListener('click', (e) => {
+                if (this.isMenuOpen && !e.target.closest('.nav')) {
+                    this.closeMobileMenu();
+                }
+            });
+            // Smooth scrolling for anchor links
+            this.initSmoothScrolling();
+            // Header scroll effect
+            this.initHeaderScrollEffect();
+        }
+        toggleMobileMenu() {
+            this.isMenuOpen = !this.isMenuOpen;
+            navLinks.classList.toggle('active', this.isMenuOpen);
+            navToggle.setAttribute('aria-expanded', this.isMenuOpen.toString());
+            navToggle.innerHTML = this.isMenuOpen ? '✕' : '☰';
+        }
+        closeMobileMenu() {
+            this.isMenuOpen = false;
+            navLinks.classList.remove('active');
+            navToggle.setAttribute('aria-expanded', 'false');
+            navToggle.innerHTML = '☰';
+        }
+        initSmoothScrolling() {
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', (e) => {
+                    const href = anchor.getAttribute('href');
+                    if (href === '#' || href === '#top') {
+                        e.preventDefault();
+                        window.scrollTo({ top: 0, behavior: 'smooth' });
+                        return;
+                    }
+                    const target = document.querySelector(href);
+                    if (target) {
+                        e.preventDefault();
+                        const headerHeight = header ? header.offsetHeight : 0;
+                        const targetPosition = target.offsetTop - headerHeight - 20;
+                        window.scrollTo({
+                            top: targetPosition,
+                            behavior: 'smooth'
+                        });
+                    }
+                });
+            });
+        }
+        initHeaderScrollEffect() {
+            if (!header) return;
+            let lastScrollY = window.scrollY;
+            let ticking = false;
+            const updateHeader = () => {
+                const scrollY = window.scrollY;
+                if (scrollY > 100) {
+                    header.style.background = 'rgba(255, 255, 255, 0.95)';
+                    header.style.backdropFilter = 'blur(10px)';
+                } else {
+                    header.style.background = '';
+                    header.style.backdropFilter = '';
+                }
+                lastScrollY = scrollY;
+                ticking = false;
+            };
+            const requestTick = () => {
+                if (!ticking) {
+                    requestAnimationFrame(updateHeader);
+                    ticking = true;
+                }
+            };
+            window.addEventListener('scroll', requestTick, { passive: true });
+        }
+    }
+    // Resume Download Manager
+    class ResumeManager {
+        constructor() {
+            this.init();
+        }
+        init() {
+            if (resumeBtn) {
+                resumeBtn.addEventListener('click', (e) => this.handleResumeDownload(e));
+            }
+        }
+        handleResumeDownload(e) {
+            e.preventDefault();
+            // Show loading state
+            const originalText = resumeBtn.innerHTML;
+            resumeBtn.innerHTML = '📄 Downloading...';
+            resumeBtn.classList.add('loading');
+            // Create download link
+            const link = document.createElement('a');
+            link.href = 'Rakesh Resume.pdf';
+            link.download = 'Rakesh_Kumar_Resume.pdf';
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            // Trigger download
+            try {
+                link.click();
+                // Track download (if analytics is available)
+                if (typeof gtag !== 'undefined') {
+                    gtag('event', 'download', {
+                        'event_category': 'Resume',
+                        'event_label': 'PDF Download'
+                    });
+                }
+                // Show success message
+                setTimeout(() => {
+                    resumeBtn.innerHTML = '✅ Downloaded!';
+                    setTimeout(() => {
+                        resumeBtn.innerHTML = originalText;
+                        resumeBtn.classList.remove('loading');
+                    }, 2000);
+                }, 500);
+            } catch (error) {
+                console.error('Download failed:', error);
+                resumeBtn.innerHTML = '❌ Download Failed';
+                setTimeout(() => {
+                    resumeBtn.innerHTML = originalText;
+                    resumeBtn.classList.remove('loading');
+                }, 2000);
+            } finally {
+                document.body.removeChild(link);
+            }
+        }
+    }
+    // Animation and Intersection Observer
+    class AnimationManager {
+        constructor() {
+            this.init();
+        }
+        init() {
+            // Intersection Observer for fade-in animations
+            if ('IntersectionObserver' in window) {
+                this.initScrollAnimations();
+            }
+            // Typing animation for hero subtitle
+            this.initTypingAnimation();
+        }
+        initScrollAnimations() {
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, observerOptions);
+            // Observe elements for animation
+            document.querySelectorAll('.card, .timeline li, .case').forEach(el => {
+                el.style.opacity = '0';
+                el.style.transform = 'translateY(30px)';
+                el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                observer.observe(el);
+            });
+        }
+        initTypingAnimation() {
+            const subtitle = document.querySelector('.hero-subtitle');
+            if (!subtitle) return;
+            const text = subtitle.textContent;
+            subtitle.textContent = '';
+            subtitle.style.borderRight = '2px solid var(--accent-primary)';
+            let i = 0;
+            const typeWriter = () => {
+                if (i < text.length) {
+                    subtitle.textContent += text.charAt(i);
+                    i++;
+                    setTimeout(typeWriter, 50);
+                } else {
+                    // Remove cursor after typing is complete
+                    setTimeout(() => {
+                        subtitle.style.borderRight = 'none';
+                    }, 1000);
+                }
+            };
+            // Start typing animation after a short delay
+            setTimeout(typeWriter, 1000);
+        }
+    }
+    // Utility Functions
+    class Utils {
+        static debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        static throttle(func, limit) {
+            let inThrottle;
+            return function() {
+                const args = arguments;
+                const context = this;
+                if (!inThrottle) {
+                    func.apply(context, args);
+                    inThrottle = true;
+                    setTimeout(() => inThrottle = false, limit);
+                }
+            };
+        }
+        static isElementInViewport(el) {
+            const rect = el.getBoundingClientRect();
+            return (
+                rect.top >= 0 &&
+                rect.left >= 0 &&
+                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+            );
+        }
+    }
+    // Performance Monitoring
+    class PerformanceMonitor {
+        constructor() {
+            this.init();
+        }
+        init() {
+            // Log page load performance
+            window.addEventListener('load', () => {
+                if ('performance' in window) {
+                    const perfData = performance.getEntriesByType('navigation')[0];
+                    console.log('Page Load Time:', perfData.loadEventEnd - perfData.fetchStart, 'ms');
+                }
+            });
+        }
+    }
+    // Error Handling
+    class ErrorHandler {
+        constructor() {
+            this.init();
+        }
+        init() {
+            window.addEventListener('error', (e) => {
+                console.error('JavaScript Error:', e.error);
+                // Could send to analytics or error reporting service
+            });
+            window.addEventListener('unhandledrejection', (e) => {
+                console.error('Unhandled Promise Rejection:', e.reason);
+                // Could send to analytics or error reporting service
+            });
+        }
+    }
+    // Initialize Application
+    class App {
+        constructor() {
+            this.init();
+        }
+        init() {
+            // Wait for DOM to be ready
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => this.start());
+            } else {
+                this.start();
+            }
+        }
+        start() {
+            try {
+                // Initialize all managers
+                new ThemeManager();
+                new NavigationManager();
+                new ResumeManager();
+                new AnimationManager();
+                new PerformanceMonitor();
+                new ErrorHandler();
+                console.log('Portfolio website initialized successfully!');
+            } catch (error) {
+                console.error('Failed to initialize portfolio:', error);
+            }
+        }
+    }
+    // Start the application
+    new App();
+})();
+// Export for potential module use
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { App };
+}

styles.css ADDED Viewed

	@@ -0,0 +1,679 @@

+/* CSS Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+:root {
+  /* Light theme colors */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+  --accent-primary: #0ea5e9;
+  --accent-secondary: #22c55e;
+  --border-color: #e2e8f0;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+}
+[data-theme="dark"] {
+  /* Dark theme colors */
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --border-color: #334155;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+}
+body {
+  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+}
+h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+h2 {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+h3 {
+  font-size: 1.5rem;
+  color: var(--text-primary);
+}
+p {
+  margin-bottom: 1rem;
+  color: var(--text-secondary);
+}
+a {
+  color: var(--accent-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+a:hover {
+  color: var(--accent-secondary);
+}
+/* Layout */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+.section {
+  padding: 4rem 0;
+}
+/* Header */
+.site-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-primary);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-color);
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+}
+.logo {
+  width: 40px;
+  height: 40px;
+}
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  list-style: none;
+}
+.nav-links a {
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: color 0.2s ease;
+}
+.nav-links a:hover {
+  color: var(--accent-primary);
+}
+.nav-toggle {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+/* Hero Section */
+.hero {
+  padding: 8rem 0 4rem;
+  text-align: center;
+}
+.profile-container {
+  margin-bottom: 2rem;
+}
+.profile-avatar {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto;
+  display: block;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid var(--accent-primary);
+  box-shadow: var(--shadow-lg);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.profile-avatar:hover {
+  transform: scale(1.05);
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
+}
+.hero-subtitle {
+  font-size: 1.25rem;
+  max-width: 800px;
+  margin: 0 auto 2rem;
+  color: var(--text-secondary);
+}
+.cta {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+.quick-facts {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  list-style: none;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+}
+.btn.primary {
+  background: var(--gradient);
+  color: white;
+  box-shadow: var(--shadow-md);
+}
+.btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.btn:not(.primary):not(.ghost) {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+.btn:not(.primary):not(.ghost):hover {
+  background: var(--bg-tertiary);
+}
+.btn.ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+.btn.ghost:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+/* Cards */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+.card.kpi {
+  text-align: center;
+}
+.card.kpi h3 {
+  font-size: 2.5rem;
+  font-weight: 800;
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 0.5rem;
+}
+.card.project h3 {
+  color: var(--accent-primary);
+  margin-bottom: 1rem;
+}
+/* Timeline */
+.timeline {
+  list-style: none;
+  position: relative;
+  padding-left: 2rem;
+}
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--gradient);
+}
+.timeline li {
+  position: relative;
+  margin-bottom: 3rem;
+  padding-left: 2rem;
+}
+.timeline li::before {
+  content: '';
+  position: absolute;
+  left: -1.5rem;
+  top: 0.5rem;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent-primary);
+  border: 3px solid var(--bg-primary);
+}
+.time {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--accent-primary);
+  margin-bottom: 0.5rem;
+}
+.content {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  position: relative;
+}
+.company-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.content ul {
+  margin-top: 1rem;
+  padding-left: 1.5rem;
+}
+.content li {
+  margin-bottom: 0.5rem;
+  color: var(--text-secondary);
+}
+/* Case Studies */
+.cases {
+  display: grid;
+  gap: 1.5rem;
+}
+.case {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  overflow: hidden;
+}
+.case summary {
+  padding: 1.5rem;
+  cursor: pointer;
+  list-style: none;
+  transition: background-color 0.2s ease;
+}
+.case summary:hover {
+  background: var(--bg-tertiary);
+}
+.case summary h3 {
+  margin-bottom: 0.5rem;
+}
+.case-details {
+  padding: 0 1.5rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+.case-details h4 {
+  color: var(--accent-primary);
+  margin: 1.5rem 0 0.5rem;
+}
+.case-details h4:first-child {
+  margin-top: 1rem;
+}
+/* Tags */
+.tags {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.tags span {
+  background: var(--accent-primary);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+/* Skills */
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  list-style: none;
+  margin-bottom: 2rem;
+}
+.chips li {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  padding: 0.5rem 1rem;
+  border-radius: 2rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+.chips li:hover {
+  background: var(--accent-primary);
+  color: white;
+  transform: translateY(-2px);
+}
+.sub {
+  font-size: 1.25rem;
+  margin: 2rem 0 1rem;
+  color: var(--text-primary);
+}
+.edu {
+  list-style: none;
+  margin-bottom: 2rem;
+}
+.edu li {
+  margin-bottom: 0.5rem;
+  color: var(--text-secondary);
+}
+/* Contact */
+.contact {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+/* Footer */
+.site-footer {
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  padding: 2rem 0;
+  text-align: center;
+}
+.site-footer small {
+  color: var(--text-muted);
+}
+/* Theme Toggle */
+#themeToggle {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease;
+}
+#themeToggle:hover {
+  background: var(--bg-secondary);
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+  .nav-toggle {
+    display: block;
+  }
+  .nav-links {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--bg-primary);
+    border-top: 1px solid var(--border-color);
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+  .nav-links.active {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+  h1 {
+    font-size: 2.5rem;
+  }
+  h2 {
+    font-size: 2rem;
+  }
+  .hero {
+    padding: 6rem 0 3rem;
+  }
+  .cta {
+    flex-direction: column;
+    align-items: center;
+  }
+  .quick-facts {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .cards {
+    grid-template-columns: 1fr;
+  }
+  .timeline {
+    padding-left: 1rem;
+  }
+  .timeline li {
+    padding-left: 1.5rem;
+  }
+  .contact {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1rem;
+  }
+  h1 {
+    font-size: 2rem;
+  }
+  .hero-subtitle {
+    font-size: 1.1rem;
+  }
+  .card {
+    padding: 1rem;
+  }
+  .content {
+    padding: 1rem;
+  }
+  .case summary {
+    padding: 1rem;
+  }
+  .case-details {
+    padding: 0 1rem 1rem;
+  }
+}
+/* Print Styles */
+@media print {
+  .site-header,
+  .nav-toggle,
+  #themeToggle,
+  .cta {
+    display: none;
+  }
+  body {
+    background: white;
+    color: black;
+  }
+  .section {
+    padding: 2rem 0;
+  }
+  .hero {
+    padding: 2rem 0;
+  }
+}
+/* Smooth Scrolling */
+html {
+  scroll-behavior: smooth;
+}
+/* Focus Styles */
+:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+/* Animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.card,
+.timeline li,
+.case {
+  animation: fadeInUp 0.6s ease-out;
+}
+/* Loading State */
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  html {
+    scroll-behavior: auto;
+  }
+}
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  :root {
+    --border-color: #000000;
+    --text-secondary: #000000;
+  }
+  [data-theme="dark"] {
+    --border-color: #ffffff;
+    --text-secondary: #ffffff;
+  }
+}