Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gya-ank Resume Forge | AnkTechSol</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .status-match { | |
| background-color: #d1fae5; | |
| color: #065f46; | |
| } | |
| .status-missing { | |
| background-color: #fee2e2; | |
| color: #b91c1c; | |
| } | |
| .status-niche { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 14px; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .skill-badge { | |
| transition: all 0.2s ease; | |
| } | |
| .skill-badge:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .resume-card { | |
| transition: all 0.3s ease; | |
| } | |
| .resume-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| #resumeTextarea { | |
| min-height: 200px; | |
| transition: border-color 0.3s; | |
| } | |
| #resumeTextarea:focus { | |
| border-color: #818cf8; | |
| } | |
| #updatedResume { | |
| white-space: pre-wrap; | |
| background-color: #f8fafc; | |
| border-radius: 0.5rem; | |
| } | |
| .floating-help { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| z-index: 100; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Floating Help Button --> | |
| <div class="floating-help"> | |
| <button id="helpBtn" class="bg-indigo-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center animate-pulse"> | |
| <i class="fas fa-question text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Help Modal --> | |
| <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-2xl font-bold text-indigo-700">Gya-ank Help Center</h3> | |
| <button id="closeHelpModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-indigo-50 rounded-lg"> | |
| <h4 class="font-bold text-indigo-800 mb-2"><i class="fas fa-upload mr-2"></i>Uploading Your Resume</h4> | |
| <p class="text-gray-700">You can upload your resume in PDF or text format. For best results, ensure your resume includes clear sections for skills, experience, and education. Our AI will parse this information to provide personalized recommendations.</p> | |
| </div> | |
| <div class="p-4 bg-purple-50 rounded-lg"> | |
| <h4 class="font-bold text-purple-800 mb-2"><i class="fas fa-bullseye mr-2"></i>Setting Your Target Role</h4> | |
| <p class="text-gray-700">Be as specific as possible when entering your target role. For example, "Senior Data Scientist - Generative AI" will yield better results than just "Data Scientist". Our system uses this to fetch the most relevant market data.</p> | |
| </div> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <h4 class="font-bold text-blue-800 mb-2"><i class="fas fa-chart-bar mr-2"></i>Understanding Gap Analysis</h4> | |
| <p class="text-gray-700">The gap analysis compares your current skills with those in demand for your target role. <span class="bg-green-100 text-green-800 px-1">Green</span> skills are your strengths, <span class="bg-red-100 text-red-800 px-1">red</span> are high-priority gaps, and <span class="bg-yellow-100 text-yellow-800 px-1">yellow</span> are skills you have that aren't currently in high demand.</p> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <h4 class="font-bold text-green-800 mb-2"><i class="fas fa-graduation-cap mr-2"></i>Learning Plan</h4> | |
| <p class="text-gray-700">Our AI generates a personalized learning path based on your skill gaps. Each recommendation includes curated resources to help you efficiently acquire the most valuable skills for your career goals.</p> | |
| </div> | |
| <div class="p-4 bg-yellow-50 rounded-lg"> | |
| <h4 class="font-bold text-yellow-800 mb-2"><i class="fas fa-file-alt mr-2"></i>Optimized Resume</h4> | |
| <p class="text-gray-700">The optimized resume incorporates industry keywords and highlights your most relevant qualifications. It's formatted to pass through Applicant Tracking Systems (ATS) while remaining human-readable.</p> | |
| </div> | |
| <div class="text-center pt-4"> | |
| <p class="text-gray-600">Need more help? Contact our support team at <a href="mailto:[email protected]" class="text-indigo-600 hover:underline">[email protected]</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-indigo-700 to-purple-700 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://via.placeholder.com/50" alt="AnkTechSol Logo" class="h-12 w-12 rounded-full border-2 border-white"> | |
| <div> | |
| <h1 class="text-3xl font-bold">Gya-ank Resume Forge</h1> | |
| <p class="text-indigo-200 text-sm">AI-powered resume optimization for the modern job market</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="#" class="text-white hover:text-indigo-200 transition"><i class="fas fa-home mr-1"></i> Home</a> | |
| <a href="#" class="text-white hover:text-indigo-200 transition"><i class="fas fa-book mr-1"></i> Tutorial</a> | |
| <a href="#" class="text-white hover:text-indigo-200 transition"><i class="fas fa-envelope mr-1"></i> Contact</a> | |
| <a href="https://anktechsol.com" target="_blank" class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-indigo-100 transition flex items-center"> | |
| <i class="fas fa-external-link-alt mr-2"></i> Visit AnkTechSol | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-8 mb-10 bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-100"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">Transform Your Resume with AI</h2> | |
| <p class="text-xl text-gray-600 mb-6">Gya-ank analyzes your resume against real-time market demands and helps you bridge the skills gap to land your dream job.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <div class="bg-white px-4 py-2 rounded-full shadow-md flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm font-medium">ATS Optimized</span> | |
| </div> | |
| <div class="bg-white px-4 py-2 rounded-full shadow-md flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-sm font-medium">Real-time Market Data</span> | |
| </div> | |
| <div class="bg-white px-4 py-2 rounded-full shadow-md flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> | |
| <span class="text-sm font-medium">Personalized Learning</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Input Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center"> | |
| <i class="fas fa-user-edit mr-3 text-indigo-600"></i> Resume Optimization Input | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label for="resumeFile" class="block text-sm font-medium text-gray-700">Upload Resume</label> | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">We accept PDF or text files. For best results, ensure your resume has clear sections.</span> | |
| </span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <input type="file" id="resumeFile" accept=".pdf,.txt" class="block w-full text-sm text-gray-500 | |
| file:mr-4 file:py-2 file:px-4 | |
| file:rounded-lg file:border-0 | |
| file:text-sm file:font-semibold | |
| file:bg-indigo-50 file:text-indigo-700 | |
| hover:file:bg-indigo-100 transition"> | |
| </div> | |
| <button id="parseBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg text-sm font-medium flex items-center transition transform hover:scale-105"> | |
| <i class="fas fa-cogs mr-2"></i> Parse | |
| </button> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-500">Or paste your resume text below:</p> | |
| <textarea id="resumeTextarea" placeholder="Paste your resume content here..." class="mt-2 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label for="targetRole" class="block text-sm font-medium text-gray-700">Target Role/Industry</label> | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Be specific! Example: 'Senior Data Scientist - Generative AI' yields better results than just 'Data Scientist'</span> | |
| </span> | |
| </div> | |
| <input type="text" id="targetRole" placeholder="e.g., Senior Data Scientist – Generative AI" class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label for="experienceLevel" class="block text-sm font-medium text-gray-700">Experience Level</label> | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">This helps us tailor the recommendations to your career stage</span> | |
| </span> | |
| </div> | |
| <select id="experienceLevel" class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mb-6"> | |
| <option value="">Select your level</option> | |
| <option value="entry">Entry Level (0-2 years)</option> | |
| <option value="mid">Mid Level (3-5 years)</option> | |
| <option value="senior">Senior Level (6-10 years)</option> | |
| <option value="executive">Executive (10+ years)</option> | |
| </select> | |
| <button id="analyzeBtn" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition transform hover:scale-105 shadow-md"> | |
| <i class="fas fa-magic mr-3"></i> Analyze & Optimize Resume | |
| </button> | |
| <div class="mt-4 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400 flex items-start"> | |
| <i class="fas fa-lightbulb text-blue-500 mt-1 mr-3"></i> | |
| <p class="text-sm text-blue-800">Tip: For specialized roles, include keywords like frameworks or methodologies (e.g., "TensorFlow" or "Agile") in your target role.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="resultsSection" class="hidden"> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200 mb-8"> | |
| <nav class="-mb-px flex space-x-8 overflow-x-auto"> | |
| <button data-tab="parsed" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center"> | |
| <i class="fas fa-file-alt mr-2"></i> Parsed Resume | |
| </button> | |
| <button data-tab="market" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Market Demand | |
| </button> | |
| <button data-tab="gap" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center"> | |
| <i class="fas fa-search-minus mr-2"></i> Gap Analysis | |
| </button> | |
| <button data-tab="trending" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center"> | |
| <i class="fas fa-fire mr-2"></i> Trending Skills | |
| </button> | |
| <button data-tab="updated" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Updated Resume | |
| </button> | |
| <button data-tab="learning" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center"> | |
| <i class="fas fa-graduation-cap mr-2"></i> Learning Plan | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div id="parsedTab" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900 flex items-center"> | |
| <i class="fas fa-file-alt text-indigo-600 mr-3"></i> Parsed Resume Data | |
| </h3> | |
| <span class="text-sm text-gray-500">AI analysis completed: <span id="analysisDate" class="font-medium">Today</span></span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Skills Card --> | |
| <div class="resume-card bg-white border border-gray-200 rounded-xl p-5 shadow-sm"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h4 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-code text-blue-500 mr-2"></i> Technical Skills | |
| </h4> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">6 skills</span> | |
| </div> | |
| <div id="parsedSkills" class="flex flex-wrap gap-2"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Experience Card --> | |
| <div class="resume-card bg-white border border-gray-200 rounded-xl p-5 shadow-sm"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h4 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-briefcase text-purple-500 mr-2"></i> Work Experience | |
| </h4> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">2 positions</span> | |
| </div> | |
| <div id="parsedExperience" class="space-y-4"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Projects Card --> | |
| <div class="resume-card bg-white border border-gray-200 rounded-xl p-5 shadow-sm"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h4 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-project-diagram text-green-500 mr-2"></i> Key Projects | |
| </h4> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">2 projects</span> | |
| </div> | |
| <div id="parsedProjects" class="space-y-4"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Education & Certs Card --> | |
| <div class="resume-card bg-white border border-gray-200 rounded-xl p-5 shadow-sm"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h4 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-graduation-cap text-yellow-500 mr-2"></i> Education & Certifications | |
| </h4> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">2 items</span> | |
| </div> | |
| <div id="parsedEducation" class="space-y-4"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="marketTab" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center"> | |
| <i class="fas fa-chart-line text-indigo-600 mr-3"></i> Market Demand Analysis | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-semibold text-gray-800">Top In-Demand Skills for <span id="targetRoleDisplay" class="text-indigo-600">Senior Data Scientist - Generative AI</span></h4> | |
| <span class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltiptext">Demand score is calculated based on job postings frequency and salary premium</span> | |
| </span> | |
| </div> | |
| <div id="marketSkillsChart" style="height: 500px;"></div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-semibold text-gray-800">Skill Categories Breakdown</h4> | |
| <span class="text-xs text-gray-500">Based on 1,200+ job postings</span> | |
| </div> | |
| <div id="skillCategoriesChart" style="height: 240px;" class="mb-6"></div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-semibold text-gray-800">Salary Range for This Role</h4> | |
| <span class="text-xs text-gray-500">US National Average</span> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-gray-600">Entry Level</span> | |
| <span class="text-sm font-bold text-gray-800">$110K - $140K</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-gray-600">Mid Level</span> | |
| <span class="text-sm font-bold text-gray-800">$140K - $180K</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium text-gray-600">Senior Level</span> | |
| <span class="text-sm font-bold text-gray-800">$180K - $250K+</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-indigo-50 rounded-lg border-l-4 border-indigo-400"> | |
| <h5 class="font-medium text-indigo-800 mb-2 flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> Emerging Skills | |
| </h5> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-xs font-medium shadow-sm">LangChain</span> | |
| <span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-xs font-medium shadow-sm">Prompt Engineering</span> | |
| <span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-xs font-medium shadow-sm">Diffusion Models</span> | |
| <span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-xs font-medium shadow-sm">LLM Fine-tuning</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="gapTab" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center"> | |
| <i class="fas fa-search-minus text-indigo-600 mr-3"></i> Skills Gap Analysis | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-green-50 p-5 rounded-xl border border-green-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-semibold text-green-800 mb-1">Matched Skills</h4> | |
| <p class="text-3xl font-bold text-green-600">6</p> | |
| </div> | |
| <div class="bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-green-700 mt-2">These are your strengths that align with market demand</p> | |
| </div> | |
| <div class="bg-red-50 p-5 rounded-xl border border-red-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-semibold text-red-800 mb-1">Missing Skills</h4> | |
| <p class="text-3xl font-bold text-red-600">12</p> | |
| </div> | |
| <div class="bg-red-100 p-2 rounded-full"> | |
| <i class="fas fa-exclamation-circle text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-red-700 mt-2">High-demand skills you should prioritize learning</p> | |
| </div> | |
| <div class="bg-yellow-50 p-5 rounded-xl border border-yellow-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-semibold text-yellow-800 mb-1">Niche Skills</h4> | |
| <p class="text-3xl font-bold text-yellow-600">2</p> | |
| </div> | |
| <div class="bg-yellow-100 p-2 rounded-full"> | |
| <i class="fas fa-info-circle text-yellow-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-yellow-700 mt-2">Skills you have that aren't currently in high demand</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-semibold text-gray-800">Your Skills vs. Market Demand</h4> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Match</span> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Missing</span> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Niche</span> | |
| </div> | |
| </div> | |
| <div id="skillsGapVisualization" class="space-y-3"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-5 rounded-xl border border-blue-200"> | |
| <h4 class="font-semibold text-blue-800 mb-3 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Key Recommendations | |
| </h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-arrow-up text-blue-600 text-sm"></i> | |
| </div> | |
| <p class="text-sm text-blue-800 flex-1"><span class="font-medium">Prioritize learning Generative AI concepts</span> - This is the #1 most demanded skill for your target role with a 92% demand score.</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-project-diagram text-blue-600 text-sm"></i> | |
| </div> | |
| <p class="text-sm text-blue-800 flex-1"><span class="font-medium">Add TensorFlow/PyTorch projects</span> - These frameworks appear in 78% of job descriptions for your target role.</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1"> | |
| <i class="fas fa-certificate text-blue-600 text-sm"></i> | |
| </div> | |
| <p class="text-sm text-blue-800 flex-1"><span class="font-medium">Consider AWS/GCP certifications</span> - Cloud ML platforms are becoming essential with 65% of roles requiring this knowledge.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="trendingTab" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center"> | |
| <i class="fas fa-fire text-indigo-600 mr-3"></i> Top 100 Trending Skills Worldwide | |
| </h3> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="font-semibold text-gray-800">Most In-Demand Skills Across Industries</h4> | |
| <span class="text-xs text-gray-500">Updated weekly from global job market data</span> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">Generative AI</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">Prompt Engineering</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">LLM Development</span> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">AI Ethics</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Cloud Architecture</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Kubernetes</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">DevSecOps</span> | |
| <span class="px-3 py-1 | |
| </html> |