modified

.gitignore

@@ -40,3 +40,4 @@ Thumbs.db
 # Logs and temporary files
 *.log
 *.tmp
+    

app.py

@@ -1,319 +1,1506 @@
 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():
+    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)
 
 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>"""
+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>"""
+
+# 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 Google font */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
-
+@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: linear-gradient(to bottom right, #141414, #000);
+    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;
+    line-height: 1.6;
+    letter-spacing: 0.5px;
+    font-weight: 400;
 }
-.gr-container { 
-    max-width: 1200px; 
-    margin: 0 auto; 
-    padding: 20px; 
+.gr-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
 }
-
-/* Landing Section */
-.landing-section { 
-    text-align: center; 
-    margin-bottom: 40px; 
+/* 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: #ffffff !important;
+    color: var(--text-primary) !important;
     margin-top: 0;
 }
-.landing-section h1 { 
-    font-size: 2.8rem; 
-    font-weight: 700; 
-    margin-bottom: 0.5rem; 
+.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: 1rem; 
+.landing-section h2 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
 }
-
-/* Typewriter effect */
-.typing-animation {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: 2px solid #ffffff;
-    font-size: 2.8rem;
+.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;
-    width: 29ch;
-    animation: typing 4s steps(29, end) infinite alternate, blink-caret 0.75s step-end infinite;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
-@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; 
+@keyframes float {
+    0% { transform: translateY(0px) }
+    50% { transform: translateY(-10px) }
+    100% { transform: translateY(0px) }
 }
-strong { 
-    background-color: #ffffff; 
-    color: #000; 
-    padding: 0.2rem 0.3rem; 
-    border-radius: 3px; 
-    font-weight: bold; 
+@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;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    text-align: center;
+    height: 100%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-.card-container:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
+.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;
 }
-.clickable-card { cursor: pointer; }
 .card-content {
-    border-radius: 15px;
     padding: 30px;
-    height: 150px;
+    min-height: 200px;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
-    color: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    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;
+}
+
+.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);
 }
-/* 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; }
+.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: 60px 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: 20px;
-    padding: 6px 16px;
-    font-size: 0.85rem;
+    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: transform 0.2s ease, box-shadow 0.2s ease;
+    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 {
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 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);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* 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);
 }
-.back-button:hover { 
-    transform: translateY(-3px); 
-    box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
+
+.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;
 }
-.back-button-da { background-color: #2575fc; color: #fff; }
-.back-button-ml { background-color: #0072ff; color: #fff; }
-.back-button-cv { background-color: #ff5858; color: #fff; }
 """
+# 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:
-    # ----- Landing Page -----
+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(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(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(generate_section_html(computer_vision_data, "cv"))
+    
     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():
+            # 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():
-                    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>
+                    # Data Analytics Card
+                    gr.HTML('<div class="card-container da">')
+                    da_button = gr.Button("Data Analytics", elem_classes="card-button")
+                    gr.HTML(f'''
+                    <div class="card-inner">
+                        <div class="card-content">
+                        {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">
+                        {sections_data.get("cards", [])[0].get("description", "")}
+                        <div class="click-to-view da-click">Click to view</div>
+                        </div>
+                    </div>
                     </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>
+                    # Machine Learning Card
+                    gr.HTML('<div class="card-container ml">')
+                    ml_button = gr.Button("Machine Learning", elem_classes="card-button")
+                    gr.HTML(f'''
+                    <div class="card-inner">
+                        <div class="card-content">
+                        {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">
+                        {sections_data.get("cards", [])[1].get("description", "")}
+                        <div class="click-to-view ml-click">Click to view</div>
+                        </div>
+                    </div>
                     </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>
+                    # Computer Vision Card
+                    gr.HTML('<div class="card-container cv">')
+                    cv_button = gr.Button("Computer Vision", elem_classes="card-button")
+                    gr.HTML(f'''
+                    <div class="card-inner">
+                        <div class="card-content">
+                        {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">
+                        {sections_data.get("cards", [])[2].get("description", "")}
+                        <div class="click-to-view cv-click">Click to view</div>
+                        </div>
                     </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])
+                    </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">University Name</p>
+                                <p>Graduated with honors focusing on business analytics.</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <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">Cognizant</p>
+                                <p>Developed web applications and data visualization systems.</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">University Name, Canada</p>
+                                <p>Advanced studies in machine learning 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())
     
-    # 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])
+    # 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])
     
-demo.launch()
+    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
+if __name__ == "__main__":
+    demo.launch()

content/computer_vision.json

@@ -0,0 +1,36 @@
+{
+    "heading": "Computer Vision",
+    "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.",
+    "skills": [
+      {
+        "category": "CV Techniques",
+        "items": ["Object Detection", "Image Segmentation", "Feature Extraction", "Image Classification"]
+      },
+      {
+        "category": "CV Libraries",
+        "items": ["OpenCV", "PIL/Pillow", "TorchVision", "TF Computer Vision"]
+      },
+      {
+        "category": "Deep Learning for CV",
+        "items": ["CNNs", "YOLO frameworks", "Transfer Learning", "Object Recognition"]
+      },
+      {
+        "category": "Applications",
+        "items": ["Accessibility Solutions", "OCR/Document Analysis", "Motion Tracking", "Edge Deployment"]
+      }
+    ],
+    "projects": [
+      {
+        "title": "Smart Shopping Assistant for the Blind",
+        "url": "https://github.com/Manyue-datascientist/smart_glove_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.",
+        "tech_stack": "YOLOv8, OpenCV, Raspberry Pi"
+      },
+      {
+        "title": "Traffic Flow Counter (Upcoming)",
+        "url": "#",
+        "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.",
+        "tech_stack": "YOLOv5, Raspberry Pi, OpenCV"
+      }
+    ]
+  }

content/data_analytics.json

@@ -0,0 +1,36 @@
+{
+    "heading": "Data Analytics",
+    "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.",
+    "skills": [
+      {
+        "category": "Data Visualization",
+        "items": ["Power BI", "Tableau", "Matplotlib/Seaborn", "Plotly/Dash"]
+      },
+      {
+        "category": "Data Manipulation",
+        "items": ["SQL", "Pandas", "NumPy", "ETL Pipelines"]
+      },
+      {
+        "category": "Analysis Techniques",
+        "items": ["Statistical Analysis", "A/B Testing", "Time Series Analysis", "Customer Segmentation"]
+      },
+      {
+        "category": "Business Intelligence",
+        "items": ["KPI Development", "Executive Reporting", "Data Storytelling", "Process Optimization"]
+      }
+    ],
+    "projects": [
+      {
+        "title": "Northwind Sales Insight Dashboard",
+        "url": "https://github.com/Manyue-datascientist/northwind-retail-analysis",
+        "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.",
+        "tech_stack": "SQL, Power BI, Pandas"
+      },
+      {
+        "title": "Loan Default Risk Analysis",
+        "url": "#",
+        "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.",
+        "tech_stack": "Python, Matplotlib, Pandas"
+      }
+    ]
+  }

content/machine_learning.json

@@ -0,0 +1,42 @@
+{
+    "heading": "Machine Learning",
+    "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.",
+    "skills": [
+      {
+        "category": "Frameworks & Libraries",
+        "items": ["TensorFlow/Keras", "PyTorch", "Scikit-Learn", "XGBoost/LightGBM"]
+      },
+      {
+        "category": "ML Techniques",
+        "items": ["Supervised Learning", "Unsupervised Learning", "Deep Learning", "Natural Language Processing"]
+      },
+      {
+        "category": "MLOps",
+        "items": ["ML Pipelines", "Model Monitoring", "Deployment Strategies", "Version Control (DVC)"]
+      },
+      {
+        "category": "Cloud ML Services",
+        "items": ["AWS SageMaker", "Google AI Platform", "Azure ML", "MLflow"]
+      }
+    ],
+    "projects": [
+      {
+        "title": "University Admission Predictor",
+        "url": "#",
+        "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.",
+        "tech_stack": "Scikit-learn, Streamlit, NumPy"
+      },
+      {
+        "title": "AI Chat Assistant for Recruiters",
+        "url": "https://huggingface.co/spaces/Manyue-DataScientist/AI-Assistant",
+        "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.",
+        "tech_stack": "LangChain, OpenAI, Gradio"
+      },
+      {
+        "title": "Speaker Diarization Application",
+        "url": "https://huggingface.co/spaces/Manyue-DataScientist/speaker-diarization-app-v2",
+        "description": "Developed an advanced multi-speaker audio processing system that performs speaker diarization, transcription, and summarization to extract meaningful insights from multi-speaker conversations.",
+        "tech_stack": "PyTorch, Hugging Face Transformers, Gradio"
+      }
+    ]
+  }

content/profile.json

@@ -0,0 +1,47 @@
+{
+    "name": "Manyue Javvadi",
+    "title": "AI/ML Engineer & Data Scientist",
+    "about": "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.",
+    "photo": "data/My_photo.jpeg",
+    "skills": [
+      "Python",
+      "Machine Learning",
+      "TensorFlow",
+      "PyTorch",
+      "Computer Vision",
+      "Data Analytics",
+      "SQL",
+      "Power BI"
+    ],
+    "social_links": [
+      {
+        "name": "LinkedIn",
+        "url": "https://www.linkedin.com/in/manyue-javvadi-datascientist/",
+        "icon": "linkedin_icon",
+        "aria_label": "LinkedIn"
+      },
+      {
+        "name": "GitHub",
+        "url": "https://github.com/Manyue-datascientist",
+        "icon": "github_icon",
+        "aria_label": "GitHub"
+      },
+      {
+        "name": "Email",
+        "url": "mailto:[email protected]",
+        "icon": "mail_icon",
+        "aria_label": "Contact Me",
+        "id": "contact_btn"
+      }
+    ],
+    "contact": {
+      "heading": "Contact Me",
+      "text": "Looking for a data scientist or ML engineer for your team?",
+      "button_text": "Hire Me",
+      "email": "[email protected]"
+    },
+    "footer": {
+      "copyright": "© 2025 Manyue Javvadi. All rights reserved.",
+      "credits": "Made with Gradio"
+    }
+  }

content/sections.json

@@ -0,0 +1,25 @@
+{
+    "cards": [
+      {
+        "id": "data_analytics",
+        "title": "Data Analytics",
+        "icon": "data_analytics_icon",
+        "description": "Data storytelling, insights extraction, interactive dashboards & business problem-solving",
+        "class": "da"
+      },
+      {
+        "id": "machine_learning",
+        "title": "Machine Learning",
+        "icon": "machine_learning_icon",
+        "description": "Feature engineering, model training, deployment & automation pipelines",
+        "class": "ml"
+      },
+      {
+        "id": "computer_vision",
+        "title": "Computer Vision",
+        "icon": "computer_vision_icon",
+        "description": "Object detection, image recognition, edge AI & accessibility applications",
+        "class": "cv"
+      }
+    ]
+  }

data/knowledge_base.json

@@ -1,295 +0,0 @@
-{
-    "personal_details": {
-      "full_name": "Manyue Javvadi",
-      "current_location": "Canada",
-      "nationality": "Indian",
-      "professional_summary": "I'm Manyue Javvadi, a Machine Learning enthusiast passionate about creating projects that push the limits of innovation. Guided by the belief that 'Imagination is more powerful than knowledge,' as Albert Einstein once said, I strive to develop solutions that enhance human potential, not replace it. Explore the ideas and creations that aren't just part of the present—they're shaping a future where technology and humanity thrive together.",
-      "online_presence": {
-        "personal_website": "https://manyuejavvadi.netlify.app/",
-        "linkedin": "https://www.linkedin.com/in/manyue-javvadi-datascientist/",
-        "portfolio": "https://manyue-datascientist-portfolio.streamlit.app/",
-        "blog_posts": [
-          {
-            "title": "The Questions That Kept Me Up All Night: My Sleepless Struggle to Understand NLP",
-            "focus": "Deep dive into Natural Language Processing challenges and insights"
-          },
-          {
-            "title": "Are We Headed Toward the Next Threat, Bigger Than a Nuclear Bomb?",
-            "focus": "Analysis of AI safety and ethical considerations"
-          },
-          {
-            "title": "How KNN Works: A Simple Explanation of Nearest Neighbors",
-            "link":"https://knn-algorithm-explained-by-manyue-javvadi.hashnode.dev/how-knn-works-a-simple-explanation-of-nearest-neighbors",
-            "focus": "Educational content breaking down ML algorithms"
-          }
-        ]
-      },
-      "career_transition": {
-        "key_decision": "Transitioned from Java development at Cognizant to pursue ML/AI dream in Canada",
-        "motivation": "Combining technical expertise with innovation and commerce skills in ML/AI field",
-        "current_focus": "Building practical ML solutions while advancing education in Canada"
-      }
-    },
-    "education": {
-      "postgraduate": [
-        {
-          "course_name": "Big Data Analytics",
-          "institution": "Georgian College",
-          "graduation_year": "2024",
-          "gpa": "8.3/10",
-          "achievements": ["Dean's List Honoree"],
-          "key_courses": [
-            "Advanced Machine Learning",
-            "Big Data Processing",
-            "Statistical Analysis",
-            "Data Visualization"
-          ]
-        },
-        {
-          "course_name": "Applied AI Solutions Development Program",
-          "institution": "George Brown College",
-          "graduation_year": "2025",
-          "gpa": "3.8/4.0",
-          "key_courses": [
-            "Deep Learning Applications",
-            "Natural Language Processing",
-            "Computer Vision",
-            "MLOps and Deployment"
-          ]
-        }
-      ],
-      "undergraduate": {
-        "course_name": "Bachelor of Commerce",
-        "institution": "SRM University Chennai",
-        "graduation_year": "2021",
-        "grade": "89%",
-        "relevance": "Strong foundation in business analytics and decision-making"
-      },
-      "ongoing_learning": {
-        "certifications_in_progress": ["MLOps Specialization"],
-        "areas_of_focus": [
-          "Model Deployment",
-          "CI/CD for ML",
-          "ML System Design"
-        ]
-      }
-    },
-    "skills": {
-      "technical_skills": {
-        "machine_learning": {
-          "core": ["Supervised Learning", "Unsupervised Learning", "Neural Networks"],
-          "frameworks": ["scikit-learn", "TensorFlow", "PyTorch"],
-          "focus_areas": ["NLP", "Computer Vision", "Recommendation Systems"]
-        },
-        "programming": {
-          "primary": ["Python", "Java"],
-          "libraries": ["NumPy", "Pandas", "Matplotlib", "Seaborn"],
-          "tools": ["Git", "Docker"]
-        },
-        "data": {
-          "databases": ["SQL", "MongoDB"],
-          "visualization": ["Tableau", "PowerBI"],
-          "processing": ["PySpark", "Hadoop"]
-        },
-        "deployment": {
-          "web": ["Streamlit", "Flask"],
-          "mlops": ["MLflow", "DVC"],
-          "version_control": ["Git", "GitHub"]
-        }
-      },
-      "soft_skills": [
-        {
-          "skill": "Problem-solving",
-          "context": "Developed innovative solutions in ML projects"
-        },
-        {
-          "skill": "Communication",
-          "context": "Technical blog writing and project documentation"
-        },
-        {
-          "skill": "Adaptability",
-          "context": "Successfully transitioned from commerce to tech"
-        },
-        {
-          "skill": "Leadership",
-          "context": "Led project teams and initiatives"
-        }
-      ]
-    },
-    "professional_experience": {
-      "work_experience": [
-        {
-          "position": "Junior Software Engineer",
-          "company": "Cognizant",
-          "duration": "June 2021 – September 2023",
-          "location": "Chennai, India",
-          "achievements": [
-            "Developed and maintained Java applications in insurance domain",
-            "Led migration from SVN to GitHub for improved development workflow",
-            "Collaborated with cross-functional teams for requirement analysis",
-            "Resolved version conflicts during application upgrades"
-          ],
-          "technologies_used": [
-            "Java",
-            "Spring Framework",
-            "SQL",
-            "Git"
-          ],
-          "impact": "Improved documentation process and streamlined backend storage"
-        }
-      ]
-    },
-    "projects": {
-      
-        "major_projects": [
-            {
-              "name": "AI-Powered POS System",
-              "description": "An innovative Point-of-Sale system that integrates cutting-edge AI technologies to revolutionize restaurant operations. The project involves proprietary algorithms and novel approaches that are currently under IP discussion with my institution.",
-              "impact": "Aims to transform how restaurants handle operations, inventory, and customer service using AI",
-              "skills_used": ["Python", "MLOps", "Deep Learning", "Computer Vision"],
-              "status": "Under active development - MVP phase",
-              "confidentiality_note": "Full details under IP review"
-            },
-            {
-              "name": "Innovative E-commerce Enhancement",
-              "description": "Developing a transformative feature for Shopify stores that leverages advanced NLP and ML techniques to significantly improve customer engagement and conversion rates.",
-              "impact": "Early testing shows promising results in customer interaction metrics",
-              "skills_used": ["Python", "Neural Networks", "NLP", "Deep Learning"],
-              "status": "In development - proprietary solution",
-              "confidentiality_note": "Details limited due to potential commercial application"
-            },
-            {
-              "name": "Smart Nutrition Recommendation System",
-              "description": "An innovative system that scans product barcodes and analyzes nutrition labels to provide personalized healthy alternatives based on user preferences and dietary requirements.",
-              "key_features": [
-                "Barcode scanning integration",
-                "Nutrition analysis engine",
-                "Personalized recommendation algorithm",
-                "Alternative product matching"
-              ],
-              "technical_details": {
-                "data_processing": "Real-time nutrition label analysis",
-                "ml_models": "Custom recommendation engine using collaborative and content-based filtering",
-                "user_profiling": "Dynamic preference learning system"
-              },
-              "skills_used": ["Python", "Computer Vision", "Machine Learning", "Recommendation Systems"],
-              "status": "Prototype development",
-              "target_impact": "Making healthy food choices more accessible and personalized"
-            },
-            {
-              "name": "AI Portfolio Assistant",
-              "description": "A sophisticated chatbot leveraging LLM technology to provide dynamic, context-aware responses about my professional journey and projects.",
-              "key_features": [
-                "Natural language understanding",
-                "Context-aware responses",
-                "Dynamic job description analysis"
-              ],
-              "skills_used": ["Python", "LLMs", "Streamlit", "NLP"],
-              "status": "Deployed and actively enhanced"
-            }
-          ],
-          "algorithm_practice_projects": [
-            {
-              "name": "University Admission Predictor",
-              "type": "Linear Regression Implementation",
-              "description": "Built from scratch to understand core regression concepts, helping Jamboree predict admission chances for international students.",
-              "technical_focus": "Custom implementation of linear regression without using sklearn",
-              "skills_developed": ["Statistical Analysis", "Algorithm Implementation", "Feature Engineering"],
-              "accuracy": "81% on test data",
-              "status": "Completed"
-            },
-            {
-              "name": "LoanTap Credit Assessment",
-              "type": "Logistic Regression Implementation",
-              "description": "Custom-built logistic regression model for credit worthiness prediction",
-              "technical_focus": "Implementation of logistic regression from scratch",
-              "skills_developed": ["Credit Risk Modeling", "Binary Classification", "Model Evaluation"],
-              "status": "Completed"
-            },
-            {
-              "name": "OLA Driver Retention Analysis",
-              "type": "Ensemble Learning",
-              "description": "Predictive modeling for driver churn using various ensemble techniques",
-              "technical_focus": "Implementation of multiple base models and ensemble methods",
-              "skills_developed": ["Ensemble Methods", "Feature Selection", "Model Comparison"],
-              "status": "Completed"
-            },
-            {
-              "name": "AdEase View Prediction",
-              "type": "Time Series Analysis",
-              "description": "Forecasting Wikipedia page views for optimal ad placement",
-              "technical_focus": "Implementation of time series models and forecasting techniques",
-              "skills_developed": ["Time Series Analysis", "Forecasting", "Data Preprocessing"],
-              "status": "Completed"
-            }
-          ]
-        },
-        
-  "personal_journey": {
-    "dietary_changes": "I transitioned to a vegetarian diet in 2021 but resumed eating non-veg in 2023 to address nutritional deficiencies.",
-    "life_changes": [
-      {
-        "date": "December 2023",
-        "event": "I relocated to Canada for advanced education."
-      }
-    ],
-    "mindset": "I am resilient, adaptable, and innovation-driven. I thrive on challenges and use setbacks as opportunities for growth.",
-    "motto_or_vision": "To leverage AI/ML to create solutions that enhance user experiences while retaining the human touch."
-  },
-  "goals_and_aspirations": {
-    "short_term": [
-      "I want to master advanced machine learning techniques.",
-      "I aim to expand my portfolio with impactful projects.",
-      "I seek to secure a role as an ML engineer in Canada."
-    ],
-    "long_term": [
-      "I plan to develop AI solutions that redefine retail and hospitality experiences.",
-      "I aspire to establish a successful AI startup.",
-      "I want to mentor aspiring AI professionals."
-    ]
-  },
-  "frequently_asked_questions": [
-    {
-      "question": "Why did you transition from commerce to AI/ML?",
-      "answer": "The transition from commerce to AI/ML was a result of an unexpected turn in my career journey. After completing my bachelor's degree in commerce, I was fortunate to land a job at Cognizant Technology Solutions as a Programmer Trainee. Despite having no prior experience in coding or programming, coming from a core commerce background, my eagerness to learn and quick adaptability caught the attention of my trainers. CTS gave me an opportunity, and during the initial 45-day training period and assessment, I performed exceptionally well in Java, which helped me secure a position in the development team. This was a remarkable achievement, as many computer science graduates typically end up in support roles. However, after working for a year, I realized that while I had developed a passion for programming, I still felt disconnected from my original interest in business and commerce. I knew I had to find a way to combine both my love for programming and my interest in business. That's when I discovered data science and machine learning, which seemed like the perfect intersection. With this newfound clarity, I embarked on a journey to master AI/ML, and now, I am truly enjoying the blend of technology and business that this field offers."
-    },
-    {
-      "question": "What unique qualities do you bring to the table?",
-      "answer": "I combine technical expertise with a fresh perspective, thanks to my diverse background. My adaptability and ability to think beyond conventional approaches are my biggest strengths."
-    },
-    {
-      "question": "What is your most innovative project?",
-      "answer": "The most innovative project is an AI-powered Point-of-Sale (POS) system designed to Reduce order time and order errors. I'm currently working with my college to secure intellectual property rights, so I can't disclose the full extent of its capabilities at this time. However, I'm confident that this project has the potential to significantly impact the restaurant industry."
-    }
-  ],
-  "career_development": {
-    "short_term": [
-      "I aim to continue mastering ML concepts through projects and coursework.",
-      "I want to build a portfolio that highlights my ability to solve real-world problems.",
-      "I plan to secure an ML engineer role in retail or hospitality AI."
-    ],
-    "long_term": [
-      "I intend to build AI tools that make a global impact in the retail sector.",
-      "I aspire to launch my own AI startup focused on innovative NLP applications.",
-      "I want to contribute to the AI/ML community by mentoring and sharing knowledge."
-    ],
-    "perspectives": {
-    "market_outlook": {
-      "job_market": "I believe market conditions are less about timing and more about preparation. While the market may have its ups and downs, I focus on building strong skills and creating impactful projects. Quality efforts and continuous learning will always find opportunities.",
-      "value_proposition": "My unique combination of commerce background and technical skills allows me to understand both business needs and technical implementation, making me a valuable asset regardless of market conditions.",
-      "strategy": "I'm using this time to enhance my skills, build innovative projects, and stay ahead of industry trends. It's about creating value, not just seeking opportunities."
-    },
-    "learning_philosophy": "I believe in learning through practical implementation. Rather than just studying algorithms, I build projects from scratch to truly understand the concepts.",
-    "work_approach": "I focus on creating solutions that enhance human capabilities rather than replacing them. Every project I undertake aims to solve real-world problems.",
-    "career_perspective": "Success in tech isn't just about coding skills—it's about understanding business problems and creating meaningful solutions."
-  },
-  "common_queries": {
-    "weather": "I'm focused on ML/AI and career discussions. For weather information, I'd recommend checking local weather services.",
-    "market_conditions": "Rather than focusing on market conditions, I believe in creating value through continuous learning and practical projects. Would you like to know about my approach to standing out in any market?",
-    "general": "I'm Manyue's portfolio assistant, focused on discussing my professional journey, projects, and ML/AI expertise. For general queries, I'd encourage exploring more relevant resources."
-  }
-}
-
-  }
-      
-    

data/resume.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d466a6b984032b748901a5f129d7ad1d1b91308d848fb102b16e9a1b9c30eb7d
+size 101343

utils.py

@@ -0,0 +1,149 @@
+import json
+import base64
+import os
+
+def load_json(filename, folder="content"):
+    """Load JSON data from specified folder"""
+    try:
+        with open(f"{folder}/{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 save_json(data, filename, folder="content"):
+    """Save JSON data to specified folder"""
+    try:
+        # Create folder if it doesn't exist
+        if not os.path.exists(folder):
+            os.makedirs(folder)
+        
+        with open(f"{folder}/{filename}.json", "w", encoding="utf-8") as f:
+            json.dump(data, f, indent=2)
+        return True
+    except Exception as e:
+        print(f"Error saving {filename}.json: {e}")
+        return False
+
+def file_to_data_uri(filepath, mime_type="application/pdf"):
+    """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
+
+def add_project(section, project_data):
+    """Add a new project to a specific section"""
+    try:
+        # Load the current data
+        section_data = load_json(section)
+        
+        # Add the new project
+        if "projects" not in section_data:
+            section_data["projects"] = []
+        
+        section_data["projects"].append(project_data)
+        
+        # Save the updated data
+        return save_json(section_data, section)
+    except Exception as e:
+        print(f"Error adding project to {section}: {e}")
+        return False
+
+def update_project(section, project_index, project_data):
+    """Update an existing project in a specific section"""
+    try:
+        # Load the current data
+        section_data = load_json(section)
+        
+        # Check if the index is valid
+        if "projects" not in section_data or project_index >= len(section_data["projects"]):
+            print(f"Invalid project index: {project_index}")
+            return False
+        
+        # Update the project
+        section_data["projects"][project_index] = project_data
+        
+        # Save the updated data
+        return save_json(section_data, section)
+    except Exception as e:
+        print(f"Error updating project in {section}: {e}")
+        return False
+
+def delete_project(section, project_index):
+    """Delete a project from a specific section"""
+    try:
+        # Load the current data
+        section_data = load_json(section)
+        
+        # Check if the index is valid
+        if "projects" not in section_data or project_index >= len(section_data["projects"]):
+            print(f"Invalid project index: {project_index}")
+            return False
+        
+        # Delete the project
+        del section_data["projects"][project_index]
+        
+        # Save the updated data
+        return save_json(section_data, section)
+    except Exception as e:
+        print(f"Error deleting project from {section}: {e}")
+        return False
+
+def update_profile(profile_data):
+    """Update the profile information"""
+    try:
+        return save_json(profile_data, "profile")
+    except Exception as e:
+        print(f"Error updating profile: {e}")
+        return False
+
+def add_skill(section, category_index, skill):
+    """Add a new skill to a specific category in a section"""
+    try:
+        # Load the current data
+        section_data = load_json(section)
+        
+        # Check if the category index is valid
+        if "skills" not in section_data or category_index >= len(section_data["skills"]):
+            print(f"Invalid category index: {category_index}")
+            return False
+        
+        # Add the skill
+        section_data["skills"][category_index]["items"].append(skill)
+        
+        # Save the updated data
+        return save_json(section_data, section)
+    except Exception as e:
+        print(f"Error adding skill to {section}: {e}")
+        return False
+
+def update_section_intro(section, intro_text):
+    """Update the introduction text of a section"""
+    try:
+        # Load the current data
+        section_data = load_json(section)
+        
+        # Update the intro
+        section_data["intro"] = intro_text
+        
+        # Save the updated data
+        return save_json(section_data, section)
+    except Exception as e:
+        print(f"Error updating intro for {section}: {e}")
+        return False