diff --git a/index.html b/index.html
index c361b43..e4cbd88 100644
--- a/index.html
+++ b/index.html
@@ -41,12 +41,14 @@
             <a href="#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">KENTAI RADIQUUM</h1>
+                    <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="#about">ABOUT ME</a>
-                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="#links">LINKS</a>
+                <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>
+                <a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="#links"
+                    data-i18n="BTN_LINKS">LINKS</a>
             </div>
         </div>
     </header>
@@ -66,43 +68,51 @@
                     target="_blank" referrerpolicy="origin">@sleepy_muzzle</a>
             </div>
             <div class="w-full p-4 text-white bg-bg-pink md:bg-transparent md:w-auto">
-                <h1 class="text-3xl font-semibold sm:text-4xl lg:text-6xl xl:text-7xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
-                <p class="text-xl font-light lg:text-4xl xl:text-4xl 2xl:text-5xl">He / Him <br class="md:hidden" />
-                    <span class="hidden md:inline">•</span> Red panda / Protogen
+                <h1 class="text-3xl font-semibold sm:text-4xl lg:text-6xl xl:text-7xl 2xl:text-8xl" data-i18n="NAME">
+                    KENTAI RADIQUUM</h1>
+                <p class="text-xl font-light lg:text-4xl xl:text-4xl 2xl:text-5xl"><span data-i18n="PRONOUNCE">He / Him
+                    </span><br class="md:hidden" />
+                    <span class="hidden md:inline">•</span> <span data-i18n="SPECIES">Red panda / Protogen</span>
                 </p>
             </div>
         </div>
 
         <div class="flex flex-row flex-wrap justify-center order-2 gap-2 p-4 text-2xl text-white md:gap-4">
             <a href="https://furaffinity.net/user/radiquum"
-                class="underline text-bg-pink hover:underline sm:no-underline" target="_blank"
-                referrerpolicy="origin">Furry<span class="inline sm:hidden">.</span></a>
+                class="underline text-bg-pink hover:underline sm:no-underline" target="_blank" referrerpolicy="origin"
+                data-i18n="QUICK_BIO_FURRY">Furry<span class="inline sm:hidden">.</span></a>
             <span class="hidden sm:block">/</span>
             <a href="https://github.com/radiquum" class="underline text-bg-pink hover:underline sm:no-underline"
-                target="_blank" referrerpolicy="origin">Coder<span class="inline sm:hidden">.</span></a>
+                target="_blank" referrerpolicy="origin" data-i18n="QUICK_BIO_CODER">Coder<span
+                    class="inline sm:hidden">.</span></a>
             <span class="hidden sm:block">/</span>
             <a href="https://wah.su/photos" class="underline text-bg-pink hover:underline sm:no-underline"
-                target="_blank" referrerpolicy="origin">Photographer<span class="inline sm:hidden">.</span></a>
+                target="_blank" referrerpolicy="origin" data-i18n="QUICK_BIO_PHOTOGRAPHER">Photographer<span
+                    class="inline sm:hidden">.</span></a>
             <span class="hidden sm:block">/</span>
             <a href="https://wah.su" class="underline text-bg-pink hover:underline sm:no-underline" target="_blank"
-                referrerpolicy="origin">Self-Hosting Enthusiast<span class="inline sm:hidden">.</span></a>
+                referrerpolicy="origin" data-i18n="QUICK_BIO_ENTHUSIAST">Self-Hosting Enthusiast<span
+                    class="inline sm:hidden">.</span></a>
         </div>
 
         <p
             class="flex flex-col flex-wrap items-center justify-center order-4 gap-2 px-2 text-2xl text-white sm:flex-row md:order-3">
-            Now listening to: <a class="text-bg-pink hover:underline" href="https://last.fm/user/radiquum"
-                id="track-name" target="_blank" referrerpolicy="origin">LOADING . . .</a></p>
+            <span data-i18n="QUICK_BIO_LASTFM">Now listening to:</span> <a class="text-bg-pink hover:underline"
+                href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">LOADING . .
+                .</a>
+        </p>
 
         <div
             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">or</p>
+            <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">ABOUT
+                <a class="px-4 py-4 text-2xl underline 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">LINKS</a>
+                <a class="px-4 py-4 text-2xl underline text-bg-pink hover:underline sm:no-underline" href="#links"
+                    data-i18n="BTN_LINKS">LINKS</a>
             </div>
         </div>
 
@@ -110,26 +120,29 @@
 
     <!-- ABOUT ME SECTION -->
     <div class="container px-2 py-4 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="about">
-        <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
+        <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl" data-i18n="CARD_TITLE">ABOUT ME
+        </h1>
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             <div class="flex flex-col gap-4">
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-bg-gray">
-                        <p class="text-4xl font-bold">Tech enthusiast</p>
+                        <p class="text-4xl font-bold" data-i18n="CARD_TECH_ENTHUSIAST_TITLE">Tech enthusiast</p>
                     </div>
                     <div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-gray">
-                        <p class="text-lg font-light">I'm a tech enthusiast with a passion for software
+                        <p class="text-lg font-light" data-i18n="CARD_TECH_ENTHUSIAST_DESC">I'm a tech enthusiast with a
+                            passion for software
                             development. I love diving into code and exploring new software, though hardware fascinates
                             me too.</p>
                     </div>
                 </div>
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-yellow-500">
-                        <p class="text-4xl font-bold">Photographer</p>
+                        <p class="text-4xl font-bold" data-i18n="CARD_PHOTOGRAPHER_TITLE">Photographer</p>
                     </div>
                     <div class="flex justify-center px-8 py-4 bg-yellow-500 bg-opacity-40">
-                        <p class="text-lg font-light">I’m also getting into <a class="text-bg-pink hover:underline"
-                                href="https://wah.su/photos" target="_blank" referrerpolicy="origin">photography</a> and
+                        <p class="text-lg font-light" data-i18n="CARD_PHOTOGRAPHER_DESC">I’m also getting into <a
+                                class="text-bg-pink hover:underline" href="https://wah.su/photos" target="_blank"
+                                referrerpolicy="origin">photography</a> and
                             excited to share my progress.</p>
                     </div>
                 </div>
@@ -137,34 +150,37 @@
             <div class="flex flex-col gap-4">
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-bg-gray">
-                        <p class="text-4xl font-bold">Self-Hosting stuff</p>
+                        <p class="text-4xl font-bold" data-i18n="CARD_SELFHOSTER_TITLE">Self-Hosting stuff</p>
                     </div>
                     <div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-gray">
-                        <p class="text-lg font-light">I'm really into self-hosting through my <a
-                                class="text-bg-pink hover:underline" href="https://home.wah.su" target="_blank"
-                                referrerpolicy="origin">wah.su</a> project, which helps me dive into server management
+                        <p class="text-lg font-light" data-i18n="CARD_SELFHOSTER_DESC">I'm really into self-hosting
+                            through my <a class="text-bg-pink hover:underline" href="https://home.wah.su"
+                                target="_blank" referrerpolicy="origin">wah.su</a> project, which helps me dive into
+                            server management
                             and hosting platforms.</p>
                     </div>
                 </div>
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-pink-600">
-                        <p class="text-4xl font-bold">Music</p>
+                        <p class="text-4xl font-bold" data-i18n="CARD_MUSIC_TITLE">Music</p>
                     </div>
                     <div class="flex justify-center px-8 py-4 bg-pink-600 bg-opacity-50">
-                        <p class="text-lg font-light">I listen a lot of various music, but mainly listen to
+                        <p class="text-lg font-light" data-i18n="CARD_MUSIC_DESC">I listen a lot of various music, but
+                            mainly listen to
                             EDM \ Happy Hardcore \ Tech \ Rock \ Alternative. By artist like: S3RL, Camellia,
                             t+pazolite, BTMH, Saint Motel, and more...</p>
                     </div>
                 </div>
             </div>
-            <div class="flex flex-col gap-4  sm:-mt-[86px] lg:-mt-[60px] xl:-mt-0">
+            <div class="flex flex-col gap-4  sm:-mt-[var(--sm--mt)] lg:-mt-[var(--lg--mt)] xl:-mt-0"
+                data-i18n-style="CARD_SKILLS_STYLE" style="--sm--mt:86px; --lg--mt:60px;">
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-green-500">
-                        <p class="text-4xl font-bold">Skills</p>
+                        <p class="text-4xl font-bold" data-i18n="CARD_SKILLS_TITLE">Skills</p>
                     </div>
                     <div class="flex flex-col justify-center gap-2 px-8 py-4 bg-green-500 bg-opacity-50 ">
                         <div>
-                            <p class="text-base font-bold">Front-end development</p>
+                            <p class="text-base font-bold" data-i18n="CARD_SKILLS_FRONTEND">Front-end development</p>
                             <ul class="flex flex-wrap text-lg font-light gap-x-2">
                                 <li>HTML</li>
                                 <li>CSS</li>
@@ -175,7 +191,7 @@
                             </ul>
                         </div>
                         <div>
-                            <p class="text-base font-bold">Back-end development</p>
+                            <p class="text-base font-bold" data-i18n="CARD_SKILLS_BACKEND">Back-end development</p>
                             <ul class="flex flex-wrap text-lg font-light gap-x-2">
                                 <li>Python</li>
                                 <li>Node.js</li>
@@ -183,7 +199,7 @@
                             </ul>
                         </div>
                         <div>
-                            <p class="text-base font-bold">API</p>
+                            <p class="text-base font-bold" data-i18n="CARD_SKILLS_API">API</p>
                             <ul class="flex flex-wrap text-lg font-light gap-x-2">
                                 <li>Postman/Hoppscotch</li>
                                 <li>mitmproxy</li>
@@ -191,14 +207,14 @@
                             </ul>
                         </div>
                         <div>
-                            <p class="text-base font-bold">Collaboration</p>
+                            <p class="text-base font-bold" data-i18n="CARD_SKILLS_COLLAB">Collaboration</p>
                             <ul class="flex flex-wrap text-lg font-light gap-x-2">
                                 <li>Git</li>
                                 <li>Github</li>
                             </ul>
                         </div>
                         <div>
-                            <p class="text-base font-bold">Deployment</p>
+                            <p class="text-base font-bold" data-i18n="CARD_SKILLS_DEPLOY">Deployment</p>
                             <ul class="flex flex-wrap text-lg font-light gap-x-2">
                                 <li>Docker</li>
                                 <li>Docker-compose</li>
@@ -211,10 +227,11 @@
             <div class="flex flex-col gap-4">
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-orange-600">
-                        <p class="text-4xl font-bold">Red Pandas admirer</p>
+                        <p class="text-4xl font-bold" data-i18n="CARD_READPANDA_TITLE">Red Pandas admirer</p>
                     </div>
                     <div class="flex justify-center px-8 py-4 bg-orange-600 bg-opacity-50">
-                        <p class="text-lg font-light">One of my biggest loves is red pandas—I can’t get
+                        <p class="text-lg font-light" data-i18n="CARD_READPANDA_DESC">One of my biggest loves is red
+                            pandas—I can’t get
                             enough
                             of them! I’ve been collecting red panda stickers and sharing them on the <a
                                 class="text-bg-pink hover:underline" href="https://t.me/red_panda_stickers"
@@ -226,10 +243,11 @@
                 </div>
                 <div class="flex flex-col overflow-hidden rounded-lg">
                     <div class="flex items-center justify-center w-full p-8 bg-blue-500">
-                        <p class="text-3xl font-bold sm:text-4xl">Contact</p>
+                        <p class="text-3xl font-bold sm:text-4xl" data-i18n="CARD_CONTACT_TITLE">Contact</p>
                     </div>
                     <div class="flex justify-center px-8 py-4 bg-blue-500 bg-opacity-50">
-                        <p class="text-lg font-light">Feel free to reach out anytime! Ways to contact me via
+                        <p class="text-lg font-light" data-i18n="CARD_CONTACT_DESC">Feel free to reach out anytime! Ways
+                            to contact me via
                             instant messengers are available in <a class="text-bg-pink hover:underline"
                                 href="#links">links</a> section!</p>
                     </div>
@@ -241,7 +259,7 @@
     <!-- Links Section -->
 
     <div class="container px-2 py-4 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="links">
-        <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">LINKS</h1>
+        <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl" data-i18n="LNK_TITLE">LINKS</h1>
         <div class="grid gap-4 grid-cols-fluid">
 
             <div class="flex flex-col gap-4">
@@ -260,24 +278,26 @@
                                 alt="" src="./static/assets/photos/photo_flowers.jpg" data-section-image="photos"
                                 data-slide="2" data-photo="photo_flowers" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photos/photo_plush.jpg" data-section-image="photos" data-slide="3"
-                                data-photo="photo_plush" />
+                                alt="" src="./static/assets/photos/photo_plush.jpg" data-section-image="photos"
+                                data-slide="3" data-photo="photo_plush" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photos/photo_tower.jpg" data-section-image="photos" data-slide="4"
-                                data-photo="photo_tower" />
+                                alt="" src="./static/assets/photos/photo_tower.jpg" data-section-image="photos"
+                                data-slide="4" data-photo="photo_tower" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photos/photo_trains.jpg" data-section-image="photos" data-slide="5"
-                                data-photo="photo_trains" />
+                                alt="" src="./static/assets/photos/photo_trains.jpg" data-section-image="photos"
+                                data-slide="5" data-photo="photo_trains" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photos/photo_train_on_bridge.jpg" data-section-image="photos" data-slide="6"
-                                data-photo="photo_train_on_bridge" />
+                                alt="" src="./static/assets/photos/photo_train_on_bridge.jpg"
+                                data-section-image="photos" data-slide="6" data-photo="photo_train_on_bridge" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photos/photo_tower_night.jpg" data-section-image="photos" data-slide="7"
-                                data-photo="photo_tower_night" />
+                                alt="" src="./static/assets/photos/photo_tower_night.jpg" data-section-image="photos"
+                                data-slide="7" data-photo="photo_tower_night" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/photos/photo_leaf_macro.jpg" data-section-image="photos" data-slide="8"
-                                data-photo="photo_leaf_macro" />
-                            <p class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end">PHOTOS</p>
+                                alt="" src="./static/assets/photos/photo_leaf_macro.jpg" data-section-image="photos"
+                                data-slide="8" data-photo="photo_leaf_macro" />
+                            <p
+                                class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end" data-i18n="LNK_PHOTO_HEADER">
+                                PHOTOS</p>
                         </div>
                     </div>
                     <a class="hover:border-bg-blue w-[170px] xs:flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
@@ -286,7 +306,7 @@
                             <img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium ">pixey.org</p>
-                                <p class="text-base font-light ">See the photos like in instagram</p>
+                                <p class="text-base font-light " data-i18n="LNK_PHOTO_PIXEY">See the photos like in instagram</p>
                             </div>
                         </div>
                     </a>
@@ -296,7 +316,7 @@
                             <img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium ">instafops.net</p>
-                                <p class="text-base font-light ">Photos that more furry related</p>
+                                <p class="text-base font-light " data-i18n="LNK_PHOTO_INSTAFOPS">Photos that more furry related</p>
                             </div>
                         </div>
                     </a>
@@ -306,7 +326,7 @@
                             <img class="w-16 h-16" alt="" src="./static/assets/immich.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium ">wah.su/photos</p>
-                                <p class="text-base font-light ">View gallery like in google photos</p>
+                                <p class="text-base font-light " data-i18n="LNK_PHOTO_IMMICH">View gallery like in google photos</p>
                             </div>
                         </div>
                     </a>
@@ -340,13 +360,13 @@
                                 alt="" src="./static/assets/arts/art_cheeseoncheese.jpg" data-section-image="arts"
                                 data-slide="7" data-photo="art_cheeseoncheese" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
-                                alt="" src="./static/assets/arts/art_tail.jpg" data-section-image="arts"
-                                data-slide="8" data-photo="art_tail" />
+                                alt="" src="./static/assets/arts/art_tail.jpg" data-section-image="arts" data-slide="8"
+                                data-photo="art_tail" />
                             <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform ease-out duration-[var(--transform-duration,150ms)]"
                                 alt="" src="./static/assets/arts/art_newyear.jpg" data-section-image="arts"
                                 data-slide="9" data-photo="art_newyear" />
                             <p
-                                class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end">
+                                class="font-bold text-4xl p-[8px] w-full h-full bg-black bg-opacity-20 flex items-end justify-end" data-i18n="LNK_ARTS_HEADER">
                                 ARTS</p>
                         </div>
                     </div>
@@ -379,7 +399,7 @@
                     <div
                         class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
                         <div class="flex items-end justify-end w-full h-full bg-blue-500">
-                            <p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p>
+                            <p class="font-bold text-4xl p-[8px]" data-i18n="LNK_SOCIALS_HEADER">SOCIAL MEDIA</p>
                         </div>
                     </div>
                     <a class="hover:border-bg-blue w-full aspect-[2/1] border-transparent border-2 border-solid transition-[border-color] max-h-[182px] overflow-hidden rounded-lg"
@@ -442,7 +462,7 @@
                     <div
                         class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
                         <div class="flex items-end justify-end w-full h-full bg-black">
-                            <p class="font-bold text-4xl p-[8px]">PROJECTS</p>
+                            <p class="font-bold text-4xl p-[8px]" data-i18n="LNK_PROJECTS_HEADER">PROJECTS</p>
                         </div>
                     </div>
                     <a class="hover:border-bg-blue w-full aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
@@ -451,7 +471,7 @@
                             <img class="absolute inset-0 object-cover -z-10" alt="" src="./static/assets/ANIX.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium">Anix</p>
-                                <p class="text-base font-light">Unofficial web client for Anixart android app,
+                                <p class="text-base font-light" data-i18n="LNK_PROJECTS_ANIX">Unofficial web client for Anixart android app,
                                     made in Next.JS</p>
                             </div>
                         </div>
@@ -464,7 +484,7 @@
                                 alt="" src="./static/assets/TG_Photos.png" />
                             <div class="flex flex-col justify-end h-full gap-1">
                                 <p class="text-2xl font-medium">TG-Photos</p>
-                                <p class="text-base font-light">Telegram bot to use telegram as a Google
+                                <p class="text-base font-light" data-i18n="LNK_PROJECTS_TGP">Telegram bot to use telegram as a Google
                                     Photo alternative</p>
                             </div>
                         </div>
@@ -477,7 +497,7 @@
                                 alt="" src="./static/assets/WordGen.png" />
                             <div class="flex flex-col justify-end h-full gap-1">
                                 <p class="text-2xl font-medium">WordGen</p>
-                                <p class="text-base font-light">Random word generator inspired by @tsoding
+                                <p class="text-base font-light" data-i18n="LNK_PROJECTS_WG">Random word generator inspired by @tsoding
                                 </p>
                             </div>
                         </div>
@@ -488,7 +508,7 @@
                             class="relative flex flex-col justify-around w-full h-full p-2 overflow-hidden text-white bg-black">
                             <div class="flex flex-col justify-end h-full gap-1">
                                 <p class="text-2xl font-medium">furaffinity-dl</p>
-                                <p class="text-base font-light">Modification of the original project to
+                                <p class="text-base font-light" data-i18n="LNK_PROJECTS_FADL">Modification of the original project to
                                     add more functionality</p>
                             </div>
                         </div>
@@ -499,7 +519,7 @@
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/github-mark-white.png" />
                             <div class="flex flex-col justify-end gap-1">
                                 <p class="text-2xl font-medium">Github</p>
-                                <p class="text-base font-light">View my other repositories</p>
+                                <p class="text-base font-light" data-i18n="LNK_PROJECTS_GITHUB">View my other repositories</p>
                             </div>
                         </div>
                     </a>
@@ -511,7 +531,7 @@
                             <div class="absolute inset-0 bg-black -z-20"></div>
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium">wah.su</p>
-                                <p class="text-base font-light">My Self-Hosting endeavor</p>
+                                <p class="text-base font-light" data-i18n="LNK_PROJECTS_WAHSU">My Self-Hosting endeavor</p>
                             </div>
                         </div>
                     </a>
@@ -523,7 +543,7 @@
                     <div
                         class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
                         <div class="flex items-end justify-end w-full h-full bg-pink-600">
-                            <p class="font-bold text-4xl p-[8px]">CONTACT</p>
+                            <p class="font-bold text-4xl p-[8px]" data-i18n="LNK_CONTACT_HEADER">CONTACT</p>
                         </div>
                     </div>
                     <a class="hover:border-bg-blue w-[170px] xs:[flex-grow:1] aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
@@ -575,7 +595,7 @@
                         <div
                             class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
                             <div class="flex items-end justify-end w-full h-full bg-orange-400">
-                                <p class="font-bold text-4xl p-[8px] text-right">COLLECTIONS & FRIENDS</p>
+                                <p class="font-bold text-4xl p-[8px] text-right" data-i18n="LNK_FRIEND_HEADER">COLLECTIONS & FRIENDS</p>
                             </div>
                         </div>
                     </div>
@@ -585,7 +605,7 @@
                         <div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium">Red Pandas Stickers</p>
-                                <p class="text-base font-light">Telegram channel with red panda
+                                <p class="text-base font-light" data-i18n="LNK_COLLECTION_RPS">Telegram channel with red panda
                                     sticker packs</p>
                             </div>
                         </div>
@@ -596,7 +616,7 @@
                         <div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium">Red Panda Images</p>
-                                <p class="text-base font-light">3000+ Photos and Videos of a red pandas</p>
+                                <p class="text-base font-light" data-i18n="LNK_COLLECTION_RPI">3000+ Photos and Videos of a red pandas</p>
                             </div>
                         </div>
                     </a>
@@ -606,7 +626,7 @@
                         <div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium">blep stash</p>
-                                <p class="text-base font-light">VK Group of a photographer.
+                                <p class="text-base font-light" data-i18n="LNK_FRIEND_BLEP">VK Group of a photographer.
                                     City and
                                     Trains photography</p>
                             </div>
@@ -618,7 +638,7 @@
                         <div class="flex items-end w-full h-full gap-2 p-4 text-black bg-white">
                             <div class="flex flex-col gap-1">
                                 <p class="text-2xl font-medium">itc1205</p>
-                                <p class="text-base font-light">Github profile of another furry
+                                <p class="text-base font-light" data-i18n="LNK_FRIEND_ITC">Github profile of another furry
                                     programmer</p>
                             </div>
                         </div>
@@ -630,6 +650,8 @@
 
     </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/static/i18n/i18n.js b/static/i18n/i18n.js
new file mode 100644
index 0000000..689e04e
--- /dev/null
+++ b/static/i18n/i18n.js
@@ -0,0 +1,68 @@
+const linkRegexFull =
+  /\|% LINK='[.,#?=&a-zA-Z_:_\/]*' %\|[.,a-zA-Zа-яА-Я-!_ ]*\|% ENDLINK %\|/gim;
+const linkRegexFullNonGlobal =
+  /\|% LINK='[.,#?=&a-zA-Z_:_\/]*' %\|[.,a-zA-Zа-яА-Я-!_ ]*\|% ENDLINK %\|/im;
+function parseLink(string) {
+  const links = [...string.match(linkRegexFull)];
+  const linkRegexStart = /\|% LINK='[.,#?=&a-zA-Z_:_\/]*' %\|/;
+  for (let i = 0; i < links.length; i++) {
+    let tmp = links[i];
+    const href = tmp
+      .match(linkRegexStart)[0]
+      .replace("|%", "")
+      .replace("%|", "")
+      .split("=")[1]
+      .trim();
+    let lnk = "";
+    lnk = tmp.replace(
+      linkRegexStart,
+      `<a class="text-bg-pink hover:underline" href=${href} ${href.startsWith("http") ? "target='_blank' referrerpolicy='origin'" : ""}>`
+    );
+    lnk = lnk.replace("|% ENDLINK %|", `</a>`);
+    string = string.replace(linkRegexFullNonGlobal, lnk);
+  }
+  return string;
+}
+
+const i18nTags = document.querySelectorAll("[data-i18n]");
+const i18nStyles = document.querySelectorAll("[data-i18n-style]");
+function changeLanguage(lang) {
+  let strings = {};
+  let styles = {};
+  if (lang == "ru") {
+    strings = i18n_ru;
+    styles = i18n_ru_style;
+  }
+
+  for (let i = 0; i < i18nTags.length; i++) {
+    const element = i18nTags[i];
+    const id = element.getAttribute("data-i18n");
+    if (!strings[id]) {
+      continue;
+    }
+
+    if (linkRegexFull.test(strings[id])) {
+      element.innerHTML = parseLink(strings[id]);
+    } else {
+      element.innerHTML = strings[id];
+    }
+  }
+  for (let i = 0; i < i18nStyles.length; i++) {
+    const element = i18nStyles[i];
+    const id = element.getAttribute("data-i18n-style");
+    if (!styles[id]) {
+      continue;
+    }
+
+    element.style.cssText = styles[id];
+  }
+}
+
+function detectAndChangeLanguage() {
+  const userLang = window.navigator.language;
+  if (userLang.startsWith("ru")) {
+    changeLanguage("ru");
+  }
+}
+
+detectAndChangeLanguage();
diff --git a/static/i18n/strings/ru.js b/static/i18n/strings/ru.js
new file mode 100644
index 0000000..04dd38a
--- /dev/null
+++ b/static/i18n/strings/ru.js
@@ -0,0 +1,69 @@
+const i18n_ru = {
+  NAME: "КЕНТАЙ РАДИКУУМ",
+  PRONOUNCE: "Он",
+  SPECIES: "Красная Панда / Протоген",
+
+  // QUICK_BIO
+  QUICK_BIO_FURRY: "Фурри",
+  QUICK_BIO_CODER: "Программист",
+  QUICK_BIO_PHOTOGRAPHER: "Фотограф",
+  QUICK_BIO_ENTHUSIAST: "Селф-Хостинг Энтузиаст",
+  QUICK_BIO_LASTFM: "Сейчас слушает: ",
+
+  // BUTTONS
+  BTN_ABOUT_ME: "ОБО МНЕ",
+  BTN_OR: "или",
+  BTN_LINKS: "ССЫЛКИ",
+
+  // ABOUT ME
+  CARD_TITLE: "ОБО МНЕ",
+  CARD_TECH_ENTHUSIAST_TITLE: "Технический энтузиаст",
+  CARD_TECH_ENTHUSIAST_DESC:
+    "Мне нравится развиваться в области технологий, я увлечен разработкой программного обеспечения. Я люблю копаться в коде и изучать новое программное обеспечение, хотя железки меня тоже привлекают.",
+  CARD_PHOTOGRAPHER_TITLE: "Фотограф",
+  CARD_PHOTOGRAPHER_DESC:
+    "Я также увлекаюсь |% LINK='https://wah.su/photos' %|фотографией|% ENDLINK %| и с удовольствием делюсь своим прогрессом.",
+  CARD_SELFHOSTER_TITLE: "Самостоятельный хостинг",
+  CARD_SELFHOSTER_DESC:
+    "Я очень увлечен самостоятельным хостингом через мой проект |% LINK='https://home.wah.su' %|wah.su|% ENDLINK %|, который помогает мне погрузиться в управление серверами и хостинговыми платформами.",
+  CARD_MUSIC_TITLE: "Музыка",
+  CARD_MUSIC_DESC:
+    "Я слушаю много разной музыки, но в основном слушаю EDM / Happy Hardcore / Tech / Rock / Alternative. От таких исполнителей как: S3RL, Camellia, t+pazolite, BTMH, Saint Motel и других...",
+  CARD_SKILLS_TITLE: "Навыки",
+  CARD_SKILLS_FRONTEND: "Разработка фронт-енд",
+  CARD_SKILLS_BACKEND: "Разработка бэк-енд",
+  CARD_SKILLS_API: "API",
+  CARD_SKILLS_COLLAB: "Совместная работа",
+  CARD_SKILLS_DEPLOY: "Развёртывание",
+  CARD_READPANDA_TITLE: "Поклонник красных панд",
+  CARD_READPANDA_DESC:
+    "Я очень люблю красных панд и не могу насмотреться на них! Я собираю стикеры с красными пандами и делюсь ими в Telegram-канале |% LINK='https://t.me/red_panda_stickers' %|Red Panda Stickers|% ENDLINK %|. Кроме того, я собрал |% LINK='https://wahs.wah.su' %|коллекцию|% ENDLINK %| из более чем 3000 фотографий и видео с красными пандами.",
+  CARD_CONTACT_TITLE: "Связаться",
+  CARD_CONTACT_DESC:
+    "Не стесняйтесь связаться со мной в любое время! Способы связаться со мной через мессенджеры доступны в разделе |% LINK='#links' %|ссылок!|% ENDLINK %|.",
+  LNK_TITLE: "ССЫЛКИ",
+  LNK_PHOTO_HEADER: "ФОТОГРАФИИ",
+  LNK_PHOTO_PIXEY: "Смотри фото как в инстаграме",
+  LNK_PHOTO_INSTAFOPS: "Более фурри фото",
+  LNK_PHOTO_IMMICH: "Смотри фото как в Гугл Фото",
+  LNK_ARTS_HEADER: "АРТЫ",
+  LNK_SOCIALS_HEADER: "СОЦ. СЕТИ",
+  LNK_PROJECTS_HEADER: "ПРОЕКТЫ",
+  LNK_PROJECTS_ANIX:
+    "Неофициальный клиент для android приложения Anixart сделанный с помощью Next.js",
+  LNK_PROJECTS_TGP: "Телеграм бот для использования ТГ как гугл фото",
+  LNK_PROJECTS_WG: "Генератор слов вдохновлённый @tsoding",
+  LNK_PROJECTS_FADL: "Форк оригинального проекта для добавления новых функций",
+  LNK_PROJECTS_GITHUB: "Посмотреть мои другие репозитории",
+  LNK_PROJECTS_WAHSU: "Мой проект по селф-хосту",
+  LNK_CONTACT_HEADER: "СВЯЗАТЬСЯ",
+  LNK_FRIEND_HEADER: "ДРУЗЬЯ И КОЛЛЕКЦИИ",
+  LNK_COLLECTION_RPS: "ТГК для стикеров с красными пандами",
+  LNK_COLLECTION_RPI: "3000+ Фото и видео с красными пандами",
+  LNK_FRIEND_BLEP: "ВК Группа классного фотографа",
+  LNK_FRIEND_ITC: "GitHub профиль другого фурри-кодера",
+};
+
+const i18n_ru_style = {
+  CARD_SKILLS_STYLE: "--sm--mt:54px; --lg--mt:40px;",
+};
diff --git a/static/tailwind.css b/static/tailwind.css
index 02f0d07..8212041 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -698,22 +698,6 @@ video {
   margin-top: 0.25rem;
 }
 
-.-ml-4 {
-  margin-left: -1rem;
-}
-
-.-mt-8 {
-  margin-top: -2rem;
-}
-
-.-mt-6 {
-  margin-top: -1.5rem;
-}
-
-.-ml-2 {
-  margin-left: -0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -762,11 +746,6 @@ video {
   height: 100%;
 }
 
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
 .max-h-\[182px\] {
   max-height: 182px;
 }
@@ -825,21 +804,6 @@ video {
   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));
 }
 
-.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));
-}
-
-.translate-y-\[50\%\] {
-  --tw-translate-y: 50%;
-  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));
-}
-
-.translate-y-\[80\%\] {
-  --tw-translate-y: 80%;
-  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));
-}
-
 @keyframes bounce {
   0%, 100% {
     transform: translateY(-25%);
@@ -1021,6 +985,11 @@ video {
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#ffeb3c\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 235 60 / var(--tw-bg-opacity));
+}
+
 .bg-bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(18 27 44 / var(--tw-bg-opacity));
@@ -1076,14 +1045,8 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#ffeb3c\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 235 60 / var(--tw-bg-opacity));
-}
-
-.bg-slate-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+.bg-opacity-20 {
+  --tw-bg-opacity: 0.2;
 }
 
 .bg-opacity-40 {
@@ -1094,14 +1057,6 @@ video {
   --tw-bg-opacity: 0.5;
 }
 
-.bg-opacity-10 {
-  --tw-bg-opacity: 0.1;
-}
-
-.bg-opacity-20 {
-  --tw-bg-opacity: 0.2;
-}
-
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1166,10 +1121,6 @@ video {
   text-align: right;
 }
 
-.align-text-bottom {
-  vertical-align: text-bottom;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1200,11 +1151,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1236,72 +1182,19 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
 
-.mix-blend-multiply {
-  mix-blend-mode: multiply;
-}
-
-.mix-blend-exclusion {
-  mix-blend-mode: exclusion;
-}
-
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-inner {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-black {
-  --tw-shadow-color: #000;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .brightness-50 {
   --tw-brightness: brightness(.5);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.invert {
-  --tw-invert: invert(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.backdrop-blur-lg {
-  --tw-backdrop-blur: blur(16px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-invert {
-  --tw-backdrop-invert: invert(100%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .transition-\[border-color\] {
   transition-property: border-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1422,8 +1315,8 @@ body {
     top: -6rem;
   }
 
-  .sm\:-mt-\[86px\] {
-    margin-top: -86px;
+  .sm\:-mt-\[var\(--sm--mt\)\] {
+    margin-top: calc(var(--sm--mt) * -1);
   }
 
   .sm\:mt-0 {
@@ -1553,8 +1446,8 @@ body {
 }
 
 @media (min-width: 1024px) {
-  .lg\:-mt-\[60px\] {
-    margin-top: -60px;
+  .lg\:-mt-\[var\(--lg--mt\)\] {
+    margin-top: calc(var(--lg--mt) * -1);
   }
 
   .lg\:mt-28 {