diff --git a/src/App.tsx b/src/App.tsx
index f19bb1b..4605fa9 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,35 @@ import PostsContent from './components/PostsContent';
 
 function App() {
   const [activeSection, setActiveSection] = React.useState('about');
+  const [isBooting, setIsBooting] = React.useState(true);
+  const [bootPhase, setBootPhase] = React.useState(0);
+
+  // TV Boot-up sequence
+  React.useEffect(() => {
+    if (!isBooting) return;
+
+    // Phase 0: Initial black screen (0ms)
+    // Phase 1: Quick white flash (100ms)
+    // Phase 2: Static noise (600ms)
+    // Phase 3: Horizontal scan line (900ms) 
+    // Phase 4: Fade in content (1200ms)
+    // Phase 5: Boot complete (1800ms)
+    
+    const timings = [0, 100, 600, 900, 1200, 1800];
+    
+    const bootSequence = timings.map((time, index) => {
+      return setTimeout(() => {
+        setBootPhase(index);
+        if (index === timings.length - 1) {
+          setIsBooting(false);
+        }
+      }, time);
+    });
+    
+    return () => {
+      bootSequence.forEach(timeout => clearTimeout(timeout));
+    };
+  }, [isBooting]);
 
   return (
     <div className="min-h-screen bg-gray-900 flex items-center justify-center overflow-hidden">
@@ -28,6 +57,36 @@ function App() {
             {/* Convex Screen Effect */}
             <div className="absolute inset-0 tv-screen-convex"></div>
             
+            {/* Boot-up Animation Layers */}
+            {isBooting && (
+              <>
+                {/* Black Screen (initial) */}
+                <div className={`absolute inset-0 bg-black z-30 transition-opacity duration-500 ${bootPhase >= 1 ? 'opacity-0' : 'opacity-100'}`}></div>
+                
+                {/* Power On Flash */}
+                <div className={`absolute inset-0 bg-white z-30 transition-opacity duration-300 ${bootPhase === 1 ? 'opacity-80' : 'opacity-0'}`}></div>
+                
+                {/* Intense Static */}
+                <div className={`absolute inset-0 z-30 transition-opacity duration-300 ${bootPhase === 2 ? 'opacity-100' : 'opacity-0'}`}>
+                  <div className="absolute inset-0 bg-black opacity-30"></div>
+                  <div className="absolute inset-0" style={{
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' 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: 1
+                  }}></div>
+                </div>
+                
+                {/* Horizontal Scan Line */}
+                {bootPhase === 3 && (
+                  <div className="absolute inset-0 z-30">
+                    <div className="h-8 w-full bg-white opacity-60 animate-scanline"></div>
+                  </div>
+                )}
+                
+                {/* Content Fade Overlay */}
+                <div className={`absolute inset-0 bg-black z-20 pointer-events-none transition-opacity duration-500 ${bootPhase >= 4 ? 'opacity-0' : 'opacity-100'}`}></div>
+              </>
+            )}
+            
             {/* Static noise texture underlay */}
             <div className="white-noise"></div>
 
diff --git a/src/index.css b/src/index.css
index b6af9d7..f8952e7 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,547 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: 'VT323';
-  src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
-}
-
-@layer utilities {
-  .typing-effect {
-    border-right: 2px solid #00FF00;
-    animation: cursor-blink 1s step-end infinite;
-  }
-
-  .tv-frame {
-    @apply rounded-[50px] p-8;
-    background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
-    box-shadow:
-      20px 20px 60px #1a1a1a,
-      -20px -20px 60px #3a3a3a,
-      inset 0 2px 20px rgba(255, 255, 255, 0.1);
-    border: 12px solid #1a1a1a;
-    border-radius: 50px;
-    transform: perspective(1200px) rotateX(2deg);
-    overflow: hidden;
-  }
-
-  /* Wood texture overlay */
-  .tv-frame::before {
-    content: '';
-    position: absolute;
-    top: -12px;
-    left: -12px;
-    right: -12px;
-    bottom: -12px;
-    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;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 40%;
-    background: 
-      linear-gradient(
-        180deg,
-        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.6),
-      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(
-      ellipse at center,
-      transparent 0%,
-      rgba(0, 0, 0, 0) 60%,
-      rgba(0, 0, 0, 0.4) 100%
-    );
-    border-radius: 50% / 10%;
-    pointer-events: none;
-    z-index: 40;
-    position: relative;
-  }
-
-  .tv-screen-convex::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(
-      circle at 30% 20%,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.05) 25%,
-      transparent 50%
-    );
-    border-radius: inherit;
-  }
-
-  /* Glass Reflections */
-  .glass-reflection {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      125deg,
-      transparent 0%,
-      transparent 40%,
-      rgba(255, 255, 255, 0.07) 42%,
-      rgba(255, 255, 255, 0.01) 50%,
-      transparent 52%,
-      transparent 100%
-    );
-    z-index: 41;
-    pointer-events: none;
-    opacity: 0.6;
-  }
-
-  .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.3;
-    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 1px 0 rgba(255, 255, 255, 0.1),
-      inset 0 0 8px rgba(0, 255, 0, 0.1),
-      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;
-    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 1px 10px rgba(0, 0, 0, 0.6),
-      inset 0 0 8px rgba(0, 255, 0, 0.25),
-      0 1px 0 rgba(0, 255, 0, 0.05),
-      0 2px 4px rgba(0, 0, 0, 0.3);
-  }
-
-  .terminal-button::before {
-    content: '';
-    @apply absolute top-0 left-0 right-0 h-[1px] opacity-40;
-    background: linear-gradient(90deg,
-      transparent 0%,
-      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);
-    background: linear-gradient(to bottom, 
-      #003800 0%, 
-      #002800 40%, 
-      #001E00 100%);
-  }
-
-  .terminal-button:active {
-    @apply transform scale-[0.98];
-    background: linear-gradient(to bottom, 
-      #001E00 0%, 
-      #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);
-  }
-
-  /* Skeuomorphic screen effect */
-  .screen-content {
-    background-color: rgba(0, 17, 0, 0.95);
-    background-image: 
-      linear-gradient(0deg, 
-        rgba(0, 20, 0, 1) 0%, 
-        rgba(0, 27, 0, 1) 100%),
-      radial-gradient(
-        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(
-      90deg,
-      transparent 0%,
-      rgba(74, 255, 74, 0.1) 25%,
-      rgba(74, 255, 74, 0.1) 75%,
-      transparent 100%
-    );
-    animation: glare 3s ease-in-out infinite;
-    opacity: 0.2;
-  }
-
-  /* Cyberpunk theme styles */
-  .cyberpunk-theme .terminal-button {
-    border-color: rgba(147, 51, 234, 0.3);
-    background: linear-gradient(to bottom, 
-      #25002A 0%, 
-      #1A001F 40%, 
-      #120016 100%);
-    color: #df6cfc;
-    text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.1),
-      inset 0 0 8px rgba(147, 51, 234, 0.1),
-      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 1px 10px rgba(0, 0, 0, 0.6),
-      inset 0 0 8px rgba(147, 51, 234, 0.25),
-      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 {
-    border-right-color: #df6cfc;
-  }
-
-  .cyberpunk-theme input {
-    color: #df6cfc;
-  }
-
-  .cyberpunk-theme .screen-content {
-    background-color: rgba(17, 0, 17, 0.95);
-    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%
-      );
-  }
-}
-
-@keyframes cursor-blink {
-  from, to { border-color: transparent }
-  50% { border-color: #00FF00 }
-}
-
-@keyframes glare {
-  0% {
-    transform: translateX(-200%);
-  }
-  100% {
-    transform: translateX(200%);
-  }
-}
-
-@keyframes horizontal-glare {
-  from {
-    transform: translateX(-200%);
-  }
-  to {
-    transform: translateX(200%);
-  }
-}
-
-/* Custom scrollbar with skeuomorphic design */
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar-track {
-  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: linear-gradient(to right, #003300, #00AA00, #003300);
-  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: linear-gradient(to right, #004400, #00CC00, #004400);
-}
-
-/* Custom Scrollbar - Enhanced */
-.custom-scrollbar::-webkit-scrollbar {
-  width: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  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: 5px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(to right, #003300, #00AA00, #003300);
-  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);
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(to right, #004400, #00CC00, #004400);
-}
\ No newline at end of file
+/* Import all CSS modules */
+@import './styles/base.css';
+@import './styles/tv-frame.css';
+@import './styles/screen-effects.css';
+@import './styles/animations.css';
+@import './styles/buttons.css';
+@import './styles/scrollbars.css';
+@import './styles/skills.css';
+@import './styles/matrix.css';
\ No newline at end of file
diff --git a/src/styles/animations.css b/src/styles/animations.css
new file mode 100644
index 0000000..e2754ba
--- /dev/null
+++ b/src/styles/animations.css
@@ -0,0 +1,71 @@
+/* Animation Keyframes */
+@keyframes cursor-blink {
+  from, to { border-color: transparent }
+  50% { border-color: #00FF00 }
+}
+
+@keyframes glare {
+  0% {
+    transform: translateX(-200%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+@keyframes horizontal-glare {
+  from {
+    transform: translateX(-200%);
+  }
+  to {
+    transform: translateX(200%);
+  }
+}
+
+/* TV Boot Animation Keyframes */
+@keyframes scanline {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
+}
+
+/* Boot Animation Styles */
+.animate-scanline {
+  animation: scanline 1.2s ease-out forwards;
+  box-shadow: 
+    0 0 15px rgba(255, 255, 255, 0.5),
+    0 0 35px rgba(255, 255, 255, 0.3);
+}
+
+/* Improved Screen Glare */
+.screen-glare {
+  position: 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.3;
+  z-index: 45;
+}
+
+/* Glare Effect */
+.glare-effect {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(74, 255, 74, 0.1) 25%,
+    rgba(74, 255, 74, 0.1) 75%,
+    transparent 100%
+  );
+  animation: glare 3s ease-in-out infinite;
+  opacity: 0.2;
+}
\ No newline at end of file
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..d7831c6
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,75 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'VT323';
+  src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+}
+
+@layer utilities {
+  .typing-effect {
+    border-right: 2px solid #00FF00;
+    animation: cursor-blink 1s step-end infinite;
+  }
+}
+
+/* Cyberpunk theme styles */
+.cyberpunk-theme .terminal-button {
+  border-color: rgba(147, 51, 234, 0.3);
+  background: linear-gradient(to bottom, 
+    #25002A 0%, 
+    #1A001F 40%, 
+    #120016 100%);
+  color: #df6cfc;
+  text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 0 8px rgba(147, 51, 234, 0.1),
+    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 1px 10px rgba(0, 0, 0, 0.6),
+    inset 0 0 8px rgba(147, 51, 234, 0.25),
+    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 {
+  border-right-color: #df6cfc;
+}
+
+.cyberpunk-theme input {
+  color: #df6cfc;
+}
+
+.cyberpunk-theme .screen-content {
+  background-color: rgba(17, 0, 17, 0.95);
+  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%
+    );
+}
\ No newline at end of file
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
new file mode 100644
index 0000000..60f6ee9
--- /dev/null
+++ b/src/styles/buttons.css
@@ -0,0 +1,96 @@
+/* Skeuomorphic Terminal Button */
+.terminal-button {
+  position: relative;
+  width: 100%;
+  padding: 0.75rem 1.5rem;
+  font-family: 'VT323', 'Courier New', monospace;
+  font-size: 1.125rem;
+  transition-property: all;
+  transition-duration: 150ms;
+  user-select: none;
+  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 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 0 8px rgba(0, 255, 0, 0.1),
+    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);
+  overflow: hidden;
+}
+
+.terminal-button-selected {
+  font-size: 110%;
+  font-weight: bold;
+  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 1px 10px rgba(0, 0, 0, 0.6),
+    inset 0 0 8px rgba(0, 255, 0, 0.25),
+    0 1px 0 rgba(0, 255, 0, 0.05),
+    0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.terminal-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  opacity: 0.4;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    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);
+  background: linear-gradient(to bottom, 
+    #003800 0%, 
+    #002800 40%, 
+    #001E00 100%);
+}
+
+.terminal-button:active {
+  transform: scale(0.98);
+  background: linear-gradient(to bottom, 
+    #001E00 0%, 
+    #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 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;
+}
\ No newline at end of file
diff --git a/src/styles/screen-effects.css b/src/styles/screen-effects.css
new file mode 100644
index 0000000..6c6a966
--- /dev/null
+++ b/src/styles/screen-effects.css
@@ -0,0 +1,154 @@
+/* Enhanced Screen Container with Glass Effect */
+.tv-screen-container {
+  background: #000;
+  box-shadow:
+    inset 0 0 50px rgba(0, 0, 0, 0.6),
+    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(
+    ellipse at center,
+    transparent 0%,
+    rgba(0, 0, 0, 0) 60%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  border-radius: 50% / 10%;
+  pointer-events: none;
+  z-index: 40;
+  position: relative;
+}
+
+.tv-screen-convex::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(
+    circle at 30% 20%,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 25%,
+    transparent 50%
+  );
+  border-radius: inherit;
+}
+
+/* Glass Reflections */
+.glass-reflection {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    125deg,
+    transparent 0%,
+    transparent 40%,
+    rgba(255, 255, 255, 0.07) 42%,
+    rgba(255, 255, 255, 0.01) 50%,
+    transparent 52%,
+    transparent 100%
+  );
+  z-index: 41;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.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;
+}
+
+/* Skeuomorphic screen effect */
+.screen-content {
+  background-color: rgba(0, 17, 0, 0.95);
+  background-image: 
+    linear-gradient(0deg, 
+      rgba(0, 20, 0, 1) 0%, 
+      rgba(0, 27, 0, 1) 100%),
+    radial-gradient(
+      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);
+}
\ No newline at end of file
diff --git a/src/styles/scrollbars.css b/src/styles/scrollbars.css
new file mode 100644
index 0000000..7d5b799
--- /dev/null
+++ b/src/styles/scrollbars.css
@@ -0,0 +1,47 @@
+/* Custom scrollbar with skeuomorphic design */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  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: linear-gradient(to right, #003300, #00AA00, #003300);
+  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: linear-gradient(to right, #004400, #00CC00, #004400);
+}
+
+/* Custom Scrollbar - Enhanced */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  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: 5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(to right, #003300, #00AA00, #003300);
+  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);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to right, #004400, #00CC00, #004400);
+}
\ No newline at end of file
diff --git a/src/styles/tv-frame.css b/src/styles/tv-frame.css
new file mode 100644
index 0000000..58e827a
--- /dev/null
+++ b/src/styles/tv-frame.css
@@ -0,0 +1,133 @@
+/* TV Frame Styles */
+.tv-frame {
+  border-radius: 50px;
+  padding: 8px;
+  background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
+  box-shadow:
+    20px 20px 60px #1a1a1a,
+    -20px -20px 60px #3a3a3a,
+    inset 0 2px 20px rgba(255, 255, 255, 0.1);
+  border: 12px solid #1a1a1a;
+  border-radius: 50px;
+  transform: perspective(1200px) rotateX(2deg);
+  overflow: hidden;
+}
+
+/* Wood texture overlay */
+.tv-frame::before {
+  content: '';
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  right: -12px;
+  bottom: -12px;
+  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;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40%;
+  background: 
+    linear-gradient(
+      180deg,
+      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 {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  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);
+}
+
+/* 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;
+}
\ No newline at end of file