{"id":566,"date":"2026-07-31T13:49:13","date_gmt":"2026-07-31T16:49:13","guid":{"rendered":"https:\/\/carloslopes.programandosolucoes.com.br\/index.php\/portfolio-frontend\/"},"modified":"2026-08-05T17:05:10","modified_gmt":"2026-08-05T20:05:10","slug":"portfolio-frontend","status":"publish","type":"page","link":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/portfolio-frontend\/","title":{"rendered":"Portf\u00f3lio \u2014 Frontend"},"content":{"rendered":"<style>\n.pf-wrap{max-width:1100px;margin:0 auto;font-size:16px;line-height:1.65}\n.pf-chamada{font-size:1.15rem;opacity:.85;margin:0 0 2rem}\n.pf-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}\n.pf-card{border:1px solid rgba(128,128,128,.3);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}\n.pf-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}\n.pf-card img{width:100%;height:180px;object-fit:cover;display:block;background:rgba(128,128,128,.12)}\n.pf-card-corpo{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}\n.pf-card h3{margin:0;font-size:1.05rem;line-height:1.35}\n.pf-card p{margin:0;font-size:.92rem;opacity:.85;flex:1}\n.pf-chips{display:flex;flex-wrap:wrap;gap:.35rem}\n.pf-chip{font-size:.75rem;padding:.18rem .55rem;border-radius:999px;border:1px solid rgba(128,128,128,.35);opacity:.9}\n.pf-meta{font-size:.8rem;opacity:.7}\n.pf-cadeado{font-size:.8rem;opacity:.75}\n.pf-hero{margin:0 0 1.5rem}\n.pf-hero h1{margin:0 0 .4rem;line-height:1.2}\n.pf-secao{margin:2rem 0}\n.pf-secao h2{font-size:1.15rem;margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75}\n.pf-galeria{display:grid;gap:1.2rem;margin:2rem 0}\n.pf-galeria figure{margin:0}\n.pf-galeria img{width:100%;border:1px solid rgba(128,128,128,.3);border-radius:8px;display:block}\n.pf-galeria figcaption{font-size:.85rem;opacity:.75;margin-top:.4rem}\n.pf-repo{border:1px solid rgba(128,128,128,.35);border-left-width:4px;border-radius:8px;padding:1rem 1.2rem;margin:2rem 0}\n.pf-repo h2{margin:0 0 .5rem;font-size:1rem;text-transform:uppercase;letter-spacing:.06em}\n.pf-repo pre{background:rgba(128,128,128,.12);padding:.7rem .9rem;border-radius:6px;overflow-x:auto;margin:.6rem 0;font-size:.85rem}\n.pf-contato{margin:2rem 0;padding-top:1.2rem;border-top:1px solid rgba(128,128,128,.3);font-size:.95rem}\n.pf-voltar{display:inline-block;margin-bottom:1rem;font-size:.9rem}\n@media (max-width:600px){.pf-card img{height:150px}}\n<\/style>\n<div class=\"pf-wrap\">\n<p class=\"pf-chamada\">Interfaces que eu projetei e constru\u00ed: pain\u00e9is de opera\u00e7\u00e3o, editores visuais e aplica\u00e7\u00f5es de tempo real.<\/p>\n<div class=\"pf-grade\">\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-discador\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/discador-01-painel.png\" alt=\"Painel de opera\u00e7\u00e3o: campanhas, mailing e estado do discador\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-discador\/\">Plataforma de Discador VoIP para Call Center<\/a><\/h3>\n<p>Plataforma completa de discagem para call center: painel de opera\u00e7\u00e3o, motor de discagem horizontal e uma linguagem pr\u00f3pria de fluxo de IVR.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">Python<\/span><span class=\"pf-chip\">Flask 3.1<\/span><span class=\"pf-chip\">PostgreSQL 17<\/span><span class=\"pf-chip\">Asterisk PJSIP<\/span><\/div>\n<div class=\"pf-meta\">01\/2025 &#8211; 07\/2026 \u00b7 12 a 18 meses<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-omnichannel\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/omnichannel-01-chat.png\" alt=\"Atendimento unificado: WhatsApp, e-mail e v\u00eddeo na mesma caixa\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-omnichannel\/\">Plataforma de Atendimento Omnichannel Multi-tenant<\/a><\/h3>\n<p>Plataforma de atendimento omnichannel multi-tenant, implementada duas vezes: primeiro em Node e TypeScript, depois reescrita inteira em Laravel.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">PHP 8.2<\/span><span class=\"pf-chip\">Laravel 12<\/span><span class=\"pf-chip\">React 18<\/span><span class=\"pf-chip\">TypeScript<\/span><\/div>\n<div class=\"pf-meta\">02\/2026 &#8211; 07\/2026 \u00b7 5 a 6 meses<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-analise-audio\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/analise-audio-01-relatorio.png\" alt=\"Relat\u00f3rio de an\u00e1lise: eventos de picote e dropout por chamada\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-analise-audio\/\">An\u00e1lise de Qualidade de Chamadas por Processamento de Sinais<\/a><\/h3>\n<p>Detecta picote, dropout e falha de \u00e1udio em grava\u00e7\u00f5es de chamadas por processamento de sinais \u2014 sem depender de transcri\u00e7\u00e3o.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">Python 3.14<\/span><span class=\"pf-chip\">NumPy<\/span><span class=\"pf-chip\">FFT<\/span><span class=\"pf-chip\">ITU-T G.107<\/span><\/div>\n<div class=\"pf-meta\">07\/2026 &#8211; atual \u00b7 3 meses<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-painel-git\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/painel-git-01-repos.png\" alt=\"Painel de administra\u00e7\u00e3o com os reposit\u00f3rios hospedados\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-painel-git\/\">Plataforma Pr\u00f3pria de Hospedagem Git<\/a><\/h3>\n<p>Alternativa self-hosted a GitHub e GitLab, escrita em PHP puro, sem nenhuma depend\u00eancia de runtime.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">PHP 8.2<\/span><span class=\"pf-chip\">Git Smart HTTP<\/span><span class=\"pf-chip\">WebDAV RFC 4918<\/span><span class=\"pf-chip\">AES-256-GCM<\/span><\/div>\n<div class=\"pf-meta\">08\/2025 &#8211; atual \u00b7 9 a 11 meses<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-evoluai\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/evoluai-01-arquitetura.png\" alt=\"Da grava\u00e7\u00e3o no PABX \u00e0 an\u00e1lise de qualidade\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-evoluai\/\">Plataforma de An\u00e1lise de Intera\u00e7\u00f5es com IA<\/a><\/h3>\n<p>Coleta grava\u00e7\u00f5es de PABX e de reuni\u00f5es, transcreve e gera an\u00e1lise de qualidade de atendimento assistida por IA.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">Bun<\/span><span class=\"pf-chip\">Turborepo<\/span><span class=\"pf-chip\">Hono<\/span><span class=\"pf-chip\">tRPC 11<\/span><\/div>\n<div class=\"pf-meta\">05\/2026 &#8211; atual \u00b7 3 meses<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-auditor-amd\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/auditor-amd-01-painel.png\" alt=\"As cinco categorias de diverg\u00eancia, com filtro por empresa e por tronco\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-auditor-amd\/\">Auditoria de Classificador de Secret\u00e1ria Eletr\u00f4nica (AMD)<\/a><\/h3>\n<p>Audita o classificador de secret\u00e1ria eletr\u00f4nica de uma plataforma de discagem e mostra, chamada a chamada, onde ele erra.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">Python<\/span><span class=\"pf-chip\">Flask<\/span><span class=\"pf-chip\">SQLite<\/span><span class=\"pf-chip\">NumPy<\/span><\/div>\n<div class=\"pf-meta\">07\/2026 &#8211; atual \u00b7 1 m\u00eas<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-vtiger-assistente-ia\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/vtiger-ia-01-ferramentas.png\" alt=\"As quatro ferramentas expostas ao modelo e as quatro travas de seguran\u00e7a\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-vtiger-assistente-ia\/\">Assistente de IA com Acesso aos Dados do CRM<\/a><\/h3>\n<p>Addon de vtiger que responde perguntas consultando os dados do pr\u00f3prio CRM, com a fronteira de seguran\u00e7a desenhada antes da funcionalidade.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">PHP<\/span><span class=\"pf-chip\">MySQL<\/span><span class=\"pf-chip\">vtiger CRM<\/span><span class=\"pf-chip\">JavaScript<\/span><\/div>\n<div class=\"pf-meta\">08\/2026 \u00b7 3 dias<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-migrador-email\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/migrador-email-01-etapas.png\" alt=\"As duas etapas retom\u00e1veis e o \u00edndice que impede duplicar mensagem\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-migrador-email\/\">Migrador de Caixa Postal IMAP para Outlook<\/a><\/h3>\n<p>Aplicativo de mesa que migra uma conta IMAP inteira para o Outlook com backup em mbox, retom\u00e1vel, s\u00f3 com a biblioteca padr\u00e3o do Python.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">Python<\/span><span class=\"pf-chip\">Tkinter<\/span><span class=\"pf-chip\">IMAP<\/span><span class=\"pf-chip\">OAuth2<\/span><\/div>\n<div class=\"pf-meta\">08\/2026 \u00b7 1 semana<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-touchtypingtrainer\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/touchtyping-01-recuperacao.png\" alt=\"Do execut\u00e1vel ao fonte verificado, com a confer\u00eancia instru\u00e7\u00e3o a instru\u00e7\u00e3o\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-touchtypingtrainer\/\">Recupera\u00e7\u00e3o de C\u00f3digo-Fonte a partir de Execut\u00e1vel<\/a><\/h3>\n<p>Fonte de um programa recuperado do execut\u00e1vel com verifica\u00e7\u00e3o por bytecode, reorganizado em m\u00f3dulos e estendido com exerc\u00edcios por IA.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">Python<\/span><span class=\"pf-chip\">PyInstaller<\/span><span class=\"pf-chip\">bytecode<\/span><span class=\"pf-chip\">engenharia reversa<\/span><\/div>\n<div class=\"pf-meta\">08\/2026 \u00b7 1 semana<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-latex-resume-builder\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/latex-builder-01-arquitetura.png\" alt=\"A compila\u00e7\u00e3o no navegador e as duas variantes de implanta\u00e7\u00e3o\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-latex-resume-builder\/\">Editor Web de Curr\u00edculos em LaTeX<\/a><\/h3>\n<p>Editor de curr\u00edculos em LaTeX com compila\u00e7\u00e3o no navegador, entregue tamb\u00e9m em variante PHP para hospedagem compartilhada.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">React<\/span><span class=\"pf-chip\">TypeScript<\/span><span class=\"pf-chip\">PHP<\/span><span class=\"pf-chip\">SQLite<\/span><\/div>\n<div class=\"pf-meta\">08\/2026 \u00b7 2 semanas<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article>\n<article class=\"pf-card\">\n      <a href=\"\/index.php\/portfolio-chat-suporte\/\"><br \/>\n        <img decoding=\"async\" src=\"https:\/\/carloslopes.programandosolucoes.com.br\/wp-content\/uploads\/portfolio\/manual-chat-01-atendimento.png\" alt=\"O atendimento em uso: o cliente escolhe, o assistente responde e o submenu do tema aparece\" loading=\"lazy\"><br \/>\n      <\/a><\/p>\n<div class=\"pf-card-corpo\">\n<h3><a href=\"\/index.php\/portfolio-chat-suporte\/\">Assistente de Suporte Guiado por Fluxo JSON, sem IA<\/a><\/h3>\n<p>Primeira linha de suporte t\u00e9cnico de um PABX em nuvem, com o di\u00e1logo inteiro declarado em JSON e nenhuma depend\u00eancia de IA.<\/p>\n<div class=\"pf-chips\"><span class=\"pf-chip\">JavaScript (ES6+)<\/span><span class=\"pf-chip\">HTML5<\/span><span class=\"pf-chip\">CSS3<\/span><span class=\"pf-chip\">JSON<\/span><\/div>\n<div class=\"pf-meta\">08\/2025 &#8211; 08\/2026 \u00b7 1 semana<\/div>\n<div class=\"pf-cadeado\">\ud83d\udd12 reposit\u00f3rio privado<\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Interfaces que eu projetei e constru\u00ed: pain\u00e9is de opera\u00e7\u00e3o, editores visuais e aplica\u00e7\u00f5es de tempo real. Plataforma de Discador VoIP para Call Center Plataforma completa de discagem para call center: painel de opera\u00e7\u00e3o, motor de discagem horizontal e uma linguagem pr\u00f3pria de fluxo de IVR. PythonFlask 3.1PostgreSQL 17Asterisk PJSIP 01\/2025 &#8211; 07\/2026 \u00b7 12 a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-566","page","type-page","status-publish","hentry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"br","enabled_languages":["en","br","it"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"br":{"title":false,"content":false,"excerpt":false},"it":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/pages\/566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":4,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/pages\/566\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/pages\/566\/revisions\/622"}],"wp:attachment":[{"href":"https:\/\/carloslopes.programandosolucoes.com.br\/br\/index.php\/wp-json\/wp\/v2\/media?parent=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}