Update app.py

app.py

@@ -41,6 +41,8 @@ summary = (
     "tools (e.g., n8n, Copilot, Cursor), and mentoring through technical content. As an ALX alumna, I have a "
     "hands-on mindset and a continuous learning attitude. I am also the author of a technical blog on "
     "software engineering and AI systems: shazaali.substack.com."
+    "I worked on projects like: Mediconsult, E-commerce, and more. So proud of RAG chatbot I built for suplyd.app"
+
 )
 
 linkedin_text = "My LinkedIn Profile: https://www.linkedin.com/in/shazaali/\n\n"
@@ -92,7 +94,149 @@ def chat(message, history):
 
 # We use gr.Blocks() to get more control and apply custom CSS reliably.
 with gr.Blocks(theme=cheerful_theme, css="""
-    .gradio-container { font-size: 18px !important; }
+    /* Increase base font size for the entire app */
+    .gradio-container {
+        font-size: 18px !important;
+        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ff 100%) !important;
+    }
+
+    /* Make chat messages bigger and more cheerful */
+    .message-wrap { font-size: 20px !important; }
+    .user-message { background-color: #f0e6ff !important; border-radius: 18px !important; }
+    .bot-message { background-color: #f9f5ff !important; border-radius: 18px !important; }
+
+    /* Add a subtle bounce animation to messages */
+    @keyframes bounce {
+        0% { transform: translateY(0); }
+        20% { transform: translateY(-10px); }
+        40% { transform: translateY(0); }
+    }
+    .message:last-child {
+        animation: bounce 1s ease;
+    }
+
+    /* Make the title and description bigger and more colorful */
+    h1 {
+        font-size: 36px !important;
+        font-weight: 700 !important;
+        margin-bottom: 16px !important;
+        background: linear-gradient(90deg, #9333ea, #e879f9);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
+    }
+    h2, h3 { font-size: 24px !important; color: #9333ea !important; }
+
+    /* Make buttons bigger and more cheerful */
+    button {
+        font-size: 18px !important;
+        padding: 12px 20px !important;
+        border-radius: 12px !important;
+        transition: all 0.3s ease !important;
+    }
+    button:hover {
+        transform: translateY(-3px) !important;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    /* Make input box MUCH bigger and friendlier */
+    textarea, .chat-input-row textarea {
+        font-size: 24px !important;
+        line-height: 1.5 !important;
+        padding: 16px !important;
+        min-height: 100px !important;
+        border-radius: 16px !important;
+        border: 2px solid #d8b4fe !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.3s ease !important;
+    }
+    textarea:focus {
+        border-color: #9333ea !important;
+        box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3) !important;
+    }
+
+    /* Make the input container bigger */
+    .chat-input-row {
+        padding: 20px !important;
+        margin-top: 20px !important;
+    }
+
+    /* Make examples MUCH bigger and more playful */
+    .examples-panel .gr-button {
+        font-size: 26px !important;
+        background-color: #f0e6ff !important;
+        border: 2px solid #d8b4fe !important;
+        margin: 10px !important;
+        padding: 20px 24px !important;
+        transition: all 0.3s ease !important;
+        border-radius: 16px !important;
+        font-weight: 600 !important;
+        color: #7e22ce !important;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
+        display: block !important;
+        width: 100% !important;
+        text-align: left !important;
+    }
+    .examples-panel .gr-button:hover {
+        background-color: #e9d5ff !important;
+        transform: scale(1.03) !important;
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
+        border-color: #a855f7 !important;
+    }
+
+    /* Make the examples section more prominent */
+    .examples-panel {
+        padding: 20px !important;
+        background-color: rgba(255, 255, 255, 0.8) !important;
+        border-radius: 20px !important;
+        margin-top: 24px !important;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
+        border: 1px solid #f3e8ff !important;
+    }
+
+    /* Make the examples title bigger */
+    .examples-panel .prose h2 {
+        font-size: 28px !important;
+        margin-bottom: 20px !important;
+        color: #7e22ce !important;
+        text-align: center !important;
+        font-weight: 700 !important;
+    }
+
+    /* Add emoji to examples title */
+    .examples-panel .prose h2::before {
+        content: "✨ ";
+    }
+    .examples-panel .prose h2::after {
+        content: " ✨";
+    }
+
+    /* Add more space between chat messages */
+    .message {
+        padding: 16px !important;
+        margin-bottom: 16px !important;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
+    }
+
+    /* Make the chat container wider */
+    .chat-container { max-width: 90% !important; margin: 0 auto !important; }
+
+    /* Increase padding in the entire app */
+    .gradio-container { padding: 20px !important; }
+
+    /* Make the submit button more prominent and cheerful */
+    .submit-btn {
+        background: linear-gradient(90deg, #9333ea, #d946ef) !important;
+        color: white !important;
+        font-weight: bold !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+        font-size: 22px !important;
+        padding: 15px 25px !important;
+    }
+    .submit-btn:hover {
+        background: linear-gradient(90deg, #7e22ce, #c026d3) !important;
+        transform: translateY(-2px) !important;
+    }
 """) as interface:
     gr.ChatInterface(
         fn=chat,