Update app.py

app.py

@@ -1,319 +1,1178 @@
-import gradio as gr
-import base64
-
-# --- 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}"
-
-def toggle_resume(is_visible):
-    new_state = not is_visible
-    new_label = "Hide Resume" if new_state else "View Resume"
-    return new_state, gr.update(visible=new_state), gr.update(value=new_label)
-
-# --- CSS ---
-portfolio_css = """
-/* Import Google font */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
-
-body {
-    font-family: 'Poppins', sans-serif;
-    background: linear-gradient(to bottom right, #141414, #000);
-    margin: 0;
-    padding: 0;
-}
-.gr-container { 
-    max-width: 1200px; 
-    margin: 0 auto; 
-    padding: 20px; 
-}
-
-/* Landing Section */
-.landing-section { 
-    text-align: center; 
-    margin-bottom: 40px; 
-}
-.landing-section h1, .landing-section h2 {
-    color: #ffffff !important;
-    margin-top: 0;
-}
-.landing-section h1 { 
-    font-size: 2.8rem; 
-    font-weight: 700; 
-    margin-bottom: 0.5rem; 
-}
-.landing-section h2 { 
-    font-size: 2rem; 
-    font-weight: 600; 
-    margin-bottom: 1rem; 
-}
-
-/* Typewriter effect */
-.typing-animation {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: 2px solid #ffffff;
-    font-size: 2.8rem;
-    font-weight: 700;
-    width: 29ch;
-    animation: typing 4s steps(29, end) infinite alternate, blink-caret 0.75s step-end infinite;
-}
-@keyframes typing { from { width: 0ch; } to { width: 29ch; } }
-@keyframes blink-caret { 50% { border-color: transparent; } }
-
-/* Global text styling */
-p, li, span { 
-    color: #e8e8e8; 
-    font-size: 1.2rem; 
-}
-strong { 
-    background-color: #ffffff; 
-    color: #000; 
-    padding: 0.2rem 0.3rem; 
-    border-radius: 3px; 
-    font-weight: bold; 
-}
-
-/* Card styling */
-.card-container {
-    margin-bottom: 20px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    text-align: center;
-}
-.card-container:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
-}
-.clickable-card { cursor: pointer; }
-.card-content {
-    border-radius: 15px;
-    padding: 30px;
-    height: 150px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    color: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    margin-bottom: 10px;
-    font-weight: 600;
-}
-/* Card gradients */
-.card-da { background: linear-gradient(135deg, #6a11cb, #2575fc); }
-.card-ml { background: linear-gradient(135deg, #00c6ff, #0072ff); }
-.card-cv { background: linear-gradient(135deg, #f857a6, #ff5858); }
-
-/* Section headings */
-.da-section h1.section-heading { color: #6a11cb; }
-.ml-section h1.section-heading { color: #0072ff; }
-.cv-section h1.section-heading { color: #f857a6; }
-
-/* Back buttons */
-.back-button {
-    border: none;
-    border-radius: 20px;
-    padding: 6px 16px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    margin-bottom: 20px;
-}
-.back-button:hover { 
-    transform: translateY(-3px); 
-    box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
-}
-.back-button-da { background-color: #2575fc; color: #fff; }
-.back-button-ml { background-color: #0072ff; color: #fff; }
-.back-button-cv { background-color: #ff5858; color: #fff; }
-"""
-
-# --- Portfolio Layout ---
-with gr.Blocks(title="Manyue's Portfolio", css=portfolio_css) as demo:
-    # ----- Landing Page -----
-    with gr.Row(visible=True, elem_classes="landing-section") as landing_section:
-        with gr.Column():
-            gr.HTML("""
-            <div class="typing-animation">Welcome to Manyue's Portfolio</div><br>
-            <h2>About Me</h2>
-            <p>
-                Hi, I'm Manyue Javvadi – a software engineer turned AI/ML practitioner with a strong foundation in <strong>Commerce</strong> and extensive experience in <strong>machine learning, computer vision, and data analytics</strong>. 
-                After gaining valuable industry experience at <strong>Cognizant Technology Solutions</strong>, I pursued formal education in <strong>Applied AI</strong> and <strong>Big Data Analytics</strong> in Canada.
-                I excel at bridging <strong>business logic</strong> with <strong>innovative technical solutions</strong> to create systems that solve real-world challenges.
-            </p>
-            <h2>My Specializations</h2>
-            """)
-            with gr.Row():
-                with gr.Column():
-                    da_card = gr.HTML("""
-                    <div class="card-container clickable-card" onclick="document.getElementById('da_hidden').click()">
-                        <div class="card-content card-da"><span>Data Analytics</span></div>
-                        <p style="font-weight: bold;">Data storytelling, business analysis, and visualization</p>
-                    </div>
-                    """)
-                    da_hidden = gr.Button("", visible=False, elem_id="da_hidden")
-                with gr.Column():
-                    ml_card = gr.HTML("""
-                    <div class="card-container clickable-card" onclick="document.getElementById('ml_hidden').click()">
-                        <div class="card-content card-ml"><span>Machine Learning</span></div>
-                        <p style="font-weight: bold;">Applied ML for impactful decision-making and automation</p>
-                    </div>
-                    """)
-                    ml_hidden = gr.Button("", visible=False, elem_id="ml_hidden")
-                with gr.Column():
-                    cv_card = gr.HTML("""
-                    <div class="card-container clickable-card" onclick="document.getElementById('cv_hidden').click()">
-                        <div class="card-content card-cv"><span>Computer Vision</span></div>
-                        <p style="font-weight: bold;">Real-time object detection and accessibility solutions</p>
-                    </div>
-                    """)
-                    cv_hidden = gr.Button("", visible=False, elem_id="cv_hidden")
-    
-    # ----- Data Analytics Section -----
-    with gr.Column(visible=False, elem_classes="da-section") as da_section:
-        gr.Markdown("<h1 class='section-heading' style='margin-bottom: 20px;'>Data Analytics</h1>")
-        with gr.Tabs():
-            with gr.TabItem("Resume"):
-                gr.Markdown("### Professional Summary")
-                gr.Markdown("""
-**Professional Summary**  
-Detail-oriented Data Analyst with a strategic business mindset and robust technical skills in data manipulation, visualization, and predictive modeling. I transform raw data into clear insights that empower decision-makers.
-                """)
-                gr.Markdown("### Intro Video")
-                gr.Video(value="data/DA_Intro.mp4", label="Data Analytics Intro Video", autoplay=False)
-                gr.Markdown("### Resume Document Preview")
-                da_resume_state = gr.State(value=False)
-                with gr.Group(visible=False) as da_resume_container:
-                    da_pdf = file_to_data_uri("data/DA_Resume.pdf")
-                    gr.HTML(f"""<iframe src="{da_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
-                da_toggle_btn = gr.Button("View Resume")
-                da_toggle_btn.click(fn=toggle_resume, inputs=[da_resume_state], outputs=[da_resume_state, da_resume_container, da_toggle_btn])
-            with gr.TabItem("Skills"):
-                gr.Markdown("### Core Skills")
-                gr.Markdown("""
-- **Data Wrangling & Analysis:** Expert in SQL and Python (Pandas, NumPy) for efficient data cleaning and transformation.
-- **Exploratory Data Analysis:** Skilled in using Tableau, Matplotlib, and Seaborn to extract and visualize insights.
-- **Predictive Modeling:** Proficient in statistical modeling and forecasting to drive informed decision-making.
-                """)
-            with gr.TabItem("Projects"):
-                gr.Markdown("### Selected Projects")
-                gr.Markdown("""
-**LoanTap: Loan Eligibility Prediction**  
-Leveraged logistic regression and EDA to identify key factors influencing loan approvals.
-
-**Educational Data Insights**  
-Conducted deep statistical analysis to reveal trends in student performance.
-
-**Upcoming – Jamboree Admission Insights**  
-An initiative to predict graduate admissions using advanced data techniques.
-                """)
-        back_da = gr.Button("← Home", elem_classes=["back-button", "back-button-da"])
-    
-    # ----- Machine Learning Section -----
-    with gr.Column(visible=False, elem_classes="ml-section") as ml_section:
-        gr.Markdown("<h1 class='section-heading' style='margin-bottom: 20px;'>Machine Learning</h1>")
-        with gr.Tabs():
-            with gr.TabItem("Resume"):
-                gr.Markdown("### Professional Summary")
-                gr.Markdown("""
-**Professional Summary**  
-Passionate Machine Learning Engineer skilled in designing and deploying end-to-end ML solutions. I combine technical rigor with strategic insight to develop models that drive innovation and operational efficiency.
-                """)
-                gr.Markdown("### Intro Video")
-                gr.Markdown("_Intro video is coming soon._")
-                gr.Markdown("### Resume Document Preview")
-                ml_resume_state = gr.State(value=False)
-                with gr.Group(visible=False) as ml_resume_container:
-                    ml_pdf = file_to_data_uri("data/ML_CV_Resume.pdf")
-                    gr.HTML(f"""<iframe src="{ml_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
-                ml_toggle_btn = gr.Button("View Resume")
-                ml_toggle_btn.click(fn=toggle_resume, inputs=[ml_resume_state], outputs=[ml_resume_state, ml_resume_container, ml_toggle_btn])
-            with gr.TabItem("Skills"):
-                gr.Markdown("### Core Skills")
-                gr.Markdown("""
-- **ML Algorithms:** Deep understanding of regression, classification, clustering, and neural networks.
-- **Frameworks & Libraries:** Proficient with scikit-learn, TensorFlow, and XGBoost.
-- **Model Deployment:** Experienced in deploying models with Gradio and Streamlit.
-- **Data Engineering:** Skilled in feature engineering and data preprocessing for optimal model performance.
-                """)
-            with gr.TabItem("Projects"):
-                gr.Markdown("### Selected Projects")
-                gr.Markdown("""
-**University Admission Predictor**  
-Applied linear regression to forecast admission chances based on academic and test performance.
-
-[AI Chat Assistant](https://huggingface.co/spaces/Manyue-DataScientist/AI-Assistant)  
-Built as a demonstration of a practical AI application, this assistant revolutionizes how recruiters and hiring managers interact with my
-portfolio. Unlike traditional chatbots, it’s designed with a unique optimization approach that prioritizes efficiency and accuracy.
-
-[Speaker Diarization Application](https://huggingface.co/spaces/Manyue-DataScientist/speaker-diarization-app-v2)  
-Developed an advanced multi-speaker audio processing system that performs speaker diarization, transcription, and summarization to
-extract meaningful insights from multi-speaker conversations.
-                """)
-        back_ml = gr.Button("← Home", elem_classes=["back-button", "back-button-ml"])
-    
-    # ----- Computer Vision Section -----
-    with gr.Column(visible=False, elem_classes="cv-section") as cv_section:
-        gr.Markdown("<h1 class='section-heading' style='margin-bottom: 20px;'>Computer Vision</h1>")
-        with gr.Tabs():
-            with gr.TabItem("Resume"):
-                gr.Markdown("### Professional Summary")
-                gr.Markdown("""
-**Professional Summary**  
-Innovative Computer Vision Engineer dedicated to crafting real-time, scalable vision solutions. I focus on building systems that improve accessibility and automate complex visual tasks.
-                """)
-                gr.Markdown("### Intro Video")
-                gr.Markdown("_Intro video is coming soon._")
-                gr.Markdown("### Resume Document Preview")
-                cv_resume_state = gr.State(value=False)
-                with gr.Group(visible=False) as cv_resume_container:
-                    cv_pdf = file_to_data_uri("data/ML_CV_Resume.pdf")
-                    gr.HTML(f"""<iframe src="{cv_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
-                cv_toggle_btn = gr.Button("View Resume")
-                cv_toggle_btn.click(fn=toggle_resume, inputs=[cv_resume_state], outputs=[cv_resume_state, cv_resume_container, cv_toggle_btn])
-            with gr.TabItem("Skills"):
-                gr.Markdown("### Core Skills")
-                gr.Markdown("""
-- **Vision Algorithms:** Proficient in CNNs, YOLO, and segmentation for robust object detection.
-- **Technical Tools:** Expert in OpenCV, PyTorch, and TensorFlow for advanced image processing.
-- **Image Analysis:** Skilled in image enhancement, filtering, and OCR integration.
-- **Deep Learning:** Experienced with transfer learning and model fine-tuning for custom vision tasks.
-                """)
-            with gr.TabItem("Projects"):
-                gr.Markdown("### Selected Projects")
-                gr.Markdown("""
-**Smart Shopping Assistant**  
-An accessibility tool combining real-time object detection and OCR to guide visually impaired users in retail settings.
-
-**Traffic Flow Counter (Upcoming)**  
-An edge solution using Raspberry Pi to monitor and count vehicles at intersections.
-
-**Experimental Object Datasets**  
-Initiatives focused on training custom YOLO models to improve detection in complex environments.
-                """)
-        back_cv = gr.Button("← Home", elem_classes=["back-button", "back-button-cv"])
-    
-    # ----- Navigation Callbacks -----
-    def switch_to_da():
-        return (gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False))
-    def switch_to_ml():
-        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=(True)), gr.update(visible=(False)))
-    def switch_to_cv():
-        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=(False)), gr.update(visible=(True)))
-    def back_to_main():
-        return (gr.update(visible=True), gr.update(visible=(False)), gr.update(visible=(False)), gr.update(visible=(False)))
-    
-    # Hidden card triggers for section switching
-    da_hidden.click(fn=switch_to_da, outputs=[landing_section, da_section, ml_section, cv_section])
-    ml_hidden.click(fn=switch_to_ml, outputs=[landing_section, da_section, ml_section, cv_section])
-    cv_hidden.click(fn=switch_to_cv, outputs=[landing_section, da_section, ml_section, cv_section])
-    
-    # Back button bindings for each section
-    back_da.click(fn=back_to_main, outputs=[landing_section, da_section, ml_section, cv_section])
-    back_ml.click(fn=back_to_main, outputs=[landing_section, da_section, ml_section, cv_section])
-    back_cv.click(fn=back_to_main, outputs=[landing_section, da_section, ml_section, cv_section])
-    
-demo.launch()
+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()