-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbr.html
187 lines (177 loc) · 15.5 KB
/
br.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matheus Freitas - Hi!</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./output.css">
</head>
<body class="bg-slate-50">
<section class="py-24 bg-white space-y-5 flex flex-col px-6 md:px-0">
<div class="flex space-x-2 justify-center">
<a href="br.html">
<img src="./img/brazil.png" class="w-8 h-8 rounded-full" alt="Brazilian Flag">
</a>
<a href="index.html" class="opacity-25 hover:opacity-100 transition duration-500">
<img src="./img/usa.png" class="w-8 h-8 rounded-full" alt="USA Flag">
</a>
</div>
<h1 class="text-5xl md:text-8xl text-center font-extrabold tracking-tight font-extrabold">Olá, eu sou
<span class="relative group">
<span class="relative z-20 cursor-pointer transition duration-500 group-hover:text-white">Matheus</span>
<div class="transition-all duration-500 group-hover:bg-purple-700 group-hover:h-8 md:group-hover:h-20 group-hover:rotate-0 z-10 w-full h-4 transform -translate-y-3 md:-translate-y-5 rotate-[-2deg] bg-slate-200 absolute left-0 bottom-0"></div>
</span>
</h1>
<p class="text-xl text-center">Sou um desenvolvedor full stack (<span class="bg-slate-200 px-2 rounded">php</span> & <span class="bg-slate-200 px-2 rounded">nodejs</span></span>) Brasileiro 🇧🇷.</p>
</section>
<section id="about-me" class="pb-24 container mx-auto px-6 md:px-0">
<div class="flex justify-center">
<img src="./img/profile.jfif" class="max-h-48 -translate-y-16 rounded-full shadow-2xl" alt="Matheus Freitas picture">
</div>
<div class="flex flex-col space-y-3 text-center max-w-lg mx-auto">
<div class="text-center font-bold">Quem sou eu?</div>
<div>Olá! Eu sou o Matheus, possuo 7 anos (e contando!) de experiência como desenvolvedor/engenheiro de software.</div>
<div>Nos ultimos anos eu trabalhei com produtos B2B e B2C com milhares e milhões de usuários, de startups Edtech a Insurtech e outros tipos de empresas.</div>
<hr class="my-2">
<div>Através do meu conhecimento em <strong class="text-purple-700">PHP</strong>, <strong class="text-purple-700">NodeJS</strong>, <strong class="text-purple-700">HTML</strong>, <strong class="text-purple-700">CSS</strong> e <strong class="text-purple-700">MySQL</strong> eu criei produtos com outros desenvolvedores de diferentes países. Eu até criei e vendi uma empresa (<a href="https://aaxis.com.br" target="_blank" class="font-bold underline">Aaxis</a>).</div>
<div class="font-bold">Aqui, dá uma olhadinha no que eu construí nos ultimos anos:</div>
</div>
<div class="grid gap-5 py-10 grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto">
<div class="relative group shadow-sm hover:-translate-y-1 transition duration-200">
<div class="relative h-full bg-white p-5 z-20 flex flex-col space-y-2 items-center">
<div class="text-2xl">PrimePass</div>
<a href="https://primepass.co" class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span>https://primepass.co</span>
</a>
<span class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<span class="text-purple-700">PHP Developer</span>
</span>
<div class="text-center text-slate-800 text-sm">Criei a plataforma de assinatura e o primeiro app mobile. Utilizei Laravel, Wordpress, Angular, NodeJS and MySQL. A empresa cresceu mais de <strong class="text-green-600">1.100%</strong>.</div>
</div>
<div class="h-full w-full bg-slate-200 absolute left-0 top-0 z-10 transition duration-300 transform group-hover:rotate-[-5deg]"></div>
</div>
<div class="relative group shadow-sm hover:-translate-y-1 transition duration-200">
<div class="relative h-full bg-white p-5 z-20 flex flex-col space-y-2 items-center">
<div class="text-2xl">Agência Every</div>
<a href="https://every.is/" class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span>https://every.is/</span>
</a>
<span class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<span class="text-purple-700"> Software Engineer</span>
</span>
<div class="text-center text-slate-800 text-sm">Trabalhei com diversos clientes e tecnologias, indo de NodeJS sem frameworks, PHP com Laravel/Cake/Zend, MariaDB (and MySQL), Redis e Vue. Criei soluções para empresas como <a href="https://olx.com.br/" target="_blank" class="font-semibold underline">OLX</a>, <a href="https://www.dow.com/" target="_blank" class="font-semibold underline">Dow</a> e <a href="https://webmotors.com.br" target="_blank" class="font-semibold underline">WebMotors</a>.</div>
</div>
<div class="h-full w-full bg-slate-200 absolute left-0 top-0 z-10 transition duration-300 transform group-hover:rotate-[-5deg]"></div>
</div>
<div class="relative group shadow-sm hover:-translate-y-1 transition duration-200">
<div class="relative h-full bg-white p-5 z-20 flex flex-col space-y-2 items-center">
<div class="text-2xl">Edulabzz</div>
<a href="https://toolzz.com.br/" class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span>https://toolzz.com.br/</span>
</a>
<span class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<span class="text-purple-700">Software Engineer</span>
</span>
<div class="text-center text-slate-800 text-sm">Construí o Toolzz para a Edulabzz, uma Edtech com um LMS avançado para quem quiser criar uma "Netflix para Educação". Laravel, PostgreSQL e VueJS foram utilizados para criar uma experiência única para estudantes, professores e organizações. Atualmente, <strong class="text-green-700">mais de 100.000 estudantes</strong> estão utilizando a plataforma.</div>
</div>
<div class="h-full w-full bg-slate-200 absolute left-0 top-0 z-10 transition duration-300 transform group-hover:rotate-[-5deg]"></div>
</div>
<div class="relative group shadow-sm hover:-translate-y-1 transition duration-200">
<div class="relative h-full bg-white p-5 z-20 flex flex-col space-y-2 items-center">
<div class="text-2xl">Aaxis</div>
<a href="https://aaxis.com.br/" class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span>https://aaxis.com.br/</span>
</a>
<span class="flex items-center space-x-1 font-medium text-slate-500 hover:text-slate-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<span class="text-purple-700">Software Engineer & Fundador</span>
</span>
<div class="text-center text-slate-800 text-sm">Eu fundei a empresa usando todo meu conhecimento prévio para construir uma solução melhor que todas as assistências técnicas. Aaxis foi a primeira assistência técnica sem técnicos (Uber das Assistências Técnicas). Projetei e fiz o design de todo o projeto, do negócio até o painel administrativo e app dos parceiros. Utilizei Laravel, NodeJS, VueJS, TailwindCSS e MySQL, tudo hospedado na <strong>DigitalOcean</strong>. A empresa foi vendida para que eu liberasse espaço de crescimento na minha área: tecnologia.</div>
</div>
<div class="h-full w-full bg-slate-200 absolute left-0 top-0 z-10 transition duration-300 transform group-hover:rotate-[-5deg]"></div>
</div>
</div>
<div class="text-center flex flex-col max-w-4xl mx-auto">
<p class="font-bold">Nota:</p>
<p class="text-sm">Você pode testar o painel que desenvolvi para a Aaxis quando quiser. Segue o link: <a href="https://dev.aaxis.com.br" target="_blank" class="font-bold underline">clique aqui</a>.</p>
<p class="text-sm"><strong>Usuário:</strong> "tryout". <strong>Senha:</strong> 123456. <span class="text-purple-700 font-bold">Divirta-se</span>.</p>
</div>
</section>
<section class="py-24 bg-white px-6 md:px-0">
<h2 class="font-extrabold text-5xl text-center">Vamos tornar as coisas oficiais?</h2>
<p class="text-center">Abaixo está algumas das minhas preferências para que você saiba um bucado de informações sem nem precisar perguntar.</p>
<div class="flex flex-col space-y-3 max-w-4xl mx-auto pt-10">
<div class="flex flex-col">
<strong class="text-2xl">salário desejado</strong>
<span>Meu salário base é $2.500 dólares. Esse salário pode mudar de acordo com as stacks que eu utilizarei na empresa.</span>
<small>* O salário está em dólares mas o recebimento seria em reais para empresas no Brasil, em conversão direta no dia 05/03/2022, algo em torno de R$ 12.657.</small>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">locais do trabalho</strong>
<span>Estou aberto a todos os locais, remoto ou não. Atualmente moro em São Paulo/SP.</span>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">tipo de contrato</strong>
<span>Preferencialmente CLT no Brasil. Em empresas internacionais, estou aberto a conversar conversar o tipo de contrato.</span>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">stacks</strong>
<span>PHP (maior proficiência), NodeJS, HTML, CSS, jQuery, Vue, MySQL/MariaDB, DigitalOcean, Google Cloud, AWS, Figma para protótipos.</span>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">idioma</strong>
<span>Português fluente. Eu também falo inglês avançado. É importante notar que para oportunidades que requerem o uso de inglês avançado, por exemplo, empresas internacionais, a formula do meu salário desejado muda. Será o salário base acima + 30%. Vou simplificar pra você: o salário mínimo que eu peço para empresas internacionais é $3.250 dólares mensais.</span>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">links sociais</strong>
<span>Eu tenho um <a href="https://github.com/mattfreitas" class="font-bold underline">Github</a> e <a href="https://www.linkedin.com/in/matheusfreitasdev/" class="font-bold underline">LinkedIn</a>.</span>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">como entrar em contato?</strong>
<span>Eu adoraria conversar sobre novas oportunidades com você. Você pode agendar uma chamada aqui: <a href="https://calendly.com/matheusfreitas/30min" target="_blank" class="font-bold underline">clique aqui</a>.</span>
</div>
<hr>
<div class="flex flex-col">
<strong class="text-2xl">currículo</strong>
<span>Eu utilizo o próprio LinkedIn como currículo, mas se você precisa de uma versão em PDF, basta baixar aqui: <a href="Matheus-CV-EN.pdf" target="_blank" class="font-bold underline">clique aqui</a>. O currículo está em inglês.</span>
</div>
</div>
</section>
<footer class="font-bold text-gray-500 uppercase text-sm text-center py-20 flex flex-col space-y-3">
<div>Obrigado por ler! ❤️</div>
</footer>
</body>
</html>