<div class="bg-fx">
  <div class="bg-grid"></div>
  <div class="bg-orb bg-o1"></div>
  <div class="bg-orb bg-o2"></div>
  <div class="bg-orb bg-o3"></div>
  <div class="bg-glow"></div>
  <div class="bg-glow bg-s"></div>
  <canvas class="bg-p"></canvas>
</div>



<script>
(function(){
  var root=document.querySelector('.bg-fx');
  var c=root.querySelector('.bg-p');
  var x=c.getContext('2d');
  var W=window.innerWidth, H=window.innerHeight, mx=W/2, my=H/2;
  var dpr=window.devicePixelRatio||1;

  window.addEventListener('mousemove', function(e){
    mx=e.clientX; my=e.clientY;
    root.style.setProperty('--bmx', mx+'px');
    root.style.setProperty('--bmy', my+'px');
  });

  function R(){
    W=window.innerWidth; H=window.innerHeight;
    c.width=W*dpr; c.height=H*dpr;
    c.style.width=W+'px'; c.style.height=H+'px';
    x.setTransform(1,0,0,1,0,0);
    x.scale(dpr,dpr);
  }
  R();
  window.addEventListener('resize', R);

  var C=['#4285f4','#9b6dff','#ff6b9d','#ffa552'];
  var P=[];
  for(var i=0;i<80;i++){
    P.push({
      x:Math.random()*W, y:Math.random()*H,
      vx:(Math.random()-.5)*.3, vy:(Math.random()-.5)*.3,
      r:Math.random()*1.8+.5,
      c:C[i%4], a:Math.random()*.5+.2
    });
  }

  // ★ 반발력 파라미터
  var REPEL_RADIUS = 45;   // 이 거리 안에 들어오면 서로 밀어냄
  var REPEL_FORCE  = 0.3; // 반발 세기
  var MAX_SPEED    = 1.8;  // 최대 속도 제한 (너무 튕기지 않도록)

  function tick(){
    x.clearRect(0,0,W,H);

    // === 1. 마우스 끌림 + 파티클 간 반발력 ===
    for(var k=0;k<P.length;k++){
      var p=P[k];
      // 마우스 끌림
      var ax=mx-p.x, ay=my-p.y;
      var dd=Math.sqrt(ax*ax+ay*ay);
      if(dd<200 && dd>0){
        var f=(200-dd)/200;
        p.vx+=(ax/dd)*f*.04;
        p.vy+=(ay/dd)*f*.04;
      }

      // ★ 다른 파티클들과의 반발력
      for(var m=0;m<P.length;m++){
        if(m===k) continue;
        var q=P[m];
        var rx=p.x-q.x, ry=p.y-q.y;
        var rd=Math.sqrt(rx*rx+ry*ry);
        if(rd<REPEL_RADIUS && rd>0){
          var rf=(REPEL_RADIUS-rd)/REPEL_RADIUS;
          // 가까울수록 더 강하게 밀어냄 (제곱으로 가속)
          p.vx+=(rx/rd)*rf*rf*REPEL_FORCE;
          p.vy+=(ry/rd)*rf*rf*REPEL_FORCE;
        }
      }

      // 감쇠
      p.vx*=.97; p.vy*=.97;

      // ★ 최대 속도 제한
      var sp=Math.sqrt(p.vx*p.vx+p.vy*p.vy);
      if(sp>MAX_SPEED){
        p.vx=(p.vx/sp)*MAX_SPEED;
        p.vy=(p.vy/sp)*MAX_SPEED;
      }

      p.x+=p.vx; p.y+=p.vy;
      if(p.x<0)p.x=W; if(p.x>W)p.x=0;
      if(p.y<0)p.y=H; if(p.y>H)p.y=0;

      x.beginPath();
      x.fillStyle=p.c;
      x.globalAlpha=p.a;
      x.arc(p.x,p.y,p.r,0,6.28);
      x.fill();
    }

    // === 2. 연결선 그리기 ===
    x.globalAlpha=1;
    for(var i=0;i<P.length;i++){
      for(var j=i+1;j<P.length;j++){
        var a=P[i], b=P[j];
        var dx=a.x-b.x, dy=a.y-b.y;
        var dd2=Math.sqrt(dx*dx+dy*dy);
        if(dd2<120){
          x.beginPath();
          x.strokeStyle=a.c;
          x.globalAlpha=(1-dd2/120)*.15;
          x.lineWidth=.6;
          x.moveTo(a.x,a.y);
          x.lineTo(b.x,b.y);
          x.stroke();
        }
      }
    }
    requestAnimationFrame(tick);
  }
  tick();
})();
  
(function(){
  // ===== 카드에 호버 효과 강제 적용 =====
  var SELECTORS = [
    '.notion-collection-card',
    '.notion-collection-item',
    '.notion-list-item',
    '.notion-gallery-card',
    '.notion-collection-card-body',
    '[class*="notion-collection"][class*="card"]',
    '[class*="notion-gallery"][class*="card"]'
  ].join(',');

  function applyHoverStyle(){
    var cards = document.querySelectorAll(SELECTORS);
    for(var i=0;i<cards.length;i++){
      var card = cards[i];
      if(card.dataset.cyHoverApplied === '1') continue;  // 중복 방지
      card.dataset.cyHoverApplied = '1';

      // 그라데이션 테두리용 ::before 가짜 요소 대체 (실제 div로 삽입)
      card.style.position = 'relative';
      card.style.transition = 'transform .35s ease, box-shadow .35s ease';
      card.style.borderRadius = '12px';

      var border = document.createElement('div');
      border.className = 'cy-card-border';
      border.style.cssText = [
        'position:absolute',
        'inset:0',
        'border-radius:12px',
        'padding:1.5px',
        'background:linear-gradient(135deg,#4285f4,#9b6dff,#ff6b9d,#ffa552)',
        'background-size:300% 300%',
        '-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)',
        '-webkit-mask-composite:xor',
        'mask-composite:exclude',
        'opacity:0',
        'transition:opacity .35s ease',
        'pointer-events:none',
        'z-index:2'
      ].join(';');
      card.appendChild(border);

      // 호버 이벤트
      card.addEventListener('mouseenter', function(){
        this.style.transform = 'translateY(-4px)';
        this.style.boxShadow = '0 12px 28px rgba(155,109,255,0.15), 0 0 0 1px rgba(155,109,255,0.18)';
        var b = this.querySelector('.cy-card-border');
        if(b){
          b.style.opacity = '1';
          b.style.animation = 'cardflow 5s linear infinite';
        }
      });
      card.addEventListener('mouseleave', function(){
        this.style.transform = '';
        this.style.boxShadow = '';
        var b = this.querySelector('.cy-card-border');
        if(b){
          b.style.opacity = '0';
          b.style.animation = '';
        }
      });
    }
  }

  // 키프레임 동적 삽입 (한 번만)
  if(!document.getElementById('cy-card-keyframes')){
    var s = document.createElement('style');
    s.id = 'cy-card-keyframes';
    s.textContent = '@keyframes cardflow{0%{background-position:0% 50%}100%{background-position:300% 50%}}';
    document.head.appendChild(s);
  }

  // ① 페이지 첫 로드 시 적용
  if(document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', applyHoverStyle);
  } else {
    applyHoverStyle();
  }

  // ② DOM이 동적으로 바뀔 때마다 재적용 (Notion이 카드를 lazy load)
  var observer = new MutationObserver(function(mutations){
    var hasNewCards = false;
    for(var i=0;i<mutations.length;i++){
      if(mutations[i].addedNodes.length > 0){
        hasNewCards = true;
        break;
      }
    }
    if(hasNewCards){
      // 너무 자주 호출되지 않도록 디바운스
      clearTimeout(window._cyHoverTimer);
      window._cyHoverTimer = setTimeout(applyHoverStyle, 100);
    }
  });
  observer.observe(document.body, { childList:true, subtree:true });

  // ③ 추가 안전망: 페이지 로드 후 일정 시간마다 재확인 (Oopy의 lazy render 대응)
  setTimeout(applyHoverStyle, 500);
  setTimeout(applyHoverStyle, 1500);
  setTimeout(applyHoverStyle, 3000);

  // ④ URL 변경 감지 (SPA 라우팅: /blog → /projects 등)
  var lastUrl = location.href;
  setInterval(function(){
    if(location.href !== lastUrl){
      lastUrl = location.href;
      setTimeout(applyHoverStyle, 300);
      setTimeout(applyHoverStyle, 1000);
    }
  }, 500);
})();
  
</script>

changyulee.oopy.io

Sub-item

Sub-item 1

Parent item 1

Parent item

Series

Published at

Status

Section

AI summary

Week

Last edited time

Created

Name

Language

Keywords

Author

Summary

Publication Source

View Count

Image URL

Contact Email

Phone Number

Is Featured

Revision History

To-do

In progress

Complete

Newest

Graphics

Computer Graphics