diff --git a/bg.png b/bg.png
deleted file mode 100644
index 885e2f5..0000000
Binary files a/bg.png and /dev/null differ
diff --git a/index.php b/index.php
index da987bd..8525a69 100644
--- a/index.php
+++ b/index.php
@@ -1,17 +1,56 @@
+<?php
+/**
+ * Content config:
+ */
+$name           = "David Hrdina Němeček";
+$site_title     = "www.dejvino.cz";
+$site_url       = "https://www.dejvino.cz/";
+$site_desc      = "$name - Professional Software Developer";
+$subtitle       = "Full-Stack Architect & Open Source Contributor";
+$photo_file     = "photo.png";
+$email_user     = "ciao";
+
+$about_text     = [
+    "Full-stack developer focused on high-performance systems and minimalist architecture.",
+    "Specializing in turning complex requirements into elegant, maintainable code."
+];
+
+$nav_links      = [
+    "~/blog"     => "https://wp.dejvino.com/",
+    "~/projects" => "https://projects.dejvino.com/",
+    "~/code"     => "https://git.dejvino.cz/",
+    "~/personal" => "https://www.dejvino.cz/"
+];
+
+$hardware_info  = "Mandolin, Mountain Biking, and tuning my MX-5.";
+
+/**
+ * Page design:
+ * - clean and simple, human-maintaninable
+ * - no dependencies
+ * - single-file website
+ */
+?>
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>www.dejvino.cz</title>
+    <title><?= $site_title ?></title>
+    <link rel="canonical" href="<?= $site_url ?>">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="David Hrdina Němeček - Professional Software Developer">
-    <meta name="author" content="David Hrdina Němeček">
+    <meta name="description" content="<?= $site_desc ?>">
+    <meta name="author" content="<?= $name ?>">
+    
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="<?= $site_url ?>">
+    <meta property="og:title" content="<?= $name ?>">
+    <meta property="og:description" content="<?= $subtitle ?>">
+
     <style>
-      <?php 
-        /* Cyberpunk Identity: Single-payload delivery.
-           Internal logic is processed server-side to minimize client overhead. */
+      <?php
         include 'style.css';
-        ?>
+      ?>
     </style>
     <link rel="shortcut icon" href="favicon.ico">
   </head>
@@ -20,54 +59,54 @@
     <main class="bento-grid">
         <section class="card profile">
             <?php
-                $avatarBase64 = base64_encode(file_get_contents('me.jpg'));
+                if (file_exists($photo_file)) {
+                    $avatarBase64 = base64_encode(file_get_contents($photo_file));
+                    echo '<img src="data:image/png;base64,' . $avatarBase64 . '" alt="' . $name . '" class="avatar" width="120" height="160" />';
+                } else {
+                    echo '<div class="avatar-placeholder"></div>';
+                }
             ?>
-            <img src="data:image/jpeg;base64,<?= $avatarBase64 ?>" alt="David Hrdina Němeček" class="avatar" />
             <div class="header-text">
-                <p class="greeting-mono"><span>[</span><?php $hour = date('H');
-                    if ($hour < 12) echo "SYSTEM_INIT_DAWN";
-                    elseif ($hour < 18) echo "SYSTEM_INIT_DAY";
-                    else echo "SYSTEM_INIT_DUSK";
-                ?><span>]</span></p>
-                <h1>David Hrdina Němeček</h1>
-                <p class="subtitle">Full-Stack Architect & Open Source Contributor</p>
+                <h1><?= $name ?></h1>
+                <p class="subtitle"><?= $subtitle ?></p>
             </div>
         </section>
 
         <section class="card about">
-            <h2>System_Info</h2>
-            <p>Full-stack developer focused on high-performance systems and minimalist architecture.</p>
-            <p>Specializing in turning complex requirements into elegant, maintainable code.</p>
+            <h2>Bio</h2>
+            <?php foreach ($about_text as $para): ?>
+                <p><?= $para ?></p>
+            <?php endforeach; ?>
         </section>
 
         <section class="card links">
             <h2>Navigation</h2>
             <ul class="link-grid">
-                <li><a href="https://wp.dejvino.com/"><span>~/blog</span></a></li>
-                <li><a href="https://projects.dejvino.com/"><span>~/projects</span></a></li>
-                <li><a href="https://git.dejvino.cz/"><span>~/code</span></a></li>
-                <li><a href="https://www.dejvino.cz/"><span>~/personal</span></a></li>
+                <?php foreach ($nav_links as $label => $url): ?>
+                    <li><a href="<?= $url ?>"><span><?= $label ?></span></a></li>
+                <?php endforeach; ?>
             </ul>
         </section>
 
         <section class="card interests">
-            <h2>Hardware</h2>
-            <p>Mandolin, Mountain Biking, and tuning my MX-5.</p>
+            <h2>Likes</h2>
+            <p><?= $hardware_info ?></p>
         </section>
 
         <section class="card contact">
             <h2>Remote_Access</h2>
             <p class="mono-addr">
-              Reach out via email: <span id="contact-mail">uncovering...</span>
+              Contact email: <span id="contact-mail">uncovering...</span>
             </p>
         </section>
     </main>
 
     <script>
-      (p => {
-        const a = `${p}@dejvino.cz`;
-        document.getElementById("contact-mail").innerHTML = `<a href="mailto:${a}">${a}</a>`;
-      })('david');
+      ((u, d, t) => {
+        const addr = u + '@' + d + '.' + t;
+        const el = document.getElementById("contact-mail");
+        el.innerHTML = `<a href="mailto:${addr}">${addr}</a>`;
+      })('<?= $email_user ?>', 'dejvino', 'cz');
     </script>
   </body>
 </html>
diff --git a/me.jpg b/me.jpg
deleted file mode 100644
index 652ef1f..0000000
Binary files a/me.jpg and /dev/null differ
diff --git a/photo.png b/photo.png
new file mode 100644
index 0000000..85a3bb5
Binary files /dev/null and b/photo.png differ
diff --git a/style.css b/style.css
index d1c6f52..d214397 100644
--- a/style.css
+++ b/style.css
@@ -42,14 +42,23 @@ body {
     border: 1px solid rgba(0, 243, 255, 0.15);
     box-shadow: var(--shadow);
     position: relative;
+    backface-visibility: hidden; /* Fixes potential text blur on rotated cards */
+    /* Chamfered tech-cut corners */
+    clip-path: polygon(
+        0 15px, 15px 0, 
+        100% 0, 
+        100% calc(100% - 15px), calc(100% - 15px) 100%, 
+        0 100%
+    );
 }
 
 .profile { grid-column: span 4; display: flex; align-items: center; gap: 32px; }
-.about, .interests, .links, .contact { grid-column: span 2; }
 
-.card:hover { 
-    border-color: var(--accent-color);
-}
+/* Organic Displacement */
+.about { grid-column: span 2; transform: translate(-8px, 4px) rotate(-0.4deg); }
+.interests { grid-column: span 2; transform: translate(12px, 8px) rotate(0.6deg); }
+.links { grid-column: span 2; transform: translate(-4px, -6px) rotate(-0.3deg); }
+.contact { grid-column: span 2; transform: translate(6px, -12px) rotate(0.5deg); }
 
 /* Navigation Blink - Restricted to the navigation card only */
 .links::after {
@@ -64,9 +73,9 @@ body {
 }
 
 .avatar {
-    width: 140px;
-    height: auto;
-    aspect-ratio: 3 / 4;
+    width: 120px;
+    height: 160px; /* Explicit height for aspect ratio 3:4 */
+    object-fit: cover;
     filter: brightness(1.2) contrast(1.2) sepia(1) hue-rotate(140deg);
     border: 1px solid var(--text-color);
 }
@@ -87,15 +96,6 @@ h2 {
     letter-spacing: 2px;
 }
 
-.greeting-mono { 
-    font-size: 0.8rem; 
-    color: var(--accent-color); 
-    margin: 0; 
-    font-weight: bold;
-}
-
-.greeting-mono span { opacity: 0.5; }
-
 .link-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 
 .link-grid a { 
@@ -108,19 +108,13 @@ h2 {
     text-align: center;
 }
 
-.link-grid a:hover { 
-    background: var(--text-color); 
-    color: #000; 
-    box-shadow: 0 0 10px var(--text-color);
-}
-
-.mono-addr { font-size: 0.85rem; color: #fff; border-bottom: 1px dashed var(--text-color); }
-
 a { color: var(--link-color); text-decoration: none; }
-a:hover { text-shadow: 0 0 8px var(--link-color); }
 
 @media (max-width: 768px) {
     .bento-grid { grid-template-columns: 1fr; }
-    .profile, .about, .interests, .links, .contact { grid-column: span 1; }
+    .profile, .about, .interests, .links, .contact { 
+        grid-column: span 1; 
+        transform: none; 
+    }
     .profile { flex-direction: column; text-align: center; }
 }
