Enhance success message display with portfolio options and improved sharing features

app.py

@@ -125,22 +125,38 @@ def collect_missing_data(profile):
     return profile
 
 def display_success_message(inserted_id, frontend_url):
-    """Displays a focused success message highlighting the portfolio link"""
+    """Displays a focused success message highlighting both portfolio options"""
     
     st.balloons()  # Add some celebration!
     
-    # Create a centered, visually striking container that works in both light and dark mode
+    # Create styles for the portfolio cards
     st.markdown("""
     <style>
-    .success-container {
-        background-color: rgba(40, 167, 69, 0.1);
-        border-left: 6px solid #28a745;
+    .portfolio-container {
+        display: flex;
+        gap: 20px;
+        margin: 30px 0;
+        flex-wrap: wrap;
+    }
+    .portfolio-card {
+        flex: 1;
+        min-width: 300px;
+        background-color: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(150, 150, 150, 0.2);
+        border-radius: 10px;
         padding: 20px;
-        border-radius: 5px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        margin: 20px 0;
         text-align: center;
+    }
+    .portfolio-title {
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+        color: inherit;
+    }
+    .portfolio-desc {
+        font-size: 0.9rem;
+        margin-bottom: 20px;
         color: inherit;
+        opacity: 0.8;
     }
     .portfolio-link {
         display: inline-block;
@@ -149,9 +165,15 @@ def display_success_message(inserted_id, frontend_url):
         padding: 10px 20px;
         border-radius: 5px;
         text-decoration: none;
-        margin: 20px 0;
+        margin: 10px 0;
         font-weight: bold;
-        font-size: 1.2rem;
+        font-size: 1.1rem;
+    }
+    .share-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 10px;
+        margin-top: 20px;
     }
     .share-button {
         border: 1px solid rgba(150, 150, 150, 0.3);
@@ -159,59 +181,92 @@ def display_success_message(inserted_id, frontend_url):
         border-radius: 5px;
         text-align: center;
         transition: all 0.3s;
+        text-decoration: none;
+        color: inherit;
     }
     .share-button:hover {
         background-color: rgba(100, 100, 100, 0.1);
+        transform: translateY(-2px);
     }
     </style>
     """, unsafe_allow_html=True)
     
-    # Display the main success message with inheriting text color
+    # Define portfolio URLs
+    classic_url = f"https://iportfo.netlify.app/{inserted_id}"
+    modern_url = f"https://v0-modern-portfolio-react.vercel.app/{inserted_id}"
+    
+    # Success header
     st.markdown("""
-    <div class="success-container">
+    <div style="text-align: center; margin-bottom: 30px;">
         <h1 style="color: #28a745;">🎉 Your Portfolio is Ready!</h1>
-        <p style="color: inherit;">Your professional portfolio has been created successfully and is now available online.</p>
+        <p style="color: inherit;">Choose from two beautiful portfolio designs</p>
+    </div>
     """, unsafe_allow_html=True)
     
-    # Portfolio link - make this the most prominent part with the correct URL format
-    portfolio_url = f"https://iportfo.netlify.app/{inserted_id}"
+    # Portfolio cards
     st.markdown(f"""
-    <div style="text-align: center; margin: 30px 0;">
-        <a href="{portfolio_url}" target="_blank" class="portfolio-link">
-            View Your Portfolio 🚀
-        </a>
-        <p style="margin-top: 10px; color: inherit;">Portfolio ID: <code>{inserted_id}</code></p>
-    </div>
+    <div class="portfolio-container">
+        <div class="portfolio-card">
+            <h2 class="portfolio-title">🎨 Classic Portfolio</h2>
+            <p class="portfolio-desc">Clean and professional design showcasing your experience in a traditional layout</p>
+            <a href="{classic_url}" target="_blank" class="portfolio-link">
+                View Classic Design 🚀
+            </a>
+        </div>
+        <div class="portfolio-card">
+            <h2 class="portfolio-title">✨ Modern Portfolio (Beta)</h2>
+            <p class="portfolio-desc">Contemporary and dynamic design with enhanced visual elements</p>
+            <a href="{modern_url}" target="_blank" class="portfolio-link">
+                Try Modern Design 🎯
+            </a>
+        </div>
     </div>
     """, unsafe_allow_html=True)
     
-    # Clean, simple sharing options
-    st.subheader("Share Your Portfolio")
-    col1, col2 = st.columns(2)
-    with col1:
-        st.markdown(f"""
-        <a href="https://twitter.com/intent/tweet?text=Check%20out%20my%20professional%20portfolio!&url={portfolio_url}" target="_blank" style="text-decoration: none;">
-            <div class="share-button">
-                <span style="font-size: 1.2rem;">Share on Twitter</span>
+    # Share section
+    st.subheader("📤 Share Your Portfolio")
+    
+    # Define share messages
+    linkedin_msg = "Excited to share my professional portfolio! Check out my experience and projects"
+    twitter_msg = "Check out my professional portfolio showcasing my work and experience!"
+    whatsapp_msg = "Hi! I wanted to share my professional portfolio with you. Take a look!"
+    
+    # Create share URLs
+    linkedin_share_url = f"https://www.linkedin.com/sharing/share-offsite/?url={classic_url}&summary={linkedin_msg}"
+    twitter_share_url = f"https://twitter.com/intent/tweet?text={twitter_msg}&url={classic_url}"
+    whatsapp_share_url = f"https://wa.me/?text={whatsapp_msg}%20{classic_url}"
+    
+    # Share buttons
+    st.markdown(f"""
+    <div class="share-grid">
+        <a href="{linkedin_share_url}" target="_blank" class="share-button">
+            <div>
+                <span style="font-size: 1.2rem;">LinkedIn</span>
+                <br/>
+                <small>Share with professionals</small>
+            </div>
+        </a>
+        <a href="{twitter_share_url}" target="_blank" class="share-button">
+            <div>
+                <span style="font-size: 1.2rem;">Twitter</span>
+                <br/>
+                <small>Share with your network</small>
             </div>
         </a>
-        """, unsafe_allow_html=True)
-    with col2:
-        st.markdown(f"""
-        <a href="https://www.linkedin.com/sharing/share-offsite/?url={portfolio_url}" target="_blank" style="text-decoration: none;">
-            <div class="share-button">
-                <span style="font-size: 1.2rem;">Share on LinkedIn</span>
+        <a href="{whatsapp_share_url}" target="_blank" class="share-button">
+            <div>
+                <span style="font-size: 1.2rem;">WhatsApp</span>
+                <br/>
+                <small>Share with friends</small>
             </div>
         </a>
-        """, unsafe_allow_html=True)
+    </div>
+    """, unsafe_allow_html=True)
     
-    # Option to view the portfolio directly
+    # Portfolio IDs
     st.markdown(f"""
     <div style="margin-top: 30px; text-align: center;">
-        <p>Bookmark this link to access your portfolio anytime:</p>
-        <p style="background-color: rgba(100, 100, 100, 0.1); padding: 10px; border-radius: 5px; font-family: monospace; word-break: break-all;">
-            {portfolio_url}
-        </p>
+        <p style="color: inherit;">Your Portfolio ID: <code>{inserted_id}</code></p>
     </div>
     """, unsafe_allow_html=True)
 
@@ -623,10 +678,10 @@ def main():
     
     # Final state - display success and options for new profile
     else:
-        # Show only the focused success message with portfolio link
+        # Show only the focused success message with portfolio links
         display_success_message(
             inserted_id=st.session_state.get('inserted_id'),
-            frontend_url=None  # Using direct iportfo.netlify.app URL instead
+            frontend_url=None  # Not needed anymore as we're using direct URLs
         )
         
         # Option to create another profile