Miguel Oliveira — Front-end developer | JavaScript ES6+ | HTML5 | CSS3
Desenvolvedor em formação, cursando Análise e Desenvolvimento de Sistemas, com formação complementar em Full Stack Development pelo DevClub, ampliando continuam
Desenvolvedor em formação, cursando Análise e Desenvolvimento de Sistemas, com formação complementar em Full Stack Development pelo DevClub, ampliando continuamente minha experiência prática na construção de aplicações completas. Minha formação combina fundamentos de desenvolvimento Front-End e Back-End, lógica de programação, arquitetura de aplicações, integração entre sistemas e desenvolvimento de projetos práticos.
Possuo conhecimentos em Java com Spring e Python com Django e Flask, aplicando conceitos de Programação Orientada a Objetos (POO), desenvolvimento de aplicações e APIs, regras de negócio e integração de sistemas. No Front-End, tenho experiência prática com HTML5, CSS3 e JavaScript ES2026, desenvolvendo interfaces responsivas e projetos web.
Também possuo conhecimentos em MySQL, PostgreSQL e MongoDB, além de testes unitários e de integração, metodologias ágeis (Scrum e Kanban) e boas práticas de segurança, incluindo validação de entradas e desenvolvimento de código seguro.
Minha formação também inclui Redes de Computadores pela Cisco Networking Academy, com conhecimentos em IPv4/IPv6, TCP/IP, modelo OSI e roteamento básico. A experiência profissional em desenvolvimento e suporte técnico complementa minha base técnica com troubleshooting, análise de incidentes, resolução de problemas e compreensão das necessidades do usuário.
Atualmente, sigo aprofundando meus conhecimentos por meio da graduação em ADS e da formação Full Stack Pro do DevClub, que reforça minha preparação prática para atuar no desenvolvimento de aplicações completas e na evolução contínua como desenvolvedor.
Projetos e portfólio
NexaPDV — Sistema SaaS Multi-Tenant & PDV Comercial
NexaPDV — Sistema SaaS Multi-Tenant & PDV Comercial
Complexidade do Projeto & Stack:
O NexaPDV é uma plataforma comercial de faturamento e controle de caixa operando no modelo SaaS White Label. O desafio técnico central foi transformar uma aplicação desktop local em um sistema escalável e seguro na nuvem, isolando os dados de múltiplos estabelecimentos em uma única infraestrutura unificada.
• Frontend & Desktop: React, TypeScript, Tailwind CSS, shadcn/ui e Electron para empacotamento nativo Windows.
• Backend & Data: Supabase (PostgreSQL) e TanStack Query (React Query) para sincronização assíncrona de estado e cache em tempo real.
• Infraestrutura: Servidor Cloud VPS KVM 2 para hospedagem e deploy de alta disponibilidade.
Arquitetura, Métodos & Funcionalidades:
1. Segurança Multi-Tenancy: Implementação de políticas de segurança de linha (RLS — Row Level Security) no PostgreSQL. O faturamento e estoque de uma empresa jamais cruzam ou vazam para outra.
2. Automação Serverless via Banco: Criação de rotinas em PL/pgSQL e gatilhos automáticos (Database Triggers) com permissões SECURITY DEFINER. No cadastro de um novo usuário, o banco injeta o ambiente isolado de forma autônoma.
3. Lógica Dinâmica White Label: Interface adaptável que altera cabeçalhos e cupons fiscais em tempo real conforme a empresa logada. Inclui fechamento de turnos, sangrias/suprimentos, estorno automático de estoque em cancelamentos e emissão de cupons para bobinas térmicas POS58.
Experiências Obtidas:
Gerenciamento do ciclo de vida completo de um produto comercial real (SDLC), desde os requisitos com o cliente final até o design de arquitetura cloud, controle de cache e licenças ativas de uso.
Convert Money
Projeto Front-end desenvolvido para praticar e consolidar fundamentos essenciais do desenvolvimento web, utilizando HTML5, CSS3 e JavaScript (ES6+), com foco na criação de uma interface funcional, responsiva e orientada à experiência do usuário.
A aplicação foi estruturada com HTML semântico, separando os elementos de entrada, seleção de moedas e apresentação dos resultados. No CSS, foram aplicados conceitos de estilização, box model, flexibilidade de layout, tipografia, espaçamento, cores e componentes visuais, buscando uma interface simples e intuitiva.
No JavaScript, o projeto trabalha conceitos como manipulação do DOM, seleção e atualização dinâmica de elementos, eventos, funções, condicionais, variáveis e formatação numérica utilizando Intl.NumberFormat, permitindo que os valores sejam apresentados de acordo com a moeda selecionada.
A lógica do sistema contempla diferentes moedas, como Real Brasileiro (BRL), Dólar Americano (USD), Euro (EUR), Libra Esterlina (GBP) e Bitcoin (BTC), realizando os cálculos de conversão a partir dos valores definidos no sistema e atualizando o resultado dinamicamente na interface.
Além da implementação funcional, o desenvolvimento proporcionou experiência prática na integração entre HTML, CSS e JavaScript, organização de arquivos, depuração de código, identificação de erros lógicos e construção de uma aplicação completa partindo de uma interface visual até sua camada de comportamento.
Tecnologias: HTML5 • CSS3 • JavaScript • DOM • ES6+ • Intl.NumberFormat
Principais conhecimentos aplicados: lógica de programação • manipulação do DOM • eventos • funções • condicionais • formatação de dados • desenvolvimento Front-end • UI básica • organização de código e resolução de problemas.
Um projeto de escopo relativamente simples em produto final, mas importante como exercício de fundamentos de desenvolvimento Front-end e transformação de requisitos visuais em uma aplicação funcional.
Congratulations
Desenvolvimento de uma interface Front-End baseada em uma referência visual, utilizando HTML5 e CSS3 como principais tecnologias. O objetivo do projeto foi reproduzir a estrutura e a identidade visual da página, aplicando conceitos fundamentais de desenvolvimento web e atenção à organização dos elementos em tela.
Durante o desenvolvimento, trabalhei com estruturação semântica em HTML, estilização e organização visual com CSS, definição de tipografia, cores, espaçamentos, margens, dimensões, bordas e posicionamento dos componentes. A interface foi construída separando elementos de navegação, imagem principal e área de conteúdo, proporcionando uma estrutura mais clara e organizada para futuras evoluções.
Um dos principais desafios foi transformar uma referência visual em código, analisando proporções, alinhamentos e detalhes de design para alcançar um resultado visualmente consistente. Esse processo reforçou a importância da precisão no Front-End e da capacidade de interpretar uma interface antes de iniciar sua implementação.
Além do aprendizado técnico em HTML e CSS, o projeto proporcionou experiência prática em análise de layouts, resolução de problemas visuais, organização de código e atenção aos detalhes da interface.
Projetos como este fazem parte do meu processo de evolução como desenvolvedor, fortalecendo minha base em tecnologias Front-End e demonstrando minha capacidade de transformar referências visuais em interfaces funcionais por meio de código.
Easy Shopping Via Mobile
Este projeto foi desenvolvido com foco na construção de uma interface moderna, responsiva e orientada à experiência do usuário, simulando uma solução de compras via dispositivos móveis. O desenvolvimento envolveu a aplicação prática de conceitos fundamentais de HTML5 e CSS3, estruturação semântica, organização de componentes visuais, estilização avançada e adaptação da interface para diferentes resoluções.
Durante o desenvolvimento, utilizei Visual Studio Code como ambiente de desenvolvimento e Chrome DevTools para inspeção, testes e validação responsiva. Também trabalhei com Media Queries, Flexbox, dimensionamento relativo, tipografia, espaçamentos e layouts adaptativos, garantindo que a interface se comportasse corretamente em diferentes tamanhos de tela.
Um dos principais desafios foi reproduzir fielmente o layout proposto e, ao mesmo tempo, criar uma experiência consistente entre desktop e mobile, exigindo atenção à hierarquia visual, posicionamento dos elementos e comportamento responsivo.
O projeto proporcionou experiência prática em desenvolvimento Front-end, responsividade, debugging, organização de código e resolução de problemas de interface, fortalecendo minha base para projetos reais e demandas profissionais.
Tecnologias e ferramentas: HTML5 • CSS3 • Flexbox • Media Queries • Responsive Design • Visual Studio Code • Chrome DevTools • Git/GitHub
We care your pet
Este projeto foi desenvolvido como parte da minha evolução prática em desenvolvimento Front-End, com foco na construção de uma interface moderna, organizada e visualmente consistente. Utilizei HTML5 para estruturar semanticamente os elementos da página e CSS3 para desenvolver toda a estilização, posicionamento, tipografia, espaçamentos e identidade visual.
O desenvolvimento envolveu a aplicação de conceitos fundamentais e importantes para projetos reais, como estruturação semântica, organização de classes, estilização de componentes, controle de dimensões com box-sizing, utilização de fontes externas através do Google Fonts e criação de uma hierarquia visual clara para melhorar a experiência do usuário.
Apesar de ser um projeto Front-End inicial, sua construção exigiu atenção aos detalhes de layout, alinhamento, proporções, espaçamento e consistência visual, além da compreensão de como HTML e CSS trabalham em conjunto para transformar uma estrutura simples em uma interface funcional e profissional.
The Super Mario Bros
Este projeto foi desenvolvido para aplicar, na prática, conceitos importantes do desenvolvimento Front-End, indo além da criação de uma interface apenas visual. O objetivo foi integrar estrutura, design e lógica de programação para construir uma experiência dinâmica, interativa e funcional.
A aplicação foi desenvolvida utilizando HTML5, CSS3 e JavaScript, com o Visual Studio Code como ambiente principal de desenvolvimento.
O HTML5 foi utilizado para estruturar e organizar os elementos da página. O CSS3 foi responsável pela construção da interface, identidade visual, posicionamento dos componentes e efeitos visuais. Já o JavaScript trouxe a camada de comportamento da aplicação, permitindo transformar elementos estáticos em componentes interativos.
Durante o desenvolvimento, foram aplicados conceitos como manipulação do DOM (Document Object Model), eventos e controle dinâmico dos elementos da interface.
⚙️ Complexidade e experiência adquirida
Um dos principais desafios foi garantir a integração correta entre HTML, CSS e JavaScript, fazendo com que estrutura, estilização e lógica funcionassem em conjunto.
O desenvolvimento também envolveu testes, identificação de erros, debugging e ajustes para garantir o funcionamento adequado das interações.
Entre os principais conhecimentos aplicados e aprimorados estão:
• Estruturação de interfaces web;
• Organização de HTML e componentes;
• CSS e construção de interfaces visuais;
• JavaScript para lógica e interatividade;
• Manipulação dinâmica do DOM;
• Eventos e interação com o usuário;
• Debugging e resolução de problemas;
• Organização e manutenção de código.
Mais do que desenvolver uma página visual, este projeto foi uma oportunidade de transformar conhecimentos teóricos em uma aplicação funcional, aprimorando habilidades técnicas, lógica de programação e resolução de problemas.
CSS Gerador por IA
Desenvolvi uma aplicação web capaz de transformar descrições escritas pelo usuário em código e uma visualização do resultado.
O funcionamento é simples: o usuário descreve o que deseja criar — por exemplo, uma animação ou elemento visual — e a aplicação envia essa solicitação para uma API de Inteligência Artificial. A resposta recebida é processada e exibida na própria interface, mostrando tanto o código gerado quanto o resultado visual em tempo real.
O projeto envolve um fluxo completo de desenvolvimento, desde a interação do usuário até a integração com uma API externa e a renderização dinâmica do resultado.
Tecnologias utilizadas:
HTML para a estrutura da aplicação;
CSS para estilização, layout e interface;
JavaScript para a lógica e interatividade;
Fetch API para comunicação com serviços externos;
Async/Await para requisições assíncronas;
API de Inteligência Artificial para geração dinâmica do código;
Manipulação do DOM para atualizar o código e o preview automaticamente.
O fluxo da aplicação funciona da seguinte forma:
Usuário descreve uma ideia → JavaScript envia a solicitação para a IA → a API processa a solicitação → o código é retornado → a aplicação exibe o código e renderiza o resultado visual.
Esse projeto foi uma oportunidade de aplicar, na prática, conceitos de desenvolvimento Front-End, integração de APIs, requisições HTTP, JavaScript assíncrono e manipulação dinâmica da interface.