Update app.py

app.py

@@ -15,20 +15,26 @@ class Portfolio:
         }
 
         self.about = """
-        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.
+        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.
         <br><br>
-        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:
+        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:
         <br><br>
-        • <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
+        • <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
         <br><br>
-        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.
+        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.
         <br><br>
-        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.
+        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.
         <br><br>
-        <strong>My goal:</strong> Shape the future of AI while making technology more <strong>human-centered, ethical, and impactful</strong>.
+        <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>.
         """
 
         self.projects = [
@@ -46,23 +52,114 @@ 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):
+        # Forces off-white text and contrast for all themes/modes.
+        return """
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+            *, *::before, *::after {
+                color: #F4F4F9 !important;
+                text-shadow: none !important;
+                box-sizing: border-box;
+            }
+            /* Background always visible */
+            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: #F4F4F9 !important;
+                margin: 0; padding: 0;
+            }
+            /* Always use readable cards */
+            .profile-header,
+            .card,
+            .project-card,
+            .stat-box,
+            .tech-tag,
+            .badge {
+                color: #F4F4F9 !important;
+                background: rgba(30,30,40,0.90) !important;
+                border-radius: 12px; border: none;
+            }
+            .profile-name { font-size: 2.5rem; font-weight: 700; color: #FFD700 !important;}
+            .profile-img {
+                width: 180px; height: 180px; border-radius: 50%;
+                border: 5px solid #a1c5ff; object-fit: cover;
+                box-shadow: 0 8px 20px rgba(0,0,0,0.5);
+                display: block; margin: 0 auto;
+            }
+            .badge {
+                background: rgba(255,255,255,0.16); padding: 8px 16px;
+                border-radius: 20px; display: inline-block; margin: 5px;
+                color: #F4F4F9 !important;
+                font-weight: 600;
+            }
+            .card-title {
+                color: #FFA500 !important;
+                font-size: 1.4rem;
+                font-weight: 700;
+            }
+            .project-card { border: 1px solid rgba(255,200,100,0.25); margin: 10px 0;}
+            .btn-primary {
+                background: linear-gradient(45deg, #FFA500, #FF6B6B);
+                color: #F4F4F9 !important; padding: 10px 20px; border-radius: 20px; 
+                text-decoration: none; font-weight: 700; display: inline-block;
+                box-shadow: 1px 1px 6px rgba(255,107,107,0.65);
+            }
+            .btn-primary:hover {
+                background: linear-gradient(45deg, #FFB733, #FF4B4B);
+                color: #fff !important;
+            }
+            .tech-tag {
+                background: rgba(135,206,235,0.22);
+                color: #F4F4F9 !important;
+                padding: 3px 8px;
+                border-radius: 8px;
+                font-size: 0.78rem;
+                display: inline-block;
+                margin: 2px;
+                font-weight: 600;
+            }
+            /* Mobile force off-white */
+            @media (max-width: 700px) {
+                body, .gradio-container, .badge, .card, .card-title, .project-card, .stat-box, .tech-tag, .btn-primary, .profile-header, * {
+                    color: #F4F4F9 !important;
+                    text-shadow: none !important;
+                    background: rgba(30,30,40,0.90) !important;
+                }
+                .btn-primary, .badge { color: #ffd700 !important; }
+            }
+        </style>
+        """
+
     def create_header(self):
         return f"""
-        <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>
+        {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>
         """
 
     def create_about(self):
         return f"""
-        <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 class="card">
+            <h2 class="card-title">👤 About Me</h2>
+            <p style="line-height: 1.8; font-size: 1.05rem;">
+                {self.about}
+            </p>
         </div>
         """
 
@@ -73,92 +170,101 @@ 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.18)',
-            line_color='#FFA500', line_width=2, marker=dict(size=6, color='#FFA500')
+            fill='toself', fillcolor='rgba(255, 165, 0, 0.3)',
+            line_color='#FFA500', line_width=2, marker=dict(size=6, color='#FF6B6B')
         ))
         fig.update_layout(
             polar=dict(
-                radialaxis=dict(visible=True, range=[0, 100]),
-                angularaxis=dict(tickfont=dict(size=13))
+                radialaxis=dict(visible=True, range=[0, 100], tickfont=dict(color='#FFD700'), gridcolor='rgba(255,255,255,0.22)'),
+                angularaxis=dict(tickfont=dict(color='#FFD700'), gridcolor='rgba(255,255,255,0.22)')
             ),
+            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=530, height=380, showlegend=False,
-            paper_bgcolor="#FFF", plot_bgcolor="#FFF"
+            width=600, height=500, showlegend=False
         )
         return fig
 
     def create_metrics_chart(self):
         metrics = ['WiseVerse', 'Idealyze', 'User Engagement', 'Efficiency Boost']
         values = [95, 85, 40, 35]
-
         fig = go.Figure(data=[go.Bar(
             x=metrics, y=values,
             marker_color=['#FFA500', '#FF6B6B', '#00FF87', '#87CEEB'],
             text=[f'{v}%' for v in values], textposition='auto',
-            textfont=dict(color='#333')
+            textfont=dict(color='#FFD700')
         )])
         fig.update_layout(
             title=dict(text="Key Project Metrics", font=dict(size=18, color='#FFA500')),
-            xaxis=dict(title="Projects/Metrics"),
-            yaxis=dict(title="Percentage"),
-            paper_bgcolor="#FFF", plot_bgcolor="#FFF",
-            width=530, height=330
+            xaxis=dict(title="Projects/Metrics", tickfont=dict(color='#FFD700'), gridcolor='rgba(255,255,255,0.14)'),
+            yaxis=dict(title="Percentage", tickfont=dict(color='#FFD700'), gridcolor='rgba(255,255,255,0.14)'),
+            paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)',
+            width=600, height=400
         )
         return fig
 
 def create_interface():
     portfolio = Portfolio()
-
-    with gr.Blocks(theme=gr.themes.HuggingFace(), title="Sreelekha Putta - AI Engineer Portfolio") as demo:
+    css = """
+    .gradio-container { background: linear-gradient(135deg, #0f0f0f, #1a1a1a) !important; }
+    .gr-button { background: linear-gradient(45deg, #FFA500, #FF6B6B) !important; color: #F4F4F9 !important; }
+    """
+    with gr.Blocks(css=css, 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=185,
-                    width=185,
+                    height=200,
+                    width=200,
                     type="filepath",
-                    container=True
+                    container=True,
+                    elem_classes=["profile-image-container"]
                 )
+
         gr.HTML(portfolio.create_header())
+
         with gr.Tabs():
             with gr.Tab("👤 About"):
                 gr.HTML(portfolio.create_about())
-                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>
+                with gr.Row():
+                    gr.HTML("""
+                    <div class="card">
+                        <h2 class="card-title">🎓 Education</h2>
+                        <div style="background: rgba(255,165,0,0.14); padding: 15px; border-radius: 10px;">
+                            <h3 style="color: #FFD700;">B.Tech in Information Technology(AI/ML Specialization)</h3>
+                            <p style="color: #F4F4F9;">JNTUH College of Engineering Jagitial</p>
+                            <p style="color: #FFD700;">2022 – 2026 | CGPA: 8.0</p>
+                        </div>
                     </div>
                     """)
+
             with gr.Tab("💼 Experience"):
-                exp_html = '<div style="background:#FFF; border-radius:11px; padding:18px;">'
-                exp_html += '<h2 style="color:#FFA500; margin-bottom:10px;">Professional Experience</h2>'
+                exp_html = '<div class="card"><h2 class="card-title">Professional Experience</h2>'
                 for exp in portfolio.experience:
                     exp_html += f"""
-                    <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;">
+                    <div class="project-card">
+                        <h3 style="color: #FFD700;">{exp['role']}</h3>
+                        <p style="color: #F4F4F9;">{exp['company']} | {exp['duration']}</p>
+                        <ul style="color: #F4F4F9; margin-top: 10px;">
                     """
                     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 style="background:#FFF; border-radius:11px; padding:18px;"><h2 style="color:#FFA500; margin-bottom:10px;">Featured Projects</h2>'
+                proj_html = '<div class="card"><h2 class="card-title">Featured Projects</h2>'
                 for proj in portfolio.projects:
-                    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']])
+                    tags = ''.join([f'<span class="tech-tag">{t}</span>' for t in proj['tech']])
                     proj_html += f"""
-                    <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 class="project-card">
+                        <h3 style="color: #FFD700; margin-bottom: 10px;">{proj['name']}</h3>
+                        <p style="color: #F4F4F9; 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>
                     """
                 proj_html += '</div>'
@@ -170,42 +276,42 @@ def create_interface():
                         gr.Plot(portfolio.create_skills_chart())
                     with gr.Column():
                         gr.HTML("""
-                        <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 class="card">
+                            <h2 class="card-title">Technical Skills</h2>
+                            <p style="color: #F4F4F9; line-height: 2;">
+                                <strong style="color: #FFD700;">Programming:</strong> Python, C, Java, SQL<br>
+                                <strong style="color: #FFD700;">AI/ML:</strong> Machine Learning, Deep Learning, NLP, Generative AI, LLMs<br>
+                                <strong style="color: #FFD700;">Frameworks:</strong> TensorFlow, PyTorch, Hugging Face, Flask<br>
+                                <strong style="color: #FFD700;">Tools:</strong> Git/GitHub, NumPy, Pandas, Matplotlib, Seaborn<br>
+                                <strong style="color: #FFD700;">Specialization:</strong> Prompt Engineering, Full-stack AI Deployment
+                            </p>
+                            <h2 class="card-title" style="margin-top: 20px;">Soft Skills</h2>
+                            <p style="color: #F4F4F9; 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>
                         """)
 
             with gr.Tab("🏆 Achievements"):
                 gr.HTML("""
-                <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 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>
-                        <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 class="stat-box">
+                            <div class="stat-number">🎤 1000+</div>
+                            <p style="margin-top: 8px;">Hosted Cultural Night 2025 at JNTUH</p>
                         </div>
-                        <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 class="stat-box">
+                            <div class="stat-number">🚀 5+ Apps</div>
+                            <p style="margin-top: 8px;">Deployed on Hugging Face Spaces</p>
                         </div>
                     </div>
                 </div>
@@ -215,25 +321,32 @@ def create_interface():
                 with gr.Row():
                     with gr.Column():
                         gr.HTML(f"""
-                        <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 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>
-                            <div style="color: #FFA500; font-size: 1.04rem; text-align: center; font-style: italic; margin-top: 14px;">
+                            <p style="color: #FFA500; font-size: 1.2rem; text-align: center; font-style: italic; margin-top: 20px;">
                                 "Building AI with consciousness, creating technology with soul"
-                            </div>
+                            </p>
                         </div>
                         """)
+
                     with gr.Column():
                         gr.HTML("""
-                        <div style="background:#FFF;border-radius:10px;padding:15px;">
-                            <h2 style="color:#FFA500;">📄 Download Resume</h2>
-                            <div style="margin-bottom:12px; color:#232323;">
+                        <div class="card">
+                            <h2 class="card-title">📄 Download Resume</h2>
+                            <p style="margin-bottom: 15px;">
                                 Get my complete resume with detailed project information and achievements.
-                            </div>
+                            </p>
                         </div>
                         """)
                         resume_file = gr.File(label="Resume", value="resume_sreelekha_putta.pdf", interactive=False)
@@ -242,5 +355,5 @@ def create_interface():
 
 if __name__ == "__main__":
     demo = create_interface()
-    print("🚀 Launching Sreelekha Putta's Portfolio – consistent, clear visibility on all screens!")
+    print("🚀 Launching Sreelekha Putta's Portfolio with improved white text everywhere...")
     demo.launch(share=True)