---
title: "포트폴리오 | 배움과 성장의 기록"
description: "글로벌 비즈니스 & 테크놀로지 학부 학생의 반응형 포트폴리오"
---

<!-- 
==========================================================================
[안내] 이 마크다운 파일은 Cloudflare Pages 등의 정적 호스팅 환경에서 
동적이고 화려한 웹페이지로 렌더링되도록 HTML/CSS/JS를 포함하고 있습니다.
터치, 스크롤 애니메이션, 카드 호버 등 다양한 상호작용이 적용된 반응형 뷰입니다.
==========================================================================
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;700;900&display=swap');

  :root {
    --bg-color: #0f172a;               /* 깊은 네이비 배경 */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-1: #3b82f6;               /* 블루 포인트 */
    --accent-2: #8b5cf6;               /* 퍼플 포인트 */
    --accent-3: #10b981;               /* 에메랄드 (강조) */
    --card-bg: rgba(30, 41, 59, 0.7);
    --card-border: rgba(255, 255, 255, 0.15);
  }

  body, html {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  /* 배경 플로팅 애니메이션 (볼거리 요소) */
  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.4;
  }
  .blob-1 {
    top: -10%; left: -10%; width: 400px; height: 400px;
    background: var(--accent-1);
    animation: moveBlob 12s infinite alternate;
  }
  .blob-2 {
    bottom: -10%; right: -10%; width: 500px; height: 500px;
    background: var(--accent-2);
    animation: moveBlob 15s infinite alternate-reverse;
  }
  @keyframes moveBlob {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(100px, 100px) scale(1.3); }
  }

  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
  }

  /* 헤로(Hero) 섹션 - 첫 페이지 진입부 */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding-bottom: 5rem;
  }
  .hero h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero p {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--text-secondary);
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    opacity: 0;
  }

  .scroll-down {
    margin-top: 3rem;
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.1);
    color: white;
    text-decoration: none;
    font-weight: bold;
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    transition: all 0.3s;
    animation: pulse 2s infinite, fadeInUp 1s 0.6s forwards;
    opacity: 0;
  }
  .scroll-down:hover {
    background: var(--accent-2);
    transform: scale(1.05);
  }

  /* 공통 타이틀 */
  .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: white;
    text-align: center;
  }

  /* 카드형 그리드 레이아웃 */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }

  /* 글래스모피즘 인터랙티브 카드 */
  .card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px);
    cursor: pointer;
  }
  .card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border-color: var(--accent-1);
  }
  .card h3 {
    margin-top: 0;
    font-size: 1.6rem;
    color: var(--accent-1);
    margin-bottom: 1rem;
  }
  .card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.05rem;
  }

  /* 태그 디자인 (스킬, 관심사) */
  .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }
  .tag {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }
  .tag:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--accent-1);
    color: white;
    transform: translateY(-3px);
  }

  /* 타임라인 레이아웃 (교육 및 이력) */
  .timeline {
    position: relative;
    border-left: 3px solid rgba(59, 130, 246, 0.3);
    padding-left: 3rem;
    margin: 3rem 0;
  }
  .timeline-item {
    position: relative;
    margin-bottom: 3.5rem;
    opacity: 0;
    transform: translateX(-30px);
  }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: -3.65rem;
    top: 0.3rem;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--bg-color);
    border: 3px solid var(--accent-1);
    border-radius: 50%;
    transition: all 0.4s ease;
  }
  .timeline-item:hover::before {
    background: var(--accent-1);
    box-shadow: 0 0 20px var(--accent-1);
    transform: scale(1.3);
  }
  .timeline-content h4 {
    margin: 0 0 0.8rem 0;
    color: white;
    font-size: 1.4rem;
  }
  .timeline-content h5 {
    margin: 0 0 1rem 0;
    color: var(--accent-2);
    font-size: 1.1rem;
    font-weight: 500;
  }
  .timeline-content p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.8;
  }

  /* 스크롤 애니메이션용 클래스 */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
  }
  .reveal {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* 푸터 */
  footer {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-secondary);
    border-top: 1px solid var(--card-border);
    margin-top: 6rem;
  }
</style>

<!-- 배경 요소 -->
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>

<div class="container">

  <!-- ==================== HERO SECTION ==================== -->
  <section class="hero">
    <h1>글로벌 비즈니스 리더</h1>
    <p>세계라는 무대에서 통상, 금융, IT 인프라를 연결하는 개척자</p>
    <a href="#about" class="scroll-down">프로필 살펴보기 ↓</a>
  </section>

  <!-- ==================== ABOUT SECTION ==================== -->
  <section id="about" style="padding-top: 8rem;">
    <h2 class="section-title">✨ About Me</h2>
    <div class="card observer-target" style="text-align: center; padding: 4rem 2rem;">
      <h3 style="color: white; font-size: 2rem;">한국외대 2학년, 융합형 인재</h3>
      <p style="font-size: 1.2rem; margin-top: 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.9;">
        안녕하세요. <strong>한국외국어대학교 본전공 Global Business & Technology 학부</strong> 및 <br>
        <strong>이중전공 중국외교통상전공 2학년</strong>에 재학 중입니다.<br><br>
        영미권과 중화권을 아우르는 글로벌 시장에 흥미를 느끼며, <strong>국제 무역과 물류, 금융 실무</strong>를 깊이 있게 탐구하고 있습니다. 이론에 머물지 않고 IT 기술(개발, 서버 등)을 접목하여 현실의 데이터를 분석하고 문제를 해결하는 것을 즐깁니다.
      </p>
    </div>
  </section>

  <!-- ==================== SKILLS & INTERESTS ==================== -->
  <section style="padding-top: 10rem;">
    <h2 class="section-title">🚀 Tech & Interests</h2>
    <div class="grid">
      <!-- 1. IT & Development -->
      <div class="card observer-target">
        <h3>💻 개발 및 IT 인프라</h3>
        <p>프로그래밍 언어와 서버 인프라를 다루며, 프로그램을 직접 설계하고 구동할 수 있습니다.</p>
        <div class="tag-container">
          <span class="tag">Java</span>
          <span class="tag">Python</span>
          <span class="tag">Cloudflare</span>
          <span class="tag">Termux</span>
          <span class="tag">SillyTavern</span>
        </div>
      </div>
      <!-- 2. Global Trade & Logistics -->
      <div class="card observer-target">
        <h3>🌍 무역 및 국제 물류</h3>
        <p>글로벌 물류 흐름과 수출입 실무에 대한 폭넓은 도메인 지식을 보유하고 있습니다.</p>
        <div class="tag-container">
          <span class="tag">영미권/중화권 통상</span>
          <span class="tag">해운/항공 운송</span>
          <span class="tag">포워딩 및 수출입 실무</span>
        </div>
      </div>
      <!-- 3. Finance & Investment -->
      <div class="card observer-target">
        <h3>📈 금융 실무 빛 자산운용</h3>
        <p>기업의 가치를 분석하고 데이터를 바탕으로 인사이트를 도출합니다.</p>
        <div class="tag-container">
          <span class="tag">은행 기업금융</span>
          <span class="tag">증권 리서치 / IB 상장</span>
          <span class="tag">부동산 & 주식 자산운용</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ==================== EDUCATION & TRAINING ==================== -->
  <section style="padding-top: 10rem;">
    <h2 class="section-title">🎓 Education & Training</h2>
    <div class="timeline">
      
      <div class="timeline-item observer-target">
        <div class="timeline-content">
          <h4>한국외국어대학교</h4>
          <h5>Global Business & Technology 학부 (본전공) / 중국외교통상전공 (이중전공)</h5>
          <p>비즈니스, IT 기술, 그리고 중화권 외교 및 통상을 융합적으로 학습하며 글로벌 감각을 키우는 중 (2학년 재학)</p>
        </div>
      </div>

      <div class="timeline-item observer-target">
        <div class="timeline-content">
          <h4>한국국제물류협회 (KIFFA)</h4>
          <h5>국제물류 실무 교육과정 수료</h5>
          <p>
            • 포워딩 실무, 국제운송론, 화물운송실무<br>
            • 수출입실무, 해운실무, 항공운송실무 등 물류 분야 핵심 내용 학습
          </p>
        </div>
      </div>

      <div class="timeline-item observer-target">
        <div class="timeline-content">
          <h4>타임금융교육원</h4>
          <h5>금융직무특화교육 이수</h5>
          <p>
            • 자산운용 및 부동산 운용, 주식 운용 파악<br>
            • 증권 리서치 및 IB기업 상장, 은행 기업금융 직무 지식 습득
          </p>
        </div>
      </div>

      <div class="timeline-item observer-target">
        <div class="timeline-content">
          <h4>세미나 및 실무 강의 수료</h4>
          <h5>Notion 커뮤니케이션 & 산업별 릴레이 특강</h5>
          <p>Notion 활용 강의를 통해 협업 및 업무 효율성 툴을 익혔으며, 산업별 릴레이 특강 중 특히 해운산업에 대한 인사이트를 확장함.</p>
        </div>
      </div>

    </div>
  </section>

  <!-- ==================== PROJECTS & AWARDS ==================== -->
  <section style="padding-top: 10rem; padding-bottom: 5rem;">
    <h2 class="section-title">🏆 Projects & Awards</h2>
    <div class="grid">
      
      <div class="card observer-target" style="border-top: 4px solid var(--accent-1);">
        <h3 style="color: var(--accent-1);">📈 주식 시뮬레이션 게임 개발</h3>
        <p>프로그래밍 지식과 금융 직무교육에서 얻은 인사이트를 결합하여, 모의 주식 투자를 체험하고 로직을 설계하는 게임을 직접 기획하고 개발했습니다.</p>
      </div>

      <div class="card observer-target" style="border-top: 4px solid var(--accent-2);">
        <h3 style="color: var(--accent-2);">📊 재무제표 작성 프로그램 제작</h3>
        <p>기업 회계 시스템의 원리를 코드로 구현하여, 재무 데이터를 기반으로 자동으로 재무제표를 생성 및 실행할 수 있는 유틸리티 프로그램을 구축했습니다.</p>
      </div>

      <div class="card observer-target" style="border-top: 4px solid #f59e0b; background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(30, 41, 59, 0.7) 100%);">
        <h3 style="color: #f59e0b;">✨ 체인지메이커 공모전 우수상</h3>
        <p><strong>성북구 청소년 체인지메이커 아이디어 공모전 우수상 수상 (2023.10.10)</strong><br>
        지역사회와 환경을 개선할 수 있는 혁신적인 아이디어를 제안하여, 기획력과 문제 해결 역량을 대내외적으로 인정받았습니다.</p>
      </div>

    </div>
  </section>
  
  <footer>
    <p>© 2026 Developed & Designed for Cloudflare Pages Deployment.</p>
  </footer>

</div>

<!-- 
==========================================================================
상호작용 스크립트 (Interaction & Animations)
스크롤 기반의 페이드인 애니메이션과 모바일 터치 피드백을 처리합니다.
==========================================================================
-->
<script>
  document.addEventListener("DOMContentLoaded", () => {
    // 1. 스크롤 인터섹션 옵저버 (요소가 화면에 나타날 때 애니메이션 실행)
    const observerOptions = {
      threshold: 0.15,
      rootMargin: "0px 0px -50px 0px"
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('reveal');
          // 카드의 경우 기존의 플로팅 효과를 유지하기 위해 인라인 스타일 정리
          if (entry.target.classList.contains('card') || entry.target.classList.contains('timeline-item')) {
            setTimeout(() => {
              entry.target.style.opacity = '1';
              entry.target.style.transform = 'none';
            }, 800);
          }
        }
      });
    }, observerOptions);

    const targets = document.querySelectorAll('.observer-target');
    targets.forEach(target => observer.observe(target));

    // 2. 카드 모바일 터치 햅틱 반응 (터치 시 스케일 축소 효과)
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
      card.addEventListener('touchstart', () => {
        card.style.transform = 'scale(0.96)';
        card.style.transition = 'transform 0.1s';
      }, {passive: true});
      card.addEventListener('touchend', () => {
        card.style.transform = 'translateY(-5px) scale(1.02)';
        card.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
      }, {passive: true});
    });
    
    // 3. 헤더 블롭 마우스 인터랙션 (마우스 이동에 따른 배경의 미세한 움직임)
    const blob1 = document.querySelector('.blob-1');
    const blob2 = document.querySelector('.blob-2');
    
    window.addEventListener('mousemove', (e) => {
      const x = e.clientX / window.innerWidth;
      const y = e.clientY / window.innerHeight;
      
      blob1.style.transform = `translate(${x * 30}px, ${y * 30}px)`;
      blob2.style.transform = `translate(-${x * 40}px, -${y * 40}px)`;
    });
  });
</script>