TheQuantifier
diff --git a/‎images/.DS_Store‎
0 Bytes b/‎images/.DS_Store‎
0 Bytes
diff --git a/‎images/home-background.jpg‎
51.3 KB b/‎images/home-background.jpg‎
51.3 KB
diff --git a/‎index.html‎
Lines changed: 2 additions & 2 deletions b/‎index.html‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎styles/default.css‎
Lines changed: 41 additions & 0 deletions b/‎styles/default.css‎
Lines changed: 41 additions & 0 deletions
@@ -17,7 +17,7 @@
 </head>
 <script>
   (function () {
-    const DURATION = 100; // keep in sync with --fade-duration
+    const DURATION = 220; // keep in sync with --fade-duration (220ms)
 
     // Mark page as ready (fade in)
     function ready() {
@@ -60,7 +60,7 @@
     });
   })();
 </script>
-<body>
+<body class="home">
   <!-- ==================== HEADER ==================== -->
   <header class="thin-header">
     <div class="header-bar">
 
@@ -267,4 +267,45 @@ body.is-fading { opacity: 0; }
 /* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
   body { transition: none !important; opacity: 1 !important; }
+}
+
+/* ========== HOME PAGE BACKGROUND IMAGE ========== */
+body.home {
+  position: relative;
+  overflow-x: hidden;
+}
+
+body.home::before {
+  content: "";
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: clamp(44vmin, 60vmin, 78vmin);
+  height: clamp(44vmin, 60vmin, 78vmin);
+  transform: translate(-50%, -50%);
+  background-image: url("../images/home-background.jpg"); /* adjust extension if needed */
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+  opacity: 0.60;             /* subtle fade */
+  filter: blur(1.5px);       /* slight blur for softness */
+  box-shadow:
+    0 0 0 2px rgba(255, 255, 255, 0.04) inset,  /* subtle inner ring */
+    0 0 140px rgba(0, 0, 0, 0.45);              /* soft outer glow */
+  z-index: -1;
+  pointer-events: none;
+}
+
+main,
+footer {
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 640px) {
+  body.home::before {
+    width: clamp(56vmin, 70vmin, 84vmin);
+    height: clamp(56vmin, 70vmin, 84vmin);
+    opacity: 0.18;
+  }
 }