app.py

import gradio as gr
import base64
import os

# --- Helper Functions ---
def file_to_data_uri(filepath, mime_type="application/pdf"):
    with open(filepath, "rb") as f:
        data = f.read()
    b64 = base64.b64encode(data).decode("utf-8")
    return f"data:{mime_type};base64,{b64}"


# --- Navigation Functions ---
def show_data_analytics():
    return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)

def show_machine_learning():
    return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)

def show_computer_vision():
    return gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)

def go_home():
    return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)

# --- Icons (SVG) ---
data_analytics_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M8 10h.01"></path><path d="M12 10h.01"></path><path d="M16 10h.01"></path></svg>"""
machine_learning_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>"""
computer_vision_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>"""
home_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>"""
linkedin_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>"""
github_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>"""
mail_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>"""
link_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>"""
document_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>"""

# --- Function to encode image ---
def image_to_data_uri(filepath, mime_type="image/jpeg"):
    with open(filepath, "rb") as f:
        data = f.read()
    b64 = base64.b64encode(data).decode("utf-8")
    return f"data:{mime_type};base64,{b64}"

# --- CSS ---
portfolio_css = """
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap');

:root {
    --primary-da: #8a2be2;
    --secondary-da: #2575fc;
    --primary-ml: #00b4db;
    --secondary-ml: #0083b0;
    --primary-cv: #ff4d7e;
    --secondary-cv: #fd3e58;
    --dark-bg: #0f1118;
    --card-bg: #1a1d29;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.2);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --transition-fast: 0.2s ease;
    --transition-med: 0.3s ease;
    --transition-slow: 0.5s ease;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(53, 53, 113, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(113, 53, 53, 0.05) 0%, transparent 50%);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.gr-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Landing section */
.landing-section {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 20px;
    position: relative;
}

.landing-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
    z-index: -1;
}

.landing-section h1, .landing-section h2 {
    color: var(--text-primary) !important;
    margin-top: 0;
}

.landing-section h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: -0.5px;
}

.landing-section h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.profile-container {
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.profile-pic {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
    position: relative;
    background: linear-gradient(45deg, var(--primary-da), var(--primary-ml), var(--primary-cv));
    padding: 4px;
}

.profile-pic img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name-text {
    font-size: 2.6rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}

@keyframes float {
    0% { transform: translateY(0px) }
    50% { transform: translateY(-10px) }
    100% { transform: translateY(0px) }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.about-text {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.skills-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.skill-pill {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.social-button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-med);
    color: var(--text-primary);
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.social-button:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-md);
}

.social-linkedin:hover { background: #0077b5; }
.social-github:hover { background: #333; }
.social-email:hover { background: #ea4335; }

.social-button svg {
    width: 24px;
    height: 24px;
}

/* Card styling */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.card-container {
    position: relative; /* Important for button positioning */
    margin-bottom: 20px;
    height: 100%;
}

.card-container.da:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-da), var(--secondary-da));
    z-index: 5;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.card-container.ml:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-ml), var(--secondary-ml));
    z-index: 5;
    transition: all var(--transition-med);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.card-container.cv:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-cv), var(--secondary-cv));
    z-index: 5;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.card-content {
    padding: 30px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    position: relative;
    z-index: 2;
    transition: all var(--transition-med);
}

.card-content svg {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    opacity: 0.9;
    transition: all var(--transition-med);
}

.card-inner {
    transition: transform var(--transition-med), box-shadow var(--transition-med), background-color var(--transition-med);
    text-align: center;
    border-radius: var(--border-radius-md);
    background: var(--card-bg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    height: 100%;
    cursor: pointer; /* Indicates the card is clickable */
    position: relative; /* Ensure child elements are positioned relative to the card */
}

.card-inner:hover {
    transform: translateY(-10px) scale(1.05); /* Adds a slight zoom effect */
    box-shadow: var(--shadow-lg); /* Increases shadow for emphasis */
    background: rgba(255, 255, 255, 0.1); /* Subtle background change */
    border: 2px solid var(--primary-da); /* Optional: Add a border to emphasize hover */
}

.card-inner:hover .card-content svg {
    transform: scale(1.1); /* Slightly enlarges the icon */
    opacity: 1;
}

.card-inner:hover .card-description {
    color: var(--text-primary); /* Optional: changes text color for emphasis */
}

/* Add a subtle glow effect */
.card-inner:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    z-index: -1;
}

.card-description {
    padding: 0 20px 20px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Card button styling - crucial for making cards clickable */
.card-button {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transform: scale(1.05) !important;
    transition: transform 0.2s ease !important;
    background: none !important;
}

/* Section styling */
.section-container {
    padding: 40px 20px;
    position: relative;
}

.section-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, transparent 70%);
    z-index: 0;
}

.da-section h1.section-heading { 
    color: var(--primary-da);
    position: relative;
    display: inline-block;
}

.ml-section h1.section-heading { 
    color: var(--primary-ml);
    position: relative;
    display: inline-block;
}

.cv-section h1.section-heading { 
    color: var(--primary-cv);
    position: relative;
    display: inline-block;
}

.section-heading:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px;
}

.da-section .section-heading:after { background: var(--primary-da); }
.ml-section .section-heading:after { background: var(--primary-ml); }
.cv-section .section-heading:after { background: var(--primary-cv); }

/* Subheadings color-coded */
.section-subheading.da { color: var(--primary-da); }
.section-subheading.ml { color: var(--primary-ml); }
.section-subheading.cv { color: var(--primary-cv); }

/* Back buttons */
.back-button {
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.back-button-da { 
    background: linear-gradient(45deg, var(--primary-da), var(--secondary-da)); 
    color: #fff; 
}

.back-button-ml { 
    background: linear-gradient(45deg, var(--primary-ml), var(--secondary-ml)); 
    color: #fff; 
}

.back-button-cv { 
    background: linear-gradient(45deg, var(--primary-cv), var(--secondary-cv)); 
    color: #fff; 
}

.back-button svg {
    width: 20px;
    height: 20px;
}

/* Contact form */
.contact-container {
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}

.hire-me-button {
    background: linear-gradient(45deg, var(--primary-da), var(--primary-cv));
    color: white;
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-med);
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
    display: inline-block;
    text-decoration: none;
}

.hire-me-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.1);
}

/* Project cards */
.project-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-med);
    border-left: 4px solid transparent;
}

.da-section .project-card { border-left-color: var(--primary-da); }
.ml-section .project-card { border-left-color: var(--primary-ml); }
.cv-section .project-card { border-left-color: var(--primary-cv); }

.project-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.project-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-title-text {
    flex: 1;
}

.project-link {
    color: var(--text-secondary);
    transition: all var(--transition-med);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.project-link svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.da-section .project-title-text { color: var(--primary-da); }
.ml-section .project-title-text { color: var(--primary-ml); }
.cv-section .project-title-text { color: var(--primary-cv); }

.da-section .project-link:hover { color: var(--primary-da); }
.ml-section .project-link:hover { color: var(--primary-ml); }
.cv-section .project-link:hover { color: var(--primary-cv); }

.project-description {
    color: var(--text-secondary);
    line-height: 1.5;
}

.tech-stack {
    display: block;
    margin-top: 10px;
    font-style: italic;
    color: var(--text-muted);
}

/* Skills list */
.skills-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 40px;  /* Added margin to create space between skills and projects */
}

.skill-category {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    transition: all var(--transition-med);
}

.skill-category:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.skill-category h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.da-section .skill-category h4 { color: var(--primary-da); }
.ml-section .skill-category h4 { color: var(--primary-ml); }
.cv-section .skill-category h4 { color: var(--primary-cv); }

.skill-category ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.skill-category li {
    margin-bottom: 5px;
}

/* Section intro text */
.section-intro {
    max-width: 800px;
    margin-bottom: 30px;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Footer */
.footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 60px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Animations for scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive design */
@media (max-width: 768px) {
    .landing-section h1 {
        font-size: 2.5rem;
    }
    
    .landing-section h2 {
        font-size: 1.5rem;
    }
    
    .about-text {
        font-size: 1.1rem;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .skills-list {
        grid-template-columns: 1fr;
    }
    
    .profile-pic {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .landing-section h1 {
        font-size: 2rem;
    }
    
    .landing-section h2 {
        font-size: 1.2rem;
    }
    
    .card-content {
        min-height: 150px;
        font-size: 22px;
    }
    
    .social-links {
        gap: 15px;
    }
    
    .social-button {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}
"""

# --- Portfolio Layout ---
with gr.Blocks(title="Manyue's Portfolio", css=portfolio_css) as demo:
    # Create sections
    # Data Analytics Section (initially hidden)
    with gr.Row(visible=False, elem_classes="section-container da-section") as da_section:
        with gr.Column():
            # Back button
            back_from_da = gr.Button("← Back to Home", elem_classes="back-button back-button-da")
            gr.HTML("""
            <h1 class="section-heading">Data Analytics</h1>
            <div class="section-intro">
                I specialize in transforming raw data into actionable business insights that drive strategic decision-making. 
                With a strong background in both data analytics and commerce, I bridge the gap between business needs and technical solutions.
                My approach combines statistical analysis with compelling data visualization to tell stories that solve real-world problems.
                I've developed expertise in designing dashboards that make complex data accessible and creating end-to-end analysis
                workflows that uncover hidden patterns and trends.
            </div>
            """)
            
            gr.HTML("""
            <h3 class="section-subheading da">Skills</h3>
            
            <div class="skills-list">
                <div class="skill-category">
                    <h4>Data Visualization</h4>
                    <ul>
                        <li>Power BI</li>
                        <li>Tableau</li>
                        <li>Matplotlib/Seaborn</li>
                        <li>Plotly/Dash</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>Data Manipulation</h4>
                    <ul>
                        <li>SQL</li>
                        <li>Pandas</li>
                        <li>NumPy</li>
                        <li>ETL Pipelines</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>Analysis Techniques</h4>
                    <ul>
                        <li>Statistical Analysis</li>
                        <li>A/B Testing</li>
                        <li>Time Series Analysis</li>
                        <li>Customer Segmentation</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>Business Intelligence</h4>
                    <ul>
                        <li>KPI Development</li>
                        <li>Executive Reporting</li>
                        <li>Data Storytelling</li>
                        <li>Process Optimization</li>
                    </ul>
                </div>
            </div>
            
            <h3 class="section-subheading da">Projects</h3>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">Northwind Sales Insight Dashboard</span>
                    <a href="https://github.com/Manyue-datascientist/northwind-retail-analysis" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>View Project</span>
                    </a>
                </div>
                <div class="project-description">
                    A business-driven case study where I performed in-depth EDA on the classic Northwind dataset. I uncovered key trends in sales, customer behavior, and product performance, and built a professional dashboard for storytelling using Power BI and SQL.
                    <span class="tech-stack"><strong>Tech Stack:</strong> SQL, Power BI, Pandas</span>
                </div>
            </div>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">Loan Default Risk Analysis</span>
                    <a href="#" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>View Project</span>
                    </a>
                </div>
                <div class="project-description">
                    A feature-driven analytics project where I identified critical drivers of loan defaults. I applied statistical analysis and visual storytelling to assist in better loan disbursement strategies.
                    <span class="tech-stack"><strong>Tech Stack:</strong> Python, Matplotlib, Pandas</span>
                </div>
            </div>
            """)
    
    # Machine Learning Section (initially hidden)
    with gr.Row(visible=False, elem_classes="section-container ml-section") as ml_section:
        with gr.Column():
            # Back button
            back_from_ml = gr.Button("← Back to Home", elem_classes="back-button back-button-ml")
            gr.HTML("""
            <h1 class="section-heading">Machine Learning</h1>
            <div class="section-intro">
                My machine learning expertise spans from traditional algorithms to deep learning systems that solve real business challenges. 
                I've built end-to-end ML pipelines that deliver measurable impact, combining the right models with appropriate feature engineering 
                techniques. I focus on creating solutions that are not only technically sound but also deployable, maintainable, 
                and integrated with business workflows. With a solid foundation in Python-based ML frameworks and cloud 
                deployment platforms, I develop models that generate actionable predictions and insights.
            </div>
            """)
            
            gr.HTML("""
            <h3 class="section-subheading ml">Skills</h3>
            
            <div class="skills-list">
                <div class="skill-category">
                    <h4>Frameworks & Libraries</h4>
                    <ul>
                        <li>TensorFlow/Keras</li>
                        <li>PyTorch</li>
                        <li>Scikit-Learn</li>
                        <li>XGBoost/LightGBM</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>ML Techniques</h4>
                    <ul>
                        <li>Supervised Learning</li>
                        <li>Unsupervised Learning</li>
                        <li>Deep Learning</li>
                        <li>Natural Language Processing</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>MLOps</h4>
                    <ul>
                        <li>ML Pipelines</li>
                        <li>Model Monitoring</li>
                        <li>Deployment Strategies</li>
                        <li>Version Control (DVC)</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>Cloud ML Services</h4>
                    <ul>
                        <li>AWS SageMaker</li>
                        <li>Google AI Platform</li>
                        <li>Azure ML</li>
                        <li>MLflow</li>
                    </ul>
                </div>
            </div>
            
            <h3 class="section-subheading ml">Projects</h3>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">University Admission Predictor</span>
                    <a href="#" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>Try the Predictor</span>
                    </a>
                </div>
                <div class="project-description">
                    Built a regression model to predict the chances of a student getting admitted to top universities based on academic profiles. The project includes feature importance analysis, model tuning, and a live demo deployed with Streamlit.
                    <span class="tech-stack"><strong>Tech Stack:</strong> Scikit-learn, Streamlit, NumPy</span>
                </div>
            </div>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">AI Chat Assistant for Recruiters</span>
                    <a href="https://huggingface.co/spaces/Manyue-DataScientist/AI-Assistant" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>Chat with Assistant</span>
                    </a>
                </div>
                <div class="project-description">
                    A custom-trained assistant that answers queries about my resume and portfolio using NLP and retrieval techniques. Built to simulate real-time interactions with hiring teams, this project showcases my ability to work with large language models and create practical AI applications.
                    <span class="tech-stack"><strong>Tech Stack:</strong> LangChain, OpenAI, Gradio</span>
                </div>
            </div>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">Speaker Diarization Application</span>
                    <a href="https://huggingface.co/spaces/Manyue-DataScientist/speaker-diarization-app-v2" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>Try the Application</span>
                    </a>
                </div>
                <div class="project-description">
                    Developed an advanced multi-speaker audio processing system that performs speaker diarization, transcription, and summarization to extract meaningful insights from multi-speaker conversations.
                    <span class="tech-stack"><strong>Tech Stack:</strong> PyTorch, Hugging Face Transformers, Gradio</span>
                </div>
            </div>
            """)
    
    # Computer Vision Section (initially hidden)
    with gr.Row(visible=False, elem_classes="section-container cv-section") as cv_section:
        with gr.Column():
            # Back button
            back_from_cv = gr.Button("← Back to Home", elem_classes="back-button back-button-cv")
            gr.HTML("""
            <h1 class="section-heading">Computer Vision</h1>
            <div class="section-intro">
                I'm passionate about developing computer vision systems that can perceive and understand visual information in ways that benefit humans.
                My experience spans from implementing state-of-the-art algorithms to deploying them in real-world scenarios. I've worked on projects 
                that enable machines to "see" and interpret their environment through image processing, object detection, and image classification.
                I focus particularly on applications that improve accessibility and solve tangible problems, creating CV solutions
                that operate efficiently even with hardware constraints.
            </div>
            """)
            
            gr.HTML("""
            <h3 class="section-subheading cv">Skills</h3>
            
            <div class="skills-list">
                <div class="skill-category">
                    <h4>CV Techniques</h4>
                    <ul>
                        <li>Object Detection</li>
                        <li>Image Segmentation</li>
                        <li>Feature Extraction</li>
                        <li>Image Classification</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>CV Libraries</h4>
                    <ul>
                        <li>OpenCV</li>
                        <li>PIL/Pillow</li>
                        <li>TorchVision</li>
                        <li>TF Computer Vision</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>Deep Learning for CV</h4>
                    <ul>
                        <li>CNNs</li>
                        <li>YOLO frameworks</li>
                        <li>Transfer Learning</li>
                        <li>Object Recognition</li>
                    </ul>
                </div>
                
                <div class="skill-category">
                    <h4>Applications</h4>
                    <ul>
                        <li>Accessibility Solutions</li>
                        <li>OCR/Document Analysis</li>
                        <li>Motion Tracking</li>
                        <li>Edge Deployment</li>
                    </ul>
                </div>
            </div>
            
            <h3 class="section-subheading cv">Projects</h3>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">Smart Shopping Assistant for the Blind</span>
                    <a href="https://github.com/Manyue-datascientist/smart_glove_project" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>View Project</span>
                    </a>
                </div>
                <div class="project-description">
                    Designed a system using object detection and OCR to help visually impaired individuals find products and navigate shopping aisles. Developed with real-time feedback on Raspberry Pi and OAK-D camera, this project demonstrates my commitment to creating technology that solves real accessibility challenges.
                    <span class="tech-stack"><strong>Tech Stack:</strong> YOLOv8, OpenCV, Raspberry Pi</span>
                </div>
            </div>
            
            <div class="project-card">
                <div class="project-title">
                    <span class="project-title-text">Traffic Flow Counter (Upcoming)</span>
                    <a href="#" target="_blank" class="project-link">
                        """ + link_icon + """
                        <span>Coming Soon</span>
                    </a>
                </div>
                <div class="project-description">
                    An edge solution using Raspberry Pi to monitor and count vehicles at intersections, providing real-time traffic flow analytics. This project demonstrates efficient deployment of CV models on resource-constrained devices.
                    <span class="tech-stack"><strong>Tech Stack:</strong> YOLOv5, Raspberry Pi, OpenCV</span>
                </div>
            </div>
            """)
    
    with gr.Row(visible=True, elem_classes="landing-section") as landing_section:
        with gr.Column():
            # Profile section with picture - using the actual image from data folder
            try:
                # Get the image as data URI
                profile_img_uri = image_to_data_uri("data/My_photo.jpeg")
                gr.HTML(f"""
                <div class="profile-container">
                    <div class="profile-pic">
                        <img src="{profile_img_uri}" alt="Manyue Javvadi" />
                    </div>
                    <div class="name-text">Manyue Javvadi</div>
                </div>
                <h2>AI/ML Engineer & Data Scientist</h2>
                <div class="about-text">
                    I'm a software engineer turned AI/ML practitioner with a strong foundation in Commerce and experience in ML, computer vision, and data analytics.
                    I blend business understanding with data-driven thinking to create real-world solutions. Currently open to roles in Data Science, Machine Learning Engineering, and Computer Vision.
                </div>
                
                <div class="skills-container">
                    <div class="skill-pill">Python</div>
                    <div class="skill-pill">Machine Learning</div>
                    <div class="skill-pill">TensorFlow</div>
                    <div class="skill-pill">PyTorch</div>
                    <div class="skill-pill">Computer Vision</div>
                    <div class="skill-pill">Data Analytics</div>
                    <div class="skill-pill">SQL</div>
                    <div class="skill-pill">Power BI</div>
                </div>
                
                <div class="social-links">
                    <a href="https://www.linkedin.com/in/manyue-javvadi-datascientist/" target="_blank" class="social-button social-linkedin" aria-label="LinkedIn">
                        """ + linkedin_icon + """
                    </a>
                    <a href="https://github.com/Manyue-datascientist" target="_blank" class="social-button social-github" aria-label="GitHub">
                        """ + github_icon + """
                    </a>
                    <a href="mailto:[email protected]" class="social-button social-email" aria-label="Contact Me" id="contact_btn">
                        """ + mail_icon + """
                    </a>
                </div>
                
                <h2>My Specializations</h2>
                """)
            except Exception as e:
                # Fallback if image cannot be loaded
                gr.HTML("""
                <div class="profile-container">
                    <div class="profile-pic">
                        <img src="/api/placeholder/400/400" alt="Manyue Javvadi" />
                    </div>
                    <div class="name-text">Manyue Javvadi</div>
                </div>
                <h2>AI/ML Engineer & Data Scientist</h2>
                <div class="about-text">
                    I'm a software engineer turned AI/ML practitioner with a strong foundation in Commerce and experience in ML, computer vision, and data analytics.
                    I blend business understanding with data-driven thinking to create real-world solutions. Currently open to roles in Data Science, Machine Learning Engineering, and Computer Vision.
                </div>
                
                <div class="skills-container">
                    <div class="skill-pill">Python</div>
                    <div class="skill-pill">Machine Learning</div>
                    <div class="skill-pill">TensorFlow</div>
                    <div class="skill-pill">PyTorch</div>
                    <div class="skill-pill">Computer Vision</div>
                    <div class="skill-pill">Data Analytics</div>
                    <div class="skill-pill">SQL</div>
                    <div class="skill-pill">Power BI</div>
                </div>
                
                <div class="social-links">
                    <a href="https://www.linkedin.com/in/manyue-javvadi-datascientist/" target="_blank" class="social-button social-linkedin" aria-label="LinkedIn">
                        """ + linkedin_icon + """
                    </a>
                    <a href="https://github.com/Manyue-datascientist" target="_blank" class="social-button social-github" aria-label="GitHub">
                        """ + github_icon + """
                    </a>
                    <a href="mailto:[email protected]" class="social-button social-email" aria-label="Contact Me" id="contact_btn">
                        """ + mail_icon + """
                    </a>
                </div>
                
                <h2>My Specializations</h2>
                """)
            
            # Cards Grid with proper structure
            with gr.Row(elem_classes="cards-grid"):
                with gr.Column():
                    # Data Analytics Card 
                    gr.HTML('<div class="card-container da">')
                    da_button = gr.Button("Data Analytics", elem_classes="card-button")
                    gr.HTML("""
                    <div class="card-inner">
                        <div class="card-content">
                        """ + data_analytics_icon + """
                        <span>Data Analytics</span>
                        </div>
                        <div class="card-description">
                        Data storytelling, insights extraction, interactive dashboards & business problem-solving
                        </div>
                    </div>
                    </div>
                    """)
                    
                with gr.Column():
                    # Machine Learning Card
                    gr.HTML('<div class="card-container ml">')
                    ml_button = gr.Button("Machine Learning", elem_classes="card-button")
                    gr.HTML("""
                    <div class="card-inner">
                        <div class="card-content">
                        """ + machine_learning_icon + """
                        <span>Machine Learning</span>
                        </div>
                        <div class="card-description">
                        Feature engineering, model training, deployment & automation pipelines
                        </div>
                    </div>
                    </div>
                    """)
                    
                with gr.Column():
                    # Computer Vision Card
                    gr.HTML('<div class="card-container cv">')
                    cv_button = gr.Button("Computer Vision", elem_classes="card-button")
                    gr.HTML("""
                    <div class="card-inner">
                        <div class="card-content">
                        """ + computer_vision_icon + """
                        <span>Computer Vision</span>
                        </div>
                        <div class="card-description">
                        Object detection, image recognition, edge AI & accessibility applications
                        </div>
                    </div>
                    </div>
                    """)
            
            # Contact section - Updated to "Hire Me" with email link
            gr.HTML("""            
            <!-- Contact section -->
            <div id="contact_section">
            <h2>Contact Me</h2>
            <div class="contact-container">
                <p>Looking for a data scientist or ML engineer for your team?</p>
                <a href="mailto:[email protected]" class="hire-me-button">Hire Me</a>
            </div>
            </div>
            
            <!-- Footer -->
            <div class="footer">
            <p>© 2025 Manyue Javvadi. All rights reserved.</p>
            <p>Made with Gradio</p>
            </div>
            """)
    
    # Set up click events for navigation
    da_button.click(show_data_analytics, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section])
    ml_button.click(show_machine_learning, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section])
    cv_button.click(show_computer_vision, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section])
    
    back_from_da.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section])
    back_from_ml.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section])
    back_from_cv.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section])

# Launch the app
demo.launch()