Spaces:

Sumit404
/

portfolio

Runtime error

App Files Files Community

Sumit404 commited on Apr 23, 2025

Commit

0e5ac9b

verified ·

1 Parent(s): 4250149

Update app.py

Browse files

Files changed (1) hide show

app.py +369 -103

app.py CHANGED Viewed

@@ -25,7 +25,7 @@ except Exception as e:
         logger.error(f"Failed to download spaCy model: {str(download_error)}")
         raise Exception("Cannot proceed without 'en_core_web_sm' model. Please ensure it is installed.")
-# HTML template using Bootstrap (responsive design)
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
@@ -33,104 +33,316 @@ HTML_TEMPLATE = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{NAME} - IT Portfolio</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {{
-            font-family: 'Arial', sans-serif;
-            background: {BG_COLOR};
-            color: {TEXT_COLOR};
         }}
-        .container {{
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 20px;
-            background: {CARD_BG_COLOR};
-            border-radius: 10px;
-            box-shadow: 0 0 15px rgba(0,0,0,0.1);
         }}
-        .header {{
-            text-align: center;
-            margin-bottom: 30px;
         }}
-        .header h1 {{
-            font-size: 2.5rem;
-            margin-bottom: 10px;
         }}
-        .section {{
-            margin-bottom: 30px;
         }}
-        .section h2 {{
-            font-size: 1.8rem;
-            border-bottom: 2px solid {PRIMARY_COLOR};
-            padding-bottom: 5px;
-            margin-bottom: 15px;
         }}
-        .skills-list {{
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
         }}
-        .skill-chip {{
-            background: {PRIMARY_COLOR};
-            color: white;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 0.9rem;
         }}
-        .download-btn {{
-            display: block;
-            text-align: center;
-            margin-top: 20px;
         }}
-        .download-btn a {{
-            background: {PRIMARY_COLOR};
-            color: white;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 5px;
         }}
-        .download-btn a:hover {{
-            background: {SECONDARY_COLOR};
         }}
-        @media (max-width: 768px) {{
-            .header h1 {{
-                font-size: 1.8rem;
             }}
-            .section h2 {{
-                font-size: 1.5rem;
             }}
         }}
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>{NAME}</h1>
-            <p>{EMAIL} | {PHONE}</p>
         </div>
-        <div class="section">
-            <h2>Education</h2>
             {EDUCATION}
         </div>
-        <div class="section">
-            <h2>Work Experience</h2>
             {EXPERIENCE}
         </div>
-        <div class="section">
-            <h2>Projects</h2>
             {PROJECTS}
         </div>
-        <div class="section">
-            <h2>Skills</h2>
-            <div class="skills-list">
                 {SKILLS}
             </div>
         </div>
-        <div class="download-btn">
-            <a href="portfolio.html" download>Download Portfolio</a>
         </div>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
 """
@@ -164,7 +376,7 @@ def extract_details(resume_text):
         email = "your.email@example.com"
         phone = "555-555-5555"
         email_pattern = r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b'
-        phone_pattern = r'\b\d{3}-\d{3}-\d{4}\b'
         for line in lines:
             if re.search(email_pattern, line):
                 email = html.escape(re.search(email_pattern, line).group())
@@ -172,23 +384,59 @@ def extract_details(resume_text):
                 phone = html.escape(re.search(phone_pattern, line).group())
         # Extract education
-        education_keywords = ["degree", "university", "college", "master", "bachelor", "b.tech", "m.tech"]
         education = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in education_keywords)]
-        education_html = "".join(f"<p>{html.escape(edu)}</p>" for edu in education) if education else "<p>Not provided</p>"
         # Extract experience
-        experience_keywords = ["intern", "software", "research", "engineer", "developer"]
         experience = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in experience_keywords)]
-        experience_html = "".join(f"<p>{html.escape(exp)}</p>" for exp in experience) if experience else "<p>Not provided</p>"
         # Extract projects
-        project_keywords = ["project", "developed", "built"]
         projects = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in project_keywords)]
-        projects_html = "".join(f"<p>{html.escape(proj)}</p>" for proj in projects) if projects else "<p>Not provided</p>"
         # Extract skills
         skills_line = next((line for line in lines if "skills" in line.lower()), "")
-        known_skills = ["python", "javascript", "nlp", "cnns", "aws", "flask", "fastapi", "sql", "docker", "kubernetes", "teamwork", "communication"]
         skills = []
         if skills_line:
             for skill in known_skills:
@@ -198,13 +446,44 @@ def extract_details(resume_text):
         for skill in trending_skills:
             if skill.lower() not in [s.lower() for s in skills]:
                 skills.append(skill)
-        skills_html = "".join(f'<span class="skill-chip">{html.escape(skill.title())}</span>' for skill in skills) if skills else "<span>Not provided</span>"
         logger.info("Successfully extracted details from resume.")
-        return name, email, phone, education_html, experience_html, projects_html, skills_html, skills
     except Exception as e:
         logger.error(f"Error extracting details: {str(e)}")
-        return "[Your Name]", "your.email@example.com", "555-555-5555", f"Error: {str(e)}", f"Error: {str(e)}", f"Error: {str(e)}", f"Error: {str(e)}", []
 def generate_portfolio(file, theme="Light"):
     try:
@@ -227,21 +506,7 @@ def generate_portfolio(file, theme="Light"):
             return resume_text, resume_text
         # Extract details from the resume
-        name, email, phone, education_html, experience_html, projects_html, skills_html, skills = extract_details(resume_text)
-        # Determine theme colors
-        if theme == "Dark":
-            bg_color = "#1a202c"
-            text_color = "#e2e8f0"
-            card_bg_color = "#2d3748"
-            primary_color = "#63b3ed"
-            secondary_color = "#4299e1"
-        else:
-            bg_color = "#f5f7fa"
-            text_color = "#1a202c"
-            card_bg_color = "#ffffff"
-            primary_color = "#4a90e2"
-            secondary_color = "#63b3ed"
         # Generate the portfolio HTML
         html_code = HTML_TEMPLATE.format(
@@ -252,22 +517,19 @@ def generate_portfolio(file, theme="Light"):
             EXPERIENCE=experience_html,
             PROJECTS=projects_html,
             SKILLS=skills_html,
-            BG_COLOR=bg_color,
-            TEXT_COLOR=text_color,
-            CARD_BG_COLOR=card_bg_color,
-            PRIMARY_COLOR=primary_color,
-            SECONDARY_COLOR=secondary_color
         )
         # Save to index.html
         with open("index.html", "w", encoding="utf-8") as f:
             f.write(html_code)
-        # Preview HTML for Gradio
         html_preview = f"""
-        <div style='font-family: Arial; max-width: 800px; margin: auto; padding: 20px; background: {card_bg_color}; box-shadow: 0 0 10px rgba(0,0,0,0.1);'>
             <h1 style='text-align: center;'>{name}</h1>
-            <p style='text-align: center;'>{email} | {phone}</p>
             <h2>Education</h2>
             {education_html}
             <h2>Work Experience</h2>
@@ -278,6 +540,10 @@ def generate_portfolio(file, theme="Light"):
             <div style='display: flex; flex-wrap: wrap; gap: 10px;'>
                 {skills_html}
             </div>
         </div>
         """

         logger.error(f"Failed to download spaCy model: {str(download_error)}")
         raise Exception("Cannot proceed without 'en_core_web_sm' model. Please ensure it is installed.")
+# HTML template using Tailwind CSS and AOS (provided by user)
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{NAME} - IT Portfolio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <style>
         body {{
+            font-family: 'Inter', sans-serif;
+            scroll-behavior: smooth;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }}
+        .section-heading {{
+            font-size: 1.25rem sm:1.5rem lg:2rem;
+            font-weight: 800;
+            color: #1a202c;
+            margin-bottom: 1.25rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }}
+        .card {{
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 1rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            padding: 1rem sm:1.5rem;
+            margin-bottom: 1rem;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
         }}
+        .card:hover {{
+            transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
         }}
+        .navbar {{
+            backdrop-filter: blur(12px);
+            background: rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
         }}
+        .nav-link {{
+            position: relative;
+            transition: color 0.3s ease;
         }}
+        .nav-link:hover::after {{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            bottom: -4px;
+            left: 0;
+            background: #4a90e2;
+            animation: underline 0.3s ease forwards;
+        }}
+        @keyframes underline {{
+            from {{ width: 0; }}
+            to {{ width: 100%; }}
+        }}
+        .skill-bar {{
+            height: 8px;
+            background: #e2e8f0;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-top: 0.5rem;
+        }}
+        .skill-progress {{
+            height: 100%;
+            background: linear-gradient(90deg, #4a90e2, #63b3ed);
+            transition: width 1s ease-in-out;
+        }}
+        .hero-text {{
+            animation: fadeInUp 1s ease-out;
+        }}
+        @keyframes fadeInUp {{
+            from {{ opacity: 0; transform: translateY(20px); }}
+            to {{ opacity: 1; transform: translateY(0); }}
+        }}
+        .btn-3d {{
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.2s ease;
+        }}
+        .btn-3d:hover {{
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }}
+        .btn-3d::before {{
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+            transition: 0.5s;
         }}
+        .btn-3d:hover::before {{
+            left: 100%;
         }}
+        .profile-img {{
+            border: 4px solid white;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }}
+        .hamburger {{
+            display: none;
         }}
+        .nav-menu {{
+            display: flex;
+        }}
+        @media (max-width: 640px) {{
+            .hamburger {{
+                display: block;
+                cursor: pointer;
+            }}
+            .nav-menu {{
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                top: 64px;
+                right: 0;
+                width: 100%;
+                background: rgba(255, 255, 255, 0.95);
+                padding: 0.75rem;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            }}
+            .nav-menu.active {{
+                display: flex;
+            }}
+            .nav-link {{
+                padding: 0.5rem 1rem;
+                text-align: center;
+            }}
+            .section-heading {{
+                font-size: 1rem;
+            }}
+            .card {{
+                padding: 0.75rem;
+            }}
+            .profile-img {{
+                width: 100px;
+                height: 100px;
             }}
+            .hero-text h1 {{
+                font-size: 1.75rem;
+            }}
+            .hero-text p {{
+                font-size: 0.875rem;
+            }}
+            .btn-3d {{
+                padding: 0.5rem 1rem;
+                font-size: 0.75rem;
+            }}
+        }}
+        @media (min-width: 641px) and (max-width: 768px) {{
+            .profile-img {{
+                width: 120px;
+                height: 120px;
             }}
         }}
     </style>
 </head>
 <body>
+    <!-- Navbar -->
+    <nav class="navbar fixed top-0 w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <span class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">{NAME}</span>
+                </div>
+                <div class="flex items-center">
+                    <div class="hamburger sm:hidden">
+                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </div>
+                    <div class="nav-menu sm:flex sm:items-center sm:space-x-2 lg:space-x-4">
+                        <a href="#home" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Home</a>
+                        <a href="#about" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">About</a>
+                        <a href="#education" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Education</a>
+                        <a href="#experience" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Experience</a>
+                        <a href="#projects" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Projects</a>
+                        <a href="#skills" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Skills</a>
+                        <a href="#involvement" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Involvement</a>
+                        <a href="#contact" class="nav-link text-gray-600 hover:text-gray-900 px-2 py-2 rounded-md text-xs sm:text-sm font-medium">Contact</a>
+                    </div>
+                </div>
+            </div>
         </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-600 to-purple-700">
+        <div class="text-center text-white hero-text" data-aos="fade-up">
+            <img src="https://via.placeholder.com/150" alt="{NAME}" class="profile-img w-24 h-24 sm:w-36 sm:h-36 lg:w-48 lg:h-48 rounded-full mx-auto mb-3 sm:mb-4 object-cover">
+            <h1 class="text-xl sm:text-3xl lg:text-5xl font-bold mb-3 sm:mb-4">{NAME}</h1>
+            <p class="text-sm sm:text-base lg:text-xl mb-4 sm:mb-6">{SKILLS_SUMMARY}</p>
+            <a href="#contact" class="btn-3d bg-white text-blue-600 px-3 sm:px-4 py-1 sm:py-2 rounded-full font-semibold text-xs sm:text-base">Get in Touch</a>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-8 sm:py-12 lg:py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">About Me</h2>
+            <div class="card" data-aos="fade-up" data-aos-delay="100">
+                <p class="text-gray-700 leading-relaxed text-xs sm:text-sm lg:text-base">
+                    I’m {NAME}, a passionate IT professional specializing in electrical engineering and machine learning. I thrive in dynamic environments, driving innovation through projects like Short-term Traffic Prediction Using DTC. My expertise includes building scalable solutions with a focus on tensor completion and traffic data analysis.
+                </p>
+            </div>
+        </div>
+    </section>
+    <!-- Education Section -->
+    <section id="education" class="py-8 sm:py-12 lg:py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">Education</h2>
             {EDUCATION}
         </div>
+    </section>
+    <!-- Experience Section -->
+    <section id="experience" class="py-8 sm:py-12 lg:py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">Experience</h2>
             {EXPERIENCE}
         </div>
+    </section>
+    <!-- Projects Section -->
+    <section id="projects" class="py-8 sm:py-12 lg:py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">Projects</h2>
             {PROJECTS}
         </div>
+    </section>
+    <!-- Skills Section -->
+    <section id="skills" class="py-8 sm:py-12 lg:py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">Skills</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
                 {SKILLS}
             </div>
         </div>
+    </section>
+    <!-- Involvement Section -->
+    <section id="involvement" class="py-8 sm:py-12 lg:py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">Involvement</h2>
+            {INVOLVEMENT}
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-8 sm:py-12 lg:py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="section-heading text-center" data-aos="fade-up">Contact</h2>
+            <div class="card" data-aos="fade-up" data-aos-delay="100">
+                <p class="text-gray-700 text-xs sm:text-sm">Email: <a href="mailto:{EMAIL}" class="text-blue-600 hover:underline">{EMAIL}</a></p>
+                <p class="text-gray-700 text-xs sm:text-sm">Phone: {PHONE}</p>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-4 sm:py-6">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p class="text-xs sm:text-sm">© 2025 {NAME}. All rights reserved.</p>
         </div>
+    </footer>
+    <!-- Scripts -->
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        // Initialize AOS
+        AOS.init({{
+            duration: 800,
+            once: true
+        }});
+        // Hamburger Menu Toggle
+        const hamburger = document.querySelector('.hamburger');
+        const navMenu = document.querySelector('.nav-menu');
+        hamburger.addEventListener('click', () => {{
+            navMenu.classList.toggle('active');
+        }});
+        // Close menu when clicking a link
+        document.querySelectorAll('.nav-link').forEach(link => {{
+            link.addEventListener('click', (e) => {{
+                e.preventDefault();
+                navMenu.classList.remove('active');
+                const targetId = link.getAttribute('href').substring(1);
+                const targetSection = document.getElementById(targetId);
+                targetSection.scrollIntoView({{ behavior: 'smooth' }});
+            }});
+        }});
+        // Skill Bar Animation
+        const skillBars = document.querySelectorAll('.skill-progress');
+        const animateSkills = () => {{
+            skillBars.forEach(bar => {{
+                const progress = bar.getAttribute('data-progress');
+                bar.style.width = `${{progress}}%`;
+            }});
+        }};
+        window.addEventListener('scroll', () => {{
+            const skillsSection = document.getElementById('skills');
+            const sectionTop = skillsSection.getBoundingClientRect().top;
+            if (sectionTop < window.innerHeight * 0.8) {{
+                animateSkills();
+                window.removeEventListener('scroll', animateSkills);
+            }}
+        }});
+    </script>
 </body>
 </html>
 """
         email = "your.email@example.com"
         phone = "555-555-5555"
         email_pattern = r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b'
+        phone_pattern = r'\b\d{3}-\d{3}-\d{4}\b|\+\d{2}-\d{10}\b'
         for line in lines:
             if re.search(email_pattern, line):
                 email = html.escape(re.search(email_pattern, line).group())
                 phone = html.escape(re.search(phone_pattern, line).group())
         # Extract education
+        education_keywords = ["degree", "university", "college", "master", "bachelor", "b.tech", "m.tech", "school", "12th", "10th"]
         education = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in education_keywords)]
+        education_html = ""
+        for i, edu in enumerate(education, 1):
+            edu = html.escape(edu)
+            education_html += f"""
+            <div class="card" data-aos="fade-up" data-aos-delay="{100 * i}">
+                <p class="text-gray-700 text-xs sm:text-sm">{edu}</p>
+            </div>
+            """
+        education_html = education_html if education else """
+        <div class="card" data-aos="fade-up" data-aos-delay="100">
+            <p class="text-gray-700 text-xs sm:text-sm">Not provided</p>
+        </div>
+        """
         # Extract experience
+        experience_keywords = ["intern", "software", "research", "engineer", "developer", "mentor", "guide"]
         experience = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in experience_keywords)]
+        experience_html = ""
+        for i, exp in enumerate(experience, 1):
+            exp = html.escape(exp)
+            experience_html += f"""
+            <div class="card" data-aos="fade-up" data-aos-delay="{100 * i}">
+                <p class="text-gray-700 text-xs sm:text-sm">{exp}</p>
+            </div>
+            """
+        experience_html = experience_html if experience else """
+        <div class="card" data-aos="fade-up" data-aos-delay="100">
+            <p class="text-gray-700 text-xs sm:text-sm">Not provided</p>
+        </div>
+        """
         # Extract projects
+        project_keywords = ["project", "developed", "built", "implemented"]
         projects = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in project_keywords)]
+        projects_html = ""
+        for i, proj in enumerate(projects, 1):
+            proj = html.escape(proj)
+            projects_html += f"""
+            <div class="card" data-aos="fade-up" data-aos-delay="{100 * i}">
+                <p class="text-gray-700 text-xs sm:text-sm">{proj}</p>
+            </div>
+            """
+        projects_html = projects_html if projects else """
+        <div class="card" data-aos="fade-up" data-aos-delay="100">
+            <p class="text-gray-700 text-xs sm:text-sm">Not provided</p>
+        </div>
+        """
         # Extract skills
         skills_line = next((line for line in lines if "skills" in line.lower()), "")
+        known_skills = ["python", "javascript", "nlp", "cnns", "aws", "flask", "fastapi", "sql", "docker", "kubernetes", "teamwork", "communication", "c++", "matlab", "html/css"]
         skills = []
         if skills_line:
             for skill in known_skills:
         for skill in trending_skills:
             if skill.lower() not in [s.lower() for s in skills]:
                 skills.append(skill)
+        skills_html = ""
+        for i, skill in enumerate(skills, 1):
+            skill = html.escape(skill.title())
+            skills_html += f"""
+            <div class="card" data-aos="fade-up" data-aos-delay="{100 * i}">
+                <h3 class="text-xs sm:text-sm lg:text-base font-semibold text-gray-800">{skill}</h3>
+                <div class="skill-bar"><div class="skill-progress" style="width: 0%;" data-progress="{80 + (i % 20)}"></div></div>
+            </div>
+            """
+        skills_html = skills_html if skills else """
+        <div class="card" data-aos="fade-up" data-aos-delay="100">
+            <p class="text-gray-700 text-xs sm:text-sm">Not provided</p>
+        </div>
+        """
+        skills_summary = ", ".join(skills[:3]) if skills else "IT Professional"
+        # Extract involvement
+        involvement_keywords = ["co-captain", "volunteer", "participant", "member"]
+        involvement = [line.strip() for line in lines if any(keyword.lower() in line.lower() for keyword in involvement_keywords)]
+        involvement_html = ""
+        for i, inv in enumerate(involvement, 1):
+            inv = html.escape(inv)
+            involvement_html += f"""
+            <div class="card" data-aos="fade-up" data-aos-delay="{100 * i}">
+                <p class="text-gray-700 text-xs sm:text-sm">{inv}</p>
+            </div>
+            """
+        involvement_html = involvement_html if involvement else """
+        <div class="card" data-aos="fade-up" data-aos-delay="100">
+            <p class="text-gray-700 text-xs sm:text-sm">Not provided</p>
+        </div>
+        """
         logger.info("Successfully extracted details from resume.")
+        return name, email, phone, education_html, experience_html, projects_html, skills_html, involvement_html, skills_summary, skills
     except Exception as e:
         logger.error(f"Error extracting details: {str(e)}")
+        return "[Your Name]", "your.email@example.com", "555-555-5555", f"Error: {str(e)}", f"Error: {str(e)}", f"Error: {str(e)}", f"Error: {str(e)}", f"Error: {str(e)}", "IT Professional", []
 def generate_portfolio(file, theme="Light"):
     try:
             return resume_text, resume_text
         # Extract details from the resume
+        name, email, phone, education_html, experience_html, projects_html, skills_html, involvement_html, skills_summary, skills = extract_details(resume_text)
         # Generate the portfolio HTML
         html_code = HTML_TEMPLATE.format(
             EXPERIENCE=experience_html,
             PROJECTS=projects_html,
             SKILLS=skills_html,
+            INVOLVEMENT=involvement_html,
+            SKILLS_SUMMARY=skills_summary
         )
         # Save to index.html
         with open("index.html", "w", encoding="utf-8") as f:
             f.write(html_code)
+        # Preview HTML for Gradio (simplified, as Gradio can't render full animations)
         html_preview = f"""
+        <div style='font-family: Arial; max-width: 800px; margin: auto; padding: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1);'>
             <h1 style='text-align: center;'>{name}</h1>
+            <p style='text-align: center;'>{skills_summary}</p>
             <h2>Education</h2>
             {education_html}
             <h2>Work Experience</h2>
             <div style='display: flex; flex-wrap: wrap; gap: 10px;'>
                 {skills_html}
             </div>
+            <h2>Involvement</h2>
+            {involvement_html}
+            <h2>Contact</h2>
+            <p>Email: {email} | Phone: {phone}</p>
         </div>
         """