added the codeline

Author: rohitdavas

components/hero.html

@@ -1,4 +1,9 @@
 <section id="home" class="hero">
+    <div class="code-background">
+        <div class="code-line" data-text="import me">import me</div>
+        <div class="code-line" data-text="me.whoIam()">me.whoIam()</div>
+        <div class="code-line code-output" data-text=">>> &quot;Rohit&quot;">>>> "Rohit"</div>
+    </div>
     <div class="hero-content">
         <h1>Rohit Kumar</h1>
         <p>AI Engineer | Deep Learning Engineer | Computer Vision </p>

styles.css

@@ -64,13 +64,64 @@ body {
     align-items: center;
     justify-content: center;
     text-align: center;
-    background: #ffffff;
+    background: #2b2b2b;  /* Slightly lighter dark background */
     padding: 2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.code-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    font-family: 'Consolas', 'Monaco', monospace;
+    color: #00ff9d;
+    font-size: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 5%;  /* Just a small padding from the left edge */
+}
+
+.code-line {
+    width: auto;
+    text-align: left;
+    white-space: pre;
+    opacity: 0;
+}
+
+.code-line:nth-child(1) {
+    padding-left: 1rem;  /* Indent for class */
+    opacity: 1;
+}
+
+.code-line:nth-child(2) {
+    padding-left: 1rem;  /* Indent for method */
+    opacity: 1;
+}
+
+.code-line:nth-child(3) {
+    padding-left: 1rem;  /* Indent for output */
+    color: #ff9d00;
+    opacity: 1;
+}
+
+.code-output {
+    color: #00a2ff;
 }
 
 .hero-content {
+    position: relative;
     max-width: 800px;
     padding: 2rem;
+    background: rgba(255, 255, 255, 0.98);  /* More opaque background */
+    border-radius: 15px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  /* Stronger shadow */
+    z-index: 2;
+    backdrop-filter: blur(5px);  /* Added blur effect */
 }
 
 .hero h1 {
@@ -354,6 +405,15 @@ footer {
     .timeline-item {
         padding: 1.5rem;
     }
+    
+    .code-background {
+        font-size: 1rem;
+    }
+    
+    .hero-content {
+        padding: 1.5rem;
+        margin: 0 1rem;
+    }
 }
 
 @media (max-width: 480px) {
@@ -377,20 +437,12 @@ footer {
         width: 150px;
         height: 150px;
     }
-}
-
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
+    
+    .code-background {
+        font-size: 0.9rem;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    
+    .hero-content {
+        padding: 1rem;
     }
 }
-
-.hero-content, .about-content, .contact {
-    animation: fadeIn 1s ease-out;
-}