🖱️ Como funciona?
1️⃣ Você desenha blocos no canvas com o mouse.
2️⃣ Ao soltar, aparece uma janela para definir o nome da área (ex: produto, descrição, valor, botão, img) e o tipo de elemento (tag, classe ou id).
3️⃣ A ferramenta gera automaticamente o HTML estruturado e o CSS Grid com grid-template-areas, grid-area, colunas e linhas.
4️⃣ Depois é só copiar o código, colar no seu projeto e personalizar com seus textos e estilos.
💡 O que ela faz:
✅ Cria a estrutura HTML com base no layout desenhado
✅ Gera o posicionamento CSS usando Grid
✅ Permite visualização em tempo real
✅ Facilita a prototipagem e aprendizado
🚨 Acesse esse projeto aqui pelo Readme: 🔗 README.md
Olá, sou o Emerson, um apaixonado por desenvolvimento front-end e criação de interfaces que se conectam com pessoas.
Tenho experiência em:
- HTML5 semântico
- CSS3 com animações criativas
- JavaScript interativo
- Python para lógica e automações web
- Figma para prototipagem visual
- Banco de dados com SQL e MySQL
- Versionamento com Git/GitHub
- 💻 Sites Responsivos & Modernos
- 🎨 Design de Interfaces com Figma
- 🧠 Soluções Web com Python
- 🔎 Otimização de SEO e performance
- 🗄️ Integrações com bancos de dados MySQL
 |
 |
 |
 |
 |
 |
 |
 |
| Projeto | Descrição | Visual |
|---|---|---|
| MinfBook Rede Social | Rede social com interface amigável e personalizável | 🔗 Ver Projeto |
| Portfolio Interativo | Site com SPA, transições suaves e tema vibrante | 🔗 Ver Projeto |
| Landing Page Criativa | Interface com foco comercial e design responsivo | 🔗 Ver Projeto |
| Site Institucional | Página institucional com foco em soluções empresariais | 🔗 Ver Projeto |
| Tela de Login com Glassmorphism | Login com vídeo de fundo e efeito vidro | 🔗 Ver Projeto |
| Páginas de links personalizadas | Ambiente claro ou escuro com alternância dinâmica | 🔗 Ver Projeto |
📩 Fale comigo para colaborações e projetos criativos:
📚 Esta é minha trilha de aprendizado contínuo no desenvolvimento web, agora em uma única tabela detalhada:
| Área de Estudo / Tópico | Status | Ícone |
|---|---|---|
| 🎨 UI/UX com Figma | ✅ Concluído | 🎨 |
| 🌐 HTML5 | ✅ Concluído | 🌐 |
| Conceitos Fundamentais | ✅ Concluído | |
| Tags Essenciais | ✅ Concluído | |
| HTML Semântico | ✅ Concluído | |
| Formulários | ✅ Concluído | |
| Atributos | ✅ Concluído | |
| Metadados e SEO Básico | 🔄 Em Progresso | |
| 💅 CSS3 | ✅ Concluído | 💅 |
| Sintaxe CSS | ✅ Concluído | |
| Box Model | ✅ Concluído | |
| Display Properties | ✅ Concluído | |
| Posicionamento | ✅ Concluído | |
| Flexbox | ✅ Concluído | |
| CSS Grid | ✅ Concluído | |
| Responsividade com Media Queries | ✅ Concluído | |
| Unidades de Medida | ✅ Concluído | |
| Tipografia | ✅ Concluído | |
| Variáveis CSS | ✅ Concluído | |
| Transições e Animações | 🔄 Em Progresso | |
| Pseudo-classes e Pseudo-elementos | ✅ Concluído | |
| 💻 JavaScript | ✅ Concluído | 💻 |
| Fundamentos | ✅ Concluído | |
| Funções | ✅ Concluído | |
| Arrays e Objetos | ✅ Concluído | |
| Manipulação do DOM | ✅ Concluído | |
| Eventos | ✅ Concluído | |
| Assincronicidade | 🔄 Em Progresso | |
| Fetch API e Requisições HTTP | 🔄 Em Progresso | |
| Módulos ES6 | 🆕 Não Iniciado | |
| Programação Orientada a Objetos | 🆕 Não Iniciado | |
| Manipulação de Erros | 🆕 Não Iniciado | |
| ⚛️ React.js (e Frameworks Front-end) | 🔄 Em Progresso | ⚛️ |
| Introdução ao React | 🆕 Não Iniciado | |
| Componentes | 🆕 Não Iniciado | |
| Estado (State) | 🆕 Não Iniciado | |
| Ciclo de Vida | 🆕 Não Iniciado | |
| Eventos | 🆕 Não Iniciado | |
| Hooks | 🆕 Não Iniciado | |
| Gerenciamento de Estado Global | 🆕 Não Iniciado | |
| Roteamento | 🆕 Não Iniciado | |
| Requisições HTTP | 🆕 Não Iniciado | |
| Estilização | 🆕 Não Iniciado | |
| Boas Práticas | 🆕 Não Iniciado | |
| 🟢 Node.js e Express.js (Back-end) | 🔄 Em Progresso | 🟢 |
| Arquitetura Node.js | 🆕 Não Iniciado | |
| Módulos Nativos | 🆕 Não Iniciado | |
| Express.js Avançado | 🆕 Não Iniciado | |
| Conectividade com Banco de Dados | 🆕 Não Iniciado | |
| Autenticação e Autorização | 🆕 Não Iniciado | |
| Upload de Arquivos | 🆕 Não Iniciado | |
| Variáveis de Ambiente | 🆕 Não Iniciado | |
| 🗄️ Bancos de Dados (SQL e NoSQL) | ✅ Concluído | 🗄️ |
| Conceitos Fundamentais | ✅ Concluído | |
| SQL (DDL, DML, Joins, Índices, Transações, Normalização) | ✅ Concluído | |
| NoSQL (Conceitos, CRUD, Consultas Avançadas, Modelagem de Dados) | 🔄 Em Progresso | |
| ORMs/ODMs | 🆕 Não Iniciado | |
| 🐙 Git e GitHub (Controle de Versão) | ✅ Concluído | 🐙 |
| Conceitos Básicos | ✅ Concluído | |
| Comandos Essenciais | ✅ Concluído | |
| Branches | ✅ Concluído | |
| Merge e Rebase | ✅ Concluído | |
| Resolução de Conflitos | ✅ Concluído | |
| Trabalhando com Repositórios Remotos | ✅ Concluído | |
| Ignorando Arquivos | ✅ Concluído | |
| Histórico e Reversão | ✅ Concluído | |
| 🟦 TypeScript | 🆕 Não Iniciado | 🟦 |
| Introdução | 🆕 Não Iniciado | |
| Tipos Básicos | 🆕 Não Iniciado | |
| Arrays e Tuplas | 🆕 Não Iniciado | |
| Interfaces e Types | 🆕 Não Iniciado | |
| Funções | 🆕 Não Iniciado | |
| Classes | 🆕 Não Iniciado | |
| Generics | 🆕 Não Iniciado | |
| Enums | 🆕 Não Iniciado | |
| Type Assertion e Type Guard | 🆕 Não Iniciado | |
Configuração (tsconfig.json) |
🆕 Não Iniciado | |
| Integração | 🆕 Não Iniciado | |
| 📦 Gerenciamento de Pacotes e Bundlers | 🆕 Não Iniciado | 📦 |
| NPM/Yarn | 🆕 Não Iniciado | |
| Webpack | 🆕 Não Iniciado | |
| Vite | 🆕 Não Iniciado | |
| 🧪 Testes (Unitários, Integração, E2E) | 🔄 Em Progresso | 🧪 |
| Conceitos | 🆕 Não Iniciado | |
| Ferramentas de Teste | 🆕 Não Iniciado | |
| Testes Unitários | 🆕 Não Iniciado | |
| Testes de Integração | 🆕 Não Iniciado | |
| Testes E2E | 🆕 Não Iniciado | |
| Cobertura de Testes | 🆕 Não Iniciado | |
| 🐳 Docker | 🆕 Não Iniciado | 🐳 |
| Conceitos | 🆕 Não Iniciado | |
| Instalação e Configuração | 🆕 Não Iniciado | |
| Comandos Básicos | 🆕 Não Iniciado | |
| Dockerfile | 🆕 Não Iniciado | |
| Docker Compose | 🆕 Não Iniciado | |
| Volumes | 🆕 Não Iniciado | |
| Redes | 🆕 Não Iniciado | |
| ⚙️ CI/CD | 🆕 Não Iniciado | ⚙️ |
| Conceitos | 🆕 Não Iniciado | |
| Ferramentas | 🆕 Não Iniciado | |
| GitHub Actions | 🆕 Não Iniciado | |
| ☁️ Cloud Computing (Básico) | 🆕 Não Iniciado | ☁️ |
| Conceitos Fundamentais | 🆕 Não Iniciado | |
| Modelos de Implantação | 🆕 Não Iniciado | |
| Serviços Comuns | 🆕 Não Iniciado | |
| Deploy de Aplicações | 🆕 Não Iniciado | |
| 🔒 Segurança da Aplicação | 🔄 Em Progresso | 🔒 |
| OWASP Top 10 | 🆕 Não Iniciado | |
| Validação de Entrada | 🆕 Não Iniciado | |
| Proteção contra XSS | 🆕 Não Iniciado | |
| Proteção contra CSRF | 🆕 Não Iniciado | |
| Gerenciamento de Sessão | 🆕 Não Iniciado | |
| Criptografia | 🆕 Não Iniciado | |
| HTTPS | 🆕 Não Iniciado | |
| CORS | 🆕 Não Iniciado | |
| Segurança de APIs | 🆕 Não Iniciado | |
| Segurança de Banco de Dados | 🆕 Não Iniciado | |
| 📐 Padrões de Projeto e Boas Práticas de Código | 🆕 Não Iniciado | 📐 |
| Princípios SOLID | 🆕 Não Iniciado | |
| Padrões de Projeto Comuns | 🆕 Não Iniciado | |
| Clean Code | 🆕 Não Iniciado | |
| Refatoração | 🆕 Não Iniciado | |
| Organização de Projetos | 🆕 Não Iniciado | |
| Linter e Formatadores | 🆕 Não Iniciado |
🧠 "Para quem não sabe para onde vai, qualquer caminho serve."
Rede social com interface amigável e personalizável, oferecendo recursos como menu lateral, busca de mensagens, customização de tema e fonte, além de opções de cores e fundos. Desenvolvido com HTML, CSS e JavaScript.
Landing page moderna e responsiva com animação 3D interativa usando Spline, efeitos modernos em CSS e animações com AOS. Design focado em performance, UX e SEO, ideal para apresentar serviços e atrair clientes com impacto visual.
Site institucional com layout moderno e responsivo, criado com HTML5, CSS3 e JavaScript. Apresenta soluções empresariais com foco em performance e clareza visual.
Site fictício criado para portfólio de desenvolvedor, representando uma empresa de contabilidade. Projeto moderno, responsivo e animado, com foco em serviços, contato, carrossel de clientes e formulário funcional.
Interface de login com vídeo de fundo, efeito vidro (glassmorphism), animação de cursor, tradução dinâmica (pt/en/es) e design responsivo. Desenvolvido com HTML, CSS e JavaScript puro, focando em acessibilidade e experiência moderna.
O projeto apresenta uma interface moderna e responsiva, com links organizados para redes sociais e outros destinos personalizados. O usuário pode alternar dinamicamente entre os modos claro e escuro, oferecendo uma experiência visual adaptável. É ideal como página de apresentação pessoal, com navegação simples e acesso rápido a conteúdos importantes.
“Interfaces são poemas visuais que guiam o usuário com leveza e propósito.” 🎭✨