feat: add characters page

2025-04-05 15:54:34 +00:00 · 2024-12-10 15:08:23 +05:00 · 2024-12-10 15:08:23 +05:00 · 245a064556
commit 245a064556
parent 742fb28189
11 changed files with 222 additions and 7 deletions
--- a/characters.html
+++ b/characters.html
@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kentai Radiquum</title>
+    <meta name="description"
+        content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and stickers telegram channel. I enjoy a variety of music genres, especially EDM, Tech, and Alternative. Feel free to reach out via instant messengers in the links section!">
+    <link href="./static/tailwind.css" rel="stylesheet">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png">
+    <link rel="manifest" href="./site.webmanifest">
+
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Kentai Radiquum">
+    <meta property="og:url" content="https://radiquum.wah.su">
+    <meta property="og:image" content="https://radiquum.wah.su/static/opengraph.png">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:description"
+        content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and stickers telegram channel. I enjoy a variety of music genres, especially EDM, Tech, and Alternative. Feel free to reach out via instant messengers in the links section!">
+    <meta property="og:image:width" content="1203">
+    <meta property="og:image:height" content="627">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Kentai Radiquum">
+    <meta name="twitter:site" content="@radiquum">
+    <meta name="twitter:description"
+        content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and sti">
+    <meta name="twitter:image" content="https://radiquum.wah.su/static/opengraph.png">
+
+</head>
+
+<body class="overflow-x-hidden bg-bg-black">
+    <header class="w-full text-white bg-bg-pink" id="header">
+        <div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
+            <a href="./index.html#landing">
+                <div class="flex items-center gap-4 px-4 py-2 sm:py-4">
+                    <img src="./static/avatar_512.png" alt="" class=" rounded-lg w-[64px] lg:w-[64px] 2xl:w-[64px]" />
+                    <h1 class="text-2xl font-semibold xl:text-3xl 2xl:text-4xl" data-i18n="NAME">KENTAI RADIQUUM</h1>
+                </div>
+            </a>
+            <div class="flex gap-1 px-4 mb-2 sm:px-0 sm:gap-2">
+                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./index.html#about"
+                    data-i18n="BTN_ABOUT_ME">ABOUT</a>
+                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./index.html#links"
+                    data-i18n="BTN_LINKS">LINKS</a>
+                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./characters.html"
+                    data-i18n="BTN_CHARACTERS">CHARACTERS</a>
+            </div>
+        </div>
+    </header>
+    <div class="flex flex-col flex-wrap w-full lg:flex-row">
+        <a class="group" href="./characters/KentaiRadiquum.html">
+            <div class="w-full lg:max-w-[50vw] relative">
+                <div
+                    class="absolute inset-0 flex flex-col justify-end p-4 text-white bg-black bg-opacity-50 group-hover:opacity-25">
+                    <p class="md:text-xl" data-i18n="CHR_KR_GOTO">Click to go to description</p>
+                    <div>
+                        <h1 class="text-3xl font-bold md:text-6xl">Kentai Radiquum</h1>
+                        <h2 class="text-2xl md:text-4xl" data-i18n="CHR_KR_SPECIES">Red Panda</h2>
+                    </div>
+                </div>
+                <img alt="" src="./static/assets/characters/thumb/KentaiRadiquum.jpg" class="object-cover w-full" />
+            </div>
+        </a>
+        <a class="group" href="./static/assets/characters/KentaiBibiquum/Kentai_Bibiquum.jpg"
+            download="Kentai_Bibiquum.jpg">
+            <div class="w-full lg:max-w-[50vw] relative">
+                <div
+                    class="absolute inset-0 flex flex-col justify-end p-4 text-white bg-black bg-opacity-50 group-hover:opacity-25">
+                    <p class="md:text-xl" data-i18n="CHR_KB_GOTO">Click to download Ref</p>
+                    <div>
+                        <h1 class="text-3xl font-bold md:text-6xl">Kentai Bibiquum</h1>
+                        <h2 class="text-2xl md:text-4xl" data-i18n="CHR_KB_SPECIES">Protogen</h2>
+                    </div>
+                </div>
+                <img alt="" src="./static/assets/characters/thumb/KentaiBibiquum.jpg" class="object-cover w-full " />
+            </div>
+        </a>
+    </div>
+
+
+
+    <!-- <script src="./static/script.js"></script>  -->
+    <script src="./static/i18n/strings/ru.js"></script>
+    <script src="./static/i18n/i18n.js"></script>
+</body>
+
+</html>
--- a/index.html
+++ b/index.html
@ -46,9 +46,11 @@
            </a>
            <div class="flex gap-1 px-4 mb-2 sm:px-0 sm:gap-2">
                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="#about"
-                    data-i18n="BTN_ABOUT_ME">ABOUT ME</a>
+                    data-i18n="BTN_ABOUT_ME">ABOUT</a>
                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="#links"
                    data-i18n="BTN_LINKS">LINKS</a>
+                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./characters.html"
+                    data-i18n="BTN_CHARACTERS">CHARACTERS</a>
            </div>
        </div>
    </header>
@ -106,13 +108,16 @@
            class="flex flex-row flex-wrap items-center justify-center order-3 gap-8 py-4 -mt-4 text-white md:mt-auto md:order-4">
            <img src="./static/arrow_downward.svg" alt="" class="hidden w-24 h-24 animate-bounce md:block" />
            <p class="hidden text-4xl md:block" data-i18n="BTN_OR">or</p>
-            <div class="flex flex-row items-center gap-2">
-                <a class="px-4 py-4 text-2xl underline text-bg-pink hover:underline sm:no-underline" href="#about"
+            <div class="flex flex-col items-center gap-2 sm:flex-row">
+                <a class="px-4 text-2xl underline sm:py-4 text-bg-pink hover:underline sm:no-underline" href="#about"
                    data-i18n="BTN_ABOUT_ME">ABOUT
                    ME</a>
-                <span class="text-2xl">/</span>
-                <a class="px-4 py-4 text-2xl underline text-bg-pink hover:underline sm:no-underline" href="#links"
+                <span class="hidden text-2xl sm:inline-block">/</span>
+                <a class="px-4 text-2xl underline sm:py-4 text-bg-pink hover:underline sm:no-underline" href="#links"
                    data-i18n="BTN_LINKS">LINKS</a>
+                <span class="hidden text-2xl sm:inline-block">/</span>
+                <a class="px-4 text-2xl underline sm:py-4 text-bg-pink hover:underline sm:no-underline" href="/characters.html"
+                    data-i18n="BTN_CHARACTERS">CHARACTERS</a>
            </div>
        </div>

--- a/static/assets/characters/KentaiBibiquum/Kentai_Bibiquum.jpg
+++ b/static/assets/characters/KentaiBibiquum/Kentai_Bibiquum.jpg
--- a/static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png
+++ b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png
--- a/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf
+++ b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf
--- a/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_RU.pdf
+++ b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_RU.pdf
--- a/static/assets/characters/thumb/KentaiBibiquum.jpg
+++ b/static/assets/characters/thumb/KentaiBibiquum.jpg
--- a/static/assets/characters/thumb/KentaiRadiquum.jpg
+++ b/static/assets/characters/thumb/KentaiRadiquum.jpg
--- a/static/i18n/strings/ru.js
+++ b/static/i18n/strings/ru.js
@ -14,6 +14,7 @@ const i18n_ru = {
  BTN_ABOUT_ME: "ОБО МНЕ",
  BTN_OR: "или",
  BTN_LINKS: "ССЫЛКИ",
+  BTN_CHARACTERS: "ПЕРСОНАЖИ",

  // ABOUT ME
  CARD_TITLE: "ОБО МНЕ",
@ -41,7 +42,9 @@ const i18n_ru = {
  CARD_CONTACT_TITLE: "Связаться",
  CARD_CONTACT_DESC:
    "Не стесняйтесь связаться со мной в любое время! Способы связаться со мной через мессенджеры доступны в разделе |% LINK='#links' %|ссылок!|% ENDLINK %|.",
-  LNK_TITLE: "ССЫЛКИ",
+
+  // LINKS
+    LNK_TITLE: "ССЫЛКИ",
  LNK_PHOTO_HEADER: "ФОТОГРАФИИ",
  LNK_PHOTO_PIXEY: "Смотри фото как в инстаграме",
  LNK_PHOTO_INSTAFOPS: "Более фурри фото",
@ -62,6 +65,17 @@ const i18n_ru = {
  LNK_COLLECTION_RPI: "3000+ Фото и видео с красными пандами",
  LNK_FRIEND_BLEP: "ВК Группа классного фотографа",
  LNK_FRIEND_ITC: "GitHub профиль другого фурри-кодера",
+
+  // CHARACTERS
+  CHR_KR_GOTO: "Нажмите, чтобы перейти к описанию",
+  CHR_KR_SPECIES: "Красная Панда",
+  CHR_KB_GOTO: "Нажмите, чтобы скачать референс",
+  CHR_KB_SPECIES: "Протоген",
+
+  // CHR_KR_BIRTH: "Дата рождения",
+  // CHR_KR_HEIGHT: "Рост",
+  // CHR_KR_WEIGHT: "Вес",
+  // CHR_KR_BREED: "Порода",
 };

 const i18n_ru_style = {
--- a/static/tailwind.css
+++ b/static/tailwind.css
@ -746,6 +746,42 @@ video {
  height: 100%;
 }

+.h-screen {
+  height: 100vh;
+}
+
+.h-\[99vh\] {
+  height: 99vh;
+}
+
+.h-\[98vh\] {
+  height: 98vh;
+}
+
+.h-\[95vh\] {
+  height: 95vh;
+}
+
+.h-\[90vh\] {
+  height: 90vh;
+}
+
+.h-\[80vh\] {
+  height: 80vh;
+}
+
+.h-\[85vh\] {
+  height: 85vh;
+}
+
+.h-\[87vh\] {
+  height: 87vh;
+}
+
+.h-\[89vh\] {
+  height: 89vh;
+}
+
 .max-h-\[182px\] {
  max-height: 182px;
 }
@ -754,6 +790,10 @@ video {
  max-height: 50vh;
 }

+.max-h-screen {
+  max-height: 100vh;
+}
+
 .min-h-screen {
  min-height: 100vh;
 }
@ -782,6 +822,10 @@ video {
  width: 256px;
 }

+.w-\[50vw\] {
+  width: 50vw;
+}
+
 .w-\[64px\] {
  width: 64px;
 }
@ -794,6 +838,10 @@ video {
  max-width: 50vw;
 }

+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1057,6 +1105,22 @@ video {
  --tw-bg-opacity: 0.5;
 }

+.bg-opacity-85 {
+  --tw-bg-opacity: 0.85;
+}
+
+.bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}
+
+.bg-opacity-5 {
+  --tw-bg-opacity: 0.05;
+}
+
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
+}
+
 .object-contain {
  -o-object-fit: contain;
     object-fit: contain;
@ -1121,6 +1185,10 @@ video {
  text-align: right;
 }

+.align-bottom {
+  vertical-align: bottom;
+}
+
 .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
@ -1151,6 +1219,11 @@ video {
  line-height: 1.75rem;
 }

+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .font-bold {
  font-weight: 700;
 }
@ -1296,6 +1369,10 @@ body {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }

+.group:hover .group-hover\:opacity-25 {
+  opacity: 0.25;
+}
+
@media (min-width: 370px) {
  .xs\:flex-1 {
    flex: 1 1 0%;
@ -1327,6 +1404,10 @@ body {
    display: block;
  }

+  .sm\:inline-block {
+    display: inline-block;
+  }
+
  .sm\:hidden {
    display: none;
  }
@ -1443,6 +1524,21 @@ body {
  .md\:bg-transparent {
    background-color: transparent;
  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }

@media (min-width: 1024px) {
@ -1458,10 +1554,18 @@ body {
    width: 64px;
  }

+  .lg\:max-w-\[50vw\] {
+    max-width: 50vw;
+  }
+
  .lg\:scroll-mt-4 {
    scroll-margin-top: 1rem;
  }

+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html"],
+  content: ["./index.html", "./characters.html"],
  theme: {
    extend: {
      colors: {