{"id":374,"date":"2025-06-12T16:00:57","date_gmt":"2025-06-12T15:00:57","guid":{"rendered":"https:\/\/sa.ib6.pt\/?page_id=374"},"modified":"2025-06-13T12:16:16","modified_gmt":"2025-06-13T11:16:16","slug":"sobre","status":"publish","type":"page","link":"https:\/\/sa.ib6.pt\/?page_id=374","title":{"rendered":"Sobre"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"374\" class=\"elementor elementor-374\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-28dd769 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"28dd769\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-de1966d elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"de1966d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"about-container\" id=\"about-section\">\r\n  <!-- Efeito de part\u00edculas -->\r\n  <canvas id=\"about-particles\" class=\"particles-canvas\"><\/canvas>\r\n  \r\n  <!-- Conte\u00fado -->\r\n  <div class=\"about-content\">\r\n    <h2 class=\"about-title\">Sobre MIM<\/h2>\r\n    <p class=\"about-subtitle\">Programador & Designer<\/p>\r\n    \r\n    <div class=\"about-card\">\r\n      <div class=\"about-card-content\">\r\n        <p class=\"about-text\">\r\n          <span class=\"highlight-text\">Paulo C\u00e9sar Salazar De S\u00e1<\/span>\r\n          <br><br>\r\n          Estudante do 11.\u00ba ano do curso profissional de T\u00e9cnico de Gest\u00e3o e Programa\u00e7\u00e3o de Sistemas Inform\u00e1ticos na Escola Secund\u00e1ria de Cam\u00f5es.\r\n          <br><br>\r\n          Possuo conhecimentos em linguagens como <span class=\"skill-tag\" data-skill=\"HTML\">HTML<\/span>, <span class=\"skill-tag\" data-skill=\"CSS\">CSS<\/span>, <span class=\"skill-tag\" data-skill=\"Java\">Java<\/span> e <span class=\"skill-tag\" data-skill=\"C++\">C++<\/span>, e atualmente realizo est\u00e1gio na empresa IB6, onde aprofundo compet\u00eancias em <span class=\"skill-tag\" data-skill=\"WordPress\">WordPress<\/span> e ganho experi\u00eancia pr\u00e1tica no ambiente profissional.\r\n          <br><br>\r\n          Al\u00e9m da programa\u00e7\u00e3o, tamb\u00e9m tenho habilidades em edi\u00e7\u00e3o de v\u00eddeo, utilizando o <span class=\"skill-tag\" data-skill=\"CapCut\">CapCut<\/span> para cria\u00e7\u00e3o de conte\u00fados visuais criativos e de qualidade.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <!-- \u00cdcones interativos -->\r\n    <div class=\"interactive-icons\">\r\n      <div class=\"icon-item\" data-tooltip=\"HTML5\">\r\n        <i class=\"fab fa-html5\"><\/i>\r\n      <\/div>\r\n      <div class=\"icon-item\" data-tooltip=\"CSS3\">\r\n        <i class=\"fab fa-css3-alt\"><\/i>\r\n      <\/div>\r\n      <div class=\"icon-item\" data-tooltip=\"Java\">\r\n        <i class=\"fab fa-java\"><\/i>\r\n      <\/div>\r\n      <div class=\"icon-item\" data-tooltip=\"WordPress\">\r\n        <i class=\"fab fa-wordpress\"><\/i>\r\n      <\/div>\r\n      <div class=\"icon-item\" data-tooltip=\"Video Editing\">\r\n        <i class=\"fas fa-video\"><\/i>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap');\r\n  @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css');\r\n  \r\n  :root {\r\n    --dark: #0e0e0e;\r\n    --light: #ffffff;\r\n    --medium-gray: #7a7a7a;\r\n    --accent: #00a8ff;\r\n  }\r\n  \r\n  .about-container {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: 100vh;\r\n    color: white;\r\n    padding: 60px 20px;\r\n    overflow: hidden;\r\n    font-family: 'Inter', sans-serif;\r\n  }\r\n  \r\n  .particles-canvas {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  .about-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 800px;\r\n    width: 100%;\r\n    text-align: center;\r\n  }\r\n  \r\n  .about-title {\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 20px;\r\n    text-transform: uppercase;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: fadeInUp 0.8s ease-out forwards;\r\n    color: var(--medium-gray);\r\n  }\r\n  \r\n  .about-subtitle {\r\n    font-size: 24px;\r\n    font-weight: 600;\r\n    line-height: 1.4;\r\n    margin-bottom: 40px;\r\n    text-transform: uppercase;\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  .about-card {\r\n    background: rgba(30, 30, 30, 0.8);\r\n    backdrop-filter: blur(10px);\r\n    border-radius: 16px;\r\n    padding: 2px;\r\n    margin-bottom: 40px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\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  .about-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background: linear-gradient(\r\n      to bottom right,\r\n      transparent,\r\n      rgba(255, 255, 255, 0.03),\r\n      transparent\r\n    );\r\n    transform: rotate(30deg);\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease;\r\n  }\r\n  \r\n  .about-card:hover::before {\r\n    opacity: 1;\r\n    animation: shine 2s ease infinite;\r\n  }\r\n  \r\n  .about-card-content {\r\n    padding: 40px;\r\n    background: rgba(20, 20, 20, 0.7);\r\n    border-radius: 14px;\r\n  }\r\n  \r\n  .about-text {\r\n    font-size: 16px;\r\n    font-weight: 300;\r\n    line-height: 1.8;\r\n    text-align: left;\r\n    margin: 0;\r\n  }\r\n  \r\n  .highlight-text {\r\n    font-weight: 600;\r\n    color: var(--light);\r\n  }\r\n  \r\n  .skill-tag {\r\n    display: inline-block;\r\n    position: relative;\r\n    cursor: pointer;\r\n    font-weight: 500;\r\n    color: var(--accent);\r\n    transition: all 0.3s ease;\r\n  }\r\n  \r\n  .skill-tag::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -2px;\r\n    left: 0;\r\n    width: 0;\r\n    height: 1px;\r\n    background: var(--accent);\r\n    transition: width 0.3s ease;\r\n  }\r\n  \r\n  .skill-tag:hover::after {\r\n    width: 100%;\r\n  }\r\n  \r\n  .skill-tag:hover {\r\n    text-shadow: 0 0 8px rgba(0, 168, 255, 0.4);\r\n  }\r\n  \r\n  .interactive-icons {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 25px;\r\n    flex-wrap: wrap;\r\n  }\r\n  \r\n  .icon-item {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    position: relative;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: fadeInUp 0.8s ease-out forwards;\r\n  }\r\n  \r\n  .icon-item:nth-child(1) { animation-delay: 0.9s; }\r\n  .icon-item:nth-child(2) { animation-delay: 1s; }\r\n  .icon-item:nth-child(3) { animation-delay: 1.1s; }\r\n  .icon-item:nth-child(4) { animation-delay: 1.2s; }\r\n  .icon-item:nth-child(5) { animation-delay: 1.3s; }\r\n  \r\n  .icon-item:hover {\r\n    background: var(--accent);\r\n    color: var(--dark);\r\n    transform: translateY(-5px) scale(1.1);\r\n    box-shadow: 0 5px 15px rgba(0, 168, 255, 0.4);\r\n  }\r\n  \r\n  .icon-item::before {\r\n    content: attr(data-tooltip);\r\n    position: absolute;\r\n    bottom: -40px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: rgba(0, 0, 0, 0.7);\r\n    padding: 5px 10px;\r\n    border-radius: 4px;\r\n    font-size: 12px;\r\n    opacity: 0;\r\n    transition: all 0.3s ease;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  .icon-item:hover::before {\r\n    opacity: 1;\r\n    bottom: -35px;\r\n  }\r\n  \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  @keyframes shine {\r\n    0% { background-position: -100% 0; }\r\n    100% { background-position: 200% 0; }\r\n  }\r\n  \r\n  @media (max-width: 768px) {\r\n    .about-card-content {\r\n      padding: 30px 20px;\r\n    }\r\n    \r\n    .about-text {\r\n      font-size: 15px;\r\n    }\r\n    \r\n    .icon-item {\r\n      width: 50px;\r\n      height: 50px;\r\n      font-size: 20px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Configura\u00e7\u00e3o das part\u00edculas\r\n    const canvas = document.getElementById('about-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    \/\/ Efeito ao clicar nas habilidades\r\n    const skillTags = document.querySelectorAll('.skill-tag');\r\n    skillTags.forEach(tag => {\r\n      tag.addEventListener('click', function() {\r\n        const skill = this.getAttribute('data-skill');\r\n        \r\n        \/\/ Criar efeito visual\r\n        const pulse = document.createElement('div');\r\n        pulse.style.position = 'fixed';\r\n        pulse.style.left = `${this.getBoundingClientRect().left + this.offsetWidth\/2}px`;\r\n        pulse.style.top = `${this.getBoundingClientRect().top + this.offsetHeight\/2}px`;\r\n        pulse.style.width = '10px';\r\n        pulse.style.height = '10px';\r\n        pulse.style.backgroundColor = 'rgba(0, 168, 255, 0.5)';\r\n        pulse.style.borderRadius = '50%';\r\n        pulse.style.transform = 'translate(-50%, -50%)';\r\n        pulse.style.pointerEvents = 'none';\r\n        pulse.style.zIndex = '100';\r\n        pulse.style.animation = 'pulse 1s ease-out forwards';\r\n        \r\n        document.body.appendChild(pulse);\r\n        \r\n        \/\/ Mostrar alerta (pode substituir por algo mais elaborado)\r\n        setTimeout(() => {\r\n          alert(`Voc\u00ea clicou em ${skill}!`);\r\n          pulse.remove();\r\n        }, 500);\r\n      });\r\n    });\r\n    \r\n    \/\/ Adicionar anima\u00e7\u00e3o de pulso\r\n    const style = document.createElement('style');\r\n    style.textContent = `\r\n      @keyframes pulse {\r\n        0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\r\n        100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }\r\n      }\r\n    `;\r\n    document.head.appendChild(style);\r\n  });\r\n<\/script>\r\n\r\n\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-b6bb3e9 e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"b6bb3e9\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ffb00c elementor-widget elementor-widget-html\" data-id=\"6ffb00c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"experience-container\">\r\n  <!-- Card IB6 -->\r\n  <div class=\"exp-card\" data-card=\"ib6\">\r\n    <div class=\"exp-card-inner\">\r\n      <div class=\"exp-card-image\">\r\n        <img decoding=\"async\" src=\"https:\/\/ib6.pt\/wp-content\/uploads\/2022\/07\/logo-ib6-verde-qualidade.png\" alt=\"IB6\">\r\n        <div class=\"exp-card-shine\"><\/div>\r\n      <\/div>\r\n      <div class=\"exp-card-content\">\r\n        <h3>IB6<\/h3>\r\n        <p class=\"exp-date\">Junho 2025 - Presente<\/p>\r\n        <p class=\"exp-desc\">Est\u00e1gio<\/p>\r\n        <div class=\"exp-card-details\">\r\n          <p>Desenvolvimento WordPress<\/p>\r\n          <p>Gest\u00e3o de Sistemas<\/p>\r\n          <p>Programa\u00e7\u00e3o Web<\/p>\r\n          <div class=\"exp-tech-tags\">\r\n            <span>WordPress<\/span>\r\n            \r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"exp-card-hover\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Card Escola Secund\u00e1ria de Cam\u00f5es -->\r\n  <div class=\"exp-card\" data-card=\"camoes\">\r\n    <div class=\"exp-card-inner\">\r\n      <div class=\"exp-card-image\">\r\n        <img decoding=\"async\" src=\"https:\/\/static.wixstatic.com\/media\/408bba_d973f71f0a9147c2bab4bd53067c2cc1~mv2.png\" alt=\"Escola Cam\u00f5es\">\r\n        <div class=\"exp-card-shine\"><\/div>\r\n      <\/div>\r\n      <div class=\"exp-card-content\">\r\n        <h3>Escola Secund\u00e1ria de Cam\u00f5es<\/h3>\r\n        <p class=\"exp-date\">Setembro 2023 - Presente<\/p>\r\n        <p class=\"exp-desc\">Escola<\/p>\r\n        <div class=\"exp-card-details\">\r\n          <p>Curso T\u00e9cnico de Gest\u00e3o e Programa\u00e7\u00e3o de Sistemas Inform\u00e1ticos<\/p>\r\n          <div class=\"exp-tech-tags\">\r\n            <span>Java<\/span>\r\n            <span>C++<\/span>\r\n            <span>SQL<\/span>\r\n            <span>HTML\/CSS<\/span>\r\n            <span>PHP<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"exp-card-hover\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Card AEPP -->\r\n  <div class=\"exp-card\" data-card=\"aepp\">\r\n    <div class=\"exp-card-inner\">\r\n      <div class=\"exp-card-image\">\r\n        <img decoding=\"async\" src=\"https:\/\/aepp.pt\/wp-content\/uploads\/2017\/12\/logo2.png\" alt=\"AEPP\">\r\n        <div class=\"exp-card-shine\"><\/div>\r\n      <\/div>\r\n      <div class=\"exp-card-content\">\r\n        <h3>AEPP<\/h3>\r\n        <p class=\"exp-date\">Mar\u00e7o 2019 - Agosto 2023<\/p>\r\n        <p class=\"exp-desc\">Escola<\/p>\r\n        <div class=\"exp-card-details\">\r\n          <p>Ensino Fundamental e Secund\u00e1rio<\/p>\r\n          <p>Prepara\u00e7\u00e3o para Curso T\u00e9cnico<\/p>\r\n          <div class=\"exp-tech-tags\">\r\n            <span>Inform\u00e1tica<\/span>\r\n            <span>Matem\u00e1tica<\/span>\r\n            <span>Ci\u00eancias<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"exp-card-hover\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  :root {\r\n    --dark: #0e0e0e;\r\n    --light: #ffffff;\r\n    --medium-gray: #7a7a7a;\r\n    --accent: #00a8ff;\r\n    --card-bg: #1a1a1a;\r\n  }\r\n\r\n  .experience-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 30px;\r\n    padding: 40px 20px;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .exp-card {\r\n    width: 300px;\r\n    background: var(--card-bg);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    cursor: pointer;\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .exp-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 15px 30px rgba(0, 168, 255, 0.2);\r\n    border-color: rgba(0, 168, 255, 0.3);\r\n  }\r\n\r\n  .exp-card-inner {\r\n    position: relative;\r\n    z-index: 2;\r\n    padding: 20px;\r\n  }\r\n\r\n  .exp-card-image {\r\n    width: 200px;\r\n    height: 100px;\r\n    margin: 0 auto 20px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .exp-card-image img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n    object-fit: contain;\r\n    transition: transform 0.5s ease;\r\n  }\r\n\r\n  .exp-card:hover .exp-card-image img {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .exp-card-shine {\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.1),\r\n      transparent\r\n    );\r\n    transition: all 0.6s ease;\r\n  }\r\n\r\n  .exp-card:hover .exp-card-shine {\r\n    left: 100%;\r\n  }\r\n\r\n  .exp-card-content h3 {\r\n    color: var(--light);\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n    margin-bottom: 8px;\r\n    text-align: center;\r\n  }\r\n\r\n  .exp-date {\r\n    color: var(--medium-gray);\r\n    font-size: 14px;\r\n    margin-bottom: 10px;\r\n    text-align: center;\r\n  }\r\n\r\n  .exp-desc {\r\n    color: var(--medium-gray);\r\n    font-size: 14px;\r\n    margin-bottom: 20px;\r\n    text-align: center;\r\n    font-weight: 300;\r\n  }\r\n\r\n  .exp-card-details {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.5s ease, opacity 0.3s ease;\r\n    opacity: 0;\r\n  }\r\n\r\n  .exp-card:hover .exp-card-details {\r\n    max-height: 300px;\r\n    opacity: 1;\r\n  }\r\n\r\n  .exp-card-details p {\r\n    color: var(--medium-gray);\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    margin-bottom: 10px;\r\n    text-align: center;\r\n  }\r\n\r\n  .exp-tech-tags {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .exp-tech-tags span {\r\n    background: rgba(0, 168, 255, 0.1);\r\n    color: var(--accent);\r\n    padding: 4px 12px;\r\n    border-radius: 20px;\r\n    font-size: 12px;\r\n    border: 1px solid rgba(0, 168, 255, 0.3);\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .exp-card:hover .exp-tech-tags span {\r\n    transform: translateY(-3px);\r\n    background: rgba(0, 168, 255, 0.2);\r\n  }\r\n\r\n  .exp-card-hover {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: radial-gradient(\r\n      circle at var(--mouse-x) var(--mouse-y),\r\n      rgba(0, 168, 255, 0.05),\r\n      transparent 80%\r\n    );\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n\r\n  .exp-card:hover .exp-card-hover {\r\n    opacity: 1;\r\n  }\r\n\r\n  \/* Efeito de brilho no card *\/\r\n  .exp-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background: linear-gradient(\r\n      to bottom right,\r\n      transparent,\r\n      rgba(255, 255, 255, 0.03),\r\n      transparent\r\n    );\r\n    transform: rotate(30deg);\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .exp-card:hover::before {\r\n    opacity: 1;\r\n    animation: shine 1.5s ease infinite;\r\n  }\r\n\r\n  @keyframes shine {\r\n    from { transform: rotate(30deg) translateX(-100%); }\r\n    to { transform: rotate(30deg) translateX(100%); }\r\n  }\r\n\r\n  \/* Responsivo *\/\r\n  @media (max-width: 768px) {\r\n    .experience-container {\r\n      flex-direction: column;\r\n      align-items: center;\r\n    }\r\n    \r\n    .exp-card {\r\n      width: 280px;\r\n    }\r\n    \r\n    .exp-card-image {\r\n      width: 180px;\r\n      height: 90px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Efeito de seguir mouse nos cards\r\n    const cards = document.querySelectorAll('.exp-card');\r\n    \r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n        \r\n        card.style.setProperty('--mouse-x', `${x}px`);\r\n        card.style.setProperty('--mouse-y', `${y}px`);\r\n      });\r\n      \r\n      \/\/ Efeito de clique\r\n      card.addEventListener('click', function() {\r\n        \/\/ Adicionar efeito de pulso\r\n        const pulse = document.createElement('div');\r\n        pulse.style.position = 'absolute';\r\n        pulse.style.borderRadius = '12px';\r\n        pulse.style.backgroundColor = 'rgba(0, 168, 255, 0.2)';\r\n        pulse.style.pointerEvents = 'none';\r\n        pulse.style.zIndex = '10';\r\n        pulse.style.top = '0';\r\n        pulse.style.left = '0';\r\n        pulse.style.width = '100%';\r\n        pulse.style.height = '100%';\r\n        pulse.style.animation = 'pulse 0.6s ease-out forwards';\r\n        \r\n        this.appendChild(pulse);\r\n        \r\n        \/\/ Remover ap\u00f3s anima\u00e7\u00e3o\r\n        setTimeout(() => {\r\n          pulse.remove();\r\n        }, 600);\r\n      });\r\n    });\r\n    \r\n    \/\/ Adicionar anima\u00e7\u00e3o de pulso\r\n    const style = document.createElement('style');\r\n    style.textContent = `\r\n      @keyframes pulse {\r\n        0% { transform: scale(1); opacity: 1; }\r\n        100% { transform: scale(1.05); opacity: 0; }\r\n      }\r\n    `;\r\n    document.head.appendChild(style);\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\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>Sobre MIM Programador &#038; Designer Paulo C\u00e9sar Salazar De S\u00e1 Estudante do 11.\u00ba ano do curso profissional de T\u00e9cnico de Gest\u00e3o e Programa\u00e7\u00e3o de Sistemas Inform\u00e1ticos na Escola Secund\u00e1ria de Cam\u00f5es. Possuo conhecimentos em linguagens como HTML, CSS, Java e C++, e atualmente realizo est\u00e1gio na empresa IB6, onde aprofundo compet\u00eancias em WordPress e ganho experi\u00eancia pr\u00e1tica no ambiente profissional. Al\u00e9m da programa\u00e7\u00e3o, tamb\u00e9m tenho habilidades em edi\u00e7\u00e3o de v\u00eddeo, utilizando o CapCut para cria\u00e7\u00e3o de conte\u00fados visuais criativos e de qualidade. IB6 Junho 2025 &#8211; Presente Est\u00e1gio Desenvolvimento WordPress Gest\u00e3o de Sistemas Programa\u00e7\u00e3o Web WordPress Escola Secund\u00e1ria de Cam\u00f5es Setembro 2023 &#8211; Presente Escola Curso T\u00e9cnico de Gest\u00e3o e Programa\u00e7\u00e3o de Sistemas Inform\u00e1ticos Java C++ SQL HTML\/CSS PHP AEPP Mar\u00e7o 2019 &#8211; Agosto 2023 Escola Ensino Fundamental e Secund\u00e1rio Prepara\u00e7\u00e3o para Curso T\u00e9cnico Inform\u00e1tica Matem\u00e1tica Ci\u00eancias<\/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-374","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/374","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=374"}],"version-history":[{"count":20,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/374\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/374\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}