update about

Author: TheMIU

components/About/About.jsx

@@ -17,15 +17,20 @@ export default function About({ id }) {
             <div className={styles.accentLine} />
             <div className={styles.grid}>
 
-                {/* Studio card — static */}
+                {/* Studio card */}
                 <div className={styles.card}>
-                    <span className={styles.cardLabel}>Studio</span>
-                    <div className={styles.cardAccent} />
-                    <h3 className={styles.cardTitle}>Miusoft</h3>
-                    <p className={styles.text}>
-                        An indie game studio exploring games as a medium for meaningful
-                        communication. Always experimenting.
-                    </p>
+                    <div className={styles.imagePanel}>
+                        <img src="/images/about/miusoft.png" alt="Miusoft" className={styles.cardImage} />
+                    </div>
+                    <div className={styles.cardContent}>
+                        <span className={styles.cardLabel}>Studio</span>
+                        <div className={styles.cardAccent} />
+                        <h3 className={styles.cardTitle}>Miusoft</h3>
+                        <p className={styles.text}>
+                            An indie game studio exploring games as a medium for meaningful
+                            communication. Always experimenting.
+                        </p>
+                    </div>
                 </div>
 
                 {/* Developer card — linked */}
@@ -35,15 +40,20 @@ export default function About({ id }) {
                     rel="noopener noreferrer"
                     className={`${styles.card} ${styles.cardLink}`}
                 >
-                    <span className={styles.cardLabel}>Developer</span>
-                    <div className={styles.cardAccent} />
-                    <h3 className={styles.cardTitle}>Kasun Miuranga</h3>
-                    <p className={styles.text}>
-                        Solo developer behind Miusoft, handling everything from code and art to marketing. Learner at heart.
-                    </p>
-                    <span className={styles.externalIcon}>
-                        <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                    </span>
+                    <div className={styles.imagePanel}>
+                        <img src="/images/about/kasunmiu.png" alt="Kasun Miuranga" className={styles.cardImage} />
+                    </div>
+                    <div className={styles.cardContent}>
+                        <span className={styles.cardLabel}>Developer</span>
+                        <div className={styles.cardAccent} />
+                        <h3 className={styles.cardTitle}>Kasun Miuranga</h3>
+                        <p className={styles.text}>
+                            Solo developer behind Miusoft, handling everything from code and art to marketing. Learner at heart.
+                        </p>
+                        <span className={styles.externalIcon}>
+                            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                        </span>
+                    </div>
                 </a>
 
             </div>

components/About/About.module.css

@@ -54,11 +54,14 @@
 .card {
     border: 2px solid var(--color-border);
     border-radius: var(--card-radius);
-    padding: 1.75rem;
     background: rgba(255, 255, 255, 0.025);
     position: relative;
     overflow: hidden;
     transition: border-color 0.3s ease, background 0.3s ease;
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    overflow: hidden;
 }
 
 .card::before {
@@ -121,7 +124,7 @@
 }
 
 .cardLink {
-    display: block;
+    display: flex; 
     text-decoration: none;
     color: inherit;
     cursor: pointer;
@@ -141,4 +144,40 @@
     color: var(--color-text-muted);
     opacity: 0.8;
     transition: opacity 0.2s ease, transform 0.2s ease;
-}
+}
+
+.imagePanel {
+    flex-shrink: 0;
+    width: 35%;
+    position: relative;
+    overflow: hidden;
+
+    /* fade right edge into card */
+    mask-image: linear-gradient(to left, transparent 0%, black 22%);
+    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 22%);
+}
+
+.cardImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+    display: block;
+    opacity: 0.55;
+    transition: opacity 0.35s ease, transform 0.45s ease;
+}
+
+.card:hover .cardImage {
+    opacity: 0.75;
+    transform: scale(1.03);
+}
+
+.cardContent {
+    flex: 1;
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-width: 0;
+}
+