added image flip.

Author: rohitdavas

components/hero.html

@@ -1,9 +1,16 @@
 <section id="home" class="hero">
     <div class="hero-content">
         <h1>Rohit Kumar</h1>
-        <p>AI Enginner | Deep Learning Engineer | Computer Vision </p>
-        <div class="profile-image">
-            <img src="images/rohit-in-berlin.jpg" alt="Rohit Kumar">
+        <p>AI Engineer | Deep Learning Engineer | Computer Vision </p>
+        <div class="profile-card">
+            <div class="profile-card-inner">
+                <div class="profile-card-front">
+                    <img src="images/rohit-in-berlin.jpg" alt="Rohit Kumar">
+                </div>
+                <div class="profile-card-back">
+                    <img src="images/coder.png" alt="Code Sample">
+                </div>
+            </div>
         </div>
         <a href="#about" class="cta-button">Learn More</a>
     </div>

images/coder.png

@@ -79,21 +79,58 @@ body {
     color: #2c3e50;
 }
 
-.profile-image {
+.profile-card {
     width: 200px;
     height: 200px;
     margin: 2rem auto;
+    perspective: 1000px;
+    cursor: pointer;
+}
+
+.profile-card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+}
+
+.profile-card:hover .profile-card-inner {
+    transform: rotateY(180deg);
+}
+
+.profile-card-front,
+.profile-card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
     border: 3px solid #fff;
 }
 
-.profile-image img {
+.profile-card-front {
+    background-color: #fff;
+}
+
+.profile-card-back {
+    background-color: #2c3e50;
+    transform: rotateY(180deg);
+}
+
+.profile-card-front img,
+.profile-card-back img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    object-position: center;
+}
+
+.profile-card-back img {
+    object-fit: cover;
+    filter: brightness(0.9) contrast(1.1);
 }
 
 /* About Section */
@@ -283,7 +320,7 @@ footer {
         font-size: 2.5rem;
     }
 
-    .profile-image {
+    .profile-card {
         width: 180px;
         height: 180px;
     }
@@ -336,7 +373,7 @@ footer {
         font-size: 0.95rem;
     }
 
-    .profile-image {
+    .profile-card {
         width: 150px;
         height: 150px;
     }