# 자기소개 및 포트폴리오 (Interactive Portfolio)

이 마크다운 파일은 Cloudflare Pages 배포를 고려하여 **터치, 페이지 넘김 표과, 애니메이션** 등 풍부한 상호작용 요소가 포함된 HTML/CSS/JS 코드로 임베딩되어 작성되었습니다. GitHub 페이지나 정적 호스팅 환경에 이 마크다운을 렌더링하거나 내용을 복사해 `index.html`로 사용하셔도 완벽하게 작동합니다.

---

<style>
  /* Swiper.js CDN CSS */
  @import url('https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css');
  /* Google Fonts */
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

  :root {
    --primary: #4A90E2;
    --secondary: #50E3C2;
    --dark: #1A1A1D;
    --light: #F4F4F9;
  }

  body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #0f172a;
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  .portfolio-wrapper {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
  }

  /* 3D 페이지 넘김 효과를 위한 Swiper 컨테이너 */
  .swiper {
    width: 100%;
    height: 750px;
    border-radius: 20px;
    perspective: 1200px;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    box-sizing: border-box;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
  }

  /* 슬라이드 배경 테마 지정 */
  .slide-1 { background: radial-gradient(circle at top left, #2c3e50, #000000); color: white;}
  .slide-2 { background: linear-gradient(135deg, #13547a 0%, #80d0c7 100%); color: white;}
  .slide-3 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
  .slide-4 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;}
  .slide-5 { background: linear-gradient(to top, #09203f 0%, #537895 100%); color: white;}

  /* 글래스모피즘(유리 질감) 카드 */
  .glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 700px;
    position: relative;
    overflow: hidden;
  }
  
  .glass-card::before {
    content: "";
    position: absolute;
    top: -50px; left: -50px;
    width: 100px; height: 100px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
  }

  h1 { font-size: 2.8rem; font-weight: 900; margin-bottom: 10px; position: relative; z-index: 1;}
  h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; position: relative; z-index: 1; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.3);}
  p { font-size: 1.15rem; line-height: 1.7; position: relative; z-index: 1;}

  /* 뱃지 인터랙션 */
  .badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 25px;
    position: relative; z-index: 1;
  }

  .tech-badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    backdrop-filter: blur(5px);
  }
  .tech-badge:hover {
    transform: translateY(-8px) scale(1.1);
    background: rgba(255,255,255,0.9);
    color: #1A1A1D;
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
  }

  /* 리스트 애니메이션 */
  .list-item {
    text-align: left;
    margin-bottom: 18px;
    background: rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 15px;
    transition: all 0.4s ease;
    border-left: 5px solid transparent;
    position: relative;
    z-index: 1;
  }
  .list-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateX(15px);
    border-left: 5px solid #50E3C2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  .list-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #50E3C2;
    margin-bottom: 8px;
  }
  .list-desc {
    font-size: 1rem;
    color: #e2e8f0;
  }

  /* 버튼 인터랙션 */
  .interactive-btn {
    margin-top: 30px;
    padding: 15px 35px;
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }
  .interactive-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 25px rgba(255, 107, 107, 0.6);
  }

  /* 파티클 효과 컨테이너 */
  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    z-index: 0;
  }

  /* 스와이프 유도 애니메이션 */
  .swipe-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: fadePulse 2s infinite;
  }
  
  .swipe-hint .icon {
    font-size: 1.5rem;
    animation: swipeLeftRight 2s infinite ease-in-out;
  }

  @keyframes fadePulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  @keyframes swipeLeftRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
  }

  /* 스크롤바 커스텀 */
  .scrollable-content {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
  }
  .scrollable-content::-webkit-scrollbar {
    width: 8px;
  }
  .scrollable-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
  }
  .scrollable-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
  }
  .scrollable-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
  }

</style>

<div class="portfolio-wrapper">
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">

      <!-- Slide 1: Cover/Intro -->
      <div class="swiper-slide slide-1">
        <div id="particles-js"></div>
        <div class="glass-card">
          <h1>안녕하세요! 👋</h1>
          <h2>세계를 무대로 나아가는<br/>글로벌 비즈니스 인재입니다.</h2>
          <hr style="border-color: rgba(255,255,255,0.2); margin: 20px 0;">
          <p style="font-size: 1.3rem; font-weight: 500;"><strong>한국외국어대학교</strong></p>
          <p>Global Business & Technology 학부 (본전공)<br/>중국외교통상전공 (이중전공) 2학년</p>
        </div>
        <div class="swipe-hint">
          <span>터치 혹은 스와이프하여 넘기기</span>
          <span class="icon">👉</span>
        </div>
      </div>

      <!-- Slide 2: Vision & Interests -->
      <div class="swiper-slide slide-2">
        <div class="glass-card">
          <h2>🌍 글로벌 관심 분야 및 비전</h2>
          <p>영미권과 중화권을 아우르는 폭넓은 시각으로 <strong>해외 비즈니스와 국제 무역</strong>의 흐름을 주도하고자 합니다. 다문화적 이해를 바탕으로 글로벌 시장의 핵심 인재로 거듭나겠습니다.</p>
          <div class="badge-container">
            <span class="tech-badge" onclick="alert('영어를 생생하게 구사하며 영미권 시장을 공략합니다!')">🇬🇧🇺🇸 영미권 진출</span>
            <span class="tech-badge" onclick="alert('중국어와 외교 통상을 바탕으로 중화권 시장을 이해합니다.')">🇨🇳🇹🇼 중화권 비즈니스</span>
            <span class="tech-badge" onclick="alert('글로벌 물류 및 무역의 중심에서 활약합니다.')">🚢 국제 무역</span>
            <span class="tech-badge">🌐 해외 시장 분석</span>
          </div>
        </div>
      </div>

      <!-- Slide 3: Tech Stack -->
      <div class="swiper-slide slide-3">
        <div class="glass-card">
          <h2>💻 문제 해결을 위한 기술 스택</h2>
          <p>비즈니스 효율성을 극대화하기 위해 IT 기술을 적극적으로 활용합니다. (뱃지를 탭해보세요!)</p>
          <div class="badge-container" style="margin-top: 30px;">
            <span class="tech-badge" onclick="alert('Cloudflare: 글로벌 네트워크와 보안, 웹 최적화에 능숙합니다.')">☁️ Cloudflare</span>
            <span class="tech-badge" onclick="alert('Java: 객체지향적 사고와 견고한 백엔드 구조를 이해합니다.')">☕ Java</span>
            <span class="tech-badge" onclick="alert('Python: 데이터 분석 및 업무 자동화를 위해 활용합니다.')">🐍 Python</span>
            <span class="tech-badge" onclick="alert('SillyTavern: AI 챗봇 및 언어모델 활용 프론트엔드 환경을 다룹니다.')">🤖 SillyTavern</span>
            <span class="tech-badge" onclick="alert('Termux: 모바일 및 리눅스 터미널 환경에서의 툴링에 익숙합니다.')">📱 Termux</span>
          </div>
        </div>
      </div>

      <!-- Slide 4: Education & Training -->
      <div class="swiper-slide slide-4">
        <div class="glass-card">
          <h2>📚 실무 특화 교육 및 이수 내역</h2>
          <div class="scrollable-content">
            
            <div class="list-item">
              <div class="list-title">🚢 한국국제물류협회 국제물류 실무 교육</div>
              <div class="list-desc">
                포워딩 실무, 국제운송론, 화물운송실무, 수출입실무, 해운실무, 항공운송실무 등 물류 분야 핵심 내용 완벽 숙지
              </div>
            </div>

            <div class="list-item">
              <div class="list-title">📈 타임금융교육원 금융직무 특화교육</div>
              <div class="list-desc">
                자산운용 (부동산/주식), 증권 리서치, 증권 IB기업 상장, 은행 기업금융 이수
              </div>
            </div>

            <div class="list-item">
              <div class="list-title">💡 역량 강화 프로그램 수료</div>
              <div class="list-desc">
                - Notion 활용 기초 및 심화 강의 수료<br/>
                - 산업별 릴레이 특강 (해운산업편) 이수
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- Slide 5: Projects & Awards -->
      <div class="swiper-slide slide-5">
        <div class="glass-card">
          <h2>🏆 실전 프로젝트 및 수상 경력</h2>
          <div class="scrollable-content">
            
            <div class="list-item" style="border-left-color: #feca57; background: rgba(255,165,0,0.2);">
              <div class="list-title" style="color: #feca57;">🏅 성북구 청소년 체인지메이커 아이디어 공모전 우수상</div>
              <div class="list-desc">2023년 10월 10일 수상 - 사회적 문제 해결을 위한 혁신 아이디어 제시</div>
            </div>

            <div class="list-item">
              <div class="list-title">🎮 주식 시뮬레이션 게임 자체 개발</div>
              <div class="list-desc">금융 특화 교육을 바탕으로 가상의 주식 시장 흐름을 분석하고 매매할 수 있는 로직 및 시뮬레이션 구현</div>
            </div>
            
            <div class="list-item">
              <div class="list-title">📊 기업 재무제표 작성 프로그램 제작</div>
              <div class="list-desc">회계 원리를 반영하여 실 기업의 재무제표를 자동 작성하고 분석할 수 있는 프로그램 개발 및 실행</div>
            </div>
          </div>

          <button class="interactive-btn" onclick="triggerConfetti()">🚀 저와 함께하시겠습니까?</button>
        </div>
      </div>

    </div>
    
    <!-- 네비게이션 / 페이지네이션 -->
    <div class="swiper-pagination"></div>
  </div>
</div>

<!-- Scripts for Interactions -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 1. Swiper.js 초기화 (입체적인 카드 넘김 효과 적용)
    var swiper = new Swiper(".mySwiper", {
      effect: "cards", // 'cube', 'flip', 'fade', 'cards' 등의 입체 효과 지원
      grabCursor: true,
      cardsEffect: {
        slideShadows: true,
        rotate: true,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        dynamicBullets: true,
      },
      keyboard: {
        enabled: true,
      },
      mousewheel: {
        invert: false,
      },
      on: {
        slideChange: function () {
          // 슬라이드가 바뀔 때마다 스와이프 힌트를 숨깁니다.
          const hint = document.querySelector('.swipe-hint');
          if(hint) hint.style.display = 'none';
        }
      }
    });

    // 2. Particles.js 초기화 (첫 슬라이드 배경에 동적 파티클 부여)
    if(window.particlesJS) {
      window.particlesJS('particles-js', {
        "particles": {
          "number": { "value": 60, "density": { "enable": true, "value_area": 800 } },
          "color": { "value": "#ffffff" },
          "shape": { "type": "circle" },
          "opacity": { "value": 0.5, "random": true },
          "size": { "value": 3, "random": true },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 2,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": { "enable": true, "mode": "grab" },
            "onclick": { "enable": true, "mode": "push" },
            "resize": true
          },
          "modes": {
            "grab": { "distance": 140, "line_linked": { "opacity": 1 } },
            "push": { "particles_nb": 4 }
          }
        },
        "retina_detect": true
      });
    }
  });

  // 3. 마지막 슬라이드 버튼 클릭 시 폭죽 애니메이션 이벤트
  function triggerConfetti() {
    alert("감사합니다! 연락을 기다리겠습니다. ✉️");
    var duration = 3 * 1000;
    var animationEnd = Date.now() + duration;
    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 9999 };

    function randomInRange(min, max) {
      return Math.random() * (max - min) + min;
    }

    var interval = setInterval(function() {
      var timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      var particleCount = 50 * (timeLeft / duration);
      confetti(Object.assign({}, defaults, { particleCount,
        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
      }));
      confetti(Object.assign({}, defaults, { particleCount,
        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
      }));
    }, 250);
  }
</script>