Hugging Face's logo

Spaces:
FourLabs-UN2
/
devmatch-analyzer
Running

App Files Community
devmatch-analyzer
File size: 9,515 Bytes 
2011e66
6b8148e
2011e66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6b8148e
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<!DOCTYPE html>
<html>
  <head>
    <title>My app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta charset="utf-8">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
    <div class="w-full">
      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
        Ask me anything.
      </h1>
       <div id="candidateModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 backdrop-blur-sm transition-all duration-300 ease-in-out">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl mx-4 p-6 relative overflow-y-auto max-h-[90vh] animate-fade-in">
        <button onclick="closeModal()" class="absolute top-6 right-6 text-gray-400 hover:text-red-500 transition-all duration-200 ease-in-out p-1 rounded-full hover:bg-gray-100"> 
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
        
        <!-- Header Section -->
        <div class="flex items-center mb-8">
            <div id="modalAvatar" class="rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 w-16 h-16 flex items-center justify-center text-2xl font-bold text-white shadow-md">G</div>
            <div class="ml-4">
                <h3 id="modalName" class="text-2xl font-bold text-gray-800">Gustavo Souza</h3>
                <div id="modalResult" class="mt-1">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                        </svg>
                        Não compatível (69%)
                    </span>
                </div>
            </div>
        </div>

        <!-- Match Score Section -->
        <div class="flex flex-col items-center mb-8">
            <div class="relative w-32 h-32">
                <svg class="absolute inset-0 w-full h-full transform -rotate-90" viewBox="0 0 36 36">
                    <path class="text-gray-200" stroke-width="4" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
                    <path id="modalChartPath" class="text-red-500" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="69,100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
                </svg>
                <div id="modalPercent" class="absolute inset-0 flex flex-col items-center justify-center">
                    <span class="text-4xl font-bold text-gray-800">69%</span>
                    <span class="text-sm text-gray-500 mt-1">Match Score</span>
                </div>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5 mt-6">
                <div class="bg-gradient-to-r from-red-400 to-red-600 h-2.5 rounded-full" style="width: 69%"></div>
            </div>
        </div>

        <!-- Details Sections -->
        <div class="grid md:grid-cols-2 gap-8 mb-8">
            <!-- Summary Section -->
            <div class="bg-gray-50 p-6 rounded-xl">
                <div class="flex items-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z" clip-rule="evenodd" />
                    </svg>
                    <h4 class="font-semibold text-gray-800">Resumo Profissional</h4>
                </div>
                <div id="modalResumo" class="text-gray-700 text-sm leading-relaxed whitespace-pre-line space-y-3">
                    <p>- Solid knowledge in Java (J2SE) and Java Web (J2EE), with over 12 years of experience in system development, working on large-scale projects from design to production deployment and maintenance.</p>
                    <p>- Experience developing applications using Java, EJB, JPA, JDBC, Spring Batch (Tasklet and Chunk), REST APIs, databases (DB2, SQL Server, Oracle), stored procedures, and tools like JasperReports, Eclipse, IntelliJ, VS Code, DBeaver, and DataStudio.</p>
                    <p>- Over 12 years of front-end experience with JSF, Primefaces, HTML5, Bootstrap, JavaScript, JQuery and CSS, and 3 years of experience with Angular.</p>
                </div>
            </div>

            <!-- Analysis Section -->
            <div class="bg-gray-50 p-6 rounded-xl">
                <div class="flex items-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd" />
                    </svg>
                    <h4 class="font-semibold text-gray-800">Análise da Candidatura</h4>
                </div>
                <div id="modalExplanation" class="text-gray-700 text-sm leading-relaxed space-y-3">
                    <div class="flex items-start">
                        <span class="flex-shrink-0 text-red-500 mr-2 mt-0.5">•</span>
                        <span>Não possui experiência específica em Middleware e mensageria (Apache Kafka/RabbitMQ)</span>
                    </div>
                    <div class="flex items-start">
                        <span class="flex-shrink-0 text-red-500 mr-2 mt-0.5">•</span>
                        <span>Falta vivência com ecossistema Spring (Spring Boot, Spring Cloud)</span>
                    </div>
                    <div class="flex items-start">
                        <span class="flex-shrink-0 text-yellow-500 mr-2 mt-0.5">•</span>
                        <span>Experiência robusta em Java (12+ anos) demonstra senioridade técnica</span>
                    </div>
                    <div class="flex items-start">
                        <span class="flex-shrink-0 text-yellow-500 mr-2 mt-0.5">•</span>
                        <span>Bom conhecimento em front-end (JSF, Angular) mas não é requisito principal</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Missing Skills Section -->
        <div class="bg-red-50 border border-red-100 rounded-xl p-6 mb-6">
            <div class="flex items-center mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                </svg>
                <h4 class="font-semibold text-red-800">Habilidades Faltantes</h4>
            </div>
            <div class="flex flex-wrap gap-2 mt-3">
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Spring Boot</span>
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Spring Cloud</span>
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Apache Kafka</span>
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">RabbitMQ</span>
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Sistemas Financeiros</span>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
            <button onclick="closeModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50 transition-all duration-200">Fechar</button>
            <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-all duration-200 shadow-sm">Ver Perfil Completo</button>
        </div>
    </div>
</div>
</div>
      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
    <script></script>
  </body>
</html>