Update app.py

app.py

@@ -15,26 +15,20 @@ class Portfolio:
         }
 
         self.about = """
-        Hi, I'm <strong style="color: #FFA500;">Sreelekha</strong>, a passionate <strong>AI/ML enthusiast, innovator, and problem solver</strong> 
-        currently in my final year of B.Tech. My journey blends technical skills with creativity—I love building AI-powered tools that 
-        make life simpler, meaningful, and even spiritual.
+        Hi, I'm <strong>Sreelekha</strong>, a passionate <strong>AI/ML enthusiast, innovator, and problem solver</strong>, in my final year of B.Tech. My journey blends technical skills with creativity—I love building AI-powered tools that make life simpler, meaningful, and even spiritual.
         <br><br>
-        I've worked as an <strong style="color: #FFC069;">AI Intern at Spectov</strong> and an <strong style="color: #FFC069;">AI Tools Expert Intern at Website Makers</strong>, 
-        gaining hands-on experience in <strong>Generative AI, NLP, and Machine Learning applications</strong>. Alongside, I've developed unique projects like:
+        I've interned as an <strong>AI Intern at Spectov</strong> and <strong>AI Tools Expert Intern at Website Makers</strong>, gaining hands-on experience in <strong>Generative AI, NLP, and Machine Learning applications</strong>. Some unique projects:
         <br><br>
-        • <strong style="color: #87CEEB;">Idealyze</strong> – an AI startup validator with 85% accuracy<br>
-        • <strong style="color: #87CEEB;">WiseVerse</strong> – a Bhagavad Gita-based AI chatbot with 95% accuracy<br>
-        • <strong style="color: #87CEEB;">DivineLoop</strong> and <strong style="color: #87CEEB;">AvatarVerse</strong> – creative AI solutions<br>
-        • <strong style="color: #87CEEB;">GenDoc AI</strong> – an AI-driven code documentation tool
+        • <strong>Idealyze</strong> – an AI startup validator (85% accuracy)<br>
+        • <strong>WiseVerse</strong> – a Bhagavad Gita-based AI chatbot (95% accuracy)<br>
+        • <strong>DivineLoop</strong> and <strong>AvatarVerse</strong> – creative AI solutions<br>
+        • <strong>GenDoc AI</strong> – an AI-driven code documentation tool
         <br><br>
-        With an <strong style="color: #FFA500;">8.0 CGPA</strong> and a strong foundation in <strong>Python, ML, Deep Learning, and AI frameworks</strong>, 
-        I aim to grow into an <strong>AI Project Manager & Generative AI Engineer</strong>, bridging technology with real-world impact.
+        With an <strong>8.0 CGPA</strong> and a strong foundation in <strong>Python, ML, Deep Learning, and AI frameworks</strong>, I aim to grow into an <strong>AI Project Manager & Generative AI Engineer</strong>, bridging technology with real-world impact.
         <br><br>
-        Outside of tech, I find peace in spirituality and creativity—I'm deeply inspired by the teachings of Lord Krishna, 
-        which guide my mindset toward resilience and growth.
+        Outside of tech, I find peace in spirituality and creativity—I'm inspired by Lord Krishna's teachings, which guide my mindset toward resilience and growth.
         <br><br>
-        <strong style="color: #FFD700;">My goal:</strong> To <strong>shape the future of AI</strong> while making technology more 
-        <strong>human-centered, ethical, and impactful</strong>.
+        <strong>My goal:</strong> Shape the future of AI while making technology more <strong>human-centered, ethical, and impactful</strong>.
         """
 
         self.projects = [
@@ -52,130 +46,23 @@ class Portfolio:
              "achievements": ["WiseVerse chatbot with 95% accuracy, 40% engagement boost", "Idealyze validator with 85% accuracy, 50% better decisions", "AI tools & prompt engineering boosting efficiency by 35%"]}
         ]
 
-    def create_css(self):
-        return """
-        <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-        /* Theme-adaptive text coloring */
-        :root {
-            --main-text-dark: #222;
-            --main-text-light: #F4F4F9;
-            --highlight-dark: #FFA500;
-            --highlight-light: #FFA500;
-        }
-
-        html, body, .gradio-container {
-            font-family: 'Inter', sans-serif !important;
-            background: url('https://www.alldesigncreative.com/wp-content/uploads/2019/09/new-glitter-particles-black-screen-background-video-effect.png') no-repeat center center fixed !important;
-            background-size: cover !important;
-            color: var(--main-text-light) !important;
-            margin: 0; padding: 0;
-            transition: color 0.3s, background 0.3s;
-        }
-
-        .profile-header {
-            background: linear-gradient(135deg, #5252a3 0%, #633d9c 100%);
-            padding: 30px; border-radius: 15px;
-            color: var(--main-text-light) !important;
-            margin: 20px 0;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-        }
-        .profile-name { font-size: 2.5rem; font-weight: 700; color: #FFD700 !important;}
-        .badge {
-            background: rgba(255,255,255,0.18); padding: 8px 16px;
-            border-radius: 20px; display: inline-block; margin: 5px;
-            color: var(--main-text-dark) !important;
-            background: #FFD7001F !important;
-        }
-        /* For theme switching, prefer dark badge text on light backgrounds */
-        @media (prefers-color-scheme: dark) {
-            .badge { color: var(--main-text-light) !important; }
-        }
-        .card, .project-card, .stat-box, .tech-tag, .btn-primary {
-            color: var(--main-text-dark) !important;
-            background: #FFF !important;
-        }
-        .card-title { color: #FFA500 !important; }
-        .project-card {
-            background: linear-gradient(145deg, #f8f8fc, #e6e4f6) !important;
-            border: 1px solid #FFD70066;
-            color: var(--main-text-dark) !important;
-        }
-        .tech-tag {
-            background: #FFD70022 !important;
-            color: var(--main-text-dark) !important;
-        }
-        .btn-primary {
-            background: linear-gradient(45deg, #FFA500, #FF6B6B) !important;
-            color: #FFF !important;
-        }
-        .btn-primary:hover {
-            background: linear-gradient(45deg, #FFB733, #FF4B4B);
-            color: #FFF !important;
-        }
-        .stat-box { background: #FEF4E0 !important; color: var(--main-text-dark) !important;}
-        /* Dropdown and tab highlight fix */
-        .svelte-dnp2b8 .tab-header, .dropdown, .gr-dropdown {
-            color: var(--main-text-dark) !important;
-            background: #FFF !important;
-            border-radius: 8px !important;
-        }
-        .dropdown .active, .tab-header .active {
-            color: #FFA500 !important;
-            font-weight: 700 !important;
-        }
-        /* Filename and file component style for resume */
-        .gr-file {
-            background: #EEE !important;
-            color: #181818 !important;
-            border-radius: 10px !important;
-        }
-        .gr-file__label { color: #444 !important; }
-        .gr-file__filename { color: #222!important; font-weight: 500; }
-        /* Mobile view fixes */
-        @media (max-width: 700px) {
-            .badge, .card, .project-card, .stat-box, .tech-tag, .btn-primary, .profile-header, * {
-                color: var(--main-text-dark) !important;
-                background: #FFF !important;
-                text-shadow: none !important;
-            }
-        }
-        /* Extra: dark color on file name always */
-        .gr-file__filename, .gr-file__label {
-            color: #181818 !important;
-        }
-        </style>
-        """
-
     def create_header(self):
         return f"""
-        {self.create_css()}
-        <div class="profile-header">
-            <div style="display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center;">
-                <div style="flex: 1; min-width: 300px; text-align: center;">
-                    <h1 class="profile-name">{self.profile['name']}</h1>
-                    <p style="font-size: 1.3rem; margin-bottom: 15px; color: #FFD700;">{self.profile['title']}</p>
-                    <div>
-                        <span class="badge">📍 {self.profile['location']}</span>
-                        <span class="badge">📞 {self.profile['phone']}</span>
-                        <span class="badge">✉️ {self.profile['email']}</span>
-                    </div>
-                    <div style="margin-top: 15px;">
-                        <span class="badge">🎓 B.Tech IT(AI/ML) | CGPA: {self.profile['cgpa']}</span>
-                    </div>
-                </div>
-            </div>
+        <div style='background: linear-gradient(135deg, #5252a3 0%, #633d9c 100%); padding: 26px; border-radius: 14px; margin: 15px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.22); text-align: center;'>
+            <h1 style='font-size: 2.3rem; color: #FFD700; font-weight: 700; margin-bottom: 6px;'>{self.profile['name']}</h1>
+            <div style='font-size: 1.10rem; color: #F4F4F4; margin-bottom: 4px;'>{self.profile['title']}</div>
+            <span style='display:inline-block;border-radius:14px;padding:4px 12px;margin:3px 2px;background:#FFA8001A;color:#442A00;'>📍 {self.profile['location']}</span>
+            <span style='display:inline-block;border-radius:14px;padding:4px 12px;margin:3px 2px;background:#87CEEB1A;color:#003344;'>📞 {self.profile['phone']}</span>
+            <span style='display:inline-block;border-radius:14px;padding:4px 12px;margin:3px 2px;background:#FF6B6B1A;color:#560000;'>✉️ {self.profile['email']}</span>
+            <br><span style='display:inline-block;border-radius:14px;padding:4px 12px;margin:4px 2px;background:#FFD70021;color:#595106;'>🎓 B.Tech IT(AI/ML) | CGPA: {self.profile['cgpa']}</span>
         </div>
         """
 
     def create_about(self):
         return f"""
-        <div class="card">
-            <h2 class="card-title">👤 About Me</h2>
-            <p style="line-height: 1.8; font-size: 1.05rem;">
-                {self.about}
-            </p>
+        <div style='background: #FFF; border-radius:11px; margin:0 0 16px 0; padding:18px; color:#232323;'>
+            <h2 style="color:#FFA500; font-weight:700; margin-bottom:10px;">👤 About Me</h2>
+            <div style="font-size:1.04rem; line-height:1.75;">{self.about}</div>
         </div>
         """
 
@@ -186,17 +73,17 @@ class Portfolio:
         fig = go.Figure()
         fig.add_trace(go.Scatterpolar(
             r=values + [values[0]], theta=categories + [categories[0]],
-            fill='toself', fillcolor='rgba(255, 165, 0, 0.3)',
-            line_color='#FFA500', line_width=2, marker=dict(size=6, color='#FF6B6B')
+            fill='toself', fillcolor='rgba(255, 165, 0, 0.18)',
+            line_color='#FFA500', line_width=2, marker=dict(size=6, color='#FFA500')
         ))
         fig.update_layout(
             polar=dict(
-                radialaxis=dict(visible=True, range=[0, 100], tickfont=dict(color='#FFA500'), gridcolor='rgba(255,255,255,0.22)'),
-                angularaxis=dict(tickfont=dict(color='#FFA500'), gridcolor='rgba(255,255,255,0.22)')
+                radialaxis=dict(visible=True, range=[0, 100]),
+                angularaxis=dict(tickfont=dict(size=13))
             ),
-            paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)',
             title=dict(text="Technical & Soft Skills", font=dict(size=18, color='#FFA500')),
-            width=600, height=500, showlegend=False
+            width=530, height=380, showlegend=False,
+            paper_bgcolor="#FFF", plot_bgcolor="#FFF"
         )
         return fig
 
@@ -208,82 +95,70 @@ class Portfolio:
             x=metrics, y=values,
             marker_color=['#FFA500', '#FF6B6B', '#00FF87', '#87CEEB'],
             text=[f'{v}%' for v in values], textposition='auto',
-            textfont=dict(color='#222')
+            textfont=dict(color='#333')
         )])
         fig.update_layout(
             title=dict(text="Key Project Metrics", font=dict(size=18, color='#FFA500')),
-            xaxis=dict(title="Projects/Metrics", tickfont=dict(color='#222')),
-            yaxis=dict(title="Percentage", tickfont=dict(color='#222')),
-            paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)',
-            width=600, height=400
+            xaxis=dict(title="Projects/Metrics"),
+            yaxis=dict(title="Percentage"),
+            paper_bgcolor="#FFF", plot_bgcolor="#FFF",
+            width=530, height=330
         )
         return fig
 
 def create_interface():
     portfolio = Portfolio()
 
-    css = """
-    .gradio-container { background: linear-gradient(135deg, #faf8fe, #ede9fc) !important; }
-    .gr-button { background: linear-gradient(45deg, #FFA500, #FF6B6B) !important; color: #181818 !important; }
-    """
-
-    with gr.Blocks(css=css, title="Sreelekha Putta - AI Engineer Portfolio") as demo:
+    with gr.Blocks(theme=gr.themes.HuggingFace(), title="Sreelekha Putta - AI Engineer Portfolio") as demo:
         with gr.Row():
             with gr.Column(scale=1):
                 profile_img = gr.Image(
                     value="profile.jpg",
                     label="Profile Picture",
                     show_label=False,
-                    height=200,
-                    width=200,
+                    height=185,
+                    width=185,
                     type="filepath",
-                    container=True,
-                    elem_classes=["profile-image-container"]
+                    container=True
                 )
-
         gr.HTML(portfolio.create_header())
-
         with gr.Tabs():
             with gr.Tab("👤 About"):
                 gr.HTML(portfolio.create_about())
-                with gr.Row():
-                    gr.HTML("""
-                    <div class="card">
-                        <h2 class="card-title">🎓 Education</h2>
-                        <div style="background: #FEF4E0; padding: 15px; border-radius: 10px;">
-                            <h3 style="color: #FFD700;">B.Tech in Information Technology(AI/ML Specialization)</h3>
-                            <p style="color: #181818;">JNTUH College of Engineering Jagitial</p>
-                            <p style="color: #FFD700;">2022 – 2026 | CGPA: 8.0</p>
-                        </div>
+                gr.HTML("""
+                    <div style='background: #FEF7DA; border-radius:10px; margin:0 0 18px 0; padding:15px;'>
+                        <h3 style="color: #FFA500;">B.Tech in Information Technology (AI/ML Specialization)</h3>
+                        <div style="color:#2a2a2a;">JNTUH College of Engineering Jagitial</div>
+                        <div style="color: #FFA500;">2022 – 2026 | CGPA: 8.0</div>
                     </div>
                     """)
-
             with gr.Tab("💼 Experience"):
-                exp_html = '<div class="card"><h2 class="card-title">Professional Experience</h2>'
+                exp_html = '<div style="background:#FFF; border-radius:11px; padding:18px;">'
+                exp_html += '<h2 style="color:#FFA500; margin-bottom:10px;">Professional Experience</h2>'
                 for exp in portfolio.experience:
                     exp_html += f"""
-                    <div class="project-card">
-                        <h3 style="color: #FFA500;">{exp['role']}</h3>
-                        <p style="color: #181818;">{exp['company']} | {exp['duration']}</p>
-                        <ul style="color: #181818; margin-top: 10px;">
+                    <div style="background:#FAFAFF;border:1px solid #F1EAFB;border-radius:10px; margin-bottom:11px; padding:12px;">
+                        <h3 style="color:#FFA500;">{exp['role']}</h3>
+                        <div style="color:#364F6B;">{exp['company']} | {exp['duration']}</div>
+                        <ul style="margin-top:10px; color:#363636;">
                     """
                     for ach in exp['achievements']:
-                        exp_html += f'<li style="margin: 5px 0;">⚡ {ach}</li>'
+                        exp_html += f'<li style="margin:5px 0;">⚡ {ach}</li>'
                     exp_html += '</ul></div>'
                 exp_html += '</div>'
                 gr.HTML(exp_html)
                 gr.Plot(portfolio.create_metrics_chart())
 
             with gr.Tab("🚀 Projects"):
-                proj_html = '<div class="card"><h2 class="card-title">Featured Projects</h2>'
+                proj_html = '<div style="background:#FFF; border-radius:11px; padding:18px;"><h2 style="color:#FFA500; margin-bottom:10px;">Featured Projects</h2>'
                 for proj in portfolio.projects:
-                    tags = ''.join([f'<span class="tech-tag">{t}</span>' for t in proj['tech']])
+                    tags = ''.join([f'<span style="background:#FFD70022; color:#232323; border-radius:6px; font-size:0.98em; padding:2px 7px; margin:0 4px 0 0;">{t}</span>' for t in proj['tech']])
                     proj_html += f"""
-                    <div class="project-card">
-                        <h3 style="color: #FFA500; margin-bottom: 10px;">{proj['name']}</h3>
-                        <p style="color: #181818; margin-bottom: 10px;">{proj['desc']}</p>
-                        <div style="margin-bottom: 10px;">{tags}</div>
-                        <a href="{proj['link']}" target="_blank" class="btn-primary">View Project →</a>
+                    <div style="background:linear-gradient(135deg,#f6f6fb 65%,#ffe277 100%);border:1px solid #FFD70044;border-radius:10px;margin-bottom:13px;padding:13px;">
+                        <h3 style="margin-bottom:7px;color:#FFA500;">{proj['name']}</h3>
+                        <div style="margin-bottom:7px;color:#232323;">{proj['desc']}</div>
+                        <div style="margin-bottom:7px;">{tags}</div>
+                        <a href="{proj['link']}" target="_blank" style="padding:7px 17px;background:#FFA500;color:#FFF;border-radius:9px;font-weight:600;text-decoration:none;">View Project →</a>
                     </div>
                     """
                 proj_html += '</div>'
@@ -295,42 +170,42 @@ def create_interface():
                         gr.Plot(portfolio.create_skills_chart())
                     with gr.Column():
                         gr.HTML("""
-                        <div class="card">
-                            <h2 class="card-title">Technical Skills</h2>
-                            <p style="color: #181818; line-height: 2;">
-                                <strong style="color: #FFA500;">Programming:</strong> Python, C, Java, SQL<br>
-                                <strong style="color: #FFA500;">AI/ML:</strong> Machine Learning, Deep Learning, NLP, Generative AI, LLMs<br>
-                                <strong style="color: #FFA500;">Frameworks:</strong> TensorFlow, PyTorch, Hugging Face, Flask<br>
-                                <strong style="color: #FFA500;">Tools:</strong> Git/GitHub, NumPy, Pandas, Matplotlib, Seaborn<br>
-                                <strong style="color: #FFA500;">Specialization:</strong> Prompt Engineering, Full-stack AI Deployment
-                            </p>
-                            <h2 class="card-title" style="margin-top: 20px;">Soft Skills</h2>
-                            <p style="color: #181818; line-height: 2;">
-                                • <strong style="color: #00FF87;">Leadership</strong> – Led Cultural Night 2025 (1000+ audience)<br>
-                                • <strong style="color: #00FF87;">Communication</strong> – Exceptional presentation & public speaking<br>
-                                • <strong style="color: #00FF87;">Problem Solving</strong> – Creative AI solution design<br>
-                                • <strong style="color: #00FF87;">Team Collaboration</strong> – Cross-functional project delivery<br>
-                                • <strong style="color: #00FF87;">Project Management</strong> – Planning & execution excellence
-                            </p>
+                        <div style="background:#FFF; border-radius:10px; padding:15px;">
+                            <h2 style="color:#FFA500;">Technical Skills</h2>
+                            <div style="color:#262626; line-height:2;">
+                                <strong>Programming:</strong> Python, C, Java, SQL<br>
+                                <strong>AI/ML:</strong> Machine Learning, Deep Learning, NLP, Generative AI, LLMs<br>
+                                <strong>Frameworks:</strong> TensorFlow, PyTorch, Hugging Face, Flask<br>
+                                <strong>Tools:</strong> Git/GitHub, NumPy, Pandas, Matplotlib, Seaborn<br>
+                                <strong>Specialization:</strong> Prompt Engineering, Full-stack AI Deployment
+                            </div>
+                            <h2 style="margin-top:18px;color:#FFA500;">Soft Skills</h2>
+                            <div style="color:#222; line-height:2;">
+                                • <strong>Leadership</strong> – Led Cultural Night 2025 (1000+ audience)<br>
+                                • <strong>Communication</strong> – Exceptional presentation, public speaking<br>
+                                • <strong>Problem Solving</strong> – Creative AI solution design<br>
+                                • <strong>Team Collaboration</strong> – Cross-functional project delivery<br>
+                                • <strong>Project Management</strong> – Planning, execution excellence
+                            </div>
                         </div>
                         """)
 
             with gr.Tab("🏆 Achievements"):
                 gr.HTML("""
-                <div class="card">
-                    <h2 class="card-title">Key Achievements</h2>
-                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
-                        <div class="stat-box">
-                            <div class="stat-number">🏅 Top Intern</div>
-                            <p style="margin-top: 8px;">Recognized for AI innovation at Website Makers (2025)</p>
+                <div style="background:#FFF; border-radius:10px; padding:17px;">
+                    <h2 style="color:#FFA500;">Key Achievements</h2>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 11px;">
+                        <div style="background:#FFFBF0; border-radius:8px; text-align:center; padding:11px;">
+                            <div style="font-size:1.3em; color:#FFA500;">🏅 Top Intern</div>
+                            <div style="margin-top:6px; color:#232323;">Recognized for AI innovation at Website Makers (2025)</div>
                         </div>
-                        <div class="stat-box">
-                            <div class="stat-number">🎤 1000+</div>
-                            <p style="margin-top: 8px;">Hosted Cultural Night 2025 at JNTUH</p>
+                        <div style="background:#FFFBF0; border-radius:8px; text-align:center; padding:11px;">
+                            <div style="font-size:1.3em; color:#FFA500;">🎤 1000+</div>
+                            <div style="margin-top:6px; color:#232323;">Hosted Cultural Night 2025 at JNTUH</div>
                         </div>
-                        <div class="stat-box">
-                            <div class="stat-number">🚀 5+ Apps</div>
-                            <p style="margin-top: 8px;">Deployed on Hugging Face Spaces</p>
+                        <div style="background:#FFFBF0; border-radius:8px; text-align:center; padding:11px;">
+                            <div style="font-size:1.3em; color:#FFA500;">🚀 5+ Apps</div>
+                            <div style="margin-top:6px; color:#232323;">Deployed on Hugging Face Spaces</div>
                         </div>
                     </div>
                 </div>
@@ -340,32 +215,25 @@ def create_interface():
                 with gr.Row():
                     with gr.Column():
                         gr.HTML(f"""
-                        <div class="card">
-                            <h2 class="card-title">Let's Connect</h2>
-                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
-                                <a href="{portfolio.profile['huggingface']}" target="_blank" class="btn-primary" style="text-align: center;">
-                                    🤗 HuggingFace
-                                </a>
-                                <a href="{portfolio.profile['linkedin']}" target="_blank" class="btn-primary" style="text-align: center;">
-                                    💼 LinkedIn
-                                </a>
-                                <a href="mailto:{portfolio.profile['email']}" class="btn-primary" style="text-align: center;">
-                                    ✉️ Email
-                                </a>
+                        <div style="background:#FFF; border-radius:10px; padding:15px;">
+                            <h2 style="color:#FFA500;">Let's Connect</h2>
+                            <div style="margin:14px 0;">
+                                <a href="{portfolio.profile['huggingface']}" target="_blank" style="display:inline-block;padding:10px 18px;margin:4px 8px 4px 0;background:#FFB733;color:#242424;border-radius:7px;font-weight:600;text-decoration:none;">🤗 HuggingFace</a>
+                                <a href="{portfolio.profile['linkedin']}" target="_blank" style="display:inline-block;padding:10px 18px;margin:4px 8px 4px 0;background:#4A90E2;color:#FFF;border-radius:7px;font-weight:600;text-decoration:none;">💼 LinkedIn</a>
+                                <a href="mailto:{portfolio.profile['email']}" style="display:inline-block;padding:10px 18px;margin:4px 8px;background:#FF6B6B;color:#FFF;border-radius:7px;font-weight:600;text-decoration:none;">✉️ Email</a>
                             </div>
-                            <p style="color: #FFA500; font-size: 1.2rem; text-align: center; font-style: italic; margin-top: 20px;">
+                            <div style="color: #FFA500; font-size: 1.04rem; text-align: center; font-style: italic; margin-top: 14px;">
                                 "Building AI with consciousness, creating technology with soul"
-                            </p>
+                            </div>
                         </div>
                         """)
-
                     with gr.Column():
                         gr.HTML("""
-                        <div class="card">
-                            <h2 class="card-title">📄 Download Resume</h2>
-                            <p style="margin-bottom: 15px; color: #181818;">
+                        <div style="background:#FFF;border-radius:10px;padding:15px;">
+                            <h2 style="color:#FFA500;">📄 Download Resume</h2>
+                            <div style="margin-bottom:12px; color:#232323;">
                                 Get my complete resume with detailed project information and achievements.
-                            </p>
+                            </div>
                         </div>
                         """)
                         resume_file = gr.File(label="Resume", value="resume_sreelekha_putta.pdf", interactive=False)
@@ -374,5 +242,5 @@ def create_interface():
 
 if __name__ == "__main__":
     demo = create_interface()
-    print("🚀 Launching Sreelekha Putta's Portfolio with optimized visibility for all text and elements!")
+    print("🚀 Launching Sreelekha Putta's Portfolio – consistent, clear visibility on all screens!")
     demo.launch(share=True)