// ═══════════════════════════════════════════════════════════════════ // Paulo Lebtag — Portfolio (responsive: mobile / tablet / desktop) // ═══════════════════════════════════════════════════════════════════ const { useState, useEffect, useRef, useMemo } = React; /* ─── DATA ─── */ const PROJECTS = [ { id: 'vonex', code: 'PRJ-001', name: 'CCM', full: 'Customer Communication Management', company: 'CCM', companyUrl: 't6.digital', role: 'Lead UX/UI + PM', year: '2023–Now', status: 'active', statusLabel: 'Working', accent: '#7B5FFF', tags: ['Omnichannel', 'AI', 'Product Strategy', 'UX/UI', 'CCM', 'CRM', 'WhatsApp', 'RCS', 'Email', 'Interaction Design', 'Research'], tagline: 'Unifying 6 communication channels with AI into one intelligent platform.', about: 'I helped with the ideation, benchmarking, prototyping, development and implementation of this innovative solution for clients. We developed a solution that combines omnichannel communication, artificial intelligence and data analysis to improve communication.', problem: 'Companies struggled with fragmented customer communication—limited channels, no data enrichment, automation without strategic insight, and unpredictable strategy outcomes from lack of real-time intelligence.', solution: 'Vonex CCM brings WhatsApp, RCS, SMS, Email, Voice and Chat together with AI automation, real-time analytics, payment integration and a visual Journey Builder — coordinating channels rather than just stacking them.', impact: ['Pitched to Samsung, Didi Global and Carrefour', 'Platform reached break-even', 'Led team of 4 designers & PMs as sole senior', '+50% customer satisfaction via coordinated channels (academic research)', 'In-person + remote sales support at industry events', 'Trained new clients post-implementation'], Demo: () => window.VonexDemo ? React.createElement(window.VonexDemo) : null, behance: 'https://www.behance.net/gallery/221141557/CCM-My-participation-in-this-project', behanceResearch: 'https://www.behance.net/gallery/230515536/CCM-UX-Research', leadership: 'As the only senior professional on the team, I took on a leadership role — leveraging my experience to guide and coordinate the project. I worked alongside a junior designer, a mid-level UX/UI designer and two mid-level product managers, ensuring alignment between design, business strategy and technical feasibility. My responsibilities spanned both UX and Product Management, making me directly accountable for visual design decisions, user experience flow analysis and strategic roadmap planning.', team: '1 Senior (lead) · 1 Junior Designer · 1 Mid UX/UI · 2 Mid Product Managers', whatIsCCM: 'A Customer Communication Management (CCM) system streamlines and enhances how businesses communicate with their customers across multiple channels. It centralizes and manages all customer interactions, ensuring consistency, personalization and efficiency in every message delivered.', problemDetails: [ ['Limited Communication Channels', 'Companies often rely on a few channels to reach customers, reducing engagement opportunities.'], ['Negative Feedback in Digital Spaces', 'The lack of responsive and personalized communication leads to a surge in online criticism.'], ['Insufficient Personalized Service', 'Providing tailored experiences is a struggle without the right tools.'], ['Database Management Challenges', 'Organizing, enriching and keeping customer data accurate is a complex task.'], ['Low Team Productivity', 'The absence of streamlined processes hampers efficiency.'], ['Unpredictable Strategy Outcomes', 'Businesses are frequently surprised by results due to lack of real-time insights.'] ], traditionalLimitations: [ ['Channel Integration Gaps', 'Omnichannel systems offer multiple channels but lack the coordination needed for a unified experience.'], ['Mailing Management Without Enrichment', 'They manage customer lists but ignore essential tasks like data enrichment, lead nurturing and cleansing.'], ['Automation Without Co-Creation', 'Automation is available but rarely includes co-creating customer journeys to enhance engagement.'], ['Reports Without Strategic Insight', 'Reports and dashboards exist but fail to deliver actionable insights that drive real-time strategy adjustments.'] ], modules: [ ['Messenger', 'Send individual and mass messages efficiently across WhatsApp, RCS, SMS, Email, Voice and Chat.'], ['Automaton AI', 'Integrates AI to automate operations, enhancing responsiveness and accuracy.'], ['Finance', 'Facilitates smooth payment transactions directly within the communication system.'], ['Advance', 'Data-driven insights to support and evolve business strategies.'], ['Elos', 'Diverse integration options to unify different platforms and tools.'], ['Presence 4.0', 'Cutting-edge technology solutions to enhance physical environments.'] ], responsibilities: [ 'Involved since project inception — first to start working on it. Led ideation, benchmarking, prototyping, development and implementation.', 'Designed visual presentations and pitched the project to Samsung, Didi Global, Carrefour and other major companies.', 'Led the implementation of AI-driven solutions, data analytics and omnichannel capabilities within the system.', 'Created the visual style for the platform and coordinated the style guide — assisting in the future development of a design system.', 'Oversaw developers as they coded the interfaces, ensuring adherence to defined rules for both BackEnd and FrontEnd.', 'Conducted competitor research with parametric analysis across numerous features; researched early adopters and their characteristics.', 'Helped sell the product at events (in-person and remotely) and trained new clients post-implementation.' ], insightStat: ['50%', 'Boost in customer satisfaction from effectively coordinated channels — according to academic research that underpinned the strategic direction of the platform.'], uxResearchNote: 'A dedicated UX Research effort (with Maria Clara Coimbra and Suzany Nogueira) is documented separately on Behance — covering communication, CRM and AI workstreams that fed into the CCM roadmap.' }, { id: 'unipix', code: 'PRJ-002', name: 'SMS Campaign System', full: 'SMS Marketing Platform', company: 'SMS Campaign System', companyUrl: 'unipix.com.br', role: 'Lead UX/UI + PM', year: '2022', status: 'done', statusLabel: 'Finished', accent: '#00CCFF', tags: ['SaaS', 'Campaign UX', 'Analytics', 'Design System', 'NOC'], tagline: 'Turning a white-label dependency into a proprietary SMS platform — one that reached break-even fast and now drives recurring revenue for Vonex.', about: 'As the only senior on the team, I led UX and Product Management to design Vonex’s own bulk-SMS marketing platform: campaign creation and scheduling, real-time delivery tracking, engagement analytics and a companion NOC (Network Operations Center) — replacing the rented white-label system the company depended on.', problem: 'Vonex resold SMS dispatch through third-party white-label systems. That left the company with no control over the user experience, no room to scale and razor-thin margins — and the customer data lived inside someone else’s platform.', problemDetails: [ ['No control over UX', 'The rented platform could not be tailored to clients or to Vonex’s own operation.'], ['Capped scalability', 'Third-party limits throttled volume and blocked growth.'], ['Thin margins', 'Reselling someone else’s product left little room for profitability.'], ['No data ownership', 'Delivery and engagement data stayed locked inside the vendor’s system.'] ], solution: 'We designed two coordinated products: the SMS platform for creating, scheduling and tracking bulk campaigns, and a NOC for client configuration and message-delivery oversight. Grounded in a competitor benchmark and a full service blueprint, the work shipped as a complete Design System for a consistent, intuitive experience across the platform.', modulesTitle: 'Platform Capabilities', modules: [ ['Campaign Manager', 'Create and schedule multiple bulk-SMS campaigns at once, organized by cost center and product route.'], ['Real-time Tracking', 'Live delivery status — handset, operator, scheduled, failed — as each campaign runs.'], ['Engagement Analytics', 'Clicks, replies, time-to-open and click-by-region maps to measure every send.'], ['Mailing Validation', 'Validate and cleanse contact lists before dispatch, with black/white-list management.'], ['NOC', 'A Network Operations Center for client configuration and message-delivery oversight.'], ['Four SMS routes', 'UniSMS Long, Short, LA Exclusivo and Fast — matched to each campaign’s volume and speed.'] ], leadership: 'I was the only senior professional on the team, leading both UX and Product Management. I mentored a junior designer and partnered with a mid-level product manager, balancing strategic thinking, hands-on design and the migration roadmap that moved existing customers onto the new system.', team: '1 Senior (lead) · 1 Junior Designer · 1 Mid Product Manager', responsibilities: [ 'Ran a comprehensive benchmark of the main competitors — UI, feature set and cost — to understand the SMS-delivery market.', 'Built a complete service blueprint mapping the end-to-end campaign process.', 'Designed the campaign-management and analytics flows, plus the NOC for delivery oversight.', 'Created the Design System and style guides for a uniform experience across the platform.', 'Planned the roadmap to migrate existing white-label customers onto the new system.' ], insightStat: ['2', 'Two coordinated systems were designed — the SMS campaign platform for dispatches and a NOC (Network Operations Center) for client configuration and delivery oversight.'], impact: ['Reached break-even swiftly and now drives significant revenue and profit', 'Two coordinated products shipped: SMS platform + NOC', 'Full Design System and style guide delivered', 'Competitor benchmark + end-to-end service blueprint', 'Migration roadmap moved white-label customers onto the new platform', 'Raised leadership’s recognition of design’s strategic value'], Demo: () => window.UnipixDemo ? React.createElement(window.UnipixDemo) : null, behance: 'https://www.behance.net/gallery/221142857/SMS-Marketing-Platform', site: 'https://unipix.com.br/prod-sms.html' }, { id: 'agrodash', code: 'PRJ-003', name: 'AgroDash', full: 'Precision Agriculture Analytics Dashboard', company: 'AgroDash', companyUrl: 'agritech.com.br', role: 'Lead Product Designer', year: '2023', status: 'done', statusLabel: 'Soon', soon: true, accent: '#00E59F', tags: ['AgriTech', 'Data Viz', 'Dashboard', 'B2B'], tagline: 'Real-time farm intelligence: crop health, irrigation, weather and financials in one view.', about: 'I designed a precision agriculture dashboard for a rural cooperative in Goiás with interactive farm plot maps, crop health monitoring, automated irrigation scheduling, climate alerts and revenue forecasting.', problem: 'A rural cooperative in Goiás managed 354 ha across spreadsheets and disconnected apps—no unified view of crop health, irrigation needs or financial performance.', solution: 'Designed a precision agriculture dashboard with interactive farm plot maps, crop health monitoring, automated irrigation scheduling, climate alerts and revenue forecasting.', impact: ['354 ha monitored across 7 plot types', '2× faster operational decisions', 'Irrigation water waste reduced 18%', 'Pilot expanded to 3 additional cooperatives'], Demo: () => window.AgroDash ? React.createElement(window.AgroDash) : null, behance: null }, { id: 'gestor', code: 'PRJ-004', name: 'Gestor Food', full: 'Food Orders Management App', company: 'Gestor Food', companyUrl: 'gestorfood.com.br', role: 'Lead Product Designer', year: '2022', status: 'done', statusLabel: 'Soon', soon: true, accent: '#FFB020', tags: ['Mobile', 'Food-tech', 'Kanban', 'B2B'], tagline: 'Replacing paper tickets and WhatsApp chaos with real-time order intelligence.', about: 'I designed a tablet-first order management app with a Kanban board, live table map, role-specific views for kitchen vs floor staff, and end-of-day reporting.', problem: 'Restaurant staff managed orders across paper, WhatsApp and verbal instructions—causing errors, delays and customer dissatisfaction at peak hours.', solution: 'Designed a tablet-first order management app with a Kanban board, live table map, role-specific views for kitchen vs floor staff, and end-of-day reporting.', impact: ['Order error rate reduced 60%', 'Average ticket processing time down 3 min', 'Deployed in 5-restaurant pilot', 'Manager satisfaction score 9.2/10'], Demo: () => window.GestorDemo ? React.createElement(window.GestorDemo) : null, behance: 'https://www.behance.net/gallery/221314201/Gestor-Food-Orders-App' }]; const EXTRA_TABLE_ROWS = [ { id: 'acsp', company: 'Microentrepreneur Portal', companyUrl: 'acsp.com.br', statusLabel: 'Soon', soon: true, title: 'ERP', about: 'I assisted from the ideation, benchmarking, and prototyping stages. We developed a mini-ERP for small entrepreneurs, with features for managing inflows and outflows, including full tax control.' }, { id: 'cefasfv', company: 'CefasFV', companyUrl: 'concretize.com.br', statusLabel: 'Soon', soon: true, title: 'Redesign of Salesapp', about: 'We completely redesigned an app to help external wholesale sellers. Through the app, it is possible to place sales orders, schedule deliveries and manage the entire customer portfolio.' }, { id: 'cefaserp', company: 'CefasERP', companyUrl: 'concretize.com.br', statusLabel: 'Soon', soon: true, title: 'Redesign of ERP MENU', about: 'Redesign of the home screen with the navigation architecture of the Cefas ERP.' }, { id: 'tempo', company: 'Tempo Telecom', companyUrl: 'www.tempooficial.com.br', statusLabel: 'Soon', soon: true, title: 'Telephone line management App', about: 'We designed an application for managing telephone lines.' }]; const BEHANCE_LINKS = [ { title: 'CCM — Customer Communication Management', company: 't6.digital', year: '2023–Now', url: 'https://www.behance.net/gallery/221141557/CCM-My-participation-in-this-project', type: 'B2B SaaS · AI · CCM' }, { title: 'SMS Marketing Platform', company: 'unipix.com.br', year: '2022', url: 'https://www.behance.net/gallery/221142857/SMS-Marketing-Platform', type: 'SaaS · Campaign UX' }, { title: 'Mini-ERP for Microentrepreneurs', company: 'acsp.com.br', year: '2021', url: 'https://www.behance.net/gallery/221226905/Web-platform-for-micro-entrepreneurs', type: 'ERP · Small Business' }, { title: 'Redesign of CefasFV Salesapp', company: 'concretize.com.br', year: '2021', url: 'https://www.behance.net/gallery/221139377/Redesign-of-the-Cefas-Sales-App', type: 'Mobile · Wholesale' }, { title: 'Redesign of the Menu of CefasERP', company: 'concretize.com.br', year: '2021', url: 'https://www.behance.net/gallery/221137853/Redesign-of-the-Menu-of-CefasERP', type: 'ERP · Navigation' }, { title: 'Gestor — Food Orders App', company: 'Internal Project', year: '2022', url: 'https://www.behance.net/gallery/221314201/Gestor-Food-Orders-App', type: 'Mobile · B2B' }, { title: 'Paulo Lebtag — Full Profile', company: 'Behance', year: '—', url: 'https://www.behance.net/paulolebtag', type: 'Portfolio Profile' }]; const EDUCATION = { software: [ { school: 'Estácio de Sá University', degree: 'Graduation in Software Engineering at Estácio de Sá University', detail: 'I started a new graduation in software to deepen my technical knowledge and further explore Artificial Intelligence and Data Analysis.', period: '2024–Currently', active: true, logoText: 'Estácio', logoBg: '#3a3a3a' }], design: [ { school: 'Federal University of Goiás', degree: "Master's degree in Visual Arts at the Federal University of Goiás", detail: 'I conducted research in Interface Design, exploring the temporal experience of interaction with graphical user interfaces to discover new development possibilities and methodological approaches. This is my master’s dissertation, “A perspectiva temporal no projeto de interfaces gráficas” (2021).', period: '2019–2020', logoText: 'UFG', logoBg: '#1f2937', link: 'https://repositorio.bc.ufg.br/tede/items/56e15ee9-f5af-454d-aabe-e0e88b2814b3', linkLabel: 'Read the dissertation ↗' }, { school: 'Federal University of Goiás', degree: 'Postgraduate in Strategic Design at the Federal University of Goiás', detail: 'In my postgraduate studies, I researched business rules and developed support service redesign projects using Design Thinking tools.', period: '2019–2020', logoText: 'UFG', logoBg: '#1f2937' }, { school: 'Federal University of Goiás', degree: 'Graduation in Graphic Design at the Federal University of Goiás', detail: 'During my studies, I researched graphic interface projects for the web.', period: '2011–2015', logoText: 'UFG', logoBg: '#1f2937' }] }; /* ─── ICONS (lucide-style) ─── */ const Ic = { home: (s) => , user: (s) => , grad: (s) => , briefcase: (s) => , mail: (s) => , file: (s) => , search: (s) => , filter: (s) => , eye: (s) => , trash: (s) => , pencil: (s) => , close: (s) => , menu: (s) => , sortDown: (s) => , arrowUp: (s) => , dots: (s) => , clock: (s) => , linkedin: (s) => , whatsapp: (s) => , flag: (s) => , pin: (s) => }; /* ─── NAV ─── */ const NAV = [ { id: 'home', icon: Ic.home, label: 'Home' }, { id: 'about', icon: Ic.user, label: 'About' }, { id: 'education', icon: Ic.grad, label: 'Education' }, { id: 'work', icon: Ic.briefcase, label: 'Work' }, { id: 'contact', icon: Ic.mail, label: 'Contact' }, { id: 'appendix', icon: Ic.file, label: 'Appendix' }]; /* ─── VIEWPORT HOOK ─── */ function useViewport() { const [w, setW] = useState(typeof window !== 'undefined' ? window.innerWidth : 1280); useEffect(() => { const fn = () => setW(window.innerWidth); window.addEventListener('resize', fn); return () => window.removeEventListener('resize', fn); }, []); return { w, isMobile: w <= 768, isTablet: w > 768 && w <= 1024, isDesktop: w > 1024 }; } /* ─── Walking cursor (decorative, follows a CSS keyframe path) ─── */ function WalkingCursor({ label, color = '#1a9fff', animation = 'cursor-walk 24s ease-in-out infinite', top, left, right, bottom, delay = '0s', zIndex = 50 }) { return (
{label}
); } /* ─── Real user cursor enhancement (follows actual mouse) ─── */ function UserCursor() { const ref = useRef(null); const innerRef = useRef(null); const [enabled, setEnabled] = useState(false); // Only enable on devices with a real (fine) pointer useEffect(() => { if (typeof window === 'undefined' || !window.matchMedia('(pointer: fine)').matches) return; setEnabled(true); }, []); // Once enabled (so the cursor element is mounted), follow the real mouse // and hide the native OS cursor so only this one shows. useEffect(() => { const el = ref.current; if (!enabled || !el) return; const inner = innerRef.current; const hideNative = document.createElement('style'); hideNative.textContent = '*,*::before,*::after{cursor:none !important}'; document.head.appendChild(hideNative); // Is the element under the pointer interactive? cursor:none hides native hints, // so detect by tag / role / data-actionable / an inline pointer|resize cursor. const isActionable = (px, py) => { let n = document.elementFromPoint(px, py); for (let i = 0; n && i < 6; i++, n = n.parentElement) { const t = n.tagName; if (t === 'BUTTON' || t === 'A' || t === 'INPUT' || t === 'SELECT' || t === 'TEXTAREA' || t === 'LABEL') return true; if (n.getAttribute && (n.getAttribute('role') === 'button' || n.hasAttribute('data-actionable'))) return true; const c = n.style && n.style.cursor; if (c && (c.indexOf('pointer') !== -1 || c.indexOf('resize') !== -1)) return true; } return false; }; let raf = 0, x = -100, y = -100; const onMove = (e) => { x = e.clientX; y = e.clientY; el.style.opacity = '1'; if (!raf) raf = requestAnimationFrame(apply); }; const apply = () => { raf = 0; el.style.transform = `translate3d(${x}px, ${y}px, 0)`; if (inner) inner.style.transform = `scale(${isActionable(x, y) ? 1.07 : 1})`; }; const onEnter = () => { el.style.opacity = '1'; }; const onLeave = () => { el.style.opacity = '0'; }; window.addEventListener('mousemove', onMove, { passive: true }); document.addEventListener('mouseenter', onEnter); document.addEventListener('mouseleave', onLeave); return () => { window.removeEventListener('mousemove', onMove); document.removeEventListener('mouseenter', onEnter); document.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(raf); hideNative.remove(); }; }, [enabled]); if (!enabled) return null; return (
You
); } /* ─── Simulated visitor cursors (decorative) — 1–3 per page, roam the viewport ─── */ const VISITOR_SETS = { home: [ { label: 'Visitor 7', color: '#06b6d4', animation: 'visitor-walk-b 30s ease-in-out infinite', left: '68%', top: '66%', delay: '-8s' } ], about: [ { label: 'Visitor 4', color: '#ec4899', animation: 'visitor-walk-a 26s ease-in-out infinite', left: '22%', top: '30%', delay: '-2s' }, { label: 'Visitor 9', color: '#14b8a6', animation: 'visitor-walk-c 32s ease-in-out infinite', right: '18%', top: '60%', delay: '-12s' } ], education: [ { label: 'Visitor 5', color: '#f97316', animation: 'visitor-walk-d 29s ease-in-out infinite', left: '30%', top: '55%', delay: '-6s' }, { label: 'Visitor 12', color: '#8b5cf6', animation: 'visitor-walk-a 34s ease-in-out infinite', right: '26%', top: '24%', delay: '-15s' } ], work: [ { label: 'Visitor 18', color: '#06b6d4', animation: 'visitor-walk-a 31s ease-in-out infinite', left: '18%', top: '64%', delay: '-9s' }, { label: 'Visitor 21', color: '#ec4899', animation: 'visitor-walk-e 35s ease-in-out infinite', left: '48%', top: '22%', delay: '-18s' }, { label: 'Visitor 27', color: '#a855f7', animation: 'visitor-walk-c 27s ease-in-out infinite', right: '30%', top: '50%', delay: '-22s' } ], detail: [ { label: 'Visitor 6', color: '#14b8a6', animation: 'visitor-walk-a 30s ease-in-out infinite', right: '16%', top: '40%', delay: '-5s' } ], contact: [ { label: 'Visitor 8', color: '#f97316', animation: 'visitor-walk-c 28s ease-in-out infinite', left: '22%', top: '32%', delay: '-4s' }, { label: 'Visitor 24', color: '#8b5cf6', animation: 'visitor-walk-b 33s ease-in-out infinite', right: '20%', top: '66%', delay: '-14s' } ], appendix: [ { label: 'Visitor 11', color: '#ec4899', animation: 'visitor-walk-d 29s ease-in-out infinite', left: '28%', top: '40%', delay: '-7s' }, { label: 'Visitor 15', color: '#06b6d4', animation: 'visitor-walk-e 34s ease-in-out infinite', right: '24%', top: '28%', delay: '-16s' } ] }; function VisitorLayer({ view, vp }) { if (vp && vp.isMobile) return null; const set = VISITOR_SETS[view] || []; if (!set.length) return null; return (
{set.map((v, i) => )}
); } /* ─────────────────────────────────────────────────────────── SIDEBAR (desktop) / TOP-BAR + DRAWER (mobile) ─────────────────────────────────────────────────────────── */ function Sidebar({ view, setView, vp }) { const [drawerOpen, setDrawerOpen] = useState(false); const isMobile = vp.isMobile; if (isMobile) { return ( <>
Paulo Lebtag
Available
{drawerOpen && (
setDrawerOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 200 }}>
e.stopPropagation()} style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 260, maxWidth: '85vw', background: 'var(--bg2)', borderLeft: '1px solid var(--b1)', display: 'flex', flexDirection: 'column' }}>
Paulo
Lebtag
{Ic.linkedin(16)} Be
v3.0 · 2026
)} ); } // Desktop / tablet sidebar const w = vp.isTablet ? 180 : 220; return (
Paulo
Lebtag
Sr. AI Product Designer
Available to work
{Ic.linkedin(15)} Be
v3.0 · 2026
); } /* ─────────────────────────────────────────────────────────── HOME — responsive hero ─────────────────────────────────────────────────────────── */ function HomeView({ setView, vp }) { const worldDots = useMemo(() => { const dots = []; const mask = [ " ........ ", " ............ ...... ", " .............. ......... ", " .................... ... ", " .................. ... ", " ............... ", " ........... ", " ......... ", " ......... ", " ....... ", " ...... ", " ...... ", " ....... ", " ....... ", " ....... ", " ..... ", " ... ", " ... ", " . "]; mask.forEach((row, r) => { for (let c = 0; c < row.length; c++) { if (row[c] === '.') dots.push([c, r]); } }); return dots; }, []); const isMobile = vp.isMobile; const isTablet = vp.isTablet; const compact = isMobile || isTablet; // Resizable hero name — drag any of the 8 handles, clamped to ±30%. const [scale, setScale] = useState(1); const scaleRef = useRef(1); const boxRef = useRef(null); const startResize = (e) => { e.preventDefault(); e.stopPropagation(); const box = boxRef.current; if (!box) return; const rect = box.getBoundingClientRect(); const cx = rect.left + rect.width / 2, cy = rect.top + rect.height / 2; const startDist = Math.hypot(e.clientX - cx, e.clientY - cy) || 1; const startScale = scaleRef.current; const move = (ev) => { const d = Math.hypot(ev.clientX - cx, ev.clientY - cy); const ns = Math.max(0.7, Math.min(1.3, startScale * (d / startDist))); scaleRef.current = ns; setScale(ns); }; const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; // Mobile: single-column stack. Desktop: side-by-side. return (
{[100, 200, 300, 400, 500, 600].map((r) => )}
{/* LEFT — text block */}
Hi, I'm
{/* 8 handles: 4 corners + 4 midpoints — drag to resize the name (±30%) */} {[ { top: -7, left: -7, cursor: 'nwse-resize' }, { top: -7, right: -7, cursor: 'nesw-resize' }, { bottom: -7, left: -7, cursor: 'nesw-resize' }, { bottom: -7, right: -7, cursor: 'nwse-resize' }, { top: -7, left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' }, { bottom: -7, left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' }, { top: '50%', left: -7, transform: 'translateY(-50%)', cursor: 'ew-resize' }, { top: '50%', right: -7, transform: 'translateY(-50%)', cursor: 'ew-resize' }, ].map((pos, i) => (
))}

Paulo | Lebtag

Sênior AI Product Designer at your service
{/* RIGHT — visual */}
); } function HomeVisual({ worldDots, vp }) { const isMobile = vp.isMobile; const isTablet = vp.isTablet; // Mobile/tablet: fluid card stack if (isMobile) { return (
); } // Desktop: original absolute-positioned floating cards return (
{worldDots.map(([c, r], i) => )}
{Ic.flag(18)} Based in Brazil
{Ic.pin(22)}
{/* Walking cursors — outside clipped zone, can wander freely */}
); } function ProCardInner() { return ( <>
Professional experience
{Ic.dots(16)}
13 years
{Ic.arrowUp(14)} Years of experience
); } function ProCard({ compact }) { return (
); } function PhotoBlock({ compact, worldDots }) { return (
{worldDots.map(([c, r], i) => )}
{Ic.flag(16)} Based in Brazil
); } function SkillsCardInner() { return ( <>
UI
Product
UX
AI
Skills
Balanced
100% success!
); } function SkillsCard({ compact }) { return (
); } /* ─────────────────────────────────────────────────────────── TOPO LINES SVG ─────────────────────────────────────────────────────────── */ const TopoBackground = () => {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => )} ; /* ─────────────────────────────────────────────────────────── ABOUT — responsive ─────────────────────────────────────────────────────────── */ function AboutView({ vp }) { const isMobile = vp.isMobile; const isTablet = vp.isTablet; return (
Paulo Lebtag
Sr. UX/UI/Product Designer
About me
{[ 'I am a Senior UX/UI and Product Designer, managing all product stages from conception to market performance, focusing on business models.', 'I have experience in Design, AI, and Data Analysis.', "I hold a master's in interface design, specializing in strategic design, with a bachelor's in graphic design, and I'm studying Software Engineering.", 'Here are some companies I have helped with my product solutions:' ].map((p, i) => (
{p}
))} {/* Company logos — real brand PNGs, equal-height row */}
Samsung
Carrefour
DiDi
Associação Comercial de São Paulo
); } /* ─────────────────────────────────────────────────────────── EDUCATION — responsive ─────────────────────────────────────────────────────────── */ function EducationView({ vp }) { const isMobile = vp.isMobile; return (
EDUCATION
{[ 'I bridge market and academic knowledge with degrees in Graphic Design and Strategic Design.', 'My research spans interface projects for the web, business rules, and redesigning support services using Design Thinking.', "I hold a master's in Interface Design, researching temporal interaction experiences and new methodologies.", "Currently, I'm pursuing a new degree in software to delve deeper into AI and Data Analysis." ].map((p, i) => (

{p}

))}
Software Development
{EDUCATION.software.map((e, i) => )}
UX/UI/Product Design
{EDUCATION.design.map((e, i) => )}
); } function EduCard({ edu, active }) { return (
{edu.logoText}
{edu.degree}
{edu.detail}
{Ic.clock(12)}{edu.period}
{edu.link && ( )}
{active &&
Paulo Lebtag
}
); } /* ─────────────────────────────────────────────────────────── WORK — responsive (table on desktop, cards on mobile) ─────────────────────────────────────────────────────────── */ function ProjectLogo({ project }) { const id = project.id; if (id === 'vonex') return
; if (id === 'unipix') return
; if (id === 'agrodash') return
AD
; if (id === 'gestor') return
GF
; return
; } function ExtraLogo({ row }) { const colors = { 'acsp': ['#f3f4f6', '#4b5563', 'ACSP'], 'cefasfv': ['#dbeafe', '#1d4ed8', 'C'], 'cefaserp': ['#e0e7ff', '#4338ca', 'CE'], 'tempo': ['#e0f2fe', '#0369a1', 'T'] }; const [bg, fg, letter] = colors[row.id] || ['#e5e7eb', '#374151', '—']; return
{letter}
; } function StatusPill({ label }) { const color = label === 'Working' ? { fg: '#b45309', bg: '#fef3c7' } : label === 'Soon' ? { fg: '#6b7280', bg: '#f3f4f6' } : { fg: '#15803d', bg: '#dcfce7' }; return {label}; } function WorkView({ setView, setDetailProject, vp }) { const isMobile = vp.isMobile; const isTablet = vp.isTablet; const [selected, setSelected] = useState(new Set(['vonex'])); const [showFilter, setShowFilter] = useState(true); const [search, setSearch] = useState(''); const allRows = useMemo(() => { const proj = PROJECTS.map((p) => ({ kind: 'project', id: p.id, p, company: p.company, companyUrl: p.companyUrl, statusLabel: p.statusLabel, title: p.full, about: p.about, soon: p.soon })); const extra = EXTRA_TABLE_ROWS.map((r) => ({ kind: 'extra', id: r.id, ...r })); return [...proj, ...extra]; }, []); const filtered = allRows.filter((r) => { if (!search) return true; const q = search.toLowerCase(); return r.company.toLowerCase().includes(q) || r.title.toLowerCase().includes(q); }); const onToggle = (id) => setSelected((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const onOpen = (r) => { if (r.soon) return; if (r.kind === 'project') { setDetailProject(r.p); setView('detail'); } }; return (
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => )}
Main projects I want to show
{showFilter &&
{selected.size} project{selected.size !== 1 ? 's' : ''} to showcase setShowFilter(false)} style={{ cursor: 'pointer', display: 'flex' }}>{Ic.close(14)}
} {!isMobile && ( )}
{Ic.search(15)} setSearch(e.target.value)} placeholder="Search" style={{ width: '100%', padding: '10px 14px 10px 38px', border: '1.5px solid #e5e7eb', borderRadius: 10, fontSize: 13, color: '#1a2332', outline: 'none', fontFamily: 'Inter' }} />
{isMobile ? ( // CARD layout
{filtered.map((r, i) => ( onToggle(r.id)} onOpen={() => onOpen(r)} /> ))}
) : ( // TABLE layout <>
setSelected((s) => s.size === filtered.length ? new Set() : new Set(filtered.map((r) => r.id)))} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
Company {Ic.sortDown(11)}
Status
About
{filtered.map((r, i) => ( onToggle(r.id)} onOpen={() => onOpen(r)} isTablet={isTablet} /> ))} )}
Page 1 of 1
); } function CheckBox({ state }) { if (state === 'check') return (
); if (state === 'partial') return (
); return
; } function Row({ row, idx, selected, onToggle, onOpen, isTablet }) { const isCCM = row.id === 'vonex'; const isSoon = !!row.soon; const Logo = row.kind === 'project' ? : ; return (
e.currentTarget.style.background = '#fafafa'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
{Logo}
{row.company}
{row.companyUrl}
{row.title}
{row.about}
{row.kind === 'project' ? ( ) : ( )}
); } function ProjectCard({ row, idx, selected, onToggle, onOpen }) { const isCCM = row.id === 'vonex'; const isSoon = !!row.soon; const Logo = row.kind === 'project' ? : ; return (
{Logo}
{row.company}
{row.companyUrl}
{row.title}
{row.about}
{row.kind === 'project' && ( )} {row.kind !== 'project' && ( )}
); } /* ─────────────────────────────────────────────────────────── DETAIL VIEW ─────────────────────────────────────────────────────────── */ function DetailView({ project, onBack, vp }) { const isMobile = vp.isMobile; const [tab, setTab] = useState('demo'); if (!project) return null; return (
{project.name}
{!isMobile &&
{project.full}
}
{[['demo', 'Demo'], ['case', 'Case']].map(([k, l]) => ( ))}
{project.site && !isMobile && Site ↗} {project.behance && !isMobile && Behance ↗}
{tab === 'demo' ? (
{React.createElement(project.Demo)}
) : (
{project.tagline && (
{project.tagline}
)}
{project.tags.map((t) => {t})}
{[['Role', project.role], ['Company', project.company], ['Year', project.year]].map(([k, v]) => (
{k}
{v}
))}
{project.insightStat && (
{project.insightStat[0]}
{project.insightStat[1]}
)} {project.whatIsCCM && (
What is a CCM?

{project.whatIsCCM}

)}

The Problem

{project.problem}

{project.problemDetails && (
{project.problemDetails.map(([t, d]) => (
× {t}
{d}
))}
)} {project.traditionalLimitations && (

Why Traditional Omnichannel Falls Short

Many companies turn to omnichannel solutions hoping for a seamless customer experience. In practice, traditional platforms stack channels without coordinating them:

{project.traditionalLimitations.map(([t, d]) => (
{t}
{d}
))}
)}

The Solution

{project.solution}

{project.modules && (
{project.modulesTitle || 'The Six Vonex CCM Modules'}
{project.modules.map(([n, d], i) => (
0{i + 1} {n}
{d}
))}
)} {project.leadership && (

Leadership & Team

{project.leadership}

{project.team && (
◆ {project.team}
)}
)} {project.responsibilities && (

My Responsibilities

{project.responsibilities.map((r, i) => (
{String(i + 1).padStart(2, '0')} {r}
))}
)}

Impact & Results

{project.impact.map((item, i) => (
→ {item}
))}
{project.uxResearchNote && (
Companion Case Study
{project.uxResearchNote}
{project.behanceResearch && ( Open UX Research ↗ )}
)}
)}
); } /* ─────────────────────────────────────────────────────────── CONTACT ─────────────────────────────────────────────────────────── */ function ContactView({ vp }) { const isMobile = vp.isMobile; return (
{[100, 200, 300, 400, 500].map((r) => )}
GET IN TOUCH

Let's build
something great

Available for full-time roles and select freelance projects.

{[['✉', 'paulolebtag@gmail.com', 'mailto:paulolebtag@gmail.com'], ['in', 'linkedin.com/in/paulolebtag', 'https://www.linkedin.com/in/paulolebtag/'], ['☎', '+55 62 9 9381-5020', 'tel:+5562993815020'], ['be', 'behance.net/paulolebtag', 'https://www.behance.net/paulolebtag']].map(([icon, label, href]) => ( { e.currentTarget.style.borderColor = 'var(--ac-blue)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--b1)'; }}>
{icon}
{label} ↗ ))}
); } /* ─────────────────────────────────────────────────────────── APPENDIX — responsive ─────────────────────────────────────────────────────────── */ function AppendixView({ vp }) { const isMobile = vp.isMobile; return (
Behance Portfolio
behance.net/paulolebtag ↗ {!isMobile &&
{BEHANCE_LINKS.length} published
}
{isMobile ? (
{BEHANCE_LINKS.map((item) => (
{item.title}
{item.company}·{item.year}
{item.type} View ↗
))}
) : ( <>
Title
Company
Year
Type
Link
{BEHANCE_LINKS.map((item) => (
e.currentTarget.style.background = '#fafafa'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
{item.title}
{item.company}
{item.year}
{item.type}
View ↗
))} )}
); } /* ─────────────────────────────────────────────────────────── APP ─────────────────────────────────────────────────────────── */ function App() { const [view, setView] = useState('home'); const [detailProject, setDetailProject] = useState(null); const [viewKey, setViewKey] = useState(0); const vp = useViewport(); const navigate = (v) => { setView(v); setViewKey((k) => k + 1); }; const shellStyle = vp.isMobile ? { display: 'flex', flexDirection: 'column', minHeight: '100vh', width: '100%' } : { display: 'flex', width: '100%', height: '100vh', overflow: 'hidden' }; return (
{view === 'home' && } {view === 'about' && } {view === 'education' && } {view === 'work' && } {view === 'detail' && navigate('work')} vp={vp} />} {view === 'contact' && } {view === 'appendix' && }
); } if (document.getElementById('root')) { ReactDOM.createRoot(document.getElementById('root')).render(); }