|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Meu Blog de Tutoriais</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.post-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.code-block { |
|
|
font-family: 'Courier New', Courier, monospace; |
|
|
background-color: #1e293b; |
|
|
color: #f8fafc; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.tag { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tag:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.featured-post { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.work-card { |
|
|
transition: all 0.3s ease; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
height: 300px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.work-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.work-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.work-content { |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: flex-end; |
|
|
padding: 1.5rem; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.animate-fadeIn { |
|
|
animation: fadeIn 0.5s ease-in forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-10"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-code text-2xl gradient-text"></i> |
|
|
<h1 class="text-2xl font-bold gradient-text">DevTutorials</h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Início</a> |
|
|
<a href="#tutoriais" class="text-gray-700 hover:text-blue-600 font-medium">Tutoriais</a> |
|
|
<a href="#trabalhos" class="text-gray-700 hover:text-blue-600 font-medium">Meus Trabalhos</a> |
|
|
<a href="#sobre" class="text-gray-700 hover:text-blue-600 font-medium">Sobre</a> |
|
|
</nav> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="https://github.com/seu-usuario" target="_blank" class="text-gray-700 hover:text-gray-900"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-md"> |
|
|
<a href="#" class="block py-2 text-gray-700 hover:text-blue-600">Início</a> |
|
|
<a href="#tutoriais" class="block py-2 text-gray-700 hover:text-blue-600">Tutoriais</a> |
|
|
<a href="#trabalhos" class="block py-2 text-gray-700 hover:text-blue-600">Meus Trabalhos</a> |
|
|
<a href="#sobre" class="block py-2 text-gray-700 hover:text-blue-600">Sobre</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Tutoriais dos meus projetos no GitHub</h1> |
|
|
<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> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#tutoriais" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Ver Tutoriais |
|
|
</a> |
|
|
<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"> |
|
|
Meus Trabalhos |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="container mx-auto px-4 py-12"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8 gradient-text">Destaque</h2> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden featured-post"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Novo</span> |
|
|
<span class="text-gray-500 text-sm ml-4">Publicado em 15/06/2023</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Como criar um CRUD completo com Node.js e MongoDB</h3> |
|
|
<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> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Node.js</span> |
|
|
<span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Express</span> |
|
|
<span class="tag bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">MongoDB</span> |
|
|
<span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">CRUD</span> |
|
|
</div> |
|
|
|
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> |
|
|
Ler Tutorial |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8"> |
|
|
<div class="code-block w-full"> |
|
|
<pre><code class="text-sm"> |
|
|
// Exemplo de código do tutorial |
|
|
const express = require('express'); |
|
|
const mongoose = require('mongoose'); |
|
|
|
|
|
// Conectar ao MongoDB |
|
|
mongoose.connect('mongodb://localhost:27017/crud-demo', { |
|
|
useNewUrlParser: true, |
|
|
useUnifiedTopology: true |
|
|
}); |
|
|
|
|
|
// Definir schema e modelo |
|
|
const ItemSchema = new mongoose.Schema({ |
|
|
name: String, |
|
|
description: String |
|
|
}); |
|
|
|
|
|
const Item = mongoose.model('Item', ItemSchema); |
|
|
|
|
|
// Criar rota para listar itens |
|
|
app.get('/items', async (req, res) => { |
|
|
const items = await Item.find(); |
|
|
res.json(items); |
|
|
}); |
|
|
</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tutoriais" class="container mx-auto px-4 py-12 bg-gray-50"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold gradient-text mb-4">Todos os Tutoriais</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Explore todos os tutoriais baseados nos meus projetos open-source no GitHub.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Frontend</span> |
|
|
<span class="text-gray-500 text-sm">10/06/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Criando um Dashboard com React e TailwindCSS</h3> |
|
|
<p class="text-gray-600 mb-4">Aprenda a construir um dashboard responsivo e moderno usando React e TailwindCSS com gráficos interativos.</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">React</span> |
|
|
<span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">TailwindCSS</span> |
|
|
<span class="tag bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">Chart.js</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm"> |
|
|
Ler Tutorial |
|
|
</a> |
|
|
<a href="https://github.com/seu-usuario/react-dashboard" target="_blank" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Fullstack</span> |
|
|
<span class="text-gray-500 text-sm">25/05/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Autenticação com JWT em uma API Node.js</h3> |
|
|
<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> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Node.js</span> |
|
|
<span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Express</span> |
|
|
<span class="tag bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">JWT</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm"> |
|
|
Ler Tutorial |
|
|
</a> |
|
|
<a href="https://github.com/seu-usuario/node-jwt-auth" target="_blank" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">Backend</span> |
|
|
<span class="text-gray-500 text-sm">12/05/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Processamento de Imagens com Python e OpenCV</h3> |
|
|
<p class="text-gray-600 mb-4">Tutorial completo sobre como manipular imagens usando Python e a biblioteca OpenCV para processamento digital.</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Python</span> |
|
|
<span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">OpenCV</span> |
|
|
<span class="tag bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">Processamento de Imagens</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm"> |
|
|
Ler Tutorial |
|
|
</a> |
|
|
<a href="https://github.com/seu-usuario/image-processing" target="_blank" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">Mobile</span> |
|
|
<span class="text-gray-500 text-sm">30/04/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Desenvolvendo um App React Native com Expo</h3> |
|
|
<p class="text-gray-600 mb-4">Guia passo a passo para criar seu primeiro aplicativo mobile com React Native e Expo.</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">React Native</span> |
|
|
<span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Expo</span> |
|
|
<span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Mobile</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm"> |
|
|
Ler Tutorial |
|
|
</a> |
|
|
<a href="https://github.com/seu-usuario/react-native-app" target="_blank" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">DevOps</span> |
|
|
<span class="text-gray-500 text-sm">18/04/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Deploy Automatizado com GitHub Actions</h3> |
|
|
<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> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag bg-gray-100 text-gray-800 text-xs font-medium px-2 py-1 rounded">GitHub Actions</span> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">CI/CD</span> |
|
|
<span class="tag bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">DevOps</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm"> |
|
|
Ler Tutorial |
|
|
</a> |
|
|
<a href="https://github.com/seu-usuario/github-actions-demo" target="_blank" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden post-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">Frontend</span> |
|
|
<span class="text-gray-500 text-sm">05/04/2023</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Animções CSS com Framer Motion</h3> |
|
|
<p class="text-gray-600 mb-4">Domine animações fluidas em React usando a biblioteca Framer Motion para criar interfaces impressionantes.</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="tag bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">React</span> |
|
|
<span class="tag bg-purple-100 text-purple-800 text-xs font-medium px-2 py-1 rounded">Framer Motion</span> |
|
|
<span class="tag bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded">CSS</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm"> |
|
|
Ler Tutorial |
|
|
</a> |
|
|
<a href="https://github.com/seu-usuario/framer-motion-demo" target="_blank" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Carregar Mais Tutoriais |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="trabalhos" class="container mx-auto px-4 py-16 bg-white"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold gradient-text mb-4">Meus Trabalhos</h2> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<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')"> |
|
|
<div class="work-content"> |
|
|
<h3 class="text-xl font-bold mb-2">Sistema de Gerenciamento de Tarefas</h3> |
|
|
<p class="text-sm mb-4">Um sistema completo para gerenciamento de tarefas com autenticação e dashboard.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-blue-600 text-white text-xs px-2 py-1 rounded">React</span> |
|
|
<span class="bg-green-600 text-white text-xs px-2 py-1 rounded">Node.js</span> |
|
|
</div> |
|
|
<a href="https://github.com/seu-usuario/task-manager" target="_blank" class="text-white hover:text-blue-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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')"> |
|
|
<div class="work-content"> |
|
|
<h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> |
|
|
<p class="text-sm mb-4">Plataforma de e-commerce com carrinho de compras e integração com pagamentos.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">Next.js</span> |
|
|
<span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded">MongoDB</span> |
|
|
</div> |
|
|
<a href="https://github.com/seu-usuario/ecommerce-platform" target="_blank" class="text-white hover:text-blue-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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')"> |
|
|
<div class="work-content"> |
|
|
<h3 class="text-xl font-bold mb-2">App de Notícias</h3> |
|
|
<p class="text-sm mb-4">Aplicativo mobile para leitura de notícias com categorias e favoritos.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">React Native</span> |
|
|
<span class="bg-red-600 text-white text-xs px-2 py-1 rounded">Firebase</span> |
|
|
</div> |
|
|
<a href="https://github.com/seu-usuario/news-app" target="_blank" class="text-white hover:text-blue-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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')"> |
|
|
<div class="work-content"> |
|
|
<h3 class="text-xl font-bold mb-2">API de Análise de Dados</h3> |
|
|
<p class="text-sm mb-4">API RESTful para análise de dados com Python e machine learning.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Python</span> |
|
|
<span class="bg-green-600 text-white text-xs px-2 py-1 rounded">FastAPI</span> |
|
|
</div> |
|
|
<a href="https://github.com/seu-usuario/data-analysis-api" target="_blank" class="text-white hover:text-blue-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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')"> |
|
|
<div class="work-content"> |
|
|
<h3 class="text-xl font-bold mb-2">Dashboard Analytics</h3> |
|
|
<p class="text-sm mb-4">Dashboard interativo para visualização de dados com gráficos em tempo real.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-blue-600 text-white text-xs px-2 py-1 rounded">React</span> |
|
|
<span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">D3.js</span> |
|
|
</div> |
|
|
<a href="https://github.com/seu-usuario/analytics-dashboard" target="_blank" class="text-white hover:text-blue-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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')"> |
|
|
<div class="work-content"> |
|
|
<h3 class="text-xl font-bold mb-2">Chat em Tempo Real</h3> |
|
|
<p class="text-sm mb-4">Aplicativo de chat com WebSockets e autenticação JWT.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-green-600 text-white text-xs px-2 py-1 rounded">Node.js</span> |
|
|
<span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">Socket.io</span> |
|
|
</div> |
|
|
<a href="https://github.com/seu-usuario/realtime-chat" target="_blank" class="text-white hover:text-blue-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<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"> |
|
|
<i class="fab fa-github mr-2"></i> Ver Todos no GitHub |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Receba os novos tutoriais no seu e-mail</h2> |
|
|
<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> |
|
|
|
|
|
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4"> |
|
|
<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"> |
|
|
<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"> |
|
|
Inscrever-se |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<p class="text-sm mt-4 opacity-80">Não enviamos spam. Você pode cancelar a qualquer momento.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="sobre" class="container mx-auto px-4 py-16 bg-gray-50"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-12"> |
|
|
<div class="md:w-1/3 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<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"> |
|
|
<div class="absolute -bottom-2 -right-2 bg-blue-600 text-white p-3 rounded-full shadow-lg"> |
|
|
<i class="fab fa-github text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-2/3"> |
|
|
<h2 class="text-3xl font-bold mb-6 gradient-text">Sobre Mim</h2> |
|
|
<p class="text-gray-700 mb-6 text-lg"> |
|
|
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. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-laptop-code text-blue-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">+50 Projetos</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-500 text-xl mr-3"></i> |
|
|
<span class="font-medium">+1000 Estrelas</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-code-branch text-purple-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">+200 Forks</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-users text-green-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">+5000 Visualizações</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<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"> |
|
|
<i class="fab fa-github mr-2"></i> GitHub |
|
|
</a> |
|
|
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center transition duration-300"> |
|
|
<i class="fas fa-envelope mr-2"></i> Contato |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fas fa-file-alt mr-2"></i> Currículo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-code text-2xl gradient-text"></i> |
|
|
<h3 class="text-xl font-bold gradient-text">DevTutorials</h3> |
|
|
</div> |
|
|
<p class="text-gray-400">Tutoriais detalhados dos meus projetos open-source no GitHub.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Links Rápidos</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Início</a></li> |
|
|
<li><a href="#tutoriais" class="text-gray-400 hover:text-white transition duration-300">Tutoriais</a></li> |
|
|
<li><a href="#trabalhos" class="text-gray-400 hover:text-white transition duration-300">Meus Trabalhos</a></li> |
|
|
<li><a href="#sobre" class="text-gray-400 hover:text-white transition duration-300">Sobre</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Categorias</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Frontend</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Backend</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Fullstack</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mobile</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Redes Sociais</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl transition duration-300"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 DevTutorials. Todos os direitos reservados.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.post-card, .work-card').forEach(card => { |
|
|
observer.observe(card); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
