Hugging Face's logo

Spaces:
Matben3
/
devs
Running

App Files Community
Matben3 commited on
Commit
ae9113d
·
verified ·
1 Parent(s): 10db52c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +670 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Devs
3
- emoji: 📊
4
  colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: devs
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,670 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Meu Blog de Tutoriais</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom styles */
11
+ .gradient-text {
12
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
13
+ -webkit-background-clip: text;
14
+ background-clip: text;
15
+ color: transparent;
16
+ }
17
+
18
+ .post-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+
23
+ .code-block {
24
+ font-family: 'Courier New', Courier, monospace;
25
+ background-color: #1e293b;
26
+ color: #f8fafc;
27
+ border-radius: 0.5rem;
28
+ padding: 1rem;
29
+ overflow-x: auto;
30
+ }
31
+
32
+ .tag {
33
+ transition: all 0.2s ease;
34
+ }
35
+
36
+ .tag:hover {
37
+ transform: scale(1.05);
38
+ }
39
+
40
+ /* Animation for featured post */
41
+ @keyframes float {
42
+ 0% { transform: translateY(0px); }
43
+ 50% { transform: translateY(-10px); }
44
+ 100% { transform: translateY(0px); }
45
+ }
46
+
47
+ .featured-post {
48
+ animation: float 6s ease-in-out infinite;
49
+ }
50
+
51
+ .work-card {
52
+ transition: all 0.3s ease;
53
+ background-size: cover;
54
+ background-position: center;
55
+ height: 300px;
56
+ position: relative;
57
+ overflow: hidden;
58
+ }
59
+
60
+ .work-card::before {
61
+ content: '';
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ right: 0;
66
+ bottom: 0;
67
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
68
+ z-index: 1;
69
+ }
70
+
71
+ .work-card:hover {
72
+ transform: scale(1.03);
73
+ }
74
+
75
+ .work-content {
76
+ position: relative;
77
+ z-index: 2;
78
+ height: 100%;
79
+ display: flex;
80
+ flex-direction: column;
81
+ justify-content: flex-end;
82
+ padding: 1.5rem;
83
+ color: white;
84
+ }
85
+
86
+ .animate-fadeIn {
87
+ animation: fadeIn 0.5s ease-in forwards;
88
+ }
89
+
90
+ @keyframes fadeIn {
91
+ from { opacity: 0; transform: translateY(20px); }
92
+ to { opacity: 1; transform: translateY(0); }
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="bg-gray-50 min-h-screen flex flex-col">
97
+ <!-- Header -->
98
+ <header class="bg-white shadow-sm sticky top-0 z-10">
99
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
100
+ <div class="flex items-center space-x-2">
101
+ <i class="fas fa-code text-2xl gradient-text"></i>
102
+ <h1 class="text-2xl font-bold gradient-text">DevTutorials</h1>
103
+ </div>
104
+
105
+ <nav class="hidden md:flex space-x-8">
106
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Início</a>
107
+ <a href="#tutoriais" class="text-gray-700 hover:text-blue-600 font-medium">Tutoriais</a>
108
+ <a href="#trabalhos" class="text-gray-700 hover:text-blue-600 font-medium">Meus Trabalhos</a>
109
+ <a href="#sobre" class="text-gray-700 hover:text-blue-600 font-medium">Sobre</a>
110
+ </nav>
111
+
112
+ <div class="flex items-center space-x-4">
113
+ <a href="https://github.com/seu-usuario" target="_blank" class="text-gray-700 hover:text-gray-900">
114
+ <i class="fab fa-github text-xl"></i>
115
+ </a>
116
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
117
+ <i class="fas fa-bars text-xl"></i>
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Mobile menu -->
123
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-md">
124
+ <a href="#" class="block py-2 text-gray-700 hover:text-blue-600">Início</a>
125
+ <a href="#tutoriais" class="block py-2 text-gray-700 hover:text-blue-600">Tutoriais</a>
126
+ <a href="#trabalhos" class="block py-2 text-gray-700 hover:text-blue-600">Meus Trabalhos</a>
127
+ <a href="#sobre" class="block py-2 text-gray-700 hover:text-blue-600">Sobre</a>
128
+ </div>
129
+ </header>
130
+
131
+ <!-- Hero Section -->
132
+ <section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16">
133
+ <div class="container mx-auto px-4 text-center">
134
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Tutoriais dos meus projetos no GitHub</h1>
135
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Aprenda como implementar soluções práticas com explicações passo a passo dos meus repositórios.</p>
136
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
137
+ <a href="#tutoriais" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition duration-300">
138
+ Ver Tutoriais
139
+ </a>
140
+ <a href="#trabalhos" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 font-bold py-3 px-6 rounded-lg transition duration-300">
141
+ Meus Trabalhos
142
+ </a>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- Featured Post -->
148
+ <section class="container mx-auto px-4 py-12">
149
+ <h2 class="text-3xl font-bold text-center mb-8 gradient-text">Destaque</h2>
150
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden featured-post">
151
+ <div class="md:flex">
152
+ <div class="md:w-1/2 p-8">
153
+ <div class="flex items-center mb-4">
154
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Novo</span>
155
+ <span class="text-gray-500 text-sm ml-4">Publicado em 15/06/2023</span>
156
+ </div>
157
+ <h3 class="text-2xl font-bold mb-4">Como criar um CRUD completo com Node.js e MongoDB</h3>
158
+ <p class="text-gray-600 mb-6">Neste tutorial completo, você vai aprender a implementar um CRUD (Create, Read, Update, Delete) usando Node.js, Express e MongoDB. Vamos desde a configuração inicial até a implementação de rotas e testes.</p>
159
+
160
+ <div class="flex flex-wrap gap-2 mb-6">
161
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Node.js</span>
162
+ <span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Express</span>
163
+ <span class="tag bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">MongoDB</span>
164
+ <span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">CRUD</span>
165
+ </div>
166
+
167
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
168
+ Ler Tutorial
169
+ <i class="fas fa-arrow-right ml-2"></i>
170
+ </a>
171
+ </div>
172
+ <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8">
173
+ <div class="code-block w-full">
174
+ <pre><code class="text-sm">
175
+ // Exemplo de código do tutorial
176
+ const express = require('express');
177
+ const mongoose = require('mongoose');
178
+
179
+ // Conectar ao MongoDB
180
+ mongoose.connect('mongodb://localhost:27017/crud-demo', {
181
+ useNewUrlParser: true,
182
+ useUnifiedTopology: true
183
+ });
184
+
185
+ // Definir schema e modelo
186
+ const ItemSchema = new mongoose.Schema({
187
+ name: String,
188
+ description: String
189
+ });
190
+
191
+ const Item = mongoose.model('Item', ItemSchema);
192
+
193
+ // Criar rota para listar itens
194
+ app.get('/items', async (req, res) => {
195
+ const items = await Item.find();
196
+ res.json(items);
197
+ });
198
+ </code></pre>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Tutorials Section -->
206
+ <section id="tutoriais" class="container mx-auto px-4 py-12 bg-gray-50">
207
+ <div class="text-center mb-12">
208
+ <h2 class="text-3xl font-bold gradient-text mb-4">Todos os Tutoriais</h2>
209
+ <p class="text-gray-600 max-w-2xl mx-auto">Explore todos os tutoriais baseados nos meus projetos open-source no GitHub.</p>
210
+ </div>
211
+
212
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
213
+ <!-- Tutorial Card 1 -->
214
+ <div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300">
215
+ <div class="p-6">
216
+ <div class="flex justify-between items-center mb-4">
217
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Frontend</span>
218
+ <span class="text-gray-500 text-sm">10/06/2023</span>
219
+ </div>
220
+ <h3 class="text-xl font-bold mb-3">Criando um Dashboard com React e TailwindCSS</h3>
221
+ <p class="text-gray-600 mb-4">Aprenda a construir um dashboard responsivo e moderno usando React e TailwindCSS com gráficos interativos.</p>
222
+
223
+ <div class="flex flex-wrap gap-2 mb-4">
224
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">React</span>
225
+ <span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">TailwindCSS</span>
226
+ <span class="tag bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">Chart.js</span>
227
+ </div>
228
+
229
+ <div class="flex justify-between items-center">
230
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
231
+ Ler Tutorial
232
+ </a>
233
+ <a href="https://github.com/seu-usuario/react-dashboard" target="_blank" class="text-gray-500 hover:text-gray-700">
234
+ <i class="fab fa-github"></i>
235
+ </a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Tutorial Card 2 -->
241
+ <div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300">
242
+ <div class="p-6">
243
+ <div class="flex justify-between items-center mb-4">
244
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Fullstack</span>
245
+ <span class="text-gray-500 text-sm">25/05/2023</span>
246
+ </div>
247
+ <h3 class="text-xl font-bold mb-3">Autenticação com JWT em uma API Node.js</h3>
248
+ <p class="text-gray-600 mb-4">Implemente um sistema de autenticação seguro usando JSON Web Tokens (JWT) em uma API Node.js.</p>
249
+
250
+ <div class="flex flex-wrap gap-2 mb-4">
251
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Node.js</span>
252
+ <span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Express</span>
253
+ <span class="tag bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">JWT</span>
254
+ </div>
255
+
256
+ <div class="flex justify-between items-center">
257
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
258
+ Ler Tutorial
259
+ </a>
260
+ <a href="https://github.com/seu-usuario/node-jwt-auth" target="_blank" class="text-gray-500 hover:text-gray-700">
261
+ <i class="fab fa-github"></i>
262
+ </a>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Tutorial Card 3 -->
268
+ <div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300">
269
+ <div class="p-6">
270
+ <div class="flex justify-between items-center mb-4">
271
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">Backend</span>
272
+ <span class="text-gray-500 text-sm">12/05/2023</span>
273
+ </div>
274
+ <h3 class="text-xl font-bold mb-3">Processamento de Imagens com Python e OpenCV</h3>
275
+ <p class="text-gray-600 mb-4">Tutorial completo sobre como manipular imagens usando Python e a biblioteca OpenCV para processamento digital.</p>
276
+
277
+ <div class="flex flex-wrap gap-2 mb-4">
278
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Python</span>
279
+ <span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">OpenCV</span>
280
+ <span class="tag bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">Processamento de Imagens</span>
281
+ </div>
282
+
283
+ <div class="flex justify-between items-center">
284
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
285
+ Ler Tutorial
286
+ </a>
287
+ <a href="https://github.com/seu-usuario/image-processing" target="_blank" class="text-gray-500 hover:text-gray-700">
288
+ <i class="fab fa-github"></i>
289
+ </a>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Tutorial Card 4 -->
295
+ <div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300">
296
+ <div class="p-6">
297
+ <div class="flex justify-between items-center mb-4">
298
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Mobile</span>
299
+ <span class="text-gray-500 text-sm">30/04/2023</span>
300
+ </div>
301
+ <h3 class="text-xl font-bold mb-3">Desenvolvendo um App React Native com Expo</h3>
302
+ <p class="text-gray-600 mb-4">Guia passo a passo para criar seu primeiro aplicativo mobile com React Native e Expo.</p>
303
+
304
+ <div class="flex flex-wrap gap-2 mb-4">
305
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">React Native</span>
306
+ <span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Expo</span>
307
+ <span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Mobile</span>
308
+ </div>
309
+
310
+ <div class="flex justify-between items-center">
311
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
312
+ Ler Tutorial
313
+ </a>
314
+ <a href="https://github.com/seu-usuario/react-native-app" target="_blank" class="text-gray-500 hover:text-gray-700">
315
+ <i class="fab fa-github"></i>
316
+ </a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Tutorial Card 5 -->
322
+ <div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300">
323
+ <div class="p-6">
324
+ <div class="flex justify-between items-center mb-4">
325
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">DevOps</span>
326
+ <span class="text-gray-500 text-sm">18/04/2023</span>
327
+ </div>
328
+ <h3 class="text-xl font-bold mb-3">Deploy Automatizado com GitHub Actions</h3>
329
+ <p class="text-gray-600 mb-4">Automatize seus deploys usando GitHub Actions para enviar seu código para produção avec CI/CD.</p>
330
+
331
+ <div class="flex flex-wrap gap-2 mb-4">
332
+ <span class="tag bg-gray-100 text-gray-800 text-xs font-medium px-2 py-1 rounded">GitHub Actions</span>
333
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">CI/CD</span>
334
+ <span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">DevOps</span>
335
+ </div>
336
+
337
+ <div class="flex justify-between items-center">
338
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
339
+ Ler Tutorial
340
+ </a>
341
+ <a href="https://github.com/seu-usuario/github-actions-demo" target="_blank" class="text-gray-500 hover:text-gray-700">
342
+ <i class="fab fa-github"></i>
343
+ </a>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Tutorial Card 6 -->
349
+ <div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300">
350
+ <div class="p-6">
351
+ <div class="flex justify-between items-center mb-4">
352
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Frontend</span>
353
+ <span class="text-gray-500 text-sm">05/04/2023</span>
354
+ </div>
355
+ <h3 class="text-xl font-bold mb-3">Animções CSS com Framer Motion</h3>
356
+ <p class="text-gray-600 mb-4">Domine animações fluidas em React usando a biblioteca Framer Motion para criar interfaces impressionantes.</p>
357
+
358
+ <div class="flex flex-wrap gap-2 mb-4">
359
+ <span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">React</span>
360
+ <span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Framer Motion</span>
361
+ <span class="tag bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">CSS</span>
362
+ </div>
363
+
364
+ <div class="flex justify-between items-center">
365
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
366
+ Ler Tutorial
367
+ </a>
368
+ <a href="https://github.com/seu-usuario/framer-motion-demo" target="_blank" class="text-gray-500 hover:text-gray-700">
369
+ <i class="fab fa-github"></i>
370
+ </a>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="text-center mt-12">
377
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
378
+ Carregar Mais Tutoriais
379
+ </button>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- My Works Section -->
384
+ <section id="trabalhos" class="container mx-auto px-4 py-16 bg-white">
385
+ <div class="text-center mb-12">
386
+ <h2 class="text-3xl font-bold gradient-text mb-4">Meus Trabalhos</h2>
387
+ <p class="text-gray-600 max-w-2xl mx-auto">Alguns dos projetos que desenvolvi e que estão disponíveis no meu GitHub.</p>
388
+ </div>
389
+
390
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
391
+ <!-- Work 1 -->
392
+ <div class="work-card rounded-lg shadow-lg animate-fadeIn" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
393
+ <div class="work-content">
394
+ <h3 class="text-xl font-bold mb-2">Sistema de Gerenciamento de Tarefas</h3>
395
+ <p class="text-sm mb-4">Um sistema completo para gerenciamento de tarefas com autenticação e dashboard.</p>
396
+ <div class="flex justify-between items-center">
397
+ <div class="flex space-x-2">
398
+ <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded">React</span>
399
+ <span class="bg-green-600 text-white text-xs px-2 py-1 rounded">Node.js</span>
400
+ </div>
401
+ <a href="https://github.com/seu-usuario/task-manager" target="_blank" class="text-white hover:text-blue-300">
402
+ <i class="fab fa-github"></i>
403
+ </a>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Work 2 -->
409
+ <div class="work-card rounded-lg shadow-lg animate-fadeIn" style="background-image: url('https://images.unsplash.com/photo-1555774698-0f77e70ac5fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
410
+ <div class="work-content">
411
+ <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3>
412
+ <p class="text-sm mb-4">Plataforma de e-commerce com carrinho de compras e integração com pagamentos.</p>
413
+ <div class="flex justify-between items-center">
414
+ <div class="flex space-x-2">
415
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">Next.js</span>
416
+ <span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded">MongoDB</span>
417
+ </div>
418
+ <a href="https://github.com/seu-usuario/ecommerce-platform" target="_blank" class="text-white hover:text-blue-300">
419
+ <i class="fab fa-github"></i>
420
+ </a>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Work 3 -->
426
+ <div class="work-card rounded-lg shadow-lg animate-fadeIn" style="background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
427
+ <div class="work-content">
428
+ <h3 class="text-xl font-bold mb-2">App de Notícias</h3>
429
+ <p class="text-sm mb-4">Aplicativo mobile para leitura de notícias com categorias e favoritos.</p>
430
+ <div class="flex justify-between items-center">
431
+ <div class="flex space-x-2">
432
+ <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">React Native</span>
433
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded">Firebase</span>
434
+ </div>
435
+ <a href="https://github.com/seu-usuario/news-app" target="_blank" class="text-white hover:text-blue-300">
436
+ <i class="fab fa-github"></i>
437
+ </a>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Work 4 -->
443
+ <div class="work-card rounded-lg shadow-lg animate-fadeIn" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
444
+ <div class="work-content">
445
+ <h3 class="text-xl font-bold mb-2">API de Análise de Dados</h3>
446
+ <p class="text-sm mb-4">API RESTful para análise de dados com Python e machine learning.</p>
447
+ <div class="flex justify-between items-center">
448
+ <div class="flex space-x-2">
449
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Python</span>
450
+ <span class="bg-green-600 text-white text-xs px-2 py-1 rounded">FastAPI</span>
451
+ </div>
452
+ <a href="https://github.com/seu-usuario/data-analysis-api" target="_blank" class="text-white hover:text-blue-300">
453
+ <i class="fab fa-github"></i>
454
+ </a>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Work 5 -->
460
+ <div class="work-card rounded-lg shadow-lg animate-fadeIn" style="background-image: url('https://images.unsplash.com/photo-1555774698-0f77e70ac5fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
461
+ <div class="work-content">
462
+ <h3 class="text-xl font-bold mb-2">Dashboard Analytics</h3>
463
+ <p class="text-sm mb-4">Dashboard interativo para visualização de dados com gráficos em tempo real.</p>
464
+ <div class="flex justify-between items-center">
465
+ <div class="flex space-x-2">
466
+ <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded">React</span>
467
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">D3.js</span>
468
+ </div>
469
+ <a href="https://github.com/seu-usuario/analytics-dashboard" target="_blank" class="text-white hover:text-blue-300">
470
+ <i class="fab fa-github"></i>
471
+ </a>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Work 6 -->
477
+ <div class="work-card rounded-lg shadow-lg animate-fadeIn" style="background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
478
+ <div class="work-content">
479
+ <h3 class="text-xl font-bold mb-2">Chat em Tempo Real</h3>
480
+ <p class="text-sm mb-4">Aplicativo de chat com WebSockets e autenticação JWT.</p>
481
+ <div class="flex justify-between items-center">
482
+ <div class="flex space-x-2">
483
+ <span class="bg-green-600 text-white text-xs px-2 py-1 rounded">Node.js</span>
484
+ <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">Socket.io</span>
485
+ </div>
486
+ <a href="https://github.com/seu-usuario/realtime-chat" target="_blank" class="text-white hover:text-blue-300">
487
+ <i class="fab fa-github"></i>
488
+ </a>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="text-center mt-12">
495
+ <a href="https://github.com/seu-usuario?tab=repositories" target="_blank" class="inline-flex items-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
496
+ <i class="fab fa-github mr-2"></i> Ver Todos no GitHub
497
+ </a>
498
+ </div>
499
+ </section>
500
+
501
+ <!-- Newsletter Section -->
502
+ <section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16">
503
+ <div class="container mx-auto px-4 text-center">
504
+ <h2 class="text-3xl font-bold mb-6">Receba os novos tutoriais no seu e-mail</h2>
505
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Inscreva-se para receber notificações sempre que eu publicar um novo tutorial baseado nos meus projetos do GitHub.</p>
506
+
507
+ <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
508
+ <input type="email" placeholder="Seu melhor e-mail" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300">
509
+ <button type="submit" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition duration-300 whitespace-nowrap">
510
+ Inscrever-se
511
+ </button>
512
+ </form>
513
+
514
+ <p class="text-sm mt-4 opacity-80">Não enviamos spam. Você pode cancelar a qualquer momento.</p>
515
+ </div>
516
+ </section>
517
+
518
+ <!-- About Section -->
519
+ <section id="sobre" class="container mx-auto px-4 py-16 bg-gray-50">
520
+ <div class="flex flex-col md:flex-row items-center gap-12">
521
+ <div class="md:w-1/3 flex justify-center">
522
+ <div class="relative">
523
+ <img src="https://via.placeholder.com/300" alt="Sua Foto" class="rounded-full w-64 h-64 object-cover border-4 border-white shadow-xl">
524
+ <div class="absolute -bottom-2 -right-2 bg-blue-600 text-white p-3 rounded-full shadow-lg">
525
+ <i class="fab fa-github text-2xl"></i>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="md:w-2/3">
531
+ <h2 class="text-3xl font-bold mb-6 gradient-text">Sobre Mim</h2>
532
+ <p class="text-gray-700 mb-6 text-lg">
533
+ Sou um desenvolvedor apaixonado por compartilhar conhecimento e criar projetos open-source. No meu GitHub, você encontra diversas soluções para problemas comuns de desenvolvimento, e aqui no blog explico detalhadamente como cada uma funciona.
534
+ </p>
535
+
536
+ <div class="grid grid-cols-2 gap-4 mb-8">
537
+ <div class="flex items-center">
538
+ <i class="fas fa-laptop-code text-blue-600 text-xl mr-3"></i>
539
+ <span class="font-medium">+50 Projetos</span>
540
+ </div>
541
+ <div class="flex items-center">
542
+ <i class="fas fa-star text-yellow-500 text-xl mr-3"></i>
543
+ <span class="font-medium">+1000 Estrelas</span>
544
+ </div>
545
+ <div class="flex items-center">
546
+ <i class="fas fa-code-branch text-purple-600 text-xl mr-3"></i>
547
+ <span class="font-medium">+200 Forks</span>
548
+ </div>
549
+ <div class="flex items-center">
550
+ <i class="fas fa-users text-green-600 text-xl mr-3"></i>
551
+ <span class="font-medium">+5000 Visualizações</span>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="flex flex-wrap gap-4">
556
+ <a href="https://github.com/seu-usuario" target="_blank" class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg flex items-center transition duration-300">
557
+ <i class="fab fa-github mr-2"></i> GitHub
558
+ </a>
559
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center transition duration-300">
560
+ <i class="fas fa-envelope mr-2"></i> Contato
561
+ </a>
562
+ <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-6 py-3 rounded-lg flex items-center transition duration-300">
563
+ <i class="fas fa-file-alt mr-2"></i> Currículo
564
+ </a>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </section>
569
+
570
+ <!-- Footer -->
571
+ <footer class="bg-gray-800 text-white py-12">
572
+ <div class="container mx-auto px-4">
573
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
574
+ <div>
575
+ <div class="flex items-center space-x-2 mb-4">
576
+ <i class="fas fa-code text-2xl gradient-text"></i>
577
+ <h3 class="text-xl font-bold gradient-text">DevTutorials</h3>
578
+ </div>
579
+ <p class="text-gray-400">Tutoriais detalhados dos meus projetos open-source no GitHub.</p>
580
+ </div>
581
+
582
+ <div>
583
+ <h4 class="text-lg font-semibold mb-4">Links Rápidos</h4>
584
+ <ul class="space-y-2">
585
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Início</a></li>
586
+ <li><a href="#tutoriais" class="text-gray-400 hover:text-white transition duration-300">Tutoriais</a></li>
587
+ <li><a href="#trabalhos" class="text-gray-400 hover:text-white transition duration-300">Meus Trabalhos</a></li>
588
+ <li><a href="#sobre" class="text-gray-400 hover:text-white transition duration-300">Sobre</a></li>
589
+ </ul>
590
+ </div>
591
+
592
+ <div>
593
+ <h4 class="text-lg font-semibold mb-4">Categorias</h4>
594
+ <ul class="space-y-2">
595
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Frontend</a></li>
596
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Backend</a></li>
597
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Fullstack</a></li>
598
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mobile</a></li>
599
+ </ul>
600
+ </div>
601
+
602
+ <div>
603
+ <h4 class="text-lg font-semibold mb-4">Redes Sociais</h4>
604
+ <div class="flex space-x-4">
605
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300">
606
+ <i class="fab fa-github"></i>
607
+ </a>
608
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300">
609
+ <i class="fab fa-twitter"></i>
610
+ </a>
611
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300">
612
+ <i class="fab fa-linkedin"></i>
613
+ </a>
614
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300">
615
+ <i class="fab fa-youtube"></i>
616
+ </a>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
622
+ <p>&copy; 2023 DevTutorials. Todos os direitos reservados.</p>
623
+ </div>
624
+ </div>
625
+ </footer>
626
+
627
+ <script>
628
+ // Mobile menu toggle
629
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
630
+ const menu = document.getElementById('mobile-menu');
631
+ menu.classList.toggle('hidden');
632
+ });
633
+
634
+ // Smooth scrolling for anchor links
635
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
636
+ anchor.addEventListener('click', function (e) {
637
+ e.preventDefault();
638
+
639
+ const targetId = this.getAttribute('href');
640
+ if (targetId === '#') return;
641
+
642
+ const targetElement = document.querySelector(targetId);
643
+ if (targetElement) {
644
+ targetElement.scrollIntoView({
645
+ behavior: 'smooth'
646
+ });
647
+ }
648
+ });
649
+ });
650
+
651
+ // Animation for post cards when they come into view
652
+ const observerOptions = {
653
+ threshold: 0.1
654
+ };
655
+
656
+ const observer = new IntersectionObserver((entries) => {
657
+ entries.forEach(entry => {
658
+ if (entry.isIntersecting) {
659
+ entry.target.classList.add('animate-fadeIn');
660
+ observer.unobserve(entry.target);
661
+ }
662
+ });
663
+ }, observerOptions);
664
+
665
+ document.querySelectorAll('.post-card, .work-card').forEach(card => {
666
+ observer.observe(card);
667
+ });
668
+ </script>
669
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Matben3/devs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
670
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ adicione uma opção "Meus Trabalhos"