<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palavalli Himavanth | Interactive Portfolio</title>
    <meta name="description" content="Interactive resume and portfolio of Palavalli Himavanth. Features Recruiter and Developer views with resume role filters and an interactive terminal.">
    <meta property="og:title" content="Palavalli Himavanth | Full-Stack Engineer">
    <meta property="og:description" content="Interactive portfolio with Recruiter and Developer views.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://himavanth.palavalli.com">
    <meta property="og:site_name" content="Palavalli Himavanth Portfolio">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Palavalli Himavanth | Full-Stack Engineer">
    <meta name="twitter:description" content="Interactive portfolio with Recruiter and Developer views.">
    <link rel="canonical" href="https://himavanth.palavalli.com">
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <!-- Google Fonts -->
    <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&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="hr-mode">
    <!-- Noise overlay for premium aesthetic -->
    <div class="noise-bg"></div>
    
    <!-- Background glows -->
    <div class="glow glow-1"></div>
    <div class="glow glow-2"></div>

    <!-- BOOT OVERLAY FOR SHOCKING TRANSITION -->
    <div id="bootOverlay" class="boot-overlay hidden">
        <div class="boot-content">
            <div class="boot-header">
                <span class="boot-dot red"></span>
                <span class="boot-dot yellow"></span>
                <span class="boot-dot green"></span>
                <span class="boot-title">himavanth_kernel.sh</span>
            </div>
            <div id="bootTerminal" class="boot-terminal"></div>
        </div>
    </div>

    <!-- MAIN APP WRAPPER -->
    <div id="appContainer">
        <!-- HEADER & NAV -->
        <header class="main-header">
            <div class="header-inner">
                <a href="#" class="logo">
                    <span class="logo-text">PH</span><span class="logo-dot">.</span>
                </a>
                <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Open portfolio options" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><line x1="4" y1="7" x2="20" y2="7"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="17" x2="20" y2="17"></line></svg>
                    <span>Options</span>
                </button>
                
                <!-- Toggle switch (HR vs Dev) -->
                <div class="toggle-container">
                    <button class="view-toggle-btn active" id="hrToggle" aria-label="Switch to HR view">
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                        <span>Recruiter View</span>
                    </button>
                    <button class="view-toggle-btn" id="devToggle" aria-label="Switch to Developer view">
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
                        <span>Developer View</span>
                    </button>
                </div>
            </div>
        </header>

        <div class="mobile-menu-backdrop" id="mobileMenuBackdrop"></div>
        <aside class="mobile-options-panel" id="mobileOptionsPanel" aria-label="Portfolio options">
            <div class="mobile-options-header">
                <span>Options</span>
                <button class="mobile-close-btn" id="mobileCloseBtn" aria-label="Close portfolio options">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="mobile-options-section">
                <span class="mobile-options-label">View</span>
                <button class="mobile-option-btn active" data-mobile-mode="hr">Recruiter View</button>
                <button class="mobile-option-btn" data-mobile-mode="dev">Developer View</button>
            </div>
            <div class="mobile-options-section">
                <span class="mobile-options-label">Resume Role</span>
                <button class="mobile-option-btn active" data-mobile-role="fullstack">Full-Stack Engineer</button>
                <button class="mobile-option-btn" data-mobile-role="backend">Backend Engineer</button>
                <button class="mobile-option-btn" data-mobile-role="frontend">Frontend Engineer</button>
            </div>
            <button class="pdf-btn mobile-pdf-btn" id="mobilePdfDownloadBtn" title="Print/Download as ATS-friendly PDF">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                <span>Download Resume PDF</span>
            </button>
        </aside>

        <!-- ==================== HR LAYOUT ==================== -->
        <main id="hrLayout" class="layout-section">
            <!-- HERO / INTRO -->
            <section class="hero-section">
                <!-- Role selector bar -->
                <div class="role-selector-wrapper">
                    <span class="selector-label">Tailor resume for:</span>
                    <div class="role-selector" role="tablist">
                        <button class="role-tab active" data-role="fullstack" role="tab" aria-selected="true">
                            Full-Stack Engineer
                        </button>
                        <button class="role-tab" data-role="backend" role="tab" aria-selected="false">
                            Backend Engineer
                        </button>
                        <button class="role-tab" data-role="frontend" role="tab" aria-selected="false">
                            Frontend Engineer
                        </button>
                    </div>
                    <!-- ATS Direct PDF button -->
                    <button class="pdf-btn" id="pdfDownloadBtn" title="Print/Download as ATS-friendly PDF">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                        <span>Download Resume PDF</span>
                    </button>
                </div>

                <div class="profile-card card">
                    <div class="profile-header">
                        <div class="profile-meta">
                            <h1 class="profile-name">Palavalli Himavanth</h1>
                            <p class="profile-subtitle" id="hrProfileTitle">Full-Stack Software Engineer</p>
                            <div class="contact-details">
                                <a href="mailto:himavanthpalavalli225@gmail.com" class="contact-item">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                                    <span>himavanthpalavalli225@gmail.com</span>
                                </a>
                                <div class="contact-item">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                                    <span>Chennai, India</span>
                                </div>
                            </div>
                        </div>
                        <div class="social-links">
                            <a href="https://www.linkedin.com/in/himavanth-palavalli-b97b561bb/" target="_blank" rel="noopener" class="social-btn linkedin">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                                <span>LinkedIn</span>
                            </a>
                            <a href="https://github.com/cdrHimavanth" target="_blank" rel="noopener" class="social-btn github">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                <span>GitHub</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="summary-box">
                        <h3 class="section-title-small">Professional Summary</h3>
                        <p class="summary-text" id="hrSummaryText">
                            Full-Stack Software Engineer with nearly 3.5 years of experience building end-to-end enterprise applications and AI-integrated platforms using Java, Spring Boot, and Angular. Skilled in fusing modern frontend interfaces with robust microservices and advanced databases (MySQL, pgvector). Proven ability to deliver comprehensive technical solutions, from RAG-based AI tools utilizing Gemini LLMs to scalable corporate HR architectures.
                        </p>
                    </div>
                </div>
            </section>

            <!-- TECHNICAL SKILLS -->
            <section class="section">
                <h2 class="section-heading">Technical Expertise</h2>
                <div class="skills-grid" id="hrSkillsGrid">
                    <!-- Loaded dynamically via JavaScript based on role -->
                </div>
            </section>

            <!-- EXPERIENCE (TIMELINE) -->
            <section class="section">
                <h2 class="section-heading">Work Experience</h2>
                <div class="timeline" id="hrTimeline">
                    <!-- Loaded dynamically via JavaScript based on role -->
                </div>
            </section>

            <!-- PROJECTS -->
            <section class="section">
                <h2 class="section-heading">Key Projects</h2>
                <div class="projects-grid" id="hrProjectsGrid">
                    <!-- Loaded dynamically via JavaScript -->
                </div>
            </section>

            <!-- EDUCATION & CERTIFICATIONS & LANGUAGES -->
            <section class="section grid-2">
                <div class="edu-card-col">
                    <h2 class="section-heading">Education</h2>
                    <div class="card edu-card">
                        <div class="edu-header">
                            <span class="edu-icon">🎓</span>
                            <div>
                                <h3 class="edu-title">B.Tech in Mechanical Engineering</h3>
                                <p class="edu-inst">NBKR Institute of Science & Technology</p>
                                <p class="edu-affil">JNTUA Affiliated</p>
                            </div>
                        </div>
                        <span class="date-badge">2017 – 2021</span>
                    </div>
                </div>

                <div class="cert-card-col">
                    <h2 class="section-heading">Certifications</h2>
                    <div class="card cert-card">
                        <div class="cert-header">
                            <span class="cert-icon">🏅</span>
                            <div>
                                <h3 class="cert-title">Oracle Certified Associate</h3>
                                <p class="cert-subtitle">Java SE 8 Programmer (1Z0-808)</p>
                            </div>
                        </div>
                        <div class="cert-badge-details">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="icon"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                            <span>Oracle Verified</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- LANGUAGES -->
            <section class="section">
                <h2 class="section-heading">Languages Spoken</h2>
                <div class="languages-row">
                    <div class="lang-pill">
                        <span class="lang-flag">🇬🇧</span>
                        <span class="lang-name">English</span>
                        <span class="lang-level">Professional</span>
                    </div>
                    <div class="lang-pill">
                        <span class="lang-flag">🇮🇳</span>
                        <span class="lang-name">Telugu</span>
                        <span class="lang-level">Native</span>
                    </div>
                    <div class="lang-pill">
                        <span class="lang-flag">🇮🇳</span>
                        <span class="lang-name">Hindi</span>
                        <span class="lang-level">Conversational</span>
                    </div>
                </div>
            </section>

            <!-- FOOTER -->
            <footer class="hr-footer">
                <p>&copy; 2026 Palavalli Himavanth. Built with pure HTML/CSS/JS.</p>
            </footer>
        </main>

        <!-- ==================== DEV LAYOUT (VS CODE MOCKUP) ==================== -->
        <div id="devLayout" class="layout-section hidden">
            <div class="ide-container">
                <!-- SIDEBAR (FILE EXPLORER) -->
                <aside class="ide-sidebar">
                    <div class="sidebar-title">
                        <span>EXPLORER: RESUME</span>
                    </div>
                    <div class="explorer-section">
                        <div class="explorer-header collapsible">
                            <svg class="icon arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                            <span>HIMAVANTH_WORK</span>
                        </div>
                        <div class="explorer-files">
                            <button class="file-item active" data-file="index.html">
                                <span class="file-icon html">📄</span>
                                <span class="file-name">index.html</span>
                            </button>
                            <button class="file-item" data-file="skills.json">
                                <span class="file-icon json">⚙️</span>
                                <span class="file-name">skills.json</span>
                            </button>
                            <button class="file-item" data-file="experience.md">
                                <span class="file-icon md">📋</span>
                                <span class="file-name">experience.md</span>
                            </button>
                            <button class="file-item" data-file="projects.py">
                                <span class="file-icon py">🐍</span>
                                <span class="file-name">projects.py</span>
                            </button>
                            <button class="file-item" data-file="education.md">
                                <span class="file-icon md">🎓</span>
                                <span class="file-name">education.md</span>
                            </button>
                            <button class="file-item" data-file="contact.sh">
                                <span class="file-icon sh">✉️</span>
                                <span class="file-name">contact.sh</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- THEME CONTROLLER IN SIDEBAR -->
                    <div class="sidebar-section border-top">
                        <div class="explorer-header">
                            <span>IDE THEME</span>
                        </div>
                        <div class="theme-list">
                            <button class="theme-select-btn active" data-theme="dracula">Dracula</button>
                            <button class="theme-select-btn" data-theme="github-dark">GitHub Dark</button>
                            <button class="theme-select-btn" data-theme="monokai">Monokai</button>
                            <button class="theme-select-btn" data-theme="cyber">Cyberpunk</button>
                        </div>
                    </div>
                </aside>

                <!-- MAIN WORKSPACE -->
                <div class="ide-workspace">
                    <!-- EDITOR SECTION -->
                    <div class="ide-editor">
                        <!-- Tab Bar -->
                        <div class="editor-tabs" id="editorTabs">
                            <!-- Populated dynamically via JS -->
                        </div>
                        
                        <!-- Editor Body -->
                        <div class="editor-body">
                            <!-- Line Numbers Gutter -->
                            <div class="line-gutter" id="lineGutter">
                                <!-- Populated dynamically based on lines -->
                            </div>
                            
                            <!-- Code Area -->
                            <div class="code-area">
                                <pre class="code-pre" id="codePre">
                                    <!-- Populated dynamically via JS -->
                                </pre>
                            </div>
                        </div>
                    </div>

                    <!-- TERMINAL SECTION (INTERACTIVE) -->
                    <div class="ide-terminal">
                        <div class="terminal-header">
                            <div class="terminal-tabs">
                                <span class="term-tab active">TERMINAL</span>
                                <span class="term-tab">OUTPUT</span>
                                <span class="term-tab">DEBUG CONSOLE</span>
                            </div>
                            <span class="term-status">bash (zsh)</span>
                        </div>
                        
                        <div class="terminal-body" id="terminalBody">
                            <div class="term-output">
                                <p class="term-welcome">Welcome to Himavanth's Interactive Shell (v2.2.0)</p>
                                <p class="term-hint">Type <span class="term-highlight">help</span> to see a list of commands. Try running <span class="term-highlight">pdf</span> or <span class="term-highlight">matrix</span>!</p>
                                <br>
                            </div>
                            <!-- Active terminal input line -->
                            <div class="term-input-line">
                                <span class="term-prompt">guest@himavanth-dev:~$</span>
                                <input type="text" id="terminalInput" class="term-input" autocomplete="off" aria-label="Terminal input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- STATUS BAR -->
            <footer class="ide-statusbar">
                <div class="statusbar-left">
                    <span class="sb-item branch">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M6 3v12"></path><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
                        <span>main</span>
                    </span>
                    <span class="sb-item sync">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"></path></svg>
                    </span>
                    <span class="sb-item">0 ⊗ 0 ⚠</span>
                </div>
                <div class="statusbar-right">
                    <span class="sb-item">Ln <span id="sbLn">1</span>, Col <span id="sbCol">1</span></span>
                    <span class="sb-item">Spaces: 4</span>
                    <span class="sb-item">UTF-8</span>
                    <span class="sb-item" id="sbLanguage">HTML</span>
                    <span class="sb-item live">● Port: 5500</span>
                </div>
            </footer>
        </div>
    </div>

    <!-- CANVAS FOR MATRIX DIGITAL RAIN (OPTIONAL DEV EFFECTS) -->
    <canvas id="matrixCanvas" class="matrix-canvas hidden"></canvas>

    <script src="script.js"></script>
</body>
</html>
