diff --git a/characters.html b/characters.html
new file mode 100644
index 0000000..822e7d2
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/index.html b/index.html
index e4cbd88..f91ec34 100644
--- 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>
diff --git a/static/assets/characters/KentaiBibiquum/Kentai_Bibiquum.jpg b/static/assets/characters/KentaiBibiquum/Kentai_Bibiquum.jpg
new file mode 100644
index 0000000..8acbf60
Binary files /dev/null and b/static/assets/characters/KentaiBibiquum/Kentai_Bibiquum.jpg differ
diff --git a/static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png
new file mode 100644
index 0000000..edd2560
Binary files /dev/null and b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png differ
diff --git a/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf
new file mode 100644
index 0000000..be3bca3
Binary files /dev/null and b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf differ
diff --git a/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_RU.pdf b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_RU.pdf
new file mode 100644
index 0000000..598abae
Binary files /dev/null and b/static/assets/characters/KentaiRadiquum/Kentai_Radiquum_RU.pdf differ
diff --git a/static/assets/characters/thumb/KentaiBibiquum.jpg b/static/assets/characters/thumb/KentaiBibiquum.jpg
new file mode 100644
index 0000000..c6a1f3e
Binary files /dev/null and b/static/assets/characters/thumb/KentaiBibiquum.jpg differ
diff --git a/static/assets/characters/thumb/KentaiRadiquum.jpg b/static/assets/characters/thumb/KentaiRadiquum.jpg
new file mode 100644
index 0000000..39299ed
Binary files /dev/null and b/static/assets/characters/thumb/KentaiRadiquum.jpg differ
diff --git a/static/i18n/strings/ru.js b/static/i18n/strings/ru.js
index 04dd38a..f62079b 100644
--- 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 = {
diff --git a/static/tailwind.css b/static/tailwind.css
index 8212041..5f1e4aa 100644
--- 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;
diff --git a/tailwind.config.js b/tailwind.config.js
index 67d01a7..f6ecc0f 100644
--- 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: {