From 29d972b32784f39371fd3ec2fc5fcbee8c385898 Mon Sep 17 00:00:00 2001
From: Maksim Bengraf <me@octobanon.com>
Date: Tue, 9 Jul 2024 17:54:36 +0700
Subject: [PATCH] add: Page for subdomain

---
 index.html        | 15 ++++++++-
 matrix/index.html | 21 ++++++++++++
 matrix/styles.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 matrix/index.html
 create mode 100644 matrix/styles.css
diff --git a/index.html b/index.html
index 7120832..9d1a18b 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,19 @@
         <meta content="Personal website with information about me" property="og:description">
         <meta content="#3A3A3A" data-react-helmet="true" name="theme-color">
         <meta content="https://octobanon.com/fof.gif" property="og:image">
+        <script>
+            window.addEventListener('load', function() {
+                var currentDate = new Date();
+                var birthDate = new Date("2006-07-07");
+                var age = currentDate.getFullYear() - birthDate.getFullYear();
+                var birthDateThisYear = new Date(currentDate.getFullYear(), birthDate.getMonth(), birthDate.getDate());
+                if (currentDate < birthDateThisYear) {
+                    age--;
+                }
+
+                document.getElementById("age").textContent = age;
+            });
+        </script>  
     </head>
     <body>
         <ul class="nav">
@@ -21,7 +34,7 @@
 
         <h4 class="about-title">About me</h4>
         <p class="about-me">
-            Hello, I'm Maksim and I'm 18 years old, developer and system administrator from <a href="https://octobanon.com/yaycha">Russia</a>. Now I’m gradually learning three languages: TypeScript, Rust, <a href="https://octobanon.com/teapot">Java</a>.
+            Hello, I'm Maksim and I'm <span id="age"></span> years old, developer and system administrator from <a href="https://octobanon.com/yaycha">Russia</a>. Now I’m gradually learning three languages: TypeScript, Rust, <a href="https://octobanon.com/teapot">Java</a>.
         </p>
         <br />
         
diff --git a/matrix/index.html b/matrix/index.html
new file mode 100644
index 0000000..709edf8
--- /dev/null
+++ b/matrix/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Hello</title>
+        <link href="styles.css" rel="stylesheet">
+    </head>
+    <body>
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 16 16" width="150px"><path d="m 8 0 c -4.421875 0 -8 3.578125 -8 8 s 3.578125 8 8 8 s 8 -3.578125 8 -8 s -3.578125 -8 -8 -8 z m -3 4 c 0.265625 0 0.519531 0.105469 0.707031 0.292969 l 2.292969 2.292969 l 2.292969 -2.292969 c 0.1875 -0.1875 0.441406 -0.292969 0.707031 -0.292969 s 0.519531 0.105469 0.707031 0.292969 c 0.390625 0.390625 0.390625 1.023437 0 1.414062 l -2.292969 2.292969 l 2.292969 2.292969 c 0.390625 0.390625 0.390625 1.023437 0 1.414062 s -1.023437 0.390625 -1.414062 0 l -2.292969 -2.292969 l -2.292969 2.292969 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 s -0.390625 -1.023437 0 -1.414062 l 2.292969 -2.292969 l -2.292969 -2.292969 c -0.390625 -0.390625 -0.390625 -1.023437 0 -1.414062 c 0.1875 -0.1875 0.441406 -0.292969 0.707031 -0.292969 z m 0 0" fill="#9c9c9c"/></svg>
+            <br />
+            <h1>Oh.</h1>
+            <p>
+                There is nothing on this domain except this page and matrix server
+            </p>
+            <br />
+            <a href="https://octobanon.com/", class="button">Back to home</a>
+        </div>
+    </body>
+</html>
diff --git a/matrix/styles.css b/matrix/styles.css
new file mode 100644
index 0000000..dd9d8d1
--- /dev/null
+++ b/matrix/styles.css
@@ -0,0 +1,85 @@
+@font-face {
+    font-family: "Cantarell var";
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    src: url("../Cantarell-VF.woff2") format("woff2"),
+         url("../Cantarell-VF.otf") format("opentype");
+}
+
+* {
+    background-color: #242424;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+h1 {
+    font-family: "Cantarell var", sans-serif;
+    font-weight: 800;
+    font-variation-settings: "wght" 800;
+    margin: 0.5em 0;
+}
+
+p {
+    font-family: "Cantarell var", sans-serif;
+    font-weight: 500;
+    font-variation-settings: "wght" 500;
+    margin: 0.5em 0;
+}
+
+body {
+    margin: 0;
+    padding: 1em;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 90%;
+    width: 650px;
+    padding: 1em;
+}
+
+.button {
+    font-family: "Cantarell var", sans-serif;
+    font-weight: 700;
+    font-variation-settings: "wght" 700;
+    background-color: #3A3A3A;
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 100px;
+    display: inline-block;
+    transition: 0.3s;
+}
+
+.button:hover {
+    background-color: #454545;
+}
+
+@media (min-width: 768px) {
+    body {
+        padding: 2em;
+    }
+    .container {
+        padding: 2em;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.5em;
+    }
+    p {
+        font-size: 1em;
+    }
+    .container {
+        padding: 1em;
+    }
+}
