feat: add project links

index.html

@@ -169,6 +169,52 @@
                 <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
                     <p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
                 </div>
+                <a href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
+                    <div class="relative w-[416px] h-[180px] flex items-end px-2 py-4">
+                        <img class="absolute [filter:darken(10%)] inset-0 w-[416px] h-[180px] object-cover -z-10" alt="" src="./static/assets/ANIX.png"/>
+                        <div class="flex flex-col gap-1">
+                            <p class="font-medium text-[24px] leading-[1]">Anix</p>
+                            <p class="font-light text-[14px] leading-[1]">Unofficial web client for Anixart android app, made in Next.JS</p>
+                        </div>
+                    </div>
+                </a>
+                <div class="flex flex-wrap gap-4">
+                    <a href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
+                        <div class="bg-[#0E1621] text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
+                            <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]" alt="" src="./static/assets/TG_Photos.png"/>
+                            <div class="flex flex-col justify-end h-full gap-1">
+                                <p class="font-medium text-[24px] leading-[1]">TG-Photos</p>
+                                <p class="font-light text-[14px] leading-[1]">Telegram bot to use telegram as a Google Photo alternative</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
+                        <div class="bg-[#F5F5F5] text-black w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
+                            <img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[200px] object-cover" alt="" src="./static/assets/WordGen.png"/>
+                            <div class="flex flex-col justify-end h-full gap-1">
+                                <p class="font-medium text-[24px] leading-[1]">WordGen</p>
+                                <p class="font-light text-[14px] leading-[1]">Random word generator inspired by @tsoding</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
+                        <div class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden">
+                            <div class="flex flex-col justify-end h-full gap-1">
+                                <p class="font-medium text-[24px] leading-[1]">furaffinity-dl</p>
+                                <p class="font-light text-[14px] leading-[1]">Modification of the original project to add more functionality</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a href="https://github.com/radiquum" target="_blank" referrerpolicy="origin">
+                        <div class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around">
+                            <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="font-medium text-[24px] leading-[1]">Github</p>
+                                <p class="font-light text-[14px] leading-[1]">View my other repositories</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
             </div>
             <!-- Contact and Friends links Links -->
             <div class="flex flex-col w-[416px] gap-8">

static/tailwind.css

@@ -616,6 +616,26 @@ video {
   top: 0px;
 }
 
+.bottom-\[50\%\] {
+  bottom: 50%;
+}
+
+.right-\[25\%\] {
+  right: 25%;
+}
+
+.right-\[20\%\] {
+  right: 20%;
+}
+
+.right-\[15\%\] {
+  right: 15%;
+}
+
+.bottom-\[35\%\] {
+  bottom: 35%;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -693,6 +713,10 @@ video {
   aspect-ratio: 1/1;
 }
 
+.aspect-\[167\/53\] {
+  aspect-ratio: 167/53;
+}
+
 .h-\[37px\] {
   height: 37px;
 }
@@ -765,6 +789,38 @@ video {
   height: 376px;
 }
 
+.h-\[115px\] {
+  height: 115px;
+}
+
+.h-\[125px\] {
+  height: 125px;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[55px\] {
+  height: 55px;
+}
+
+.h-\[67px\] {
+  height: 67px;
+}
+
+.h-\[70px\] {
+  height: 70px;
+}
+
+.h-\[80px\] {
+  height: 80px;
+}
+
+.h-\[70\] {
+  height: 70;
+}
+
 .max-h-\[40vh\] {
   max-height: 40vh;
 }
@@ -882,6 +938,14 @@ video {
   width: fit-content;
 }
 
+.w-\[173px\] {
+  width: 173px;
+}
+
+.w-\[163px\] {
+  width: 163px;
+}
+
 .max-w-\[1200px\] {
   max-width: 1200px;
 }
@@ -974,6 +1038,10 @@ video {
   gap: 2rem;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1033,6 +1101,16 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#0E1621\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 22 33 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#F5F5F5\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1083,6 +1161,11 @@ video {
   padding-bottom: 2rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1198,6 +1281,10 @@ video {
   transition-duration: 150ms;
 }
 
+.\[filter\:darken\(10\%\)\] {
+  filter: darken(10%);
+}
+
 @font-face {
   font-family: 'Inter';