Portfólio Arquitetura - Winicius Moraes
Ano
2026
Descrição
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
Meu papel
Full Stack Developer — responsável por todo o ciclo de desenvolvimento:
- Criação do design system "Earthy Editorial Architecture" a partir de protótipo React/TS do Lovable, convertendo tokens OKLCH para HSL e implementando em Twig + Tailwind
- Desenvolvimento do sistema de navegação deck full-screen em vanilla JS com 5 tipos de transição e suporte a scroll interno
- Implementação de 18 componentes JS vanilla (carousel customizado, word reveal, fade up, portfolio hover, lightbox, accordion, parallax, menu drawer)
- Criação de 16+ tipos de parágrafo para composição dinâmica de páginas
- Desenvolvimento de 8 módulos custom (MenuService, ContentViewCounter, Metatag, CvService, DeckFooter, SocialLinks, CustomForms, PortfolioDeck)
- Pipeline de build (SASS → Tailwind → esbuild) com modos dev/build/watch
- Configuração do deploy automatizado (GitHub Actions → Hostinger)
- Implementação de acessibilidade (prefers-reduced-motion, ARIA, skip-to-content)
Próximo projeto?
Tem algum projeto em mente? Vamos conversar!