Trabalhos<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n :root {\r\n --black: #0a0a0a;\r\n --dark-gray: #1a1a1a;\r\n --medium-gray: #3a3a3a;\r\n --light-gray: #7a7a7a;\r\n --white: #ffffff;\r\n }\r\n \r\n @font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 300 700;\r\n font-display: swap;\r\n src: url(https:\/\/fonts.gstatic.com\/s\/inter\/v12\/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');\r\n }\r\n \r\n body {\r\n margin: 0;\r\n color: var(--white);\r\n font-family: 'Inter', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Canvas das part\u00edculas personalizadas *\/\r\n #custom-particles {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: -1;\r\n background-color: var(--black);\r\n opacity: 0.7;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: auto;\r\n padding: 100px 20px;\r\n position: relative;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .header p {\r\n letter-spacing: 3px; \r\n text-transform: uppercase;\r\n margin: 0;\r\n color: var(--light-gray);\r\n font-size: 18px;\r\n font-weight: 600;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n\r\n .header h2 {\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n margin: 15px 0 0;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards 0.3s;\r\n }\r\n\r\n .filters {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin: 0 0 50px;\r\n flex-wrap: wrap;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards 0.6s;\r\n }\r\n\r\n .filters span {\r\n cursor: pointer;\r\n padding: 10px 25px;\r\n border-radius: 30px;\r\n border: 1px solid var(--medium-gray);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n font-size: 0.9rem;\r\n background: var(--dark-gray);\r\n color: var(--white);\r\n }\r\n\r\n .filters span:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);\r\n border-color: var(--light-gray);\r\n }\r\n\r\n .filters span.active {\r\n background: var(--white);\r\n color: var(--black);\r\n border-color: transparent;\r\n font-weight: 600;\r\n box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr); \/* For\u00e7a 3 colunas no desktop *\/\r\n gap: 30px;\r\n }\r\n\r\n .project-card {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: rgba(26, 26, 26, 0.8);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n min-height: 400px; \/* Altura m\u00ednima para consist\u00eancia *\/\r\n border: 1px solid var(--medium-gray);\r\n backdrop-filter: blur(5px);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n cursor: pointer;\r\n }\r\n\r\n .project-card:nth-child(1) { animation-delay: 0.9s; }\r\n .project-card:nth-child(2) { animation-delay: 1s; }\r\n .project-card:nth-child(3) { animation-delay: 1.1s; }\r\n\r\n \/* Efeito de brilho ao passar o mouse *\/\r\n .project-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(255, 255, 255, 0.05),\r\n transparent\r\n );\r\n transition: 0.5s;\r\n z-index: 1;\r\n }\r\n\r\n .project-card:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);\r\n border-color: var(--light-gray);\r\n }\r\n\r\n .project-image-container {\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n background: var(--black);\r\n }\r\n\r\n .project-image-container img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.8s ease;\r\n opacity: 0.9;\r\n }\r\n\r\n .project-card:hover .project-image-container img {\r\n transform: scale(1.1);\r\n opacity: 1;\r\n }\r\n\r\n .project-info {\r\n padding: 25px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .project-info p {\r\n margin: 0;\r\n font-size: 0.85rem;\r\n color: var(--light-gray);\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 10px;\r\n font-weight: 600;\r\n }\r\n \r\n .project-info h3 {\r\n margin: 0;\r\n font-size: 1.4rem;\r\n font-weight: 600;\r\n color: var(--white);\r\n line-height: 1.4;\r\n }\r\n\r\n \/* Anima\u00e7\u00f5es *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* Responsividade *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 60px 20px;\r\n }\r\n \r\n .header h2 {\r\n font-size: 2rem;\r\n }\r\n \r\n .filters {\r\n gap: 10px;\r\n }\r\n \r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .project-card {\r\n max-width: 100%;\r\n min-height: auto; \/* Remove altura m\u00ednima no mobile *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <canvas id=\"custom-particles\" class=\"particles-canvas\"><\/canvas>\r\n\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <p>Trabalhos<\/p>\r\n <h2>MEUS PROJETOS<\/h2>\r\n <\/div>\r\n\r\n <div class=\"filters\">\r\n <span class=\"active\" data-filter=\"all\">Todos<\/span>\r\n <span data-filter=\"site\">Sites<\/span>\r\n <span data-filter=\"jogo\">Jogos<\/span>\r\n <\/div>\r\n\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card jogo\" onclick=\"window.location.href='https:\/\/sa.ib6.pt\/?page_id=484'\">\r\n <div class=\"project-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/media1.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExN3ZvcnVhaHR3NGt4bDhuNXpscHhhM3o4bjN5enV3djN3NWl4Z2tmYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/3IXJOEkw7XbzGv3Vkr\/giphy.gif\" alt=\"Typer Racer\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <p>Jogo<\/p>\r\n <h3>Typer Racer 2.0<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card site\" onclick=\"window.location.href='https:\/\/sa.ib6.pt\/?page_id=496'\">\r\n <div class=\"project-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/media0.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExbHFmaG5xcDRqZnQ3cW1ycTQwaHBpdWM4eWtxczg0NWl3MW1vdmsweSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/TeJKzzShodvgYnlv5E\/giphy.gif\" alt=\"Valorant Stats\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <p>Site<\/p>\r\n <h3>Valorant Stats<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card site\" onclick=\"window.location.href='https:\/\/sa.ib6.pt\/?page_id=518'\">\r\n <div class=\"project-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExamV2OG5mMGt5Zmxta2VlZjBqbXdwdHIydGtyejEzNzJwZWE0Ynh0NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/2nyQQ3LGlCdhH07Zr3\/giphy.gif\" alt=\"Curso de Programa\u00e7\u00e3o\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <p>Site<\/p>\r\n <h3>Curso de Programa\u00e7\u00e3o<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Configura\u00e7\u00e3o das part\u00edculas personalizadas\r\n const canvas = document.getElementById('custom-particles');\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = canvas.offsetWidth;\r\n canvas.height = canvas.offsetHeight;\r\n \r\n const particles = [];\r\n const particleCount = window.innerWidth < 768 ? 30 : 60;\r\n \r\n \/\/ Criar part\u00edculas\r\n for (let i = 0; i < particleCount; i++) {\r\n particles.push({\r\n x: Math.random() * canvas.width,\r\n y: Math.random() * canvas.height,\r\n size: Math.random() * 3 + 1,\r\n speedX: Math.random() * 1 - 0.5,\r\n speedY: Math.random() * 1 - 0.5,\r\n color: `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.05})`\r\n });\r\n }\r\n \r\n \/\/ Animar part\u00edculas\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n for (let i = 0; i < particles.length; i++) {\r\n const p = particles[i];\r\n \r\n \/\/ Mover part\u00edculas\r\n p.x += p.speedX;\r\n p.y += p.speedY;\r\n \r\n \/\/ Rebater nas bordas\r\n if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;\r\n if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;\r\n \r\n \/\/ Desenhar part\u00edculas\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n \r\n \/\/ Conectar part\u00edculas pr\u00f3ximas\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const p2 = particles[j];\r\n const distance = Math.sqrt(\r\n Math.pow(p.x - p2.x, 2) + \r\n Math.pow(p.y - p2.y, 2)\r\n );\r\n \r\n if (distance < 100) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 - distance\/500})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.moveTo(p.x, p.y);\r\n ctx.lineTo(p2.x, p2.y);\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n \r\n requestAnimationFrame(animateParticles);\r\n }\r\n \r\n animateParticles();\r\n \r\n \/\/ Redimensionar canvas\r\n window.addEventListener('resize', function() {\r\n canvas.width = canvas.offsetWidth;\r\n canvas.height = canvas.offsetHeight;\r\n });\r\n\r\n \/\/ C\u00f3digo de filtros\r\n const filterButtons = document.querySelectorAll('.filters span');\r\n const projectCards = document.querySelectorAll('.project-card');\r\n\r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n button.classList.add('active');\r\n\r\n const filter = button.getAttribute('data-filter');\r\n\r\n projectCards.forEach(card => {\r\n if (filter === 'all' || card.classList.contains(filter)) {\r\n card.style.display = 'flex';\r\n card.style.opacity = '1';\r\n card.style.pointerEvents = 'auto';\r\n } else {\r\n card.style.opacity = '0';\r\n card.style.pointerEvents = 'none';\r\n setTimeout(() => {\r\n card.style.display = 'none';\r\n }, 300); \/\/ Espera a anima\u00e7\u00e3o de fadeOut terminar\r\n }\r\n });\r\n });\r\n });\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<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-fb506d1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"fb506d1\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<\/div>\n\t\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>Trabalhos Trabalhos MEUS PROJETOS Todos Sites Jogos Jogo Typer Racer 2.0 Site Valorant Stats Site Curso de Programa\u00e7\u00e3o<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-418","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=418"}],"version-history":[{"count":52,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/418\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/418\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Trabalhos<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n :root {\r\n --black: #0a0a0a;\r\n --dark-gray: #1a1a1a;\r\n --medium-gray: #3a3a3a;\r\n --light-gray: #7a7a7a;\r\n --white: #ffffff;\r\n }\r\n \r\n @font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 300 700;\r\n font-display: swap;\r\n src: url(https:\/\/fonts.gstatic.com\/s\/inter\/v12\/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');\r\n }\r\n \r\n body {\r\n margin: 0;\r\n color: var(--white);\r\n font-family: 'Inter', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Canvas das part\u00edculas personalizadas *\/\r\n #custom-particles {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: -1;\r\n background-color: var(--black);\r\n opacity: 0.7;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: auto;\r\n padding: 100px 20px;\r\n position: relative;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .header p {\r\n letter-spacing: 3px; \r\n text-transform: uppercase;\r\n margin: 0;\r\n color: var(--light-gray);\r\n font-size: 18px;\r\n font-weight: 600;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n\r\n .header h2 {\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n margin: 15px 0 0;\r\n text-transform: uppercase;\r\n color: var(--white);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards 0.3s;\r\n }\r\n\r\n .filters {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin: 0 0 50px;\r\n flex-wrap: wrap;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards 0.6s;\r\n }\r\n\r\n .filters span {\r\n cursor: pointer;\r\n padding: 10px 25px;\r\n border-radius: 30px;\r\n border: 1px solid var(--medium-gray);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n font-size: 0.9rem;\r\n background: var(--dark-gray);\r\n color: var(--white);\r\n }\r\n\r\n .filters span:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);\r\n border-color: var(--light-gray);\r\n }\r\n\r\n .filters span.active {\r\n background: var(--white);\r\n color: var(--black);\r\n border-color: transparent;\r\n font-weight: 600;\r\n box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr); \/* For\u00e7a 3 colunas no desktop *\/\r\n gap: 30px;\r\n }\r\n\r\n .project-card {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: rgba(26, 26, 26, 0.8);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n min-height: 400px; \/* Altura m\u00ednima para consist\u00eancia *\/\r\n border: 1px solid var(--medium-gray);\r\n backdrop-filter: blur(5px);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n cursor: pointer;\r\n }\r\n\r\n .project-card:nth-child(1) { animation-delay: 0.9s; }\r\n .project-card:nth-child(2) { animation-delay: 1s; }\r\n .project-card:nth-child(3) { animation-delay: 1.1s; }\r\n\r\n \/* Efeito de brilho ao passar o mouse *\/\r\n .project-card::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(255, 255, 255, 0.05),\r\n transparent\r\n );\r\n transition: 0.5s;\r\n z-index: 1;\r\n }\r\n\r\n .project-card:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);\r\n border-color: var(--light-gray);\r\n }\r\n\r\n .project-image-container {\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n background: var(--black);\r\n }\r\n\r\n .project-image-container img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.8s ease;\r\n opacity: 0.9;\r\n }\r\n\r\n .project-card:hover .project-image-container img {\r\n transform: scale(1.1);\r\n opacity: 1;\r\n }\r\n\r\n .project-info {\r\n padding: 25px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .project-info p {\r\n margin: 0;\r\n font-size: 0.85rem;\r\n color: var(--light-gray);\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 10px;\r\n font-weight: 600;\r\n }\r\n \r\n .project-info h3 {\r\n margin: 0;\r\n font-size: 1.4rem;\r\n font-weight: 600;\r\n color: var(--white);\r\n line-height: 1.4;\r\n }\r\n\r\n \/* Anima\u00e7\u00f5es *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* Responsividade *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 60px 20px;\r\n }\r\n \r\n .header h2 {\r\n font-size: 2rem;\r\n }\r\n \r\n .filters {\r\n gap: 10px;\r\n }\r\n \r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .project-card {\r\n max-width: 100%;\r\n min-height: auto; \/* Remove altura m\u00ednima no mobile *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <canvas id=\"custom-particles\" class=\"particles-canvas\"><\/canvas>\r\n\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <p>Trabalhos<\/p>\r\n <h2>MEUS PROJETOS<\/h2>\r\n <\/div>\r\n\r\n <div class=\"filters\">\r\n <span class=\"active\" data-filter=\"all\">Todos<\/span>\r\n <span data-filter=\"site\">Sites<\/span>\r\n <span data-filter=\"jogo\">Jogos<\/span>\r\n <\/div>\r\n\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card jogo\" onclick=\"window.location.href='https:\/\/sa.ib6.pt\/?page_id=484'\">\r\n <div class=\"project-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/media1.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExN3ZvcnVhaHR3NGt4bDhuNXpscHhhM3o4bjN5enV3djN3NWl4Z2tmYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/3IXJOEkw7XbzGv3Vkr\/giphy.gif\" alt=\"Typer Racer\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <p>Jogo<\/p>\r\n <h3>Typer Racer 2.0<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card site\" onclick=\"window.location.href='https:\/\/sa.ib6.pt\/?page_id=496'\">\r\n <div class=\"project-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/media0.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExbHFmaG5xcDRqZnQ3cW1ycTQwaHBpdWM4eWtxczg0NWl3MW1vdmsweSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/TeJKzzShodvgYnlv5E\/giphy.gif\" alt=\"Valorant Stats\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <p>Site<\/p>\r\n <h3>Valorant Stats<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card site\" onclick=\"window.location.href='https:\/\/sa.ib6.pt\/?page_id=518'\">\r\n <div class=\"project-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExamV2OG5mMGt5Zmxta2VlZjBqbXdwdHIydGtyejEzNzJwZWE0Ynh0NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/2nyQQ3LGlCdhH07Zr3\/giphy.gif\" alt=\"Curso de Programa\u00e7\u00e3o\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <p>Site<\/p>\r\n <h3>Curso de Programa\u00e7\u00e3o<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Configura\u00e7\u00e3o das part\u00edculas personalizadas\r\n const canvas = document.getElementById('custom-particles');\r\n const ctx = canvas.getContext('2d');\r\n canvas.width = canvas.offsetWidth;\r\n canvas.height = canvas.offsetHeight;\r\n \r\n const particles = [];\r\n const particleCount = window.innerWidth < 768 ? 30 : 60;\r\n \r\n \/\/ Criar part\u00edculas\r\n for (let i = 0; i < particleCount; i++) {\r\n particles.push({\r\n x: Math.random() * canvas.width,\r\n y: Math.random() * canvas.height,\r\n size: Math.random() * 3 + 1,\r\n speedX: Math.random() * 1 - 0.5,\r\n speedY: Math.random() * 1 - 0.5,\r\n color: `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.05})`\r\n });\r\n }\r\n \r\n \/\/ Animar part\u00edculas\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n for (let i = 0; i < particles.length; i++) {\r\n const p = particles[i];\r\n \r\n \/\/ Mover part\u00edculas\r\n p.x += p.speedX;\r\n p.y += p.speedY;\r\n \r\n \/\/ Rebater nas bordas\r\n if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;\r\n if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;\r\n \r\n \/\/ Desenhar part\u00edculas\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n \r\n \/\/ Conectar part\u00edculas pr\u00f3ximas\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const p2 = particles[j];\r\n const distance = Math.sqrt(\r\n Math.pow(p.x - p2.x, 2) + \r\n Math.pow(p.y - p2.y, 2)\r\n );\r\n \r\n if (distance < 100) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 - distance\/500})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.moveTo(p.x, p.y);\r\n ctx.lineTo(p2.x, p2.y);\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n \r\n requestAnimationFrame(animateParticles);\r\n }\r\n \r\n animateParticles();\r\n \r\n \/\/ Redimensionar canvas\r\n window.addEventListener('resize', function() {\r\n canvas.width = canvas.offsetWidth;\r\n canvas.height = canvas.offsetHeight;\r\n });\r\n\r\n \/\/ C\u00f3digo de filtros\r\n const filterButtons = document.querySelectorAll('.filters span');\r\n const projectCards = document.querySelectorAll('.project-card');\r\n\r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n button.classList.add('active');\r\n\r\n const filter = button.getAttribute('data-filter');\r\n\r\n projectCards.forEach(card => {\r\n if (filter === 'all' || card.classList.contains(filter)) {\r\n card.style.display = 'flex';\r\n card.style.opacity = '1';\r\n card.style.pointerEvents = 'auto';\r\n } else {\r\n card.style.opacity = '0';\r\n card.style.pointerEvents = 'none';\r\n setTimeout(() => {\r\n card.style.display = 'none';\r\n }, 300); \/\/ Espera a anima\u00e7\u00e3o de fadeOut terminar\r\n }\r\n });\r\n });\r\n });\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<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-fb506d1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"fb506d1\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<\/div>\n\t\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>Trabalhos Trabalhos MEUS PROJETOS Todos Sites Jogos Jogo Typer Racer 2.0 Site Valorant Stats Site Curso de Programa\u00e7\u00e3o<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-418","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=418"}],"version-history":[{"count":52,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/418\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/418\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}