Update app.py

To better version in terms of UI and also more scalable and maintainable for future changes.

app.py

@@ -1,14 +1,39 @@
 import gradio as gr
 import base64
 import os
+import json
 
 # --- Helper Functions ---
+def load_json(filename):
+    """Load JSON data from content folder"""
+    try:
+        with open(f"content/{filename}.json", "r", encoding="utf-8") as f:
+            return json.load(f)
+    except Exception as e:
+        print(f"Error loading {filename}.json: {e}")
+        return {}
+
 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}"
+    """Convert file to data URI"""
+    try:
+        with open(filepath, "rb") as f:
+            data = f.read()
+        b64 = base64.b64encode(data).decode("utf-8")
+        return f"data:{mime_type};base64,{b64}"
+    except Exception as e:
+        print(f"Error converting file to data URI: {e}")
+        return None
 
+def image_to_data_uri(filepath, mime_type="image/jpeg"):
+    """Convert image to data URI"""
+    try:
+        with open(filepath, "rb") as f:
+            data = f.read()
+        b64 = base64.b64encode(data).decode("utf-8")
+        return f"data:{mime_type};base64,{b64}"
+    except Exception as e:
+        print(f"Error converting image to data URI: {e}")
+        return None
 
 # --- Navigation Functions ---
 def show_data_analytics():
@@ -23,6 +48,12 @@ def show_computer_vision():
 def go_home():
     return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
 
+def toggle_resume(is_visible):
+    """Toggle the visibility of the resume section."""
+    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)
+
 # --- 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>"""
@@ -34,17 +65,221 @@ mail_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke
 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}"
+# Dictionary for icon access
+icons = {
+    "data_analytics_icon": data_analytics_icon,
+    "machine_learning_icon": machine_learning_icon,
+    "computer_vision_icon": computer_vision_icon,
+    "home_icon": home_icon,
+    "linkedin_icon": linkedin_icon,
+    "github_icon": github_icon,
+    "mail_icon": mail_icon,
+    "link_icon": link_icon,
+    "document_icon": document_icon
+}
+
+# --- Helper functions for generating HTML ---
+def generate_profile_html():
+    """Generate HTML for the profile section"""
+    try:
+        profile_img_uri = image_to_data_uri(profile_data.get("photo", "data/My_photo.jpeg"))
+        
+        # Skills HTML
+        skills_html = ""
+        for skill in profile_data.get("skills", []):
+            skills_html += f'<div class="skill-pill">{skill}</div>\n'
+        
+        # Social links HTML
+        social_links_html = ""
+        for link in profile_data.get("social_links", []):
+            icon = icons.get(link.get("icon", ""), "")
+            id_attr = f' id="{link["id"]}"' if "id" in link else ""
+            social_links_html += f'''
+            <a href="{link["url"]}" target="_blank" class="social-button social-{link["name"].lower()}" aria-label="{link.get("aria_label", link["name"])}"{ id_attr }>
+                { icon }
+            </a>
+            '''
+        
+        return f'''
+        <div class="profile-container">
+            <div class="profile-pic">
+                <img src="{profile_img_uri}" alt="{profile_data.get("name", "Profile")}" />
+            </div>
+            <div class="name-text">{profile_data.get("name", "")}</div>
+        </div>
+        <h2>{profile_data.get("title", "")}</h2>
+        <div class="about-text">
+            {profile_data.get("about", "")}
+        </div>
+        
+        <div class="skills-container">
+            {skills_html}
+        </div>
+        
+        <div class="social-links">
+            {social_links_html}
+        </div>
+        '''
+    except Exception as e:
+        # Fallback if error occurs
+        print(f"Error generating profile HTML: {e}")
+        return f'''
+        <div class="profile-container">
+            <div class="profile-pic">
+                <img src="/api/placeholder/400/400" alt="Profile" />
+            </div>
+            <div class="name-text">{profile_data.get("name", "Name")}</div>
+        </div>
+        <h2>{profile_data.get("title", "Title")}</h2>
+        <div class="about-text">
+            {profile_data.get("about", "About text")}</div>
+        
+        <div class="skills-container">
+            {', '.join(profile_data.get("skills", ["Skills"]))}
+        </div>
+        '''
+
+def generate_resume_html():
+    """Generate HTML for the collapsible resume section"""
+    return '''
+    <div class="resume-section glass-container">
+        <button class="resume-toggle-button" onclick="toggleResume()">View Resume</button>
+        <div id="resume-content" class="resume-content" style="display: none;">
+            <p>Download my resume or view it below:</p>
+            <a id="resume-download-link" class="resume-download-button" target="_blank">Download Resume</a>
+            <div class="resume-preview">
+                <iframe id="resume-iframe" frameborder="0" class="resume-iframe"></iframe>
+            </div>
+        </div>
+    </div>
+    <script>
+    function toggleResume() {
+        const resumeContent = document.getElementById('resume-content');
+        const isHidden = resumeContent.style.display === 'none';
+        resumeContent.style.display = isHidden ? 'block' : 'none';
+
+        if (isHidden) {
+            const resumeIframe = document.getElementById('resume-iframe');
+            const resumeDownloadLink = document.getElementById('resume-download-link');
+            fetch('/file/data/resume.pdf')
+                .then(response => response.blob())
+                .then(blob => {
+                    const url = URL.createObjectURL(blob);
+                    resumeIframe.src = url;
+                    resumeDownloadLink.href = url;
+                })
+                .catch(err => console.error('Error loading resume:', err));
+        }
+    }
+    </script>
+    '''
+
+def generate_cards_html():
+    """Generate HTML for the specialization cards"""
+    cards_html = ""
+    for card in sections_data.get("cards", []):
+        icon = icons.get(card.get("icon", ""), "")
+        cards_html += f'''
+        <div class="card-container {card.get("class", "")}">
+        <div class="card-inner">
+            <div class="card-content">
+            {icon}
+            <span>{card.get("title", "")}</span>
+            </div>
+            <div class="card-description">
+            {card.get("description", "")}
+            </div>
+        </div>
+        </div>
+        '''
+    return cards_html
+
+def generate_contact_html():
+    """Generate HTML for the contact section"""
+    contact = profile_data.get("contact", {})
+    footer = profile_data.get("footer", {})
+    
+    return f'''
+    <!-- Contact section -->
+    <div id="contact_section">
+    <h2>{contact.get("heading", "Contact Me")}</h2>
+    <div class="contact-container">
+        <p>{contact.get("text", "")}</p>
+        <a href="mailto:{contact.get("email", "")}" class="hire-me-button">{contact.get("button_text", "Contact")}</a>
+    </div>
+    </div>
+    
+    <!-- Footer -->
+    <div class="footer">
+    <p>{footer.get("copyright", "")}</p>
+    <p>{footer.get("credits", "")}</p>
+    </div>
+    '''
+
+def generate_skills_html(skills_data, section_class):
+    """Generate HTML for skills in a section"""
+    skills_html = ""
+    for skill_category in skills_data:
+        items_html = ""
+        for item in skill_category.get("items", []):
+            items_html += f"<li>{item}</li>\n"
+        
+        skills_html += f'''
+        <div class="skill-category">
+            <h4>{skill_category.get("category", "")}</h4>
+            <ul>
+                {items_html}
+            </ul>
+        </div>
+        '''
+    return skills_html
+
+def generate_projects_html(projects_data, section_class):
+    """Generate HTML for projects in a section"""
+    projects_html = ""
+    for project in projects_data:
+        projects_html += f'''
+        <div class="project-card">
+            <div class="project-title">
+                <span class="project-title-text">{project.get("title", "")}</span>
+                <a href="{project.get("url", "#")}" target="_blank" class="project-link">
+                    {icons.get("link_icon", "")}
+                    <span>View Project</span>
+                </a>
+            </div>
+            <div class="project-description">
+                {project.get("description", "")}
+                <span class="tech-stack"><strong>Tech Stack:</strong> {project.get("tech_stack", "")}</span>
+            </div>
+        </div>
+        '''
+    return projects_html
+
+def generate_section_html(section_data, section_class):
+    """Generate HTML for a complete section"""
+    skills_html = generate_skills_html(section_data.get("skills", []), section_class)
+    projects_html = generate_projects_html(section_data.get("projects", []), section_class)
+    
+    return f'''
+    <h1 class="section-heading">{section_data.get("heading", "")}</h1>
+    <div class="section-intro">
+        {section_data.get("intro", "")}
+    </div>
+    
+    <h3 class="section-subheading {section_class}">Skills</h3>
+    
+    <div class="skills-list">
+        {skills_html}
+    </div>
+    
+    <h3 class="section-subheading {section_class}">Projects</h3>
+    
+    {projects_html}
+    '''
 
 # --- 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;
@@ -67,7 +302,6 @@ portfolio_css = """
     --transition-med: 0.3s ease;
     --transition-slow: 0.5s ease;
 }
-
 body {
     font-family: 'Poppins', sans-serif;
     background: var(--dark-bg);
@@ -78,34 +312,31 @@ body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
+    line-height: 1.6;
+    letter-spacing: 0.5px;
+    font-weight: 400;
 }
-
 .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;
@@ -113,7 +344,6 @@ body {
     padding: 40px 20px;
     position: relative;
 }
-
 .landing-section:before {
     content: '';
     position: absolute;
@@ -124,12 +354,10 @@ body {
     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;
@@ -141,13 +369,11 @@ body {
     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;
@@ -155,7 +381,6 @@ body {
     justify-content: center;
     flex-direction: column;
 }
-
 .profile-pic {
     width: 180px;
     height: 180px;
@@ -168,33 +393,28 @@ body {
     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;
@@ -202,7 +422,6 @@ body {
     line-height: 1.6;
     color: var(--text-secondary);
 }
-
 .skills-container {
     margin-top: 20px;
     display: flex;
@@ -211,7 +430,6 @@ body {
     gap: 10px;
     margin-bottom: 40px;
 }
-
 .skill-pill {
     background: rgba(255, 255, 255, 0.1);
     padding: 8px 16px;
@@ -220,14 +438,12 @@ body {
     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;
@@ -242,22 +458,18 @@ body {
     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;
@@ -265,13 +477,12 @@ body {
     gap: 30px;
     margin: 40px 0;
 }
-
 .card-container {
     position: relative; /* Important for button positioning */
     margin-bottom: 20px;
     height: 100%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-
 .card-container.da:before {
     content: '';
     position: absolute;
@@ -283,7 +494,6 @@ body {
     z-index: 5;
     border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
 }
-
 .card-container.ml:before {
     content: '';
     position: absolute;
@@ -296,7 +506,6 @@ body {
     transition: all var(--transition-med);
     border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
 }
-
 .card-container.cv:before {
     content: '';
     position: absolute;
@@ -308,7 +517,6 @@ body {
     z-index: 5;
     border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
 }
-
 .card-content {
     padding: 30px;
     min-height: 200px;
@@ -322,7 +530,6 @@ body {
     z-index: 2;
     transition: all var(--transition-med);
 }
-
 .card-content svg {
     width: 60px;
     height: 60px;
@@ -330,7 +537,6 @@ body {
     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;
@@ -342,23 +548,19 @@ body {
     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: '';
@@ -371,14 +573,12 @@ body {
     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;
@@ -397,12 +597,228 @@ body {
     background: none !important;
 }
 
+.click-to-view {
+    margin-top: 15px;
+    padding: 8px 15px;
+    border-radius: 20px;
+    display: inline-block;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all var(--transition-med);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: var(--shadow-sm);
+    margin-left: auto;
+    margin-right: auto;
+    color: var(--text-primary);
+    text-align: center;
+}
+
+/* Add glow effect */
+.click-to-view:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), var(--shadow-md);
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--text-primary);
+    filter: brightness(1.2);
+}
+
+/* Add animation for subtle pulsing effect */
+@keyframes glow-pulse {
+    0% {
+        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
+    }
+    50% {
+        box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+    }
+    100% {
+        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
+    }
+}
+
+.click-to-view {
+    animation: glow-pulse 3s infinite;
+}
+
+.card-description p {
+    margin-bottom: 15px;
+    margin-top: 0;
+}
+
+.card-description {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 20px 20px;
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    line-height: 1.5;
+}
+
+/* Different colors for each card type */
+.da-click {
+    color: var(--primary-da);
+    border: 1px solid var(--primary-da);
+}
+
+.ml-click {
+    color: var(--primary-ml);
+    border: 1px solid var(--primary-ml);
+}
+
+.cv-click {
+    color: var(--primary-cv);
+    border: 1px solid var(--primary-cv);
+}
+
+/* Hover effects */
+.click-to-view:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.card-inner:hover .click-to-view {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.card-inner:hover .da-click {
+    background-color: rgba(138, 43, 226, 0.1);
+}
+
+.card-inner:hover .ml-click {
+    background-color: rgba(0, 180, 219, 0.1);
+}
+
+.card-inner:hover .cv-click {
+    background-color: rgba(255, 77, 126, 0.1);
+}
+
+.experience-timeline {
+    margin: 80px 0 60px;
+    padding: 20px;
+    position: relative;
+}
+
+.experience-timeline h2 {
+    text-align: center;
+    margin-bottom: 60px;
+    position: relative;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.experience-timeline h2:after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    border-radius: 3px;
+    background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv));
+}
+
+/* Horizontal Timeline Styling */
+.timeline-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    margin: 40px auto;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 20px 0;
+}
+
+.timeline-track {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(to right, var(--primary-da), var(--primary-ml), var(--primary-cv));
+    border-radius: 2px;
+    z-index: 1;
+}
+
+.timeline-node {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 150px;
+    margin: 0 20px;
+    z-index: 2;
+}
+
+.timeline-dot {
+    width: 20px;
+    height: 20px;
+    background: var(--primary-da);
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+    margin-bottom: 10px;
+    transition: transform 0.3s ease;
+}
+
+.timeline-year {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: var(--text-primary);
+}
+
+.timeline-content {
+    background: var(--card-bg);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+    padding: 15px;
+    text-align: center;
+    width: 100%;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.timeline-node:hover .timeline-dot {
+    transform: scale(1.3);
+}
+
+.timeline-node:hover .timeline-content {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-md);
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+    .timeline-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .timeline-track {
+        display: none;
+    }
+
+    .timeline-node {
+        margin: 20px 0;
+    }
+}
+
 /* Section styling */
 .section-container {
-    padding: 40px 20px;
+    padding: 60px 20px;
     position: relative;
 }
-
 .section-container:before {
     content: '';
     position: absolute;
@@ -413,25 +829,21 @@ body {
     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;
@@ -441,16 +853,13 @@ body {
     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;
@@ -465,32 +874,26 @@ body {
     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);
@@ -500,7 +903,6 @@ body {
     margin: 0 auto;
     box-shadow: var(--shadow-md);
 }
-
 .hire-me-button {
     background: linear-gradient(45deg, var(--primary-da), var(--primary-cv));
     color: white;
@@ -511,18 +913,15 @@ body {
     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);
@@ -533,16 +932,13 @@ body {
     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;
@@ -551,11 +947,9 @@ body {
     align-items: center;
     justify-content: space-between;
 }
-
 .project-title-text {
     flex: 1;
 }
-
 .project-link {
     color: var(--text-secondary);
     transition: all var(--transition-med);
@@ -564,33 +958,26 @@ body {
     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;
@@ -599,39 +986,32 @@ body {
     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;
@@ -640,7 +1020,6 @@ body {
     color: var(--text-secondary);
     font-size: 1.1rem;
 }
-
 /* Footer */
 .footer {
     text-align: center;
@@ -649,7 +1028,6 @@ body {
     color: var(--text-muted);
     font-size: 0.9rem;
 }
-
 /* Animations for scroll */
 .animate-on-scroll {
     opacity: 0;
@@ -658,521 +1036,524 @@ body {
 }
 
 .animate-on-scroll.show {
-    opacity: 1;
-    transform: translateY(0);
+    animation: fadeInUp 0.6s ease forwards;
 }
 
-/* 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;
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
     }
-    
-    .profile-pic {
-        width: 150px;
-        height: 150px;
+    100% {
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 
-@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;
+/* Loading states */
+.loading-spinner {
+    border: 4px solid rgba(255, 255, 255, 0.2);
+    border-top: 4px solid var(--primary-da);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
     }
-    
-    .social-links {
-        gap: 15px;
+    100% {
+        transform: rotate(360deg);
     }
-    
-    .social-button {
-        width: 40px;
-        height: 40px;
-        font-size: 1rem;
+}
+
+/* Glassmorphism effects */
+.glass-container {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: var(--border-radius-md);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* Subtle background patterns */
+body {
+    background-image: url('https://www.transparenttextures.com/patterns/noise.png');
+}
+
+/* Gradient refinements */
+button {
+    background: linear-gradient(45deg, var(--primary-da), var(--primary-ml));
+}
+
+/* Shadow depth variations */
+.card-container:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* ARIA attributes */
+button {
+    aria-label: "Interactive button";
+}
+
+/* Keyboard navigation */
+button:focus {
+    outline: 2px solid var(--primary-da);
+    outline-offset: 2px;
+}
+
+/* Mobile-first refinements */
+@media (max-width: 768px) {
+    .cards-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Touch-friendly targets */
+button {
+    padding: 12px 20px;
+}
+
+/* Responsive typography */
+h1 {
+    font-size: calc(2rem + 1vw);
+}
+
+/* Parallax scrolling effects */
+.section-container:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 300px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
+    transform: translateY(-50%);
+    will-change: transform;
+    transition: transform 0.3s ease;
+}
+
+body.onscroll .section-container:before {
+    transform: translateY(0);
+}
+
+/* Mouse-follow glow effect */
+.interactive:hover {
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+}
+
+/* Staggered animation sequences */
+@keyframes staggeredFadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
     }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.list-item {
+    opacity: 0;
+    animation: staggeredFadeIn 0.6s ease forwards;
+}
+
+.list-item:nth-child(1) {
+    animation-delay: 0.2s;
+}
+
+.list-item:nth-child(2) {
+    animation-delay: 0.4s;
+}
+
+.list-item:nth-child(3) {
+    animation-delay: 0.6s;
+}
+
+/* Interactive particles background */
+.particles-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('https://www.transparenttextures.com/patterns/cubes.png');
+    opacity: 0.1;
+}
+
+/* Smooth page section transitions */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom cursor styles */
+body {
+    cursor: url('https://example.com/custom-cursor.png'), auto;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
+/* Resume Section */
+.resume-section {
+    margin: 40px auto;
+    padding: 20px;
+    text-align: center;
+    max-width: 800px;
+    box-shadow: var(--shadow-md);
+}
+
+.resume-toggle-button {
+    background: linear-gradient(45deg, var(--primary-da), var(--primary-cv));
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-lg);
+    padding: 10px 20px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-med);
+    box-shadow: var(--shadow-sm);
+    width: auto; /* Adjust width to fit the text */
+    min-width: 150px; /* Optional: Set a minimum width for consistency */
+}
+
+.resume-toggle-button:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    filter: brightness(1.1);
+}
+
+.resume-content {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.resume-download-button {
+    display: inline-block;
+    margin: 20px 0;
+    padding: 10px 20px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: white;
+    background: linear-gradient(45deg, var(--primary-da), var(--primary-cv));
+    border: none;
+    border-radius: var(--border-radius-lg);
+    text-decoration: none;
+    transition: all var(--transition-med);
+    box-shadow: var(--shadow-sm);
+}
+
+.resume-download-button:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    filter: brightness(1.1);
+}
+
+.resume-preview {
+    margin-top: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: var(--border-radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+}
+
+.resume-iframe {
+    width: 100%;
+    height: 500px;
+    border: none;
+}
+
+/* Performance optimizations */
+img {
+    loading: lazy;
+}
+
+/* Micro-interactions */
+button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:active {
+    transform: scale(0.95);
+    transition: transform 0.1s ease;
+}
+
+/* Scroll to Top Button */
+.scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: linear-gradient(45deg, var(--primary-da), var(--primary-cv));
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: var(--shadow-md);
+    display: none; /* Initially hidden */
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-med);
+    z-index: 1000;
+}
+
+.scroll-to-top:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-lg);
+    filter: brightness(1.1);
 }
 """
 
+# Load all content from JSON files
+try:
+    profile_data = load_json("profile")
+    sections_data = load_json("sections")
+    data_analytics_data = load_json("data_analytics")
+    machine_learning_data = load_json("machine_learning")
+    computer_vision_data = load_json("computer_vision")
+except Exception as e:
+    print(f"Error loading content: {e}")
+    # Default values in case of error
+    profile_data = {}
+    sections_data = {"cards": []}
+    data_analytics_data = {}
+    machine_learning_data = {}
+    computer_vision_data = {}
+
 # --- Portfolio Layout ---
-with gr.Blocks(title="Manyue's Portfolio", css=portfolio_css) as demo:
+with gr.Blocks(title=f"{profile_data.get('name', '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>
-            """)
+            gr.HTML(generate_section_html(data_analytics_data, "da"))
     
     # 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>
-            """)
+            gr.HTML(generate_section_html(machine_learning_data, "ml"))
     
     # 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>
-            """)
+            gr.HTML(generate_section_html(computer_vision_data, "cv"))
     
     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>
-                """)
+            # Profile section with picture
+            gr.HTML(generate_profile_html())
+            
+            # Resume Section (moved above "My Specializations")
+            resume_state = gr.State(value=False)
+            with gr.Group(visible=False) as resume_container:
+                resume_pdf = file_to_data_uri("data/resume.pdf")
+                gr.HTML(f"""<iframe src="{resume_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
+            resume_toggle_btn = gr.Button("View Resume")
+            resume_toggle_btn.click(fn=toggle_resume, inputs=[resume_state], outputs=[resume_state, resume_container, resume_toggle_btn])
+            
+            # Specializations heading
+            gr.HTML("<h2>My Specializations</h2>")
             
             # Cards Grid with proper structure
             with gr.Row(elem_classes="cards-grid"):
                 with gr.Column():
-                    # Data Analytics Card 
+                    # Data Analytics Card
                     gr.HTML('<div class="card-container da">')
                     da_button = gr.Button("Data Analytics", elem_classes="card-button")
-                    gr.HTML("""
+                    gr.HTML(f'''
                     <div class="card-inner">
                         <div class="card-content">
-                        """ + data_analytics_icon + """
-                        <span>Data Analytics</span>
+                        {icons.get(sections_data.get("cards", [])[0].get("icon", ""), "")}
+                        <span>{sections_data.get("cards", [])[0].get("title", "Data Analytics")}</span>
                         </div>
                         <div class="card-description">
-                        Data storytelling, insights extraction, interactive dashboards & business problem-solving
+                        {sections_data.get("cards", [])[0].get("description", "")}
+                        <div class="click-to-view da-click">Click to view</div>
                         </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("""
+                    gr.HTML(f'''
                     <div class="card-inner">
                         <div class="card-content">
-                        """ + machine_learning_icon + """
-                        <span>Machine Learning</span>
+                        {icons.get(sections_data.get("cards", [])[1].get("icon", ""), "")}
+                        <span>{sections_data.get("cards", [])[1].get("title", "Machine Learning")}</span>
                         </div>
                         <div class="card-description">
-                        Feature engineering, model training, deployment & automation pipelines
+                        {sections_data.get("cards", [])[1].get("description", "")}
+                        <div class="click-to-view ml-click">Click to view</div>
                         </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("""
+                    gr.HTML(f'''
                     <div class="card-inner">
                         <div class="card-content">
-                        """ + computer_vision_icon + """
-                        <span>Computer Vision</span>
+                        {icons.get(sections_data.get("cards", [])[2].get("icon", ""), "")}
+                        <span>{sections_data.get("cards", [])[2].get("title", "Computer Vision")}</span>
                         </div>
                         <div class="card-description">
-                        Object detection, image recognition, edge AI & accessibility applications
+                        {sections_data.get("cards", [])[2].get("description", "")}
+                        <div class="click-to-view cv-click">Click to view</div>
                         </div>
                     </div>
+                    ''')
+
+            gr.HTML(f'''
+            <div class="experience-timeline">
+                <h2>My Journey</h2>
+                
+                <div class="timeline-container">
+                    <div class="timeline-track"></div>
+                    
+                    <div class="timeline-node">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-year">2018-2021</div>
+                        <div class="timeline-content">
+                            <div class="timeline-title">Bachelor's in Commerce (89%)</div>
+                            <div class="timeline-details">
+                                <p class="timeline-location">SRM University Chennai</p>
+                                <p>Graduated with honors focusing on Business and Finance.</p>
+                            </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 class="timeline-node">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-year">2021-2023</div>
+                        <div class="timeline-content">
+                            <div class="timeline-title">Junior Software Engineer at Cognizant</div>
+                            <div class="timeline-details">
+                                <p class="timeline-location">Chennai India</p>
+                                <p>Developed and maintained enterprise-grade Java applications for the Insurance domain</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="timeline-node">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-year">2023-2024</div>
+                        <div class="timeline-content">
+                            <div class="timeline-title">Post-Graduation in AI/ML (97%)</div>
+                            <div class="timeline-details">
+                                <p class="timeline-location">George Brown college,Canada</p>
+                                <p>Advanced studies in AI/ML and data science.</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="timeline-node">
+                        <div class="timeline-dot"></div>
+                        <div class="timeline-year">2025</div>
+                        <div class="timeline-content">
+                            <div class="timeline-title">Seeking ML Engineer/Data Scientist Role</div>
+                            <div class="timeline-details">
+                                <p>Ready for opportunities in ML and Data Science in Canada.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
+            ''')
+
+            gr.HTML("""
+            <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                // Get all timeline nodes
+                const timelineNodes = document.querySelectorAll('.timeline-node');
+                
+                // Add click event listener to each node
+                timelineNodes.forEach(node => {
+                    node.addEventListener('click', function() {
+                        // Check if this node is already active
+                        const isActive = this.classList.contains('active');
+                        
+                        // Remove active class from all nodes
+                        timelineNodes.forEach(n => n.classList.remove('active'));
+                                            
+                        // If node wasn't active before, make it active
+                        if (!isActive) {
+                            this.classList.add('active');
+                        }
+                    });
+                });
+                
+                // Make the first node active by default
+                if (timelineNodes.length > 0) {
+                    timelineNodes[0].classList.add('active');
+                }
+            });
+            </script>
             """)
-    
+                        
+            # Contact section
+            gr.HTML(generate_contact_html())
+        
+    # Add a Gradio File component to serve the resume file
+    gr.File(value="data/resume.pdf", label="Resume", interactive=False, visible=False)
+
     # 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])
 
+    # Scroll to Top Button
+    gr.HTML("""
+    <button id="scrollToTop" class="scroll-to-top" aria-label="Scroll to Top">
+        ↑
+    </button>
+    <script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const scrollToTopButton = document.getElementById('scrollToTop');
+
+        // Show or hide the button based on scroll position
+        window.addEventListener('scroll', function () {
+            if (window.scrollY > 300) {
+                scrollToTopButton.style.display = 'flex'; // Use 'flex' for proper alignment
+            } else {
+                scrollToTopButton.style.display = 'none';
+            }
+        });
+
+        // Scroll to top when the button is clicked
+        scrollToTopButton.addEventListener('click', function () {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+    });
+    </script>
+    """)
+
 # Launch the app
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()