enhance TerminalButton with sound effects and dynamic visual feedback; improve App layout with enhanced TV frame and controls

src/App.tsx

@@ -13,23 +13,32 @@ function App() {
 
   return (
     <div className="min-h-screen bg-gray-900 flex items-center justify-center overflow-hidden">
-      {/* TV Container */}
+      {/* TV Container with fixed proportions */}
       <div className="w-[95%] max-w-[1400px] relative h-[90vh]">
         {/* TV Frame */}
         <div className="absolute inset-0 tv-frame">
-          {/* Screen Container with Convex Effect */}
+          {/* TV frame texture overlay */}
+          <div className="tv-frame-texture"></div>
+          
+          {/* Edge shadow for added depth */}
+          <div className="tv-frame-edge"></div>
+          
+          {/* Screen Container with fixed height and Convex Effect */}
           <div className="relative w-full h-full rounded-[20px] overflow-hidden tv-screen-container">
             {/* Convex Screen Effect */}
             <div className="absolute inset-0 tv-screen-convex"></div>
             
-            {/* Screen Content */}
+            {/* Static noise texture underlay */}
-            <div className="relative h-full w-full bg-[#003300] p-6 font-mono text-[#00FF00] overflow-hidden z-10 screen-content">
+            <div className="white-noise"></div>
+
+            {/* Screen Content with fixed height */}
+            <div className="relative h-full w-full p-6 font-mono text-[#00FF00] overflow-hidden z-10 screen-content">
               <div className="animate-pulse mb-4">
                 <Terminal className="inline-block mr-2" />
                 <span className="text-sm">echo "Hey there!"</span>
               </div>
 
-              {/* Split Screen Container */}
+              {/* Split Screen Container with fixed height */}
               <div className="flex gap-8 h-[calc(100%-3rem)]">
                 {/* Left Column - Navigation */}
                 <div className="w-64 space-y-3 overflow-y-auto custom-scrollbar">
@@ -71,10 +80,10 @@ function App() {
                   </TerminalButton>
                 </div>
 
-                {/* Vertical Separator */}
+                {/* Vertical Separator with embossed effect */}
-                <div className="w-px h-full bg-[#00FF00] opacity-30"></div>
+                <div className="vertical-separator"></div>
 
-                {/* Right Column - Content */}
+                {/* Right Column - Content with scrolling */}
                 <div className="flex-1 overflow-y-auto pr-4 custom-scrollbar">
                   {activeSection === 'about' && <ProfileContent />}
                   {activeSection === 'projects' && (
@@ -88,30 +97,67 @@ function App() {
               </div>
             </div>
 
-            {/* Scan Line Effect */}
+            {/* Enhanced Scan Lines Effect */}
-            <div className="absolute inset-0 pointer-events-none z-20" style={{
+            <div className="scan-lines"></div>
-              background: 'linear-gradient(rgba(0, 17, 0, 0.1) 50%, rgba(0, 17, 0, 0.2) 50%)',
-              backgroundSize: '100% 4px'
-            }}></div>
 
-            {/* Screen Glare */}
+            {/* Chromatic Aberration Effect */}
+            <div className="chromatic-aberration"></div>
+
+            {/* Multiple Glass Reflection Layers */}
+            <div className="glass-reflection"></div>
+            <div className="glass-reflection-2"></div>
+            <div className="corner-shine"></div>
+
+            {/* Screen Glare - Moving reflection */}
             <div className="screen-glare"></div>
           </div>
         </div>
 
-        {/* TV Controls */}
+        {/* TV Controls - Skeuomorphic Knobs */}
-        <div className="absolute -bottom-10 right-20 flex space-x-6">
+        <div className="absolute -bottom-12 right-20 flex space-x-8">
-          <div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
+          <div className="tv-knob" style={{transform: 'rotate(-30deg)'}}></div>
-          <div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
+          <div className="tv-knob" style={{transform: 'rotate(15deg)'}}></div>
-          <div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
+          <div className="tv-knob" style={{transform: 'rotate(-10deg)'}}></div>
         </div>
 
-        {/* TV Speaker Grills */}
+        {/* TV Speaker Grills - Enhanced */}
         <div className="absolute -bottom-6 left-20 flex space-x-1.5">
           {[...Array(10)].map((_, i) => (
-            <div key={i} className="w-1.5 h-6 bg-gray-700 rounded-full opacity-50"></div>
+            <div 
+              key={i} 
+              className="w-1.5 h-6 bg-gradient-to-b from-gray-600 to-gray-800 rounded-full"
+              style={{
+                boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 1px rgba(0,0,0,0.3)'
+              }}
+            ></div>
           ))}
         </div>
+
+        {/* TV Brand Label */}
+        <div 
+          className="absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-gradient-to-b from-gray-700 to-gray-900 px-4 py-1 rounded"
+          style={{
+            boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.5)',
+            border: '1px solid rgba(0,0,0,0.3)'
+          }}
+        >
+          <span 
+            className="text-xs text-gray-300 font-bold"
+            style={{
+              textShadow: '0 -1px 0 rgba(0,0,0,0.5)'
+            }}
+          >
+            RETRO·VISION
+          </span>
+        </div>
+
+        {/* Power indicator light */}
+        <div className="absolute -bottom-8 right-[12%] w-3 h-3 rounded-full bg-gradient-to-b from-green-500 to-green-700" 
+          style={{
+            boxShadow: '0 0 5px #4AFF4A, inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.4)'
+          }}>
+          <div className="absolute inset-0 rounded-full bg-green-400 opacity-50 animate-pulse"></div>
+        </div>
       </div>
     </div>
   );

src/components/TerminalButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { ChevronRight } from 'lucide-react';
 
 interface TerminalButtonProps {
@@ -8,6 +8,10 @@ interface TerminalButtonProps {
 }
 
 const TerminalButton: React.FC<TerminalButtonProps> = ({ children, onClick, isSelected }) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const shineRef = useRef<HTMLDivElement>(null);
+  
+  // Play sound effect on button click
   const playKeyPress = () => {
     const audio = new Audio('data:audio/wav;base64,UklGRnQGAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YU8GAACBhYqFbF1fdH2Dg4R/gIKFi4SAgX98eoCFhQAAhIWKhWxdX3R9g4OEf4CChYuEgIF/fHqAhYUAAP//');
     audio.volume = 0.2;
@@ -17,16 +21,109 @@ const TerminalButton: React.FC<TerminalButtonProps> = ({ children, onClick, isSe
   const handleClick = (e: React.MouseEvent) => {
     playKeyPress();
     onClick?.(e);
+    
+    // Create ripple effect
+    if (buttonRef.current) {
+      const button = buttonRef.current;
+      const rect = button.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      
+      const ripple = document.createElement('div');
+      ripple.className = 'absolute rounded-full bg-green-400/10';
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+      ripple.style.width = '0';
+      ripple.style.height = '0';
+      ripple.style.transform = 'translate(-50%, -50%)';
+      button.appendChild(ripple);
+      
+      setTimeout(() => {
+        ripple.style.width = '300px';
+        ripple.style.height = '300px';
+        ripple.style.opacity = '0';
+        ripple.style.transition = 'all 0.8s ease-out';
+      }, 0);
+      
+      setTimeout(() => {
+        button.removeChild(ripple);
+      }, 800);
+    }
   };
   
+  // Track mouse movement for shine effect
+  const handleMouseMove = (e: MouseEvent) => {
+    if (buttonRef.current && shineRef.current) {
+      const button = buttonRef.current;
+      const shine = shineRef.current;
+      const rect = button.getBoundingClientRect();
+      
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      
+      // Move shine based on cursor position
+      shine.style.opacity = '0.2';
+      shine.style.transform = `translate(-50%, -50%) scale(2) translate(${x * 100}%, ${y * 100}%)`;
+    }
+  };
+  
+  const handleMouseEnter = () => {
+    document.addEventListener('mousemove', handleMouseMove);
+  };
+  
+  const handleMouseLeave = () => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    if (shineRef.current) {
+      shineRef.current.style.opacity = '0';
+    }
+  };
+  
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+  
   return (
     <button 
-      className={`terminal-button group ${isSelected ? 'terminal-button-selected' : ''}`}
+      ref={buttonRef}
+      className={`terminal-button group ${isSelected ? 'terminal-button-selected' : ''} relative overflow-hidden transition-all duration-200`}
       onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
+      {/* Static subtle glare effect */}
       <div className="glare-effect"></div>
-      <ChevronRight className="inline-block mr-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+      
-      {children}
+      {/* Dynamic shine effect that follows cursor */}
+      <div 
+        ref={shineRef}
+        className="absolute w-40 h-40 rounded-full bg-gradient-to-r from-transparent via-green-400/10 to-transparent pointer-events-none opacity-0 transition-opacity duration-300"
+        style={{ 
+          top: '50%', 
+          left: '50%', 
+          transform: 'translate(-50%, -50%) scale(2)'
+        }}
+      ></div>
+      
+      {/* Button content with icons */}
+      <div className="relative z-10 flex items-center">
+        <ChevronRight 
+          className={`inline-block mr-2 w-4 h-4 transition-all duration-200 
+                     ${isSelected ? 'text-green-400' : 'text-green-500/80'}
+                     group-hover:translate-x-1 group-hover:text-green-400`} 
+        />
+        <span className="transition-all duration-200">{children}</span>
+      </div>
+      
+      {/* Scan line effect over button */}
+      <div 
+        className="absolute inset-0 pointer-events-none opacity-10 z-20"
+        style={{
+          backgroundImage: 'linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.4))',
+          backgroundSize: '100% 4px'
+        }}
+      ></div>
     </button>
   );
 }

src/index.css

@@ -22,9 +22,11 @@
       inset 0 2px 20px rgba(255, 255, 255, 0.1);
     border: 12px solid #1a1a1a;
     border-radius: 50px;
-    transform: perspective(1000px) rotateX(2deg);
+    transform: perspective(1200px) rotateX(2deg);
+    overflow: hidden;
   }
 
+  /* Wood texture overlay */
   .tv-frame::before {
     content: '';
     position: absolute;
@@ -32,11 +34,16 @@
     left: -12px;
     right: -12px;
     bottom: -12px;
-    background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
+    background: 
+      linear-gradient(145deg, #3a3a3a, #1a1a1a),
+      url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23232323' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
     border-radius: 60px;
     z-index: -1;
+    mix-blend-mode: overlay;
+    opacity: 0.8;
   }
 
+  /* TV frame highlights */
   .tv-frame::after {
     content: '';
     position: absolute;
@@ -44,34 +51,110 @@
     left: 0;
     right: 0;
     height: 40%;
-    background: linear-gradient(
+    background: 
-      180deg,
+      linear-gradient(
-      rgba(255, 255, 255, 0.1) 0%,
+        180deg,
-      transparent 100%
+        rgba(255, 255, 255, 0.15) 0%,
-    );
+        rgba(255, 255, 255, 0.05) 40%,
+        transparent 100%
+      );
     border-radius: 40px 40px 0 0;
     pointer-events: none;
   }
 
+  /* Small scratches and noise texture */
+  .tv-frame-texture {
+    position: absolute;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+    opacity: 0.05;
+    mix-blend-mode: overlay;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  /* TV body edge shadow */
+  .tv-frame-edge {
+    position: absolute;
+    inset: -1px;
+    border-radius: 51px;
+    background: linear-gradient(145deg, #1a1a1a, #000000);
+    z-index: -2;
+    box-shadow: 
+      0 10px 30px rgba(0, 0, 0, 0.8),
+      0 30px 60px rgba(0, 0, 0, 0.6);
+  }
+
+  /* TV frame knobs */
+  .tv-knob {
+    @apply absolute w-10 h-10 rounded-full;
+    background: linear-gradient(135deg, #4a4a4a, #1a1a1a);
+    box-shadow: 
+      inset 2px 2px 5px rgba(255, 255, 255, 0.15),
+      inset -2px -2px 5px rgba(0, 0, 0, 0.7),
+      0 3px 6px rgba(0, 0, 0, 0.6),
+      0 1px 2px rgba(0, 0, 0, 0.9);
+    border: 1px solid #0a0a0a;
+    position: relative;
+    transform-style: preserve-3d;
+    transform: translateZ(2px);
+  }
+
+  .tv-knob::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    right: 3px;
+    bottom: 3px;
+    border-radius: 50%;
+    background: repeating-conic-gradient(
+      from 0deg,
+      #2a2a2a 0deg 30deg,
+      #3a3a3a 30deg 60deg
+    );
+    box-shadow:
+      inset 0 0 5px rgba(0, 0, 0, 0.5);
+  }
+
+  .tv-knob::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40%;
+    height: 3px;
+    background: #111;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  /* Enhanced Screen Container with Glass Effect */
   .tv-screen-container {
     background: #000;
     box-shadow:
-      inset 0 0 50px rgba(0, 0, 0, 0.5),
+      inset 0 0 50px rgba(0, 0, 0, 0.6),
-      inset 0 0 100px rgba(0, 0, 0, 0.3);
+      inset 0 0 100px rgba(0, 0, 0, 0.4);
     transform: perspective(1000px) rotateX(1deg);
+    position: relative;
+    overflow: hidden;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 80, 0, 0.2);
   }
 
+  /* Enhanced Convex Screen Effect */
   .tv-screen-convex {
     content: '';
     background: radial-gradient(
-      circle at center,
+      ellipse at center,
       transparent 0%,
-      rgba(0, 0, 0, 0) 50%,
+      rgba(0, 0, 0, 0) 60%,
-      rgba(0, 0, 0, 0.3) 100%
+      rgba(0, 0, 0, 0.4) 100%
     );
-    border-radius: 50% / 5%;
+    border-radius: 50% / 10%;
     pointer-events: none;
     z-index: 40;
+    position: relative;
   }
 
   .tv-screen-convex::before {
@@ -82,7 +165,7 @@
     right: 0;
     bottom: 0;
     background: radial-gradient(
-      circle at 50% 0%,
+      circle at 30% 20%,
       rgba(255, 255, 255, 0.1) 0%,
       rgba(255, 255, 255, 0.05) 25%,
       transparent 50%
@@ -90,79 +173,234 @@
     border-radius: inherit;
   }
 
-  .terminal-button {
+  /* Glass Reflections */
-    @apply relative w-full px-6 py-3 font-mono text-lg
+  .glass-reflection {
-           transition-all duration-150 overflow-hidden
+    position: absolute;
-           border border-[#00FF00]/30 select-none;
+    inset: 0;
-    font-family: 'VT323', 'Courier New', monospace;
+    background: linear-gradient(
-    background: linear-gradient(180deg,
+      120deg,
-      rgba(0, 25, 0, 0.9) 0%,
+      transparent 0%,
-      rgba(0, 20, 0, 0.95) 100%
+      transparent 40%,
+      rgba(255, 255, 255, 0.07) 42%,
+      rgba(255, 255, 255, 0.03) 50%,
+      transparent 52%,
+      transparent 100%
     );
+    z-index: 41;
+    pointer-events: none;
+    opacity: 0.8;
+  }
+
+  .glass-reflection-2 {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      -30deg,
+      transparent 0%,
+      transparent 65%,
+      rgba(255, 255, 255, 0.05) 67.5%,
+      rgba(255, 255, 255, 0.02) 70%,
+      transparent 72.5%,
+      transparent 100%
+    );
+    z-index: 42;
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
+  /* Corner light shine effect */
+  .corner-shine {
+    position: absolute;
+    top: -10%;
+    left: -10%;
+    width: 30%;
+    height: 30%;
+    background: radial-gradient(
+      circle at center,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(255, 255, 255, 0.05) 40%,
+      transparent 70%
+    );
+    border-radius: 50%;
+    z-index: 42;
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  /* Chromatic aberration effect */
+  .chromatic-aberration {
+    position: absolute;
+    inset: 0;
+    z-index: 43;
+    pointer-events: none;
+    box-shadow:
+      inset 1px 0 0 rgba(255, 0, 0, 0.05),
+      inset -1px 0 0 rgba(0, 255, 255, 0.05);
+    mix-blend-mode: screen;
+  }
+
+  /* Scan Lines Effect - Enhanced */
+  .scan-lines {
+    position: absolute;
+    inset: 0; 
+    z-index: 44;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0px,
+      rgba(0, 0, 0, 0) 1px,
+      rgba(0, 0, 0, 0.1) 1px,
+      rgba(0, 0, 0, 0.1) 2px
+    );
+    mix-blend-mode: overlay;
+  }
+
+  /* White Noise Overlay */
+  .white-noise {
+    position: absolute;
+    inset: 0;
+    opacity: 0.02;
+    z-index: 39;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' fill='%23ffffff'/%3E%3C/svg%3E");
+    pointer-events: none;
+    mix-blend-mode: overlay;
+  }
+
+  /* Improved Screen Glare */
+  .screen-glare {
+    @apply absolute inset-0 pointer-events-none;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.02) 40%,
+      rgba(255, 255, 255, 0.05) 50%,
+      rgba(255, 255, 255, 0.02) 60%,
+      transparent 100%
+    );
+    animation: horizontal-glare 8s linear infinite;
+    opacity: 0.4;
+    z-index: 45;
+  }
+
+  /* Skeuomorphic Terminal Button */
+  .terminal-button {
+    @apply relative w-full py-3 px-6 font-mono text-lg
+           transition-all duration-150 select-none;
+    font-family: 'VT323', 'Courier New', monospace;
     color: #4AFF4A;
     text-shadow: 0 0 8px rgba(74, 255, 74, 0.5);
+    background: linear-gradient(to bottom, 
+      #003300 0%, 
+      #002200 40%, 
+      #001800 100%);
+    border-radius: 6px;
+    border-top: 1px solid #005500;
+    border-left: 1px solid #004400;
+    border-right: 1px solid #001100;
+    border-bottom: 1px solid #001100;
     box-shadow: 
-      inset 0 0 15px rgba(0, 255, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
-      0 0 2px rgba(0, 255, 0, 0.5),
+      inset 0 0 8px rgba(0, 255, 0, 0.1),
-      0 0 5px rgba(0, 255, 0, 0.2);
+      0 1px 0 rgba(255, 255, 255, 0.05),
+      0 -1px 0 rgba(0, 0, 0, 0.5),
+      0 2px 4px rgba(0, 0, 0, 0.3);
+    position: relative;
+    overflow: hidden;
   }
 
   .terminal-button-selected {
     @apply text-[110%] font-bold;
-    background: linear-gradient(180deg,
-      rgba(0, 35, 0, 0.95) 0%,
-      rgba(0, 30, 0, 1) 100%
-    );
     color: #7FFF7F;
     text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
+    background: linear-gradient(to bottom, 
+      #004000 0%, 
+      #003300 40%, 
+      #002200 100%);
     box-shadow: 
-      inset 0 0 25px rgba(0, 255, 0, 0.2),
+      inset 0 1px 10px rgba(0, 0, 0, 0.6),
-      0 0 4px rgba(0, 255, 0, 0.6),
+      inset 0 0 8px rgba(0, 255, 0, 0.25),
-      0 0 8px rgba(0, 255, 0, 0.3);
+      0 1px 0 rgba(0, 255, 0, 0.05),
+      0 2px 4px rgba(0, 0, 0, 0.3);
   }
 
   .terminal-button::before {
     content: '';
-    @apply absolute inset-0 opacity-0 transition-opacity duration-150;
+    @apply absolute top-0 left-0 right-0 h-[1px] opacity-40;
-    background: linear-gradient(180deg,
+    background: linear-gradient(90deg,
-      rgba(0, 255, 0, 0.1) 0%,
+      transparent 0%,
-      rgba(0, 255, 0, 0.05) 100%
+      rgba(0, 255, 0, 0.8) 50%,
+      transparent 100%
     );
   }
 
   .terminal-button:hover {
     color: #7FFF7F;
     text-shadow: 0 0 8px rgba(74, 255, 74, 0.8);
-    box-shadow:
+    background: linear-gradient(to bottom, 
-      inset 0 0 20px rgba(0, 255, 0, 0.2),
+      #003800 0%, 
-      0 0 4px rgba(0, 255, 0, 0.6),
+      #002800 40%, 
-      0 0 8px rgba(0, 255, 0, 0.3);
+      #001E00 100%);
-  }
-
-  .terminal-button:hover::before {
-    @apply opacity-100;
   }
 
   .terminal-button:active {
     @apply transform scale-[0.98];
-    background: linear-gradient(180deg,
+    background: linear-gradient(to bottom, 
-      rgba(0, 35, 0, 0.95) 0%,
+      #001E00 0%, 
-      rgba(0, 30, 0, 1) 100%
+      #002800 60%, 
-    );
+      #003000 100%);
+    box-shadow: 
+      inset 0 1px 10px rgba(0, 0, 0, 0.5),
+      inset 0 0 8px rgba(0, 80, 0, 0.2);
   }
 
-  .terminal-button::after {
+  /* Skeuomorphic screen effect */
-    content: '';
+  .screen-content {
-    @apply absolute inset-0 pointer-events-none;
+    background-color: rgba(0, 17, 0, 0.95);
-    background: repeating-linear-gradient(
+    background-image: 
-      0deg,
+      linear-gradient(0deg, 
-      rgba(0, 255, 0, 0.03),
+        rgba(0, 20, 0, 1) 0%, 
-      rgba(0, 255, 0, 0.03) 1px,
+        rgba(0, 27, 0, 1) 100%),
-      transparent 1px,
+      radial-gradient(
-      transparent 2px
+        circle at center, 
-    );
+        rgba(0, 40, 0, 1) 0%, 
+        rgba(0, 20, 0, 1) 100%
+      );
+    background-blend-mode: screen;
+    box-shadow: 
+      inset 0 0 30px rgba(0, 0, 0, 0.8),
+      inset 0 0 80px rgba(0, 0, 0, 0.5);
   }
 
+  /* Vertical separator with emboss effect */
+  .vertical-separator {
+    width: 2px;
+    background: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.3),
+      rgba(0, 255, 0, 0.15),
+      rgba(0, 0, 0, 0.3)
+    );
+    position: relative;
+    border-radius: 1px;
+  }
+
+  /* Terminal text input with skeuomorphic effect */
+  .terminal-input {
+    background: rgba(0, 10, 0, 0.7);
+    border: 1px solid rgba(0, 50, 0, 0.3);
+    border-bottom: 1px solid rgba(0, 100, 0, 0.2);
+    border-right: 1px solid rgba(0, 70, 0, 0.2);
+    box-shadow: 
+      inset 0 1px 5px rgba(0, 0, 0, 0.5),
+      inset 0 0 10px rgba(0, 0, 0, 0.3),
+      0 0 0 1px rgba(0, 30, 0, 0.1);
+    color: #4AFF4A;
+    text-shadow: 0 0 5px rgba(74, 255, 74, 0.5);
+    caret-color: #4AFF4A;
+    border-radius: 4px;
+  }
+
+  /* Rest of existing styles remain unchanged */
   .glare-effect {
     @apply absolute inset-0 pointer-events-none;
     background: linear-gradient(
@@ -176,41 +414,43 @@
     opacity: 0.2;
   }
 
-  .screen-glare {
+  /* Cyberpunk theme styles */
-    @apply absolute inset-0 pointer-events-none z-30;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.03) 45%,
-      rgba(255, 255, 255, 0.07) 50%,
-      rgba(255, 255, 255, 0.03) 55%,
-      transparent 100%
-    );
-    animation: horizontal-glare 4s linear infinite;
-    opacity: 0.3;
-  }
-
   .cyberpunk-theme .terminal-button {
     border-color: rgba(147, 51, 234, 0.3);
-    background: linear-gradient(180deg,
+    background: linear-gradient(to bottom, 
-      rgba(25, 0, 25, 0.9) 0%,
+      #25002A 0%, 
-      rgba(20, 0, 20, 0.95) 100%
+      #1A001F 40%, 
-    );
+      #120016 100%);
     color: #df6cfc;
     text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
     box-shadow:
-      inset 0 0 15px rgba(147, 51, 234, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
-      0 0 2px rgba(147, 51, 234, 0.5),
+      inset 0 0 8px rgba(147, 51, 234, 0.1),
-      0 0 5px rgba(147, 51, 234, 0.2);
+      0 1px 0 rgba(255, 255, 255, 0.05),
+      0 -1px 0 rgba(0, 0, 0, 0.5),
+      0 2px 4px rgba(0, 0, 0, 0.3);
   }
 
   .cyberpunk-theme .terminal-button-selected {
     color: #FF00FF;
     text-shadow: 0 0 12px rgba(147, 51, 234, 0.8);
+    background: linear-gradient(to bottom, 
+      #3A0040 0%, 
+      #2A0030 40%, 
+      #1F0024 100%);
     box-shadow: 
-      inset 0 0 25px rgba(147, 51, 234, 0.2),
+      inset 0 1px 10px rgba(0, 0, 0, 0.6),
-      0 0 4px rgba(147, 51, 234, 0.6),
+      inset 0 0 8px rgba(147, 51, 234, 0.25),
-      0 0 8px rgba(147, 51, 234, 0.3);
+      0 1px 0 rgba(147, 51, 234, 0.05),
+      0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .cyberpunk-theme .terminal-button::before {
+    background: linear-gradient(90deg,
+      transparent 0%,
+      rgba(147, 51, 234, 0.8) 50%,
+      transparent 100%
+    );
   }
 
   .cyberpunk-theme .typing-effect {
@@ -222,8 +462,16 @@
   }
 
   .cyberpunk-theme .screen-content {
-    background-color: #1a001a;
+    background-color: rgba(17, 0, 17, 0.95);
-    color: #df6cfc;
+    background-image: 
+      linear-gradient(0deg, 
+        rgba(20, 0, 20, 1) 0%, 
+        rgba(27, 0, 27, 1) 100%),
+      radial-gradient(
+        circle at center, 
+        rgba(40, 0, 40, 1) 0%, 
+        rgba(20, 0, 20, 1) 100%
+      );
   }
 }
 
@@ -250,40 +498,50 @@
   }
 }
 
-/* Custom scrollbar for the terminal */
+/* Custom scrollbar with skeuomorphic design */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #001100;
+  background: linear-gradient(to right, #001100, #002200, #001100);
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #00FF00;
+  background: linear-gradient(to right, #003300, #00AA00, #003300);
-  border-radius: 4px;
+  border-radius: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #00CC00;
+  background: linear-gradient(to right, #004400, #00CC00, #004400);
 }
 
-/* Custom Scrollbar */
+/* Custom Scrollbar - Enhanced */
 .custom-scrollbar::-webkit-scrollbar {
-  width: 8px;
+  width: 10px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-  background: rgba(0, 51, 0, 0.3);
+  background: linear-gradient(to right, rgba(0, 20, 0, 0.3), rgba(0, 51, 0, 0.3), rgba(0, 20, 0, 0.3));
-  border-radius: 4px;
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #00FF00;
+  background: linear-gradient(to right, #003300, #00AA00, #003300);
-  border-radius: 4px;
+  border-radius: 5px;
-  opacity: 0.7;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #00CC00;
+  background: linear-gradient(to right, #004400, #00CC00, #004400);
 }