diff --git a/src/views/Main.vue b/src/views/Main.vue index f2e8d6a..77b20b5 100644 --- a/src/views/Main.vue +++ b/src/views/Main.vue @@ -347,16 +347,17 @@ onMounted(() => { margin: 0 auto; width: max-content; - /* 🟒 [핡심 μ˜€λ²„λΌμ΄λ“œ] λ„νŠΈ λ‹¨μœ„ 흔듀림과 ν™”λ €ν•œ RGB μŠ€ν”Œλ¦Ώ μ• λ‹ˆλ©”μ΄μ…˜ */ - color: #00ff00 !important; /* 베이슀 색상 κ°•μ œ */ + /* [베이슀 μ„€μ •] μ• λ‹ˆλ©”μ΄μ…˜ μ‹œμž‘ μ „ κΈ°λ³Έ μƒνƒœ */ + color: #00ff00 !important; font-size: 14px; line-height: 1.2; border: none; background: transparent; transform-origin: center; + opacity: 1; - /* 🌟 압도적인 쑴재감의 μ• λ‹ˆλ©”μ΄μ…˜ 적용 (2초 주기둜 폭발적인 λ°˜μ§μž„) */ - animation: extreme-cyber-glitch-wobble 2s linear infinite !important; + /* 🌟 [핡심 λ³€κ²½] λ”± ν•œ 번만 μ‹€ν–‰(1)ν•˜κ³ , λ§ˆμ§€λ§‰ μƒνƒœ κ³ μ •(forwards) */ + animation: once-cyber-glitch-wobble 2.5s linear 1 forwards !important; } /* πŸ“Ί 유튜브 κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ */ @@ -413,7 +414,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; } .about-text { font-family: monospace; line-height: 2; color: #00cc00;} .contact-form { font-family: monospace; line-height: 2; color: #00cc00;} -/* μ• λ‹ˆλ©”μ΄μ…˜ */ +/* μ• λ‹ˆλ©”μ΄μ…˜ νŠΈλžœμ§€μ…˜ */ .fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } @@ -450,81 +451,58 @@ iframe { width: 100%; height: 180px; border-radius: 4px; } } @keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } -/* 🟒 [NEW] μ••λ„μ μœΌλ‘œ ν‹°κ°€ λ‚˜λŠ” "읡슀트림 사이버 κΈ€λ¦¬μΉ˜ Wobble" μ• λ‹ˆλ©”μ΄μ…˜ μ •μ˜ */ -@keyframes extreme-cyber-glitch-wobble { - /* [정상 ꡬ간 - 20%] μ°¨λΆ„ν•˜κ²Œ μ‹œμž‘ */ - 0%, 10%, 100% { +/* 🟒 [NEW] λ”± ν•œ 번 μ‹€ν–‰ ν›„ μ΅œμ’… μƒνƒœλ‘œ κ³ μ •λ˜λŠ” "μΌνšŒμ„± 사이버 κΈ€λ¦¬μΉ˜" μ• λ‹ˆλ©”μ΄μ…˜ μ •μ˜ */ +@keyframes once-cyber-glitch-wobble { + /* [μ‹œμž‘ - 25%] μ°¨λΆ„ν•œ μ˜€λ¦¬μ§€λ„ 녹색 μƒνƒœ μœ μ§€ */ + 0%, 25% { transform: translate(0) scale(1) skewX(0deg); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; opacity: 1; } - /* [슀파이크 ꡬ간 1] μˆœμ‹κ°„μ— ν‹°κ°€ 팍팍 λ‚˜λŠ” RGB 팝 */ - 11% { - transform: translate(-3px, 1.5px) scale(1.02) skewX(2deg); - color: #ffffff !important; /* μ™„μ „ ν•˜μ–€μƒ‰μœΌλ‘œ ν•œμˆœκ°„ 팝! */ - text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; /* 리얼 RGB μŠ€ν”Œλ¦Ώ */ - opacity: 0.95; - } - - /* [볡ꡬ 1] λΉ λ₯΄κ²Œ μ˜€λ¦¬μ§€λ„ ν˜•κ΄‘ κ·Έλ¦° 볡귀 */ - 13% { - transform: translate(3px, -1.5px) scale(0.98) skewX(-2deg); - color: #00ff00 !important; - text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important; - } - - /* [정상 μœ μ§€] 쑰금 κΈ΄ 호흑 */ - 15%, 25% { - transform: translate(0); - text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; - } - - /* [λΉ… κΈ€λ¦¬μΉ˜ 타이밍 1 - 색상 λ°˜μ „] */ + /* [κΈ€λ¦¬μΉ˜ μ‹œν€€μŠ€ μ‹œμž‘ - 26%] RGB μŠ€ν”Œλ¦Ώ ν”Œλž˜μ‹œ */ 26% { - transform: translate(0); - color: #00ffff !important; /* 사이버 μ²­λ‘μƒ‰μœΌλ‘œ 색상 ν™• νŠ€κ²Œ λ³€ν™˜ */ - text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important; - opacity: 1; + transform: translate(-3px, 1.5px) scale(1.02); + color: #ffffff !important; /* ν•˜μ–€μƒ‰ 팝 */ + text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; /* 리얼 RGB μŠ€ν”Œλ¦Ώ */ } - /* [μ΄ˆκ³ μ† 지지직] 0.02초 λ‹¨μœ„ λ„νŠΈ λ‹¨μœ„ 흔듀림 */ - 27% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;} - 28% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;} + /* [μ΄ˆκ³ μ† 지지직 ꡬ간 - 27~32%] λ„νŠΈ λ‹¨μœ„ λ―Έμ„Έ 진동 */ + 27% { transform: translate(3px, -1.5px) skewX(-2deg); color: #00ff00 !important; } + 28% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;} + 29% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;} + 30% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important;} - /* [볡ꡬ 2] λ‹€μ‹œ 베이슀 λ…Ήμƒ‰μœΌλ‘œ 터미널 μˆ¨μ‰¬κΈ° */ - 29% { - transform: translate(0); - color: #00ff00 !important; - text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important; - } + /* [μ•ˆμ •ν™” - 31~50%] 잠깐 정상 μƒνƒœ */ + 31%, 50% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;} - /* [μ•ˆμ •ν™”] */ - 30%, 40% { transform: translate(0); } - - /* [νŽ„μŠ€ μ•”μ „ 타이밍 - ν•˜λ“œμ›¨μ–΄ 지지직] */ - 41% { + /* [λΉ… κΈ€λ¦¬μΉ˜ 타이밍 - 51%] μ‹œμŠ€ν…œ μ•”μ „ 였λ₯˜ */ + 51% { transform: scale(1.05) skewY(1deg); color: #ffffff !important; - opacity: 0.1; /* μ™„μ „ κΊΌμ§€κΈ° 직전 μ‹œμŠ€ν…œ 였λ₯˜ */ + opacity: 0.05; /* μ™„μ „ κΊΌμ§€κΈ° 직전 */ } - /* [μ•”μ „ 볡ꡬ] */ - 42% { + /* [볡ꡬ 및 μ΅œμ’… 색상 λ³€ν™˜ μ‹œμž‘ - 53%] 사이버 μ²­λ‘μƒ‰μœΌλ‘œ λΆ€ν™œ */ + 53% { opacity: 1; - color: #00ff00 !important; + transform: translate(0); + color: #00ffff !important; /* 사이버 청둝색 */ + text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important; } - /* [색상 λŒ€λ°˜μ „ 2 - ν˜•κ΄‘ 연두] */ - 55% { - color: #bfff00 !important; /* κ°•λ ¬ν•œ μ‚°μ„± 황둝색 */ - text-shadow: 0 0 15px #bfff00, 0 0 30px rgba(191, 255, 0, 0.7) !important; - } + /* [λ§ˆμ§€λ§‰ 지지직 - 90~95%] μ΅œμ’… μ •μ°© μ „ λΆˆμ•ˆμ •ν•œ λ–¨λ¦Ό */ + 90% { transform: translate(-2px, 1px); text-shadow: 2px 0 red, -2px 0 blue;} + 92% { transform: translate(2px, -1px); text-shadow: -2px 0 red, 2px 0 blue;} + 95% { transform: translate(0); color: #00ffff !important; text-shadow: 0 0 20px #00ffff !important;} - /* [μ΅œμ’… κΈ€λ¦¬μΉ˜ 루프 μ‹œμž‘] */ - 90% { transform: translate(0); } - 91% { transform: translate(-2px, 0); color: #ff00ff !important; text-shadow: 2px 0 red, -2px 0 blue;} - 92% { transform: translate(2px, 0); color: #00ffff !important; text-shadow: -2px 0 red, 2px 0 blue;} + /* 🌟 [μ΅œμ’… μƒνƒœ κ³ μ • - 100%] μ˜λ‘±ν•œ 사이버 청둝색(Cyan) 및 κ°•λ ₯ν•œ Glow μƒνƒœλ‘œ μ˜μ›νžˆ κ³ μ • */ + 100% { + transform: translate(0) scale(1) skewX(0deg); + color: #00ffff !important; /* πŸ‘ˆ μ΅œμ’… κ³ μ • 색상 */ + text-shadow: 0 0 15px #00ffff, 0 0 30px rgba(0, 255, 255, 0.7) !important; /* πŸ‘ˆ μ΅œμ’… κ³ μ • 효과 */ + opacity: 1; + } } \ No newline at end of file