{"id":568,"date":"2026-04-26T21:13:47","date_gmt":"2026-04-27T00:13:47","guid":{"rendered":"https:\/\/singlefuture.com.br\/?page_id=568"},"modified":"2026-04-26T21:14:37","modified_gmt":"2026-04-27T00:14:37","slug":"miguel-ferreira","status":"publish","type":"page","link":"https:\/\/singlefuture.com.br\/?page_id=568","title":{"rendered":"Miguel Ferreira"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Miguel Cezar Ferreira \u2014 Full Stack Developer<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap\" rel=\"stylesheet\" \/>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollToPlugin.min.js\"><\/script>\r\n <style>\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n --cyan: #00e5a8;\r\n --pink: #ff0080;\r\n --purple: #8b00ff;\r\n --green: #00ff88;\r\n --bg0: #050f14;\r\n --bg1: #081820;\r\n --bg2: #0d2030;\r\n --text: #cceedd;\r\n --muted: #3d6655;\r\n --glass: rgba(0,229,168,0.04);\r\n --border: rgba(0,229,168,0.15);\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--bg0);\r\n color: var(--text);\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 17px;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n cursor: crosshair;\r\n }\r\n\r\n ::-webkit-scrollbar { width: 4px; }\r\n ::-webkit-scrollbar-track { background: var(--bg0); }\r\n ::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(0,229,168,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(0,229,168,0.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n body::after {\r\n content: '';\r\n position: fixed;\r\n inset: 0;\r\n background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);\r\n pointer-events: none;\r\n z-index: 999;\r\n }\r\n\r\n \/* NAV *\/\r\n nav {\r\n position: fixed;\r\n top: 0; left: 0; right: 0;\r\n z-index: 100;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 20px 60px;\r\n background: rgba(2,4,8,0.85);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--border);\r\n transition: padding .3s;\r\n }\r\n\r\n nav.scrolled { padding: 12px 60px; }\r\n\r\n .nav-logo {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .9rem;\r\n font-weight: 900;\r\n color: var(--cyan);\r\n text-shadow: 0 0 20px var(--cyan);\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n }\r\n\r\n .nav-logo span { color: var(--pink); }\r\n\r\n .nav-links { display: flex; gap: 36px; list-style: none; }\r\n\r\n .nav-links a {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 600;\r\n font-size: .85rem;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition: color .2s, text-shadow .2s;\r\n position: relative;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px; left: 0;\r\n width: 0; height: 1px;\r\n background: var(--cyan);\r\n box-shadow: 0 0 8px var(--cyan);\r\n transition: width .3s;\r\n }\r\n\r\n .nav-links a:hover { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }\r\n .nav-links a:hover::after { width: 100%; }\r\n\r\n .nav-cta {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n font-size: .8rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--bg0);\r\n background: var(--cyan);\r\n border: none;\r\n padding: 10px 24px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);\r\n transition: background .2s, box-shadow .2s;\r\n }\r\n\r\n .nav-cta:hover { background: var(--pink); box-shadow: 0 0 24px var(--pink); }\r\n\r\n .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 101; }\r\n .hamburger span { display: block; width: 26px; height: 2px; background: var(--cyan); transition: all .3s; }\r\n .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n .hamburger.open span:nth-child(2) { opacity: 0; }\r\n .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n .mobile-menu {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(5,15,20,0.97);\r\n z-index: 99;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 32px;\r\n transform: translateX(100%);\r\n transition: transform .4s ease;\r\n }\r\n\r\n .mobile-menu.open { transform: translateX(0); }\r\n\r\n .mobile-menu a {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n text-decoration: none;\r\n transition: color .2s;\r\n }\r\n\r\n .mobile-menu a:hover { color: var(--cyan); }\r\n\r\n \/* HERO *\/\r\n #hero {\r\n position: relative;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 120px 40px 80px;\r\n overflow: hidden;\r\n }\r\n\r\n canvas#spaceCanvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n z-index: 0;\r\n }\r\n\r\n .nebula-layer {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .nebula-1 {\r\n background:\r\n radial-gradient(ellipse 60% 40% at 15% 30%, rgba(0,229,168,0.07) 0%, transparent 60%),\r\n radial-gradient(ellipse 50% 60% at 80% 70%, rgba(139,0,255,0.08) 0%, transparent 60%);\r\n }\r\n\r\n .nebula-2 {\r\n background:\r\n radial-gradient(ellipse 70% 30% at 50% 80%, rgba(0,229,168,0.04) 0%, transparent 70%),\r\n radial-gradient(ellipse 30% 50% at 20% 70%, rgba(255,0,128,0.05) 0%, transparent 60%);\r\n }\r\n\r\n .orbit-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n border: 1px solid rgba(0,229,168,0.08);\r\n pointer-events: none;\r\n z-index: 0;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n animation: orbit-pulse 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes orbit-pulse {\r\n 0%, 100% { opacity:.4; transform: translate(-50%,-50%) scale(1); }\r\n 50% { opacity:.8; transform: translate(-50%,-50%) scale(1.03); }\r\n }\r\n\r\n #heroContent { position: relative; z-index: 1; max-width: 900px; }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: 3px;\r\n color: var(--cyan);\r\n border: 1px solid var(--border);\r\n padding: 6px 18px;\r\n margin-bottom: 28px;\r\n opacity: 0;\r\n }\r\n\r\n .hero-badge::before { content: '\u25b6'; font-size: .6rem; animation: blink 1.2s step-end infinite; }\r\n\r\n @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }\r\n\r\n h1 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: clamp(1.8rem, 5.5vw, 5rem);\r\n font-weight: 900;\r\n line-height: 1.05;\r\n letter-spacing: -1px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n h1 .line1 { display: block; color: #fff; text-shadow: 0 0 60px rgba(255,255,255,0.15); }\r\n\r\n h1 .line2 {\r\n display: block;\r\n color: var(--cyan);\r\n text-shadow: 0 0 40px rgba(0,229,168,0.7), 0 0 80px rgba(0,229,168,0.35);\r\n }\r\n\r\n .hero-char { display: inline-block; opacity: 0; }\r\n\r\n .hero-sub {\r\n font-size: 1.05rem;\r\n font-weight: 400;\r\n color: var(--muted);\r\n max-width: 580px;\r\n margin: 0 auto 44px;\r\n opacity: 0;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n opacity: 0;\r\n }\r\n\r\n .btn-primary {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n font-size: .88rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--bg0);\r\n background: var(--cyan);\r\n border: none;\r\n padding: 16px 40px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);\r\n transition: all .25s;\r\n box-shadow: 0 0 30px rgba(0,229,168,0.3);\r\n }\r\n\r\n .btn-primary:hover { background: var(--pink); box-shadow: 0 0 50px rgba(255,0,128,0.5); transform: translateY(-2px); }\r\n\r\n .btn-secondary {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 600;\r\n font-size: .88rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--cyan);\r\n background: transparent;\r\n border: 1px solid var(--cyan);\r\n padding: 16px 40px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);\r\n transition: all .25s;\r\n }\r\n\r\n .btn-secondary:hover { background: rgba(0,229,168,0.08); box-shadow: 0 0 30px rgba(0,229,168,0.2); transform: translateY(-2px); }\r\n\r\n .hero-stats {\r\n display: flex;\r\n justify-content: center;\r\n gap: 40px;\r\n margin-top: 80px;\r\n padding-top: 50px;\r\n border-top: 1px solid var(--border);\r\n opacity: 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stat-item { text-align: center; }\r\n\r\n .stat-num {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n color: var(--cyan);\r\n text-shadow: 0 0 20px var(--cyan);\r\n line-height: 1;\r\n }\r\n\r\n .stat-label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: 2px;\r\n color: var(--muted);\r\n margin-top: 6px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 32px; left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n opacity: 0;\r\n }\r\n\r\n .scroll-indicator span {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 3px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n }\r\n\r\n .scroll-line {\r\n width: 1px; height: 40px;\r\n background: linear-gradient(to bottom, var(--cyan), transparent);\r\n animation: scrollDrop 1.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes scrollDrop {\r\n 0% { transform: scaleY(0); transform-origin: top }\r\n 50% { transform: scaleY(1); transform-origin: top }\r\n 51% { transform: scaleY(1); transform-origin: bottom }\r\n 100% { transform: scaleY(0); transform-origin: bottom }\r\n }\r\n\r\n \/* SECTIONS *\/\r\n section {\r\n position: relative;\r\n z-index: 1;\r\n padding: 120px 60px;\r\n }\r\n\r\n .section-header { margin-bottom: 64px; }\r\n\r\n .section-label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .75rem;\r\n letter-spacing: 4px;\r\n color: var(--cyan);\r\n text-transform: uppercase;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .section-label::after {\r\n content: '';\r\n flex: 1;\r\n max-width: 80px;\r\n height: 1px;\r\n background: linear-gradient(90deg, var(--cyan), transparent);\r\n }\r\n\r\n .section-title {\r\n font-family: 'Orbitron', monospace;\r\n font-size: clamp(1.8rem, 4vw, 3rem);\r\n font-weight: 700;\r\n color: #fff;\r\n letter-spacing: -0.5px;\r\n line-height: 1.1;\r\n }\r\n\r\n .section-sub {\r\n font-size: 1rem;\r\n color: var(--muted);\r\n margin-top: 12px;\r\n max-width: 500px;\r\n }\r\n\r\n \/* REVEAL *\/\r\n .reveal { opacity: 0; transform: translateY(50px); }\r\n\r\n \/* ABOUT *\/\r\n #about { background: var(--bg1); }\r\n\r\n .about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n .about-visual { position: relative; height: 440px; }\r\n\r\n .about-box {\r\n position: absolute;\r\n border: 1px solid var(--border);\r\n background: var(--glass);\r\n padding: 28px;\r\n }\r\n\r\n .about-box-main {\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .about-code {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .78rem;\r\n line-height: 2.1;\r\n color: var(--muted);\r\n }\r\n\r\n .about-code .kw { color: var(--purple); }\r\n .about-code .fn { color: var(--cyan); }\r\n .about-code .str { color: var(--green); }\r\n .about-code .num { color: var(--pink); }\r\n .about-code .cm { color: var(--muted); opacity:.6; }\r\n\r\n .about-accent-1 {\r\n position: absolute;\r\n top: -20px; right: -20px;\r\n width: 120px; height: 120px;\r\n border: 1px solid rgba(0,229,168,.2);\r\n animation: rotate-slow 12s linear infinite;\r\n }\r\n\r\n .about-accent-2 {\r\n position: absolute;\r\n bottom: -20px; left: -20px;\r\n width: 80px; height: 80px;\r\n border: 1px solid rgba(255,0,128,.2);\r\n animation: rotate-slow 8s linear infinite reverse;\r\n }\r\n\r\n @keyframes rotate-slow { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }\r\n\r\n .about-content p { color: var(--muted); margin-bottom: 16px; font-size: 1rem; }\r\n\r\n .about-values { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }\r\n\r\n .value-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 16px;\r\n border: 1px solid var(--border);\r\n background: var(--glass);\r\n transition: border-color .2s;\r\n }\r\n\r\n .value-row:hover { border-color: rgba(0,229,168,.3); }\r\n .value-icon { color: var(--cyan); font-size: 1.2rem; flex-shrink: 0; }\r\n\r\n .value-row h4 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .82rem;\r\n color: #fff;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .value-row p { font-size: .85rem; color: var(--muted); margin: 0; }\r\n\r\n \/* SKILLS *\/\r\n #skills { background: var(--bg0); }\r\n\r\n .stack-marquee { overflow: hidden; margin: -12px 0; padding: 12px 0; }\r\n\r\n .stack-track {\r\n display: flex;\r\n gap: 32px;\r\n animation: marquee 30s linear infinite;\r\n width: max-content;\r\n }\r\n\r\n .stack-track:hover { animation-play-state: paused; }\r\n\r\n @keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }\r\n\r\n .stack-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: var(--glass);\r\n border: 1px solid var(--border);\r\n padding: 12px 24px;\r\n white-space: nowrap;\r\n transition: border-color .2s;\r\n }\r\n\r\n .stack-item:hover { border-color: rgba(0,229,168,0.35); }\r\n\r\n .stack-item .dot {\r\n width: 8px; height: 8px;\r\n border-radius: 50%;\r\n background: var(--cyan);\r\n box-shadow: 0 0 8px var(--cyan);\r\n }\r\n\r\n .stack-item .dot.pink { background: var(--pink); box-shadow: 0 0 8px var(--pink); }\r\n .stack-item .dot.purple { background: var(--purple); box-shadow: 0 0 8px var(--purple); }\r\n .stack-item .dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }\r\n\r\n .stack-item span {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .82rem;\r\n letter-spacing: 1px;\r\n color: var(--text);\r\n }\r\n\r\n .skills-section-title {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .72rem;\r\n color: var(--muted);\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n margin-top: 48px;\r\n text-align: center;\r\n }\r\n\r\n \/* EXPERIENCE *\/\r\n #experience { background: var(--bg1); }\r\n\r\n .timeline { position: relative; max-width: 900px; margin: 0 auto; }\r\n\r\n .timeline::before {\r\n content: '';\r\n position: absolute;\r\n left: 0; top: 0; bottom: 0;\r\n width: 1px;\r\n background: linear-gradient(to bottom, var(--cyan), var(--purple), transparent);\r\n opacity: .4;\r\n }\r\n\r\n .timeline-item {\r\n position: relative;\r\n padding: 0 0 60px 48px;\r\n }\r\n\r\n .timeline-item::before {\r\n content: '';\r\n position: absolute;\r\n left: -5px; top: 6px;\r\n width: 11px; height: 11px;\r\n border-radius: 50%;\r\n background: var(--cyan);\r\n box-shadow: 0 0 16px var(--cyan);\r\n border: 2px solid var(--bg1);\r\n }\r\n\r\n .timeline-period {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .68rem;\r\n letter-spacing: 2px;\r\n color: var(--cyan);\r\n text-transform: uppercase;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .timeline-company {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .82rem;\r\n font-weight: 600;\r\n color: var(--pink);\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .timeline-role {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: #fff;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .timeline-desc {\r\n font-size: .92rem;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .timeline-tags { display: flex; flex-wrap: wrap; gap: 8px; }\r\n\r\n .timeline-tag {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .62rem;\r\n letter-spacing: 1px;\r\n color: var(--muted);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n padding: 3px 10px;\r\n }\r\n\r\n \/* PROJECTS *\/\r\n #projects { background: var(--bg0); }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .project-card {\r\n background: var(--bg2);\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n transition: transform .3s, border-color .3s;\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.97);\r\n }\r\n\r\n .project-card:hover { transform: translateY(-6px); border-color: rgba(0,229,168,0.35); }\r\n\r\n .project-thumb {\r\n height: 180px;\r\n position: relative;\r\n overflow: hidden;\r\n background: var(--bg0);\r\n }\r\n\r\n .project-thumb-inner {\r\n width: 100%; height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Orbitron', monospace;\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n letter-spacing: -2px;\r\n transition: transform .4s;\r\n }\r\n\r\n .project-card:hover .project-thumb-inner { transform: scale(1.06); }\r\n\r\n .project-thumb-inner.cyan { color: var(--cyan); text-shadow: 0 0 40px var(--cyan); background: radial-gradient(ellipse at center, rgba(0,229,168,0.1), transparent 70%); }\r\n .project-thumb-inner.pink { color: var(--pink); text-shadow: 0 0 40px var(--pink); background: radial-gradient(ellipse at center, rgba(255,0,128,0.1), transparent 70%); }\r\n .project-thumb-inner.purple { color: var(--purple); text-shadow: 0 0 40px var(--purple); background: radial-gradient(ellipse at center, rgba(139,0,255,0.1), transparent 70%); }\r\n .project-thumb-inner.green { color: var(--green); text-shadow: 0 0 40px var(--green); background: radial-gradient(ellipse at center, rgba(0,255,136,0.1), transparent 70%); }\r\n\r\n .project-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(2,4,8,0.85);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity .3s;\r\n }\r\n\r\n .project-card:hover .project-overlay { opacity: 1; }\r\n\r\n .project-overlay a {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .75rem;\r\n letter-spacing: 3px;\r\n color: var(--cyan);\r\n text-decoration: none;\r\n border: 1px solid var(--cyan);\r\n padding: 10px 24px;\r\n transition: all .2s;\r\n }\r\n\r\n .project-overlay a:hover { background: var(--cyan); color: var(--bg0); }\r\n\r\n .project-body { padding: 28px; }\r\n\r\n .project-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }\r\n\r\n .project-cat {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 3px;\r\n color: var(--cyan);\r\n text-transform: uppercase;\r\n }\r\n\r\n .project-year { font-family: 'Share Tech Mono', monospace; font-size: .65rem; color: var(--muted); }\r\n\r\n .project-card h3 {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .9rem;\r\n font-weight: 600;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .project-card p { font-size: .9rem; color: var(--muted); }\r\n\r\n .project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }\r\n\r\n .project-tag {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .62rem;\r\n letter-spacing: 1px;\r\n color: var(--muted);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n padding: 2px 8px;\r\n }\r\n\r\n \/* EDUCATION *\/\r\n #education { background: var(--bg1); }\r\n\r\n .edu-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .edu-card {\r\n background: var(--bg2);\r\n border: 1px solid var(--border);\r\n padding: 32px;\r\n transition: border-color .3s, transform .3s;\r\n }\r\n\r\n .edu-card:hover { border-color: rgba(0,229,168,.3); transform: translateY(-4px); }\r\n\r\n .edu-icon {\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1.5rem;\r\n color: var(--cyan);\r\n margin-bottom: 16px;\r\n }\r\n\r\n .edu-period {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 2px;\r\n color: var(--cyan);\r\n text-transform: uppercase;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .edu-inst {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .78rem;\r\n color: var(--pink);\r\n letter-spacing: 1px;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .edu-course {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: #fff;\r\n }\r\n\r\n \/* CONTACT *\/\r\n #contact { background: var(--bg0); }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1.5fr;\r\n gap: 80px;\r\n align-items: start;\r\n }\r\n\r\n .contact-info p { color: var(--muted); margin-bottom: 40px; font-size: 1rem; }\r\n\r\n .contact-methods { display: flex; flex-direction: column; gap: 16px; }\r\n\r\n .contact-method {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 16px 20px;\r\n border: 1px solid var(--border);\r\n background: var(--glass);\r\n text-decoration: none;\r\n transition: border-color .2s, background .2s;\r\n }\r\n\r\n .contact-method:hover { border-color: var(--cyan); background: rgba(0,229,168,.05); }\r\n\r\n .cm-icon { color: var(--cyan); font-size: 1.1rem; flex-shrink: 0; }\r\n\r\n .cm-label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 2px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .cm-value { font-size: .92rem; color: #fff; }\r\n\r\n .contact-form { display: flex; flex-direction: column; gap: 16px; }\r\n\r\n .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n\r\n .form-field { display: flex; flex-direction: column; gap: 6px; }\r\n\r\n .form-field label {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .65rem;\r\n letter-spacing: 3px;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n }\r\n\r\n .form-field input,\r\n .form-field textarea,\r\n .form-field select {\r\n background: var(--bg0);\r\n border: 1px solid var(--border);\r\n color: var(--text);\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: .95rem;\r\n padding: 14px 16px;\r\n outline: none;\r\n transition: border-color .2s, box-shadow .2s;\r\n resize: none;\r\n appearance: none;\r\n }\r\n\r\n .form-field input:focus,\r\n .form-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 16px rgba(0,229,168,.1); }\r\n\r\n .form-field textarea { height: 120px; }\r\n\r\n .form-submit {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 700;\r\n font-size: .88rem;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: var(--bg0);\r\n background: var(--cyan);\r\n border: none;\r\n padding: 18px 48px;\r\n cursor: pointer;\r\n clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);\r\n transition: all .25s;\r\n box-shadow: 0 0 30px rgba(0,229,168,.25);\r\n align-self: flex-start;\r\n }\r\n\r\n .form-submit:hover { background: var(--pink); box-shadow: 0 0 50px rgba(255,0,128,.4); transform: translateY(-2px); }\r\n\r\n \/* FOOTER *\/\r\n footer {\r\n background: var(--bg0);\r\n border-top: 1px solid var(--border);\r\n padding: 48px 60px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .footer-inner {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n\r\n .footer-logo {\r\n font-family: 'Orbitron', monospace;\r\n font-size: .9rem;\r\n font-weight: 900;\r\n color: var(--cyan);\r\n text-shadow: 0 0 20px var(--cyan);\r\n letter-spacing: 2px;\r\n }\r\n\r\n .footer-logo span { color: var(--pink); }\r\n\r\n .footer-copy {\r\n font-family: 'Share Tech Mono', monospace;\r\n font-size: .68rem;\r\n letter-spacing: 1px;\r\n color: var(--muted);\r\n }\r\n\r\n .footer-social { display: flex; gap: 14px; }\r\n\r\n .social-link {\r\n width: 36px; height: 36px;\r\n border: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition: all .2s;\r\n font-size: .85rem;\r\n }\r\n\r\n .social-link:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0,229,168,.2); }\r\n\r\n \/* CURSOR *\/\r\n .cursor-dot {\r\n position: fixed;\r\n width: 8px; height: 8px;\r\n background: var(--cyan);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 10000;\r\n transform: translate(-50%,-50%);\r\n box-shadow: 0 0 12px var(--cyan);\r\n }\r\n\r\n .cursor-ring {\r\n position: fixed;\r\n width: 32px; height: 32px;\r\n border: 1px solid rgba(0,229,168,.5);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9999;\r\n transform: translate(-50%,-50%);\r\n transition: transform .12s, width .2s, height .2s, opacity .2s;\r\n }\r\n\r\n \/* SHOOTING STAR *\/\r\n .shooting-star {\r\n position: absolute;\r\n height: 1px;\r\n background: linear-gradient(90deg, rgba(0,229,168,0), #00e5a8, rgba(255,255,255,0.8), rgba(0,229,168,0));\r\n border-radius: 2px;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n \/* COUNTER *\/\r\n @keyframes glitch-num {\r\n 0% { text-shadow: 0 0 12px var(--cyan); }\r\n 20% { text-shadow: 3px 0 0 var(--pink), -3px 0 0 var(--cyan); }\r\n 40% { text-shadow: 0 0 20px var(--cyan); }\r\n 60% { text-shadow: -3px 0 0 var(--pink), 3px 0 0 var(--cyan); }\r\n 100% { text-shadow: 0 0 12px var(--cyan); }\r\n }\r\n\r\n .stat-num.counting { animation: glitch-num .5s steps(1) infinite; }\r\n\r\n @keyframes fadeUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .about-grid, .contact-grid { grid-template-columns: 1fr; }\r\n .about-visual { display: none; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n nav { padding: 16px 24px; }\r\n nav.scrolled { padding: 10px 24px; }\r\n .nav-links, .nav-cta { display: none; }\r\n .hamburger { display: flex; }\r\n section { padding: 80px 24px; }\r\n footer { padding: 40px 24px; }\r\n .form-row { grid-template-columns: 1fr; }\r\n .hero-stats { gap: 30px; }\r\n .footer-inner { flex-direction: column; text-align: center; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .projects-grid { grid-template-columns: 1fr; }\r\n .edu-grid { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"cursor-dot\" id=\"cursorDot\"><\/div>\r\n <div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\r\n\r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <a href=\"#hero\" onclick=\"toggleMenu()\">Home<\/a>\r\n <a href=\"#about\" onclick=\"toggleMenu()\">Sobre<\/a>\r\n <a href=\"#experience\" onclick=\"toggleMenu()\">Experi\u00eancia<\/a>\r\n <a href=\"#projects\" onclick=\"toggleMenu()\">Projetos<\/a>\r\n <a href=\"#skills\" onclick=\"toggleMenu()\">Skills<\/a>\r\n <a href=\"#contact\" onclick=\"toggleMenu()\">Contato<\/a>\r\n <\/div>\r\n\r\n <nav id=\"navbar\">\r\n <a href=\"#hero\" class=\"nav-logo\">MCF<span>.<\/span>DEV<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#about\">Sobre<\/a><\/li>\r\n <li><a href=\"#experience\">Experi\u00eancia<\/a><\/li>\r\n <li><a href=\"#projects\">Projetos<\/a><\/li>\r\n <li><a href=\"#skills\">Skills<\/a><\/li>\r\n <li><a href=\"#contact\">Contato<\/a><\/li>\r\n <\/ul>\r\n <a class=\"nav-cta\" href=\"#contact\">Hire Me<\/a>\r\n <div class=\"hamburger\" id=\"hamburger\" onclick=\"toggleMenu()\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HERO -->\r\n <section id=\"hero\">\r\n <canvas id=\"spaceCanvas\"><\/canvas>\r\n <div class=\"nebula-layer nebula-1\"><\/div>\r\n <div class=\"nebula-layer nebula-2\"><\/div>\r\n <div class=\"orbit-ring\" style=\"width:500px;height:500px\"><\/div>\r\n <div class=\"orbit-ring\" style=\"width:750px;height:750px;animation-delay:2s;animation-duration:9s\"><\/div>\r\n <div class=\"orbit-ring\" style=\"width:1000px;height:1000px;animation-delay:4s;animation-duration:12s\"><\/div>\r\n\r\n <div id=\"heroContent\">\r\n <div class=\"hero-badge\">FULL STACK DEVELOPER \u00b7 FUNDADOR \u00b7 SINGLE FUTURE<\/div>\r\n <h1>\r\n <span class=\"line1\">Miguel Cezar<\/span>\r\n <span class=\"line2\">\r\n <span class=\"hero-char\">F<\/span><span class=\"hero-char\">e<\/span><span class=\"hero-char\">r<\/span><span class=\"hero-char\">r<\/span><span class=\"hero-char\">e<\/span><span class=\"hero-char\">i<\/span><span class=\"hero-char\">r<\/span><span class=\"hero-char\">a<\/span>\r\n <\/span>\r\n <\/h1>\r\n <p class=\"hero-sub\">\r\n Desenvolvedor Full Stack com 3+ anos de experi\u00eancia construindo sistemas web escal\u00e1veis, APIs RESTful e experi\u00eancias digitais de alta performance.\r\n <\/p>\r\n <div class=\"hero-buttons\">\r\n <a class=\"btn-primary\" href=\"#projects\">Ver Projetos \u2192<\/a>\r\n <a class=\"btn-secondary\" href=\"#contact\">Fale Comigo<\/a>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"3\">0<\/div>\r\n <div class=\"stat-label\">Anos de Exp.<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"20\">0<\/div>\r\n <div class=\"stat-label\">Projetos<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"15\">0<\/div>\r\n <div class=\"stat-label\">Tecnologias<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-num\" data-target=\"2\">0<\/div>\r\n <div class=\"stat-label\">Empresas Atuais<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-indicator\">\r\n <span>Scroll<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ABOUT -->\r\n <section id=\"about\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal\">\r\n <div class=\"about-box about-box-main\">\r\n <div class=\"about-code\">\r\n<span class=\"kw\">const<\/span> <span class=\"fn\">developer<\/span> = {<br>\r\n  name: <span class=\"str\">\"Miguel Cezar Ferreira\"<\/span>,<br>\r\n  role: <span class=\"str\">\"Full Stack Developer\"<\/span>,<br>\r\n  company: <span class=\"str\">\"Single Future\"<\/span>,<br>\r\n  location: <span class=\"str\">\"S\u00e3o Paulo, BR\"<\/span>,<br>\r\n  experience: <span class=\"num\">3<\/span>, <span class=\"cm\">\/\/ anos<\/span><br>\r\n  stack: [<br>\r\n    <span class=\"str\">\"React\"<\/span>, <span class=\"str\">\"Node.js\"<\/span>,<br>\r\n    <span class=\"str\">\"PHP\"<\/span>, <span class=\"str\">\"TypeScript\"<\/span>,<br>\r\n    <span class=\"str\">\"PostgreSQL\"<\/span>, <span class=\"str\">\"AWS\"<\/span><br>\r\n  ],<br>\r\n  <span class=\"fn\">buildTheFuture<\/span>: () => <span class=\"num\">true<\/span><br>\r\n};\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-accent-1\"><\/div>\r\n <div class=\"about-accent-2\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"about-content reveal\">\r\n <div class=\"section-header\" style=\"margin-bottom:24px\">\r\n <span class=\"section-label\">\/\/ SOBRE MIM<\/span>\r\n <h2 class=\"section-title\">Transformo ideias em<br>sistemas reais<\/h2>\r\n <\/div>\r\n <p>Sou Desenvolvedor Full Stack com s\u00f3lida experi\u00eancia em aplica\u00e7\u00f5es web modernas, escal\u00e1veis e orientadas \u00e0 performance. Atuo como Fundador da <strong style=\"color:var(--cyan)\">Single Future<\/strong>, onde lidero o desenvolvimento de produtos digitais do zero ao deploy.<\/p>\r\n <p>Minha expertise abrange frontend com React, Angular e anima\u00e7\u00f5es GSAP, backend em Node.js e PHP com arquitetura MVC, integra\u00e7\u00e3o de APIs REST, banco de dados relacionais e cloud computing com AWS.<\/p>\r\n <p>Tamb\u00e9m tenho atua\u00e7\u00e3o avan\u00e7ada com WordPress, desenvolvendo plugins e temas customizados, automa\u00e7\u00f5es em Python com Selenium e integra\u00e7\u00f5es de sistemas externos.<\/p>\r\n\r\n <div class=\"about-values\">\r\n <div class=\"value-row\">\r\n <span class=\"value-icon\">\u26a1<\/span>\r\n <div>\r\n <h4>Clean Architecture<\/h4>\r\n <p>SOLID, Design Patterns e c\u00f3digo que escala sem virar legado.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"value-row\">\r\n <span class=\"value-icon\">\ud83d\ude80<\/span>\r\n <div>\r\n <h4>Entrega Cont\u00ednua<\/h4>\r\n <p>CI\/CD com GitHub Actions, deploy em cloud e metodologias \u00e1geis.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"value-row\">\r\n <span class=\"value-icon\">\ud83c\udfaf<\/span>\r\n <div>\r\n <h4>Foco em Produto<\/h4>\r\n <p>Do levantamento de requisitos \u00e0 UX\/UI e manuten\u00e7\u00e3o em produ\u00e7\u00e3o.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SKILLS -->\r\n <section id=\"skills\">\r\n <div class=\"section-header reveal\" style=\"text-align:center\">\r\n <span class=\"section-label\" style=\"justify-content:center;display:flex\">\/\/ TECNOLOGIAS<\/span>\r\n <h2 class=\"section-title\">Stack T\u00e9cnico<\/h2>\r\n <\/div>\r\n\r\n <div class=\"skills-section-title\">FRONTEND<\/div>\r\n <div class=\"stack-marquee reveal\">\r\n <div class=\"stack-track\">\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>React<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Next.js<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Angular<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>TypeScript<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>JavaScript ES6+<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>GSAP<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>SCSS \/ Sass<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Tailwind CSS<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Bootstrap<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>jQuery<\/span><\/div>\r\n <!-- duplicado para loop infinito -->\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>React<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Next.js<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Angular<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>TypeScript<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>JavaScript ES6+<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>GSAP<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>SCSS \/ Sass<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Tailwind CSS<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>Bootstrap<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot\"><\/div><span>jQuery<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"skills-section-title\">BACKEND & INFRA<\/div>\r\n <div class=\"stack-marquee reveal\">\r\n <div class=\"stack-track\" style=\"animation-direction:reverse;animation-duration:25s\">\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Node.js<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>PHP \/ Laravel<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Python<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>REST APIs<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Socket.io<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>JWT Auth<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>PostgreSQL<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>MySQL<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Prisma ORM<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>AWS<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Supabase<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Docker<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>GitHub Actions<\/span><\/div>\r\n <!-- dup -->\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Node.js<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>PHP \/ Laravel<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Python<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>REST APIs<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Socket.io<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>JWT Auth<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>PostgreSQL<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>MySQL<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Prisma ORM<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>AWS<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Supabase<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>Docker<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot pink\"><\/div><span>GitHub Actions<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"skills-section-title\">CMS & OUTROS<\/div>\r\n <div class=\"stack-marquee reveal\">\r\n <div class=\"stack-track\" style=\"animation-duration:35s\">\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>WordPress<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Elementor<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>WooCommerce<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Custom Plugins<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>CRON Jobs<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>cPanel<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Git \/ GitHub<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Figma<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Scrum \/ Kanban<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Selenium<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Pandas<\/span><\/div>\r\n <!-- dup -->\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>WordPress<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Elementor<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>WooCommerce<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Custom Plugins<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>CRON Jobs<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>cPanel<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Git \/ GitHub<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Figma<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Scrum \/ Kanban<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Selenium<\/span><\/div>\r\n <div class=\"stack-item\"><div class=\"dot purple\"><\/div><span>Pandas<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EXPERIENCE -->\r\n <section id=\"experience\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-label\">\/\/ TRAJET\u00d3RIA<\/span>\r\n <h2 class=\"section-title\">Experi\u00eancia Profissional<\/h2>\r\n <p class=\"section-sub\">Empresas e projetos que moldaram minha carreira.<\/p>\r\n <\/div>\r\n\r\n <div class=\"timeline\">\r\n <div class=\"timeline-item reveal\">\r\n <div class=\"timeline-period\">SET 2024 \u2014 PRESENTE \u00b7 1A 8M<\/div>\r\n <div class=\"timeline-company\">Single Future<\/div>\r\n <div class=\"timeline-role\">Fundador & Full Stack Developer<\/div>\r\n <div class=\"timeline-desc\">\r\n Fundei e lidero o desenvolvimento de sistemas web escal\u00e1veis na Single Future. Construo aplica\u00e7\u00f5es end-to-end com foco em arquitetura, performance e UX \u2014 incluindo plataformas de card\u00e1pio digital com pedidos em tempo real, alta concorr\u00eancia e integra\u00e7\u00e3o de pagamentos Pix.\r\n <\/div>\r\n <div class=\"timeline-tags\">\r\n <span class=\"timeline-tag\">React<\/span>\r\n <span class=\"timeline-tag\">Next.js<\/span>\r\n <span class=\"timeline-tag\">Node.js<\/span>\r\n <span class=\"timeline-tag\">TypeScript<\/span>\r\n <span class=\"timeline-tag\">PostgreSQL<\/span>\r\n <span class=\"timeline-tag\">Socket.io<\/span>\r\n <span class=\"timeline-tag\">AWS<\/span>\r\n <span class=\"timeline-tag\">Supabase<\/span>\r\n <span class=\"timeline-tag\">CI\/CD<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item reveal\">\r\n <div class=\"timeline-period\">JUN 2025 \u2014 PRESENTE \u00b7 11M<\/div>\r\n <div class=\"timeline-company\">Grupo Webnauta<\/div>\r\n <div class=\"timeline-role\">Desenvolvedor Full Stack<\/div>\r\n <div class=\"timeline-desc\">\r\n Ag\u00eancia especializada em LMS. Desenvolvo sites, sistemas e plataformas responsivas com foco em UX\/UI e SEO t\u00e9cnico. Cria\u00e7\u00e3o de plugins WordPress customizados, integra\u00e7\u00e3o com APIs externas (Bis2Bis, CRMs, Correios) e automa\u00e7\u00f5es em Python com Selenium para coleta e processamento de dados.\r\n <\/div>\r\n <div class=\"timeline-tags\">\r\n <span class=\"timeline-tag\">WordPress<\/span>\r\n <span class=\"timeline-tag\">PHP<\/span>\r\n <span class=\"timeline-tag\">React<\/span>\r\n <span class=\"timeline-tag\">Python<\/span>\r\n <span class=\"timeline-tag\">Selenium<\/span>\r\n <span class=\"timeline-tag\">REST APIs<\/span>\r\n <span class=\"timeline-tag\">MySQL<\/span>\r\n <span class=\"timeline-tag\">CRON<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item reveal\">\r\n <div class=\"timeline-period\">MAI 2025 \u2014 JUN 2025 \u00b7 2M<\/div>\r\n <div class=\"timeline-company\">Engecommerce<\/div>\r\n <div class=\"timeline-role\">Est\u00e1gio \u2014 Programa\u00e7\u00e3o Web<\/div>\r\n <div class=\"timeline-desc\">\r\n E-commerce e landing pages de alta performance. Desenvolvimento Full Stack com Laravel e React, cria\u00e7\u00e3o de APIs RESTful, automa\u00e7\u00e3o com bots e IA, gest\u00e3o de servidores via cPanel e desenvolvimento WordPress.\r\n <\/div>\r\n <div class=\"timeline-tags\">\r\n <span class=\"timeline-tag\">Laravel<\/span>\r\n <span class=\"timeline-tag\">React<\/span>\r\n <span class=\"timeline-tag\">REST APIs<\/span>\r\n <span class=\"timeline-tag\">WordPress<\/span>\r\n <span class=\"timeline-tag\">cPanel<\/span>\r\n <span class=\"timeline-tag\">Bots \/ IA<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item reveal\">\r\n <div class=\"timeline-period\">MAI 2024 \u2014 OUT 2024 \u00b7 6M<\/div>\r\n <div class=\"timeline-company\">F.R.CONT<\/div>\r\n <div class=\"timeline-role\">Assistente Administrativo<\/div>\r\n <div class=\"timeline-desc\">\r\n Gest\u00e3o financeira, concilia\u00e7\u00e3o banc\u00e1ria, elabora\u00e7\u00e3o de relat\u00f3rios e otimiza\u00e7\u00e3o de rotinas administrativas em empresa cont\u00e1bil.\r\n <\/div>\r\n <div class=\"timeline-tags\">\r\n <span class=\"timeline-tag\">Gest\u00e3o Financeira<\/span>\r\n <span class=\"timeline-tag\">Relat\u00f3rios<\/span>\r\n <span class=\"timeline-tag\">Processos<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PROJECTS -->\r\n <section id=\"projects\">\r\n <div class=\"section-header reveal\">\r\n <span class=\"section-label\">\/\/ PORTF\u00d3LIO<\/span>\r\n <h2 class=\"section-title\">Projetos em Destaque<\/h2>\r\n <p class=\"section-sub\">Solu\u00e7\u00f5es desenvolvidas com foco em performance e escalabilidade.<\/p>\r\n <\/div>\r\n\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card\" data-cat=\"saas\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner cyan\">SF<\/div>\r\n <div class=\"project-overlay\"><a href=\"https:\/\/singlefuture.com.br\" target=\"_blank\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">SaaS \/ Startup<\/span>\r\n <span class=\"project-year\">2024<\/span>\r\n <\/div>\r\n <h3>Single Future \u2014 Ag\u00eancia<\/h3>\r\n <p>Site institucional da ag\u00eancia com design sci-fi, anima\u00e7\u00f5es GSAP avan\u00e7adas e sistema de contato integrado.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">HTML\/CSS<\/span>\r\n <span class=\"project-tag\">GSAP<\/span>\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-cat=\"web\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner pink\">\ud83c\udf7d<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">Real-Time App<\/span>\r\n <span class=\"project-year\">2024<\/span>\r\n <\/div>\r\n <h3>Card\u00e1pio Digital \u2014 Real-Time<\/h3>\r\n <p>Plataforma de pedidos em tempo real com alta concorr\u00eancia, Socket.io e integra\u00e7\u00e3o de pagamentos Pix.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">React<\/span>\r\n <span class=\"project-tag\">Node.js<\/span>\r\n <span class=\"project-tag\">Socket.io<\/span>\r\n <span class=\"project-tag\">PostgreSQL<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-cat=\"wordpress\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner purple\">WP<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">WordPress Plugin<\/span>\r\n <span class=\"project-year\">2025<\/span>\r\n <\/div>\r\n <h3>Plugin Importa\u00e7\u00e3o Bis2Bis<\/h3>\r\n <p>Plugin customizado para importa\u00e7\u00e3o automatizada de produtos via API Bis2Bis, execu\u00e7\u00e3o por CRON e sincroniza\u00e7\u00e3o peri\u00f3dica com tratamento de falhas.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">PHP<\/span>\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag\">REST API<\/span>\r\n <span class=\"project-tag\">CRON<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-cat=\"automation\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner green\">\ud83e\udd16<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">Automa\u00e7\u00e3o<\/span>\r\n <span class=\"project-year\">2025<\/span>\r\n <\/div>\r\n <h3>Web Scraping & Automa\u00e7\u00e3o<\/h3>\r\n <p>Scripts Python com Selenium e Pandas para coleta, processamento e an\u00e1lise de dados em larga escala.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">Python<\/span>\r\n <span class=\"project-tag\">Selenium<\/span>\r\n <span class=\"project-tag\">Pandas<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-cat=\"web\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner cyan\">LMS<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">Plataforma LMS<\/span>\r\n <span class=\"project-year\">2025<\/span>\r\n <\/div>\r\n <h3>Plataforma de Ensino Online<\/h3>\r\n <p>Plataforma LMS com objetos interativos, Custom Post Types e recursos de aprendizado personalizados.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">WordPress<\/span>\r\n <span class=\"project-tag\">React<\/span>\r\n <span class=\"project-tag\">PHP<\/span>\r\n <span class=\"project-tag\">JavaScript<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card\" data-cat=\"web\">\r\n <div class=\"project-thumb\">\r\n <div class=\"project-thumb-inner pink\">API<\/div>\r\n <div class=\"project-overlay\"><a href=\"#\">VER PROJETO \u2197<\/a><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <div class=\"project-meta\">\r\n <span class=\"project-cat\">Backend \/ API<\/span>\r\n <span class=\"project-year\">2025<\/span>\r\n <\/div>\r\n <h3>API RESTful \u2014 Laravel<\/h3>\r\n <p>API robusta com autentica\u00e7\u00e3o JWT, documenta\u00e7\u00e3o estruturada, integra\u00e7\u00e3o com pagamentos e deploy em cloud.<\/p>\r\n <div class=\"project-tags\">\r\n <span class=\"project-tag\">Laravel<\/span>\r\n <span class=\"project-tag\">JWT<\/span>\r\n <span class=\"project-tag\">MySQL<\/span>\r\n <span class=\"project-tag\">Vercel<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EDUCATION -->\r\n <section id=\"education\">\r\n <div class=\"section-header reveal\" style=\"text-align:center\">\r\n <span class=\"section-label\" style=\"justify-content:center;display:flex\">\/\/ FORMA\u00c7\u00c3O<\/span>\r\n <h2 class=\"section-title\">Educa\u00e7\u00e3o & Certifica\u00e7\u00f5es<\/h2>\r\n <\/div>\r\n\r\n <div class=\"edu-grid\">\r\n <div class=\"edu-card reveal\">\r\n <div class=\"edu-icon\">\ud83c\udf93<\/div>\r\n <div class=\"edu-period\">FEV 2025 \u2014 DEZ 2026<\/div>\r\n <div class=\"edu-inst\">Universidade Cruzeiro do Sul<\/div>\r\n <div class=\"edu-course\">An\u00e1lise e Desenvolvimento de Sistemas<\/div>\r\n <\/div>\r\n\r\n <div class=\"edu-card reveal\">\r\n <div class=\"edu-icon\">\ud83c\udfeb<\/div>\r\n <div class=\"edu-period\">ABR 2024 \u2014 JUN 2025<\/div>\r\n <div class=\"edu-inst\">Senac S\u00e3o Paulo<\/div>\r\n <div class=\"edu-course\">T\u00e9cnico \u2014 Inform\u00e1tica para Internet<\/div>\r\n <\/div>\r\n\r\n <div class=\"edu-card reveal\">\r\n <div class=\"edu-icon\">\ud83d\udcbb<\/div>\r\n <div class=\"edu-period\">AGO 2022 \u2014 MAR 2024<\/div>\r\n <div class=\"edu-inst\">Senac S\u00e3o Paulo<\/div>\r\n <div class=\"edu-course\">T\u00e9cnico \u2014 Inform\u00e1tica<\/div>\r\n <\/div>\r\n\r\n <div class=\"edu-card reveal\">\r\n <div class=\"edu-icon\">\u26a1<\/div>\r\n <div class=\"edu-period\">AGO 2024 \u2014 NOV 2024<\/div>\r\n <div class=\"edu-inst\">Senac S\u00e3o Paulo<\/div>\r\n <div class=\"edu-course\">Extens\u00e3o \u2014 Desenvolvedor Front-End: JavaScript<\/div>\r\n <\/div>\r\n\r\n <div class=\"edu-card reveal\">\r\n <div class=\"edu-icon\">\ud83d\udd3a<\/div>\r\n <div class=\"edu-period\">MAI 2024 \u2014 JUL 2024<\/div>\r\n <div class=\"edu-inst\">Senac S\u00e3o Paulo<\/div>\r\n <div class=\"edu-course\">Extens\u00e3o \u2014 Angular: Interfaces Front-End<\/div>\r\n <\/div>\r\n\r\n <div class=\"edu-card reveal\">\r\n <div class=\"edu-icon\">\ud83c\udfc6<\/div>\r\n <div class=\"edu-period\">CERTIFICA\u00c7\u00d5ES<\/div>\r\n <div class=\"edu-inst\">M\u00faltiplas Plataformas<\/div>\r\n <div class=\"edu-course\">User Experience \u00b7 Engenharia de Software<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CONTACT -->\r\n <section id=\"contact\">\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-info reveal\">\r\n <div class=\"section-header\">\r\n <span class=\"section-label\">\/\/ CONTATO<\/span>\r\n <h2 class=\"section-title\">Vamos construir<br>algo juntos?<\/h2>\r\n <\/div>\r\n <p>Dispon\u00edvel para projetos freelance, posi\u00e7\u00f5es full-time e parcerias estrat\u00e9gicas. Respondo em at\u00e9 24h.<\/p>\r\n\r\n <div class=\"contact-methods\">\r\n <a class=\"contact-method\" href=\"mailto:miguelccezarferreira@gmail.com\">\r\n <span class=\"cm-icon\">\u2709<\/span>\r\n <div>\r\n <span class=\"cm-label\">E-mail<\/span>\r\n <span class=\"cm-value\">miguelccezarferreira@gmail.com<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"contact-method\" href=\"tel:+5511951863723\">\r\n <span class=\"cm-icon\">\ud83d\udcf1<\/span>\r\n <div>\r\n <span class=\"cm-label\">WhatsApp \/ Mobile<\/span>\r\n <span class=\"cm-value\">+55 (11) 95186-3723<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"contact-method\" href=\"https:\/\/www.linkedin.com\/in\/miguelcezarferreira\" target=\"_blank\">\r\n <span class=\"cm-icon\">\ud83d\udcbc<\/span>\r\n <div>\r\n <span class=\"cm-label\">LinkedIn<\/span>\r\n <span class=\"cm-value\">linkedin.com\/in\/miguelcezarferreira<\/span>\r\n <\/div>\r\n <\/a>\r\n <a class=\"contact-method\" href=\"https:\/\/miguelcferreira.com.br\" target=\"_blank\">\r\n <span class=\"cm-icon\">\ud83c\udf10<\/span>\r\n <div>\r\n <span class=\"cm-label\">Portf\u00f3lio<\/span>\r\n <span class=\"cm-value\">miguelcferreira.com.br<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <form class=\"contact-form reveal\" onsubmit=\"handleSubmit(event)\">\r\n <div class=\"form-row\">\r\n <div class=\"form-field\">\r\n <label>Nome<\/label>\r\n <input type=\"text\" name=\"nome\" placeholder=\"Seu nome\" required \/>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>E-mail<\/label>\r\n <input type=\"email\" name=\"email\" placeholder=\"seu@email.com\" required \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Assunto<\/label>\r\n <input type=\"text\" name=\"assunto\" placeholder=\"Proposta, parceria, freela...\" \/>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Mensagem<\/label>\r\n <textarea name=\"mensagem\" placeholder=\"Conta mais sobre seu projeto...\" required><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"form-submit\" id=\"submitBtn\">Enviar Mensagem \u2192<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER -->\r\n <footer>\r\n <div class=\"footer-inner\">\r\n <div class=\"footer-logo\">MCF<span>.<\/span>DEV<\/div>\r\n <p class=\"footer-copy\">\u00a9 2025 Miguel Cezar Ferreira \u2014 Fundador da Single Future \u00b7 S\u00e3o Paulo, BR<\/p>\r\n <div class=\"footer-social\">\r\n <a class=\"social-link\" href=\"https:\/\/www.linkedin.com\/in\/miguelcezarferreira\" target=\"_blank\">in<\/a>\r\n <a class=\"social-link\" href=\"https:\/\/github.com\/\" target=\"_blank\">gh<\/a>\r\n <a class=\"social-link\" href=\"https:\/\/miguelcferreira.com.br\" target=\"_blank\">\u2197<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);\r\n\r\n \/* CURSOR *\/\r\n const dot = document.getElementById('cursorDot');\r\n const ring = document.getElementById('cursorRing');\r\n document.addEventListener('mousemove', e => {\r\n gsap.to(dot, { x: e.clientX, y: e.clientY, duration: .05 });\r\n gsap.to(ring, { x: e.clientX, y: e.clientY, duration: .15 });\r\n });\r\n document.querySelectorAll('a, button').forEach(el => {\r\n el.addEventListener('mouseenter', () => gsap.to(ring, { scale: 1.8, opacity: .6, duration: .2 }));\r\n el.addEventListener('mouseleave', () => gsap.to(ring, { scale: 1, opacity: 1, duration: .2 }));\r\n });\r\n\r\n \/* SPACE CANVAS *\/\r\n const canvas = document.getElementById('spaceCanvas');\r\n const ctx = canvas.getContext('2d');\r\n let stars = [];\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = document.getElementById('hero').offsetHeight;\r\n }\r\n\r\n function initStars() {\r\n stars = [];\r\n for (let i = 0; i < 200; i++) {\r\n stars.push({\r\n x: Math.random() * canvas.width,\r\n y: Math.random() * canvas.height,\r\n r: Math.random() * 1.5,\r\n o: Math.random(),\r\n s: Math.random() * 0.003 + 0.001\r\n });\r\n }\r\n }\r\n\r\n function drawStars() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n stars.forEach(s => {\r\n s.o += s.s;\r\n if (s.o > 1 || s.o < 0) s.s *= -1;\r\n ctx.beginPath();\r\n ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);\r\n ctx.fillStyle = `rgba(0,229,168,${s.o * 0.7})`;\r\n ctx.fill();\r\n });\r\n requestAnimationFrame(drawStars);\r\n }\r\n\r\n resizeCanvas(); initStars(); drawStars();\r\n window.addEventListener('resize', () => { resizeCanvas(); initStars(); });\r\n\r\n \/* SHOOTING STARS *\/\r\n function shootStar() {\r\n const hero = document.getElementById('hero');\r\n const star = document.createElement('div');\r\n star.className = 'shooting-star';\r\n const len = Math.random() * 200 + 80;\r\n const angle = Math.random() * 30 + 10;\r\n star.style.cssText = `\r\n width: ${len}px;\r\n top: ${Math.random() * 60}%;\r\n left: ${Math.random() * 70}%;\r\n transform: rotate(${angle}deg);\r\n opacity: 0;\r\n `;\r\n hero.appendChild(star);\r\n gsap.fromTo(star,\r\n { opacity: 0, x: 0 },\r\n {\r\n opacity: 1, x: len * 1.5,\r\n duration: .6, ease: 'power1.out',\r\n onComplete: () => {\r\n gsap.to(star, { opacity: 0, duration: .3, onComplete: () => star.remove() });\r\n }\r\n }\r\n );\r\n }\r\n setInterval(shootStar, 2200);\r\n\r\n \/* NAV SCROLL *\/\r\n window.addEventListener('scroll', () => {\r\n document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 60);\r\n });\r\n\r\n \/* HERO ANIMATION *\/\r\n const tl = gsap.timeline();\r\n tl.to('.hero-badge', { opacity: 1, y: 0, duration: .8, ease: 'power3.out' })\r\n .fromTo('.line1', { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: .8, ease: 'power3.out' }, .5)\r\n .fromTo('.hero-char', { opacity: 0, y: 50, filter: 'blur(6px)' }, {\r\n opacity: 1, y: 0, filter: 'blur(0px)',\r\n duration: .07, stagger: .05, ease: 'expo.out'\r\n }, 1.1)\r\n .to('.hero-sub', { opacity: 1, y: 0, duration: .9, ease: 'power3.out' }, 1.8)\r\n .to('.hero-buttons', { opacity: 1, y: 0, duration: .8, ease: 'power3.out' }, 2.0)\r\n .to('.hero-stats', { opacity: 1, y: 0, duration: .8, ease: 'power3.out' }, 2.2)\r\n .to('.scroll-indicator', { opacity: 1, duration: .6 }, 2.7);\r\n\r\n \/* PARALLAX *\/\r\n gsap.to('#heroContent', {\r\n y: 120, opacity: .4,\r\n ease: 'none',\r\n scrollTrigger: { trigger: '#hero', start: 'top top', end: 'bottom top', scrub: true }\r\n });\r\n\r\n \/* REVEALS *\/\r\n gsap.utils.toArray('.reveal').forEach(el => {\r\n gsap.to(el, {\r\n opacity: 1, y: 0,\r\n duration: .9, ease: 'power3.out',\r\n scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }\r\n });\r\n });\r\n\r\n ScrollTrigger.batch('.project-card', {\r\n start: 'top 90%',\r\n onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, scale: 1, duration: .7, stagger: .1, ease: 'power3.out' })\r\n });\r\n\r\n \/* COUNTERS *\/\r\n let countersRun = false;\r\n ScrollTrigger.create({\r\n trigger: '.hero-stats',\r\n start: 'top 85%',\r\n onEnter: () => {\r\n if (countersRun) return;\r\n countersRun = true;\r\n document.querySelectorAll('[data-target]').forEach((el, i) => {\r\n const target = +el.dataset.target;\r\n el.classList.add('counting');\r\n gsap.to({ val: 0 }, {\r\n val: target,\r\n duration: 2,\r\n delay: i * 0.15,\r\n ease: 'power2.out',\r\n onUpdate: function () { el.textContent = Math.round(this.targets()[0].val); },\r\n onComplete: () => { el.textContent = target; el.classList.remove('counting'); }\r\n });\r\n });\r\n }\r\n });\r\n\r\n \/* SECTION TITLES *\/\r\n document.querySelectorAll('.section-title').forEach(el => {\r\n const text = el.innerHTML;\r\n el.innerHTML = text.replace(\/(\\S)\/g, '<span class=\"split-char\" style=\"opacity:0;display:inline-block\">$1<\/span>').replace(\/<br>\/g, '<br>');\r\n gsap.to(el.querySelectorAll('.split-char'), {\r\n opacity: 1, y: 0, duration: .05, stagger: .025, ease: 'power2.out',\r\n scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none none' }\r\n });\r\n });\r\n\r\n \/* MOBILE MENU *\/\r\n const hamburger = document.getElementById('hamburger');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n function toggleMenu() {\r\n const isOpen = mobileMenu.classList.toggle('open');\r\n hamburger.classList.toggle('open', isOpen);\r\n document.body.style.overflow = isOpen ? 'hidden' : '';\r\n }\r\n\r\n \/* SMOOTH SCROLL *\/\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\r\n a.addEventListener('click', e => {\r\n const target = document.querySelector(a.getAttribute('href'));\r\n if (!target) return;\r\n e.preventDefault();\r\n gsap.to(window, { duration: 1, scrollTo: { y: target, offsetY: 70 }, ease: 'power3.inOut' });\r\n });\r\n });\r\n\r\n \/* FORM SUBMIT *\/\r\n function handleSubmit(e) {\r\n e.preventDefault();\r\n const btn = document.getElementById('submitBtn');\r\n btn.textContent = 'ENVIANDO...';\r\n setTimeout(() => {\r\n btn.textContent = '\u2713 MENSAGEM ENVIADA!';\r\n e.target.reset();\r\n setTimeout(() => { btn.textContent = 'ENVIAR MENSAGEM \u2192'; }, 3000);\r\n }, 1200);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Miguel Cezar Ferreira \u2014 Full Stack Developer Home Sobre Experi\u00eancia Projetos Skills Contato MCF.DEV Sobre Experi\u00eancia Projetos Skills Contato Hire Me FULL STACK DEVELOPER \u00b7 FUNDADOR \u00b7 SINGLE FUTURE Miguel Cezar Ferreira Desenvolvedor Full Stack com 3+ anos de experi\u00eancia construindo sistemas web escal\u00e1veis, APIs RESTful e experi\u00eancias digitais de alta performance. Ver Projetos \u2192 […]<\/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-568","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=568"}],"version-history":[{"count":4,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/568\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=\/wp\/v2\/pages\/568\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/singlefuture.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}