Skip to main content

Portal

Portfólio Arquitetura - Winicius Moraes

Portfolio pessoal de um arquiteto, construído como uma experiência imersiva de navegação editorial. O site apresenta projetos arquitetônicos em um deck full-screen estilo "virada de revista", com transições suaves e design system earthy/terracota.

Destaques técnicos:
  • Navegação deck full-screen — home e páginas de projeto funcionam como slides imersivos com 5 tipos de transição (fade, slide, reveal, scale, clip), suporte a scroll, teclado, touch e indicadores dots
  • Design system "Earthy Editorial Architecture" — protótipo gerado via Lovable (React/TS), portado para Drupal Twig + Tailwind CSS + SCSS com tokens OKLCH→HSL
  • 18 componentes vanilla JS — zero frameworks no bundle (React, Vue). Carousel customizado, word reveal, fade up, portfolio hover, accordion, lightbox, parallax e menu mobile drawer
  • 16+ tipos de parágrafo — composição dinâmica da home via paragraphs (hero, about, banners, sliders, cards, galerias, FAQs, depoimentos, colunas, formulários)
  • 8 módulos custom — menu service com classes admin-configuráveis, counter de views assíncrono via Beacon API, metatags com fallback chain + JSON-LD, gerenciamento de currículo, footer de contato editável
  • Pipeline de build — SASS → Tailwind CSS 3 → esbuild (vanilla JS bundling), com modos dev/build/watch
  • Deploy automatizado — GitHub Actions → SSH Hostinger (composer install, updb, cim, cr)
  • Acessibilidade — animações respeitam prefers-reduced-motion, ARIA labels, skip-to-content, aria-expanded em accordions
 
Tecnologias:

Backend: Drupal 11.4, PHP 8.3, MariaDB 10.11
Frontend: Twig, Tailwind CSS 3.4, SASS/SCSS, esbuild, Swiper.js (carrosséis), GLightbox (galeria/vídeo)
DevOps: DDEV (ambiente local containerizado), GitHub Actions (CI/CD), SSH deploy para Hostinger, Drush
Arquitetura: Subtheme Olivero, 2 custom modules (MenuService, ContentViewsCounter), design system com variáveis CSS, zero React/Vue em produção

Website Candidatura 2026

Template white-label modular para candidatos políticos, construído sobre Drupal 11. Cada candidato é uma instância independente do projeto com branding customizado (nome, cores, partido, slogan). A plataforma é um site institucional de campanha com seções dinâmicas gerenciadas por parágrafos drag-and-drop:

  • Landing pages modulares com 20+ tipos de parágrafo (banners, sliders, cards, galerias de vídeo, FAQs, depoimentos, mapa de ação regional, dashboard de dados, widget de doação e central de downloads)
  • Galeria de vídeos com carrossel Swiper, suporte a Shorts (9:16) e formato normal (16:9), abertura via GLightbox sem sair do site
  • Sistema de vídeos RSS sem API para canais do YouTube e integração com YouTube Data API v3 para playlists
  • Agenda de eventos com data, local, organizadores e capacidade
  • Blog técnico com artigos, categorias, tags, autor com perfil e contador de visualizações assíncrono via JS Beacon.
  • Formulário de contato com envio via SMTP e proteção por CAPTCHA
  • Menu responsivo com drawer lateral em mobile e navegação por âncoras
  • SEO com metatags, rotas amigáveis via Pathauto e sitemap XML
  • WhatsApp flutuante com número configurável
Tecnologia:

Backend: Drupal 11, PHP 8.3, MariaDB 10.11, Drush CLI
Frontend: Twig, Tailwind CSS 3, SCSS, esbuild, Swiper.js (carrosséis), GLightbox (galeria de vídeo), GLightbox + YouTube IFrame API (vídeos externos)
APIs: YouTube Data API v3 (playlists), YouTube RSS (canais), REST API (contador de views)
DevOps: DDEV (ambiente local), SSH deploy para Hostinger, Drush deploy script com modo manutenção automático
Arquitetura: Tema customizado subtheme Olivero, módulos custom (video_gallery_source, content_views_counter, custom_menu, custom_forms), design system com tokens CSS configuráveis por candidato, accent color variável