mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-09-03 21:15:36 +05:00
Compare commits
No commits in common. "0c799a2fb88ac45c02fb17ce677a955490f019a5" and "3fb066fb1bdc8685aa9162289225137b58549828" have entirely different histories.
0c799a2fb8
...
3fb066fb1b
157 changed files with 7188 additions and 4663 deletions
93
.github/workflows/publish.yml
vendored
Normal file
93
.github/workflows/publish.yml
vendored
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
# Sample workflow for building and deploying a Next.js site to GitHub Pages
|
||||
#
|
||||
# To get started with Next.js see: https://nextjs.org/docs/getting-started
|
||||
#
|
||||
name: Deploy Next.js site to Pages
|
||||
|
||||
on:
|
||||
# Runs on pushes targeting the default branch
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- name: Detect package manager
|
||||
id: detect-package-manager
|
||||
run: |
|
||||
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
|
||||
echo "manager=yarn" >> $GITHUB_OUTPUT
|
||||
echo "command=install" >> $GITHUB_OUTPUT
|
||||
echo "runner=yarn" >> $GITHUB_OUTPUT
|
||||
exit 0
|
||||
elif [ -f "${{ github.workspace }}/package.json" ]; then
|
||||
echo "manager=npm" >> $GITHUB_OUTPUT
|
||||
echo "command=ci" >> $GITHUB_OUTPUT
|
||||
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
|
||||
exit 0
|
||||
else
|
||||
echo "Unable to determine package manager"
|
||||
exit 1
|
||||
fi
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
cache: ${{ steps.detect-package-manager.outputs.manager }}
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v5
|
||||
with:
|
||||
# Automatically inject basePath in your Next.js configuration file and disable
|
||||
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
|
||||
#
|
||||
# You may remove this line if you want to manage the configuration yourself.
|
||||
static_site_generator: next
|
||||
- name: Restore cache
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
.next/cache
|
||||
# Generate a new cache whenever packages or source files change.
|
||||
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
|
||||
# If source files changed but packages didn't, rebuild from a prior cache.
|
||||
restore-keys: |
|
||||
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
|
||||
- name: Install dependencies
|
||||
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
|
||||
- name: Build with Next.js
|
||||
run: ${{ steps.detect-package-manager.outputs.runner }} next build
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./out
|
||||
|
||||
# Deployment job
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
42
.gitignore
vendored
42
.gitignore
vendored
|
|
@ -1 +1,41 @@
|
|||
node_modules
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
|
|
|||
1
CNAME
1
CNAME
|
|
@ -1 +0,0 @@
|
|||
radiquum.wah.su
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
<!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="Kentai Radiquum is a character of a red panda species, his fur is pink with blue and white accents. He is friendly but introverted. ">
|
||||
<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/Kentai_Radiquum.html">
|
||||
<meta property="og:image" content="https://radiquum.wah.su/static/assets/characters/thumb/KentaiRadiquum.jpg">
|
||||
<meta property="og:image:type" content="image/jpg">
|
||||
<meta property="og:description"
|
||||
content="Kentai Radiquum is a character of a red panda species, his fur is pink with blue and white accents. He is friendly but introverted. ">
|
||||
<meta property="og:image:width" content="1120">
|
||||
<meta property="og:image:height" content="800">
|
||||
|
||||
<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="Kentai Radiquum is a character of a red panda species, his fur is pink with blue and white accents. He is friendly but introverted. ">
|
||||
<meta name="twitter:image" content="https://radiquum.wah.su/static/assets/characters/thumb/KentaiRadiquum.jpg">
|
||||
<script defer data-domain="radiquum.wah.su" data-api="https://a.wah.su/api/event" src="https://a.wah.su/js/script.outbound-links.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="overflow-x-hidden bg-bg-black">
|
||||
<header class="sticky top-0 left-0 w-full text-white rounded-b-lg 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.jpg" 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>
|
||||
|
||||
<button
|
||||
class="fixed z-50 flex items-center justify-center w-16 h-16 rounded-full shadow-md bottom-8 right-8 bg-bg-pink"
|
||||
id="downloadBtn" onclick="showMenu()">
|
||||
<img alt="" src="./static/assets/icon--download.svg" class="w-8" id="downloadBtn_icon" />
|
||||
|
||||
<div class="relative transition-all scale-0 -rotate-90 translate-x-4 z-100" id="downloadMenu">
|
||||
<div class="absolute -right-4 bottom-12 w-max">
|
||||
<a href="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf"
|
||||
download="Kentai_Radiquum.pdf"
|
||||
data-i18n-href="FULL_CHR_KR_DOWNLOAD_PDF_HREF"
|
||||
class="flex items-center justify-start w-full gap-2 p-2 px-4 text-white rounded-lg bg-bg-pink">
|
||||
<img alt="" src="./static/assets/icon--picture_as_pdf.svg" class="w-8 h-8" />
|
||||
<p class="text-lg" data-i18n="FULL_CHR_KR_DOWNLOAD_PDF">Download PDF</p>
|
||||
</a>
|
||||
<a href="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png" download="Kentai_Radiquum.png"
|
||||
class="flex items-center justify-start w-full gap-2 p-2 px-4 mt-2 text-white rounded-lg bg-bg-pink">
|
||||
<img alt="" src="./static/assets/icon--image.svg" class="w-8 h-8" />
|
||||
<p class="text-lg" data-i18n="FULL_CHR_KR_DOWNLOAD_IMG">Download Reference</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="container flex flex-col gap-16 px-4 py-8 mx-auto text-white">
|
||||
<div class="flex flex-col gap-8">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_REF_TITLE">Reference</h1>
|
||||
<img src="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png" alt="Kentai Radiquum" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-8">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_COLORS_TITLE">Colors</h1>
|
||||
<div class="flex flex-col gap-4">
|
||||
<p data-i18n="FULL_CHR_KR_COLORS_CHARACTER" class="text-xl font-light sm:text-3xl">Character</p>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full h-[100px] flex-1 bg-[#ffb1ce] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#91d1fd] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#ffffff] "></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<p data-i18n="FULL_CHR_KR_COLORS_CLOTHES" class="text-xl font-light sm:text-3xl">Clothes</p>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full h-[100px] flex-1 bg-[#492020] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#1c1a1d] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#39373b] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#494749] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#69676a] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#98959a] "></div>
|
||||
<div class="w-full h-[100px] flex-1 bg-[#ffffff] "></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_TITLE">Description</h1>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_NAME">Character Name: Kentai Radiquum</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_SPEC">Species: Red Panda</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_GEN">Gender: Male</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_BUI">Height and Build: Average height, slim build</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_APP_TITLE">Appearance</h1>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_APP_TEXT">His fur is pink with blue on his paws and hair, while his chest, paw tips, and tail lines stand out in white. He wears a stylish, slightly worn black denim jacket. His black-and-gray cargo pants with white straps complete the look, reflecting his practical nature and penchant for order (his pockets always have room for essentials like USB drives or candy). Around his neck, he sports a burgundy leather collar with a metal tag, showcasing his individuality. His outfit is rounded off with a T-shirt that boasts an amusingly honest caption: "I'm a programmer, I go click click click on the computer"</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_PERS_TITLE">Personality</h1>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_PERS_TEXT">Kentai is friendly but introverted. He values personal space and prefers socializing in small, trusted circles. His sarcastic sense of humor sometimes gives the impression of being reserved, but it conceals a deep kindness. He is curious, loves exploring new things, especially in the field of technology, and has a sharp mind. While he may seem calm outwardly, there’s a storm of ideas brewing inside him, which he’s constantly working to bring to life.</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_HOB_TITLE">Hobbies</h1>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HOB_PR">- Programming: Kentai practically lives and breathes code. To him, programming is not just work but an art form.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HOB_MU">- Music: A big fan of artists like S3RL, Camellia, Smash Into Pieces, Linkin Park, Porter Robinson, Saint Motel, and others.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HOB_PL">- Plush Toys: He has a special fondness for plush toys. His collection includes two red pandas and one large regular panda. These toys are a source of comfort and joy for him.</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_HAB_TITLE">Habits</h1>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_1">- Loves working at his own pace and often dives deeply into his projects.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_2">- When deeply focused, his tail gently wags.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_3">- Sometimes adjusts his collar while pondering a tough problem.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_4">- Enjoys listening to music while working.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_5">- Occasionally hums melodies from his favorite tracks, especially when feeling relaxed.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_6">- In debates, he tends to gesture rapidly.</p>
|
||||
<p class="text-xl font-light sm:text-3xl" data-i18n="FULL_CHR_KR_DESC_HAB_7">- Enjoys "cozy moments" — relaxing with one of his plush toys, wrapped in a blanket, and listening to music.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./static/i18n/strings/ru.js"></script>
|
||||
<script src="./static/i18n/i18n.js"></script>
|
||||
<script src="./static/charactersMenu.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
36
README.md
Normal file
36
README.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
151
app/Section/Characters.tsx
Normal file
151
app/Section/Characters.tsx
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
import { CharacterImage } from "../components/CharacterImage";
|
||||
|
||||
import { useInView } from "motion/react";
|
||||
import { useRef } from "react";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/furaffinity.svg",
|
||||
text: "Furaffinity",
|
||||
desc: "radiquum",
|
||||
url: "https://furaffinity.net/user/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/itaku.svg",
|
||||
text: "Itaku",
|
||||
desc: "radiquum",
|
||||
url: "https://itaku.ee/profile/radiquum",
|
||||
},
|
||||
];
|
||||
|
||||
export const Characters = () => {
|
||||
const imagesRedPandaRef = useRef(null);
|
||||
const imagesRedPandaIsInView = useInView(imagesRedPandaRef, { once: true });
|
||||
const imagesProtogenRef = useRef(null);
|
||||
const imagesProtogenIsInView = useInView(imagesProtogenRef, { once: true });
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
|
||||
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#ffb1cd]/5 flex-1">
|
||||
Characters
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
{links.map((item) => (
|
||||
<Link
|
||||
href={item.url}
|
||||
key={`characters.link.${item.text}`}
|
||||
className="flex-1"
|
||||
>
|
||||
<IconWithText
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
backgroundColor={"#ffb1cd"}
|
||||
backgroundOpacity={"5%"}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 mt-2 md:hidden">
|
||||
<Link href="/character/kentai">
|
||||
<CharacterImage
|
||||
name="Kentai"
|
||||
species="Red Panda"
|
||||
gender="Male"
|
||||
image="/images/red_panda.png"
|
||||
/>
|
||||
</Link>
|
||||
<CharacterImage
|
||||
name=""
|
||||
species="Protogen"
|
||||
gender="Male"
|
||||
image="/images/protogen.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-col gap-8 mt-2 hidden md:flex relative">
|
||||
<div className="flex gap-4">
|
||||
<CharacterImage
|
||||
name="Kentai"
|
||||
species="Red Panda"
|
||||
gender="Male"
|
||||
image="/images/red_panda.png"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-5xl">Kentai</p>
|
||||
<p className="mt-2 text-3xl" ref={imagesRedPandaRef}>
|
||||
Red Panda
|
||||
</p>
|
||||
<p className="text-3xl">Male</p>
|
||||
<div className="flex-1"></div>
|
||||
<Link
|
||||
href="/character/kentai"
|
||||
className="rounded-full bg-[#491f1f] hover:bg-[#601f1f] transition-colors px-4 py-2 text-3xl text-center"
|
||||
>
|
||||
about
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="top-0 left-[488px] absolute hidden xl:flex gap-4 transition-transform duration-1000 ease-out"
|
||||
style={{
|
||||
transform: !imagesRedPandaIsInView
|
||||
? "translateX(100vw)"
|
||||
: "translateX(0)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/red_panda2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/red_panda3.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 xl:flex-row-reverse">
|
||||
<CharacterImage
|
||||
name=""
|
||||
species="Protogen"
|
||||
gender="Male"
|
||||
image="/images/protogen.png"
|
||||
/>
|
||||
<div className="flex flex-col xl:text-right">
|
||||
<p className="mt-2 text-3xl">Protogen</p>
|
||||
<p className="text-3xl" ref={imagesProtogenRef}>
|
||||
Male
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="bottom-0 left-[-228px] absolute hidden xl:flex gap-4 transition-transform duration-1000 ease-out"
|
||||
style={{
|
||||
transform: !imagesProtogenIsInView
|
||||
? "translateX(-100vw)"
|
||||
: "translateX(0)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/protogen3.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/protogen2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
64
app/Section/Contacts.tsx
Normal file
64
app/Section/Contacts.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Telegram",
|
||||
desc: "@radiquum",
|
||||
url: "https://t.me/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ic_baseline-discord.svg",
|
||||
text: "Discord",
|
||||
desc: "radiquum",
|
||||
url: null,
|
||||
},
|
||||
{
|
||||
icon: "/icons/material-symbols_mail.svg",
|
||||
text: "E-Mail",
|
||||
desc: "radiquum@wah.su",
|
||||
url: "mailto:radiquum@wah.su",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_vk-fill.svg",
|
||||
text: "Vkontakte",
|
||||
desc: "@radiquum",
|
||||
url: "https://vk.com/radiquum",
|
||||
},
|
||||
];
|
||||
|
||||
export const Contacts = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#1c1e20]/25">Contacts</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
|
||||
{links.map((item) => {
|
||||
if (item.url) {
|
||||
return (
|
||||
<Link href={item.url} key={`contacts.link.${item.text}`}>
|
||||
<IconWithText
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
backgroundColor={"#1c1e20"}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<IconWithText
|
||||
key={`socials.${item.text}`}
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
backgroundColor={"#1c1e20"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
60
app/Section/Footer.tsx
Normal file
60
app/Section/Footer.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Section } from "../components/Section";
|
||||
|
||||
const artists = [
|
||||
{
|
||||
name: "sleepy_muzzle",
|
||||
url: "https://t.me/rerandpulseup",
|
||||
},
|
||||
{
|
||||
name: "yoshi_ruko",
|
||||
url: "https://t.me/yoshi_ruko",
|
||||
},
|
||||
{
|
||||
name: "ketfox",
|
||||
url: "https://vk.com/ketfox18",
|
||||
},
|
||||
{
|
||||
name: "whizzie",
|
||||
url: "https://bsky.app/profile/whizzie.bsky.social",
|
||||
},
|
||||
];
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<div className="text-lg p-4 bg-[#c8e8fe]/5 rounded-t-4xl md:rounded-t-[128px] xl:rounded-t-4xl 2xl:rounded-t-[128px]">
|
||||
<Section>
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-y-4">
|
||||
<div className="flex flex-col lg:flex-row gap-x-1">
|
||||
Arts by:
|
||||
<div className="flex gap-x-4 flex-wrap">
|
||||
{artists.map((item) => (
|
||||
<a
|
||||
href={item.url}
|
||||
key={`footer.artist.${item.name}`}
|
||||
className="hover:underline"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
Font: LT Superior by
|
||||
<a
|
||||
href="https://lyonstype4.wixsite.com/homepage"
|
||||
className="hover:underline"
|
||||
>
|
||||
LyonsType
|
||||
</a>
|
||||
<a
|
||||
href="/fonts/LTSuperior-Mar2025/OFL.txt"
|
||||
className="hover:underline"
|
||||
>
|
||||
(License)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
25
app/Section/Intro.tsx
Normal file
25
app/Section/Intro.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export const Intro = () => {
|
||||
const [isAnimated, setIsAnimated] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsAnimated(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute -bottom-24 left-0 right-0 top-0 -z-10 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:16px_16px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_90%,transparent_100%)]"></div>
|
||||
<div className="flex flex-col mx-auto max-w-fit md:items-center justify-center h-fit py-16 gap-4">
|
||||
<h1 className="text-4xl md:text-8xl font-medium">Hi, I'm <span className="bg-clip-text bg-gradient-to-br from-[#FFB1CD] via-[#C8E8FE] to-white text-transparent font-bold">Radiquum</span></h1>
|
||||
<div className="flex flex-col lg:flex-row lg:gap-8 overflow-hidden">
|
||||
<p className={`text-2xl md:text-4xl text-[#C8E8FE] ${isAnimated ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"} transition-[transform_opacity] duration-1000 ease-out`}>Developer</p>
|
||||
<p className={`text-2xl md:text-4xl text-[#FF8686] ${isAnimated ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"} transition-[transform_opacity] duration-1000 ease-out delay-150`}>Amateur Photographer</p>
|
||||
<p className={`text-2xl md:text-4xl text-[#FF851A] ${isAnimated ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"} transition-[transform_opacity] duration-1000 ease-out delay-300`}>Self-Hosting Admirer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
63
app/Section/Photos.tsx
Normal file
63
app/Section/Photos.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Section } from "../components/Section";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { EmblaOptionsType } from "embla-carousel";
|
||||
import EmblaCarousel from "../components/Photos.Carousel";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Telegram",
|
||||
desc: "@photowah",
|
||||
url: "https://t.me/photowah",
|
||||
},
|
||||
{
|
||||
icon: "/icons/simple-icons_immich.svg",
|
||||
text: "Gallery",
|
||||
desc: "wah.su/photos",
|
||||
url: "https://wah.su/photos",
|
||||
},
|
||||
];
|
||||
|
||||
const OPTIONS: EmblaOptionsType = { loop: true };
|
||||
const SLIDES = [
|
||||
"/images/photos/2024-06-14T19_32_04_024.JPG",
|
||||
"/images/photos/2024-06-17T18_55_55_030.JPG",
|
||||
"/images/photos/2024-06-17T19_44_15_068.JPG",
|
||||
"/images/photos/2024-06-17T19_48_32_074.JPG",
|
||||
"/images/photos/2024-06-22T20_17_57_001.JPG",
|
||||
"/images/photos/image_2024-06-02_16-55-04.png",
|
||||
"/images/photos/IMG_20230604_043911_43.JPG",
|
||||
"/images/photos/IMG_20240710_225123.jpg",
|
||||
"/images/photos/IMG_20240710_225448.jpg",
|
||||
"/images/photos/IMG_20230602_190558.JPG",
|
||||
"/images/photos/IMG_20230603_175135.JPG",
|
||||
];
|
||||
|
||||
export const Photos = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Section>
|
||||
<div className="flex flex-col gap-2 md:flex-row md:justify-between md:items-center">
|
||||
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#b1ffcd]/5 flex-1">Photos</h2>
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
{links.map((item) => (
|
||||
<Link href={item.url} key={`photos.link.${item.text}`} className="flex-1">
|
||||
<IconWithText
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
backgroundColor={"#b1ffcd"}
|
||||
backgroundOpacity={"5%"}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
<EmblaCarousel slides={SLIDES} options={OPTIONS} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
91
app/Section/Projects.tsx
Normal file
91
app/Section/Projects.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import { Section } from "../components/Section";
|
||||
import { ProjectLink } from "../components/ProjectLink";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "Anix",
|
||||
desc: "Unofficial web client for anixart",
|
||||
url: "https://github.com/radiquum/AniX",
|
||||
preview: [
|
||||
"/images/projects/anix/1.jpg",
|
||||
"/images/projects/anix/2.png",
|
||||
"/images/projects/anix/3.png",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "Furaffinity-dl",
|
||||
desc: "Fork with additional functionality",
|
||||
url: "https://github.com/radiquum/furaffinity-dl",
|
||||
preview: [
|
||||
"/images/projects/fadl.png",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "TG-Photos",
|
||||
desc: "Google Photo like bot for Telegram",
|
||||
url: "https://github.com/radiquum/TG-Photos",
|
||||
preview: [
|
||||
"/images/projects/tgp/1.png",
|
||||
"/images/projects/tgp/2.png",
|
||||
"/images/projects/tgp/3.png",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "TIG",
|
||||
desc: "Generate images from text",
|
||||
url: "https://github.com/radiquum/TIG",
|
||||
preview: [
|
||||
"/images/projects/tig/1.png",
|
||||
"/images/projects/tig/2.png",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "GitHub",
|
||||
desc: "Other Projects",
|
||||
url: "https://github.com/radiquum",
|
||||
preview: [
|
||||
"/images/projects/gh.png",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "/icons/wahsu.svg",
|
||||
text: "wah.su",
|
||||
desc: "Self-Hosting project",
|
||||
url: "https://wah.su",
|
||||
preview: [
|
||||
"/images/projects/wah-su.png",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Red Pandas Stickers",
|
||||
desc: "Collection of Red Panda sticker packs",
|
||||
url: "https://t.me/red_panda_stickers",
|
||||
preview: [
|
||||
"/images/projects/rps/1.jpg",
|
||||
"/images/projects/rps/2.jpg",
|
||||
"/images/projects/rps/3.jpg",
|
||||
"/images/projects/rps/4.jpg",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const Projects = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#101316]/5">
|
||||
Projects
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
|
||||
{links.map((item) => (
|
||||
<ProjectLink key={`projects.link.${item.text}`} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
72
app/Section/Skills.tsx
Normal file
72
app/Section/Skills.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { Section } from "../components/Section";
|
||||
|
||||
const skills = {
|
||||
"Front-end": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"TypeScript",
|
||||
"React",
|
||||
"Next.js",
|
||||
"Tailwind CSS",
|
||||
"Django",
|
||||
"Flask",
|
||||
],
|
||||
"Back-end": ["Node.js", "Express.js", "FastAPI"],
|
||||
API: [
|
||||
"REST",
|
||||
"Postman/Hoppscotch",
|
||||
// "Swagger",
|
||||
"mitmproxy",
|
||||
"HTTP Toolkit",
|
||||
],
|
||||
Collaboration: ["Git", "GitHub"],
|
||||
Deployment: [
|
||||
"Docker",
|
||||
"Docker-compose",
|
||||
"Vercel",
|
||||
"GitHub Actions",
|
||||
"Cloudflare Workers & Pages",
|
||||
],
|
||||
Tools: ["Figma", "Adobe Photoshop", "Cloudflare DNS"],
|
||||
};
|
||||
|
||||
export const Skills = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#101316]/25 flex-1">Skills</h2>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col gap-2 xl:grid-row">
|
||||
{Object.entries(skills).map(([category, skills], index) => {
|
||||
if (index < 3)
|
||||
return (
|
||||
<div key={`skills.${category}`} className="border-1 border-white/5 bg-[#101316]/25 rounded-xl px-3 py-2">
|
||||
<h3 className="text-2xl md:text-3xl">{category}</h3>
|
||||
<div className="flex gap-x-4 flex-wrap">
|
||||
{skills.map((skill) => (
|
||||
<p key={skill}>{skill}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 xl:grid-row">
|
||||
{Object.entries(skills).map(([category, skills], index) => {
|
||||
if (index > 2)
|
||||
return (
|
||||
<div key={`skills.${category}`} className="border-1 border-white/5 bg-[#101316]/25 rounded-xl px-3 py-2">
|
||||
<h3 className="text-2xl md:text-3xl">{category}</h3>
|
||||
<div className="flex gap-x-4 flex-wrap">
|
||||
{skills.map((skill) => (
|
||||
<p key={skill}>{skill}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
63
app/Section/Socials.tsx
Normal file
63
app/Section/Socials.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/uim_twitter.svg",
|
||||
text: "Twitter",
|
||||
desc: "@radiquum",
|
||||
url: "https://x.com/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_bluesky-fill.svg",
|
||||
text: "BlueSky",
|
||||
desc: "@radiquum.wah.su",
|
||||
url: "https://bsky.app/profile/radiquum.wah.su",
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_mastodon.svg",
|
||||
text: "Mastodon",
|
||||
desc: "@radiquum@furry.engineer",
|
||||
url: "https://furry.engineer/@radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Telegram",
|
||||
desc: "@radiquumprojects",
|
||||
url: "https://t.me/radiquumprojects",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_vk-fill.svg",
|
||||
text: "Vkontakte",
|
||||
desc: "@radiquum",
|
||||
url: "https://vk.com/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_pixelfed-fill.svg",
|
||||
text: "Pixey",
|
||||
desc: "@radiquum@pixey.org",
|
||||
url: "https://pixey.org/@radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_pixelfed-fill.svg",
|
||||
text: "Instafops",
|
||||
desc: "@radiquwum@Instafops.net",
|
||||
url: "https://instafops.net/@radiquwum",
|
||||
},
|
||||
];
|
||||
|
||||
export const Socials = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#161213]/25">Socials</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
|
||||
{links.map((item) => (
|
||||
<Link href={item.url} key={`socials.link.${item.text}`}>
|
||||
<IconWithText icon={item.icon} text={item.text} desc={item.desc} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
168
app/character/kentai/page.tsx
Normal file
168
app/character/kentai/page.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
import type { Metadata } from "next";
|
||||
import { CharacterColor } from "@/app/components/CharacterColor";
|
||||
import Link from "next/link";
|
||||
const CharacterColors = {
|
||||
Body: ["#ffb1ce", "#91d1fd", "#ffffff"],
|
||||
Clothes: ["#492020", "#1c1a1d", "#39373b", "#494749", "#69676a", "#98959a"],
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Kentai Radiquum",
|
||||
description:
|
||||
"Character page. \
|
||||
Kentai is a friendly yet introverted red panda who values his quiet space and prefers meaningful interactions over large crowds. \
|
||||
Curious by nature and sharp-minded, he has a deep love for technology and is always eager to explore something new. While he keeps a low profile, those close to him know him as thoughtful, creative, and quietly expressive.",
|
||||
openGraph: {
|
||||
images: [
|
||||
{
|
||||
url: "https://radiquum.wah.su/characters/kentai_redpanda_thumb.jpg",
|
||||
width: 1120,
|
||||
height: 800,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function CharacterKentai() {
|
||||
return (
|
||||
<main className="pb-16 overflow-hidden">
|
||||
<div className="bg-[#131314] rounded-b-4xl md:rounded-b-[128px]">
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<div>
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
|
||||
<img
|
||||
alt="Reference"
|
||||
src="/characters/kentai_redpanda_thumb.jpg"
|
||||
className="rounded-xl"
|
||||
/>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h2 className="text-5xl">Info</h2>
|
||||
<div>
|
||||
<p className="text-2xl">Name: Kentai Radiquum</p>
|
||||
<p className="text-2xl">Species: Red Panda</p>
|
||||
<p className="text-2xl">Male, average height, slim build</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<h2 className="text-5xl -mb-4">Colors</h2>
|
||||
{Object.entries(CharacterColors).map(([category, colors]) => (
|
||||
<div key={`color.${category}`}>
|
||||
<h2 className="text-2xl">{category}</h2>
|
||||
<div className="mt-2 grid grid-cols-3 gap-2">
|
||||
{colors.map((color) => (
|
||||
<CharacterColor
|
||||
color={color}
|
||||
key={`color.${category}.${color}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<p className="text-2xl">
|
||||
Kentai is a friendly yet introverted red panda who values his quiet
|
||||
space and prefers meaningful interactions over large crowds. Curious
|
||||
by nature and sharp-minded, he has a deep love for technology and is
|
||||
always eager to explore something new. While he keeps a low profile,
|
||||
those close to him know him as thoughtful, creative, and quietly
|
||||
expressive.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-4">
|
||||
<div className="border-1 border-white/5 bg-[#161224]/5 rounded-xl px-8 py-4">
|
||||
<h2 className="text-5xl text-center">Hobbies</h2>
|
||||
<ul className="list-disc mt-2">
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
Programming — not just a skill, but a form of self-expression
|
||||
and problem-solving he deeply enjoys.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
Photography — capturing small details and cozy moments from
|
||||
his world.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
Plush Toy Collecting — he has a soft spot for plushies,
|
||||
especially red pandas. His collection brings him comfort and
|
||||
emotional grounding.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="border-1 border-white/5 bg-[#132416]/5 rounded-xl px-8 py-4">
|
||||
<h2 className="text-5xl text-center">Habits</h2>
|
||||
<ul className="list-disc mt-2">
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
His tail gently wags when he's fully absorbed in
|
||||
something.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
Tugs or adjusts his collar when thinking through a tricky
|
||||
problem.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
Always has music playing while he works, and sometimes hums
|
||||
along without noticing.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="text-2xl">
|
||||
Loves curling up in a blanket with a plush toy and relaxing to
|
||||
music — his version of peace.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="fixed left-4 bottom-4">
|
||||
<Link href="/" className="min-w-fit min-h-fit group">
|
||||
<div className="p-4 border-1 rounded-full backdrop-blur-md border-white/5 bg-[#161213]/25 flex gap-2 w-[66px] hover:w-[128px] relative transition-[width] duration-150 ease-in-out overflow-hidden">
|
||||
<img
|
||||
alt=""
|
||||
src="/icons/mdi_arrow-left.svg"
|
||||
className="w-8 h-8 invert"
|
||||
/>
|
||||
<div className="relative w-0 opacity-0 group-hover:opacity-100 transition-[opacity]">
|
||||
<span className="text-2xl absolute">Back</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</nav>
|
||||
<nav className="fixed right-4 bottom-4">
|
||||
<a
|
||||
className="min-w-fit min-h-fit group"
|
||||
href="/characters/Kentai_Radiquum_RedPanda/Kentai_Radiquum_RedPanda.zip"
|
||||
download={true}
|
||||
>
|
||||
<div className="p-4 border-1 rounded-full backdrop-blur-md border-white/5 bg-[#161213]/25 flex gap-2 w-[66px] hover:w-[180px] relative transition-[width] duration-150 ease-in-out overflow-hidden">
|
||||
<img
|
||||
alt=""
|
||||
src="/icons/mdi_download.svg"
|
||||
className="ml-[2px] w-8 h-8 invert"
|
||||
/>
|
||||
<div className="relative w-0 opacity-0 group-hover:opacity-100 transition-[opacity]">
|
||||
<span className="text-2xl absolute">Download</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
10
app/components/CharacterColor.tsx
Normal file
10
app/components/CharacterColor.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export const CharacterColor = ({ color }: { color: string }) => {
|
||||
return (
|
||||
<div
|
||||
className="bg-[var(--bg-color)] px-8 py-4 text-2xl rounded-xl border-1 border-white/5"
|
||||
style={{ "--bg-color": color } as React.CSSProperties}
|
||||
>
|
||||
<p className="text-transparent">{color}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
28
app/components/CharacterImage.tsx
Normal file
28
app/components/CharacterImage.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
type CharacterImageProps = {
|
||||
image: string;
|
||||
name: string | null;
|
||||
species: string;
|
||||
gender: string;
|
||||
};
|
||||
|
||||
export const CharacterImage = ({
|
||||
image,
|
||||
name,
|
||||
species,
|
||||
gender,
|
||||
}: CharacterImageProps) => {
|
||||
return (
|
||||
<div className="relative rounded-4xl overflow-hidden">
|
||||
<img src={image} alt="" className="w-full md:w-[288px] aspect-square" />
|
||||
<div className="absolute left-0 right-0 -bottom-[12px] z-10 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden">
|
||||
<div className="p-4 flex gap-2 justify-between items-end">
|
||||
<p className="text-5xl">{name}</p>
|
||||
<p className="flex-1 text-right text-3xl">
|
||||
{species}, {gender}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
40
app/components/IconWithText.tsx
Normal file
40
app/components/IconWithText.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
type IconWithTextProps = {
|
||||
icon: string;
|
||||
text: string;
|
||||
desc: string;
|
||||
backgroundColor?: string | null;
|
||||
backgroundOpacity?: string | null;
|
||||
isGroup?: boolean;
|
||||
};
|
||||
|
||||
export const IconWithText = ({
|
||||
icon,
|
||||
text,
|
||||
desc,
|
||||
backgroundColor,
|
||||
backgroundOpacity,
|
||||
isGroup,
|
||||
}: IconWithTextProps) => {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-start gap-1 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] ${
|
||||
!isGroup
|
||||
? "hover:scale-105"
|
||||
: "group-hover:scale-105"
|
||||
} duration-100 ease-in-out`}
|
||||
style={
|
||||
{
|
||||
"--bg-color": backgroundColor || "#161213",
|
||||
"--bg-opacity": backgroundOpacity || "25%",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={icon} alt={""} />
|
||||
<div>
|
||||
<p className="text-2xl">{text}</p>
|
||||
<p className="text-sm">{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
116
app/components/Photos.Carousel.tsx
Normal file
116
app/components/Photos.Carousel.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import React, { useCallback, useEffect, useRef } from "react";
|
||||
import {
|
||||
EmblaCarouselType,
|
||||
EmblaEventType,
|
||||
EmblaOptionsType,
|
||||
} from "embla-carousel";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
|
||||
const TWEEN_FACTOR_BASE = 0.2;
|
||||
|
||||
type PropType = {
|
||||
slides: string[];
|
||||
options?: EmblaOptionsType;
|
||||
};
|
||||
|
||||
const EmblaCarousel: React.FC<PropType> = (props) => {
|
||||
const { slides, options } = props;
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel(options);
|
||||
const tweenFactor = useRef(0);
|
||||
const tweenNodes = useRef<HTMLElement[]>([]);
|
||||
|
||||
const setTweenNodes = useCallback((emblaApi: EmblaCarouselType): void => {
|
||||
tweenNodes.current = emblaApi.slideNodes().map((slideNode) => {
|
||||
return slideNode.querySelector(".embla__parallax__layer") as HTMLElement;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => {
|
||||
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length;
|
||||
}, []);
|
||||
|
||||
const tweenParallax = useCallback(
|
||||
(emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => {
|
||||
const engine = emblaApi.internalEngine();
|
||||
const scrollProgress = emblaApi.scrollProgress();
|
||||
const slidesInView = emblaApi.slidesInView();
|
||||
const isScrollEvent = eventName === "scroll";
|
||||
|
||||
emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {
|
||||
let diffToTarget = scrollSnap - scrollProgress;
|
||||
const slidesInSnap = engine.slideRegistry[snapIndex];
|
||||
|
||||
slidesInSnap.forEach((slideIndex) => {
|
||||
if (isScrollEvent && !slidesInView.includes(slideIndex)) return;
|
||||
|
||||
if (engine.options.loop) {
|
||||
engine.slideLooper.loopPoints.forEach((loopItem) => {
|
||||
const target = loopItem.target();
|
||||
|
||||
if (slideIndex === loopItem.index && target !== 0) {
|
||||
const sign = Math.sign(target);
|
||||
|
||||
if (sign === -1) {
|
||||
diffToTarget = scrollSnap - (1 + scrollProgress);
|
||||
}
|
||||
if (sign === 1) {
|
||||
diffToTarget = scrollSnap + (1 - scrollProgress);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const translate = diffToTarget * (-1 * tweenFactor.current) * 100;
|
||||
const tweenNode = tweenNodes.current[slideIndex];
|
||||
tweenNode.style.transform = `translateX(${translate}%)`;
|
||||
});
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
|
||||
setTweenNodes(emblaApi);
|
||||
setTweenFactor(emblaApi);
|
||||
tweenParallax(emblaApi);
|
||||
|
||||
emblaApi
|
||||
.on("reInit", setTweenNodes)
|
||||
.on("reInit", setTweenFactor)
|
||||
.on("reInit", tweenParallax)
|
||||
.on("scroll", tweenParallax)
|
||||
.on("slideFocus", tweenParallax);
|
||||
}, [emblaApi, tweenParallax]);
|
||||
|
||||
return (
|
||||
<div className="embla">
|
||||
<div className="embla__viewport" ref={emblaRef}>
|
||||
<div className="embla__container">
|
||||
{slides.map((item, index) => (
|
||||
<button
|
||||
className="embla__slide"
|
||||
onClick={() => {
|
||||
if (emblaApi) emblaApi.scrollTo(index);
|
||||
}}
|
||||
key={`embla.slide.${index}`}
|
||||
>
|
||||
<div className="embla__parallax">
|
||||
<div className="embla__parallax__layer">
|
||||
<img
|
||||
className="embla__slide__img embla__parallax__img"
|
||||
src={item}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmblaCarousel;
|
||||
100
app/components/ProjectLink.tsx
Normal file
100
app/components/ProjectLink.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import { useInView } from "motion/react";
|
||||
|
||||
type ProjectLinkProps = {
|
||||
icon: string;
|
||||
text: string;
|
||||
desc: string;
|
||||
url: string;
|
||||
preview: string[];
|
||||
};
|
||||
|
||||
export const ProjectLink = ({
|
||||
icon,
|
||||
text,
|
||||
desc,
|
||||
url,
|
||||
preview,
|
||||
}: ProjectLinkProps) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [timeoutId, setTimeoutId] = useState<any>(null);
|
||||
const [shouldUseCarousel] = useState(preview ? preview.length > 1 : false);
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
|
||||
Autoplay({ delay: 5000, playOnInit: false }),
|
||||
]);
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldUseCarousel) return;
|
||||
if (!emblaApi) return;
|
||||
|
||||
const autoplay = emblaApi?.plugins()?.autoplay;
|
||||
if (!autoplay) return;
|
||||
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
if (!isInView) {
|
||||
autoplay.stop();
|
||||
} else {
|
||||
const randTimeout = Math.floor(Math.random() * 2500);
|
||||
setTimeoutId(
|
||||
setTimeout(() => {
|
||||
autoplay.play();
|
||||
}, randTimeout)
|
||||
);
|
||||
}
|
||||
}, [shouldUseCarousel, emblaApi, isInView]);
|
||||
|
||||
return (
|
||||
<Link href={url} key={`projects.link.${text}`} className="relative group">
|
||||
<div className="px-2 overflow-hidden">
|
||||
{shouldUseCarousel ? (
|
||||
<div className="embla embla--projects" ref={ref}>
|
||||
<div className="embla__viewport" ref={emblaRef}>
|
||||
<div className="embla__container">
|
||||
{preview.map((item, index) => (
|
||||
<div
|
||||
className="embla__slide"
|
||||
key={`embla.project.${text}.slide.${index}`}
|
||||
>
|
||||
<img
|
||||
className="embla__slide__img rounded-xl! aspect-video border-white/5 border-1 group-hover:scale-105 duration-100 ease-in-out origin-bottom"
|
||||
src={item}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={preview?.[0] || "/images/projects/no-preview.png"}
|
||||
alt={text}
|
||||
className="w-full aspect-video object-cover rounded-xl border-white/5 border-1 group-hover:scale-105 duration-100 ease-in-out origin-bottom "
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 right-0">
|
||||
<IconWithText
|
||||
icon={icon}
|
||||
text={text}
|
||||
desc={desc}
|
||||
backgroundColor={"#0a0a0a"}
|
||||
backgroundOpacity={"100%"}
|
||||
isGroup={true}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
9
app/components/Section.tsx
Normal file
9
app/components/Section.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export const Section = ({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) => {
|
||||
return (
|
||||
<div className="max-w-[400px] md:max-w-[542px] xl:max-w-[1012px] w-full mx-auto flex flex-col gap-2 px-2">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
104
app/globals.css
Normal file
104
app/globals.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #090909;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LTSuperior";
|
||||
src: url("/fonts/LTSuperior-Mar2025/LTSuperior-Regular.ttf")
|
||||
format("truetype");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LTSuperior";
|
||||
src: url("/fonts/LTSuperior-Mar2025/LTSuperior-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LTSuperior";
|
||||
src: url("/fonts/LTSuperior-Mar2025/LTSuperior-SemiBold.ttf")
|
||||
format("truetype");
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: LTSuperior, Inter, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* embla styles */
|
||||
|
||||
.embla {
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
--slide-height: 144px;
|
||||
--slide-spacing: 8px;
|
||||
--slide-size: 256px;
|
||||
}
|
||||
.embla__viewport {
|
||||
overflow: hidden;
|
||||
}
|
||||
.embla__container {
|
||||
display: flex;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
margin-left: calc(var(--slide-spacing) * -1);
|
||||
}
|
||||
.embla__slide {
|
||||
transform: translate3d(0, 0, 0);
|
||||
flex: 0 0 var(--slide-size);
|
||||
min-width: 0;
|
||||
padding-left: var(--slide-spacing);
|
||||
}
|
||||
.embla__slide__img {
|
||||
border-radius: 1.8rem;
|
||||
display: block;
|
||||
height: var(--slide-height);
|
||||
width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.embla__parallax {
|
||||
border-radius: 1.8rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.embla__parallax__layer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.embla__parallax__img {
|
||||
max-width: none;
|
||||
flex: 0 0 calc(115% + (var(--slide-spacing) * 2));
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.embla {
|
||||
--slide-height: 288px;
|
||||
--slide-spacing: 16px;
|
||||
--slide-size: 512px;
|
||||
}
|
||||
}
|
||||
|
||||
.embla--projects {
|
||||
--slide-size: 100%;
|
||||
--slide-width: 100%;
|
||||
--slide-height: 100%;
|
||||
--slide-spacing: 16px;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
28
app/layout.tsx
Normal file
28
app/layout.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Kentai Radiquum",
|
||||
description: "Developer, Amateur Photographer, Self-Hosting Admirer",
|
||||
openGraph: {
|
||||
images: [
|
||||
{
|
||||
url: "https://radiquum.wah.su/images/opengraph.png",
|
||||
width: 1200,
|
||||
height: 675,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`antialiased`}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
31
app/page.tsx
Normal file
31
app/page.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { Characters } from "./Section/Characters";
|
||||
import { Contacts } from "./Section/Contacts";
|
||||
import { Footer } from "./Section/Footer";
|
||||
import { Intro } from "./Section/Intro";
|
||||
import { Photos } from "./Section/Photos";
|
||||
import { Projects } from "./Section/Projects";
|
||||
import { Skills } from "./Section/Skills";
|
||||
import { Socials } from "./Section/Socials";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Intro />
|
||||
<div className="flex flex-col gap-4 md:gap-8 overflow-hidden bg-[#090909]">
|
||||
<div className="flex flex-col gap-8 md:gap-16 overflow-hidden">
|
||||
<Socials />
|
||||
<Skills />
|
||||
<Projects />
|
||||
<Contacts />
|
||||
</div>
|
||||
<div className="flex flex-col gap-8 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">
|
||||
<Photos />
|
||||
<Characters />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#131314]">
|
||||
<Footer />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!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="Characters of Radiquum">
|
||||
<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/characters.html">
|
||||
<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="Characters of Radiquum">
|
||||
<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="Characters of Radiquum">
|
||||
<meta name="twitter:image" content="https://radiquum.wah.su/static/opengraph.png">
|
||||
<script defer data-domain="radiquum.wah.su" data-api="https://a.wah.su/api/event" src="https://a.wah.su/js/script.outbound-links.js"></script>
|
||||
</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.jpg" 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="./Kentai_Radiquum.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>
|
||||
16
eslint.config.mjs
Normal file
16
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const compat = new FlatCompat({
|
||||
baseDirectory: __dirname,
|
||||
});
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
717
index.html
717
index.html
|
|
@ -1,717 +0,0 @@
|
|||
<!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">
|
||||
|
||||
<link rel="prefetch" href="./characters.html">
|
||||
<script defer data-domain="radiquum.wah.su" data-api="https://a.wah.su/api/event" src="https://a.wah.su/js/script.outbound-links.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black">
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-10 w-full text-white transition-transform -translate-y-full rounded-b-lg bg-bg-pink"
|
||||
id="header">
|
||||
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
|
||||
<a href="#landing">
|
||||
<div class="flex items-center gap-4 px-4 py-2 sm:py-4">
|
||||
<img src="./static/avatar_512.jpg" 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="#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="#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="absolute w-full h-full bg-bg-pink -z-10 max-w-[50vw] right-0 top-0 max-h-[50vh] hidden md:block"></div>
|
||||
<div class="absolute w-full h-full bg-bg-gray -z-10 left-0 bottom-0 max-h-[50vh] hidden md:block">
|
||||
</div>
|
||||
<div class="container flex flex-col min-h-screen gap-2 py-8 mx-auto my-4 overflow-hidden rounded-lg sm:mt-0 bg-bg-gray md:bg-transparent md:rounded-none"
|
||||
id="landing">
|
||||
|
||||
<div class="flex flex-row flex-wrap items-center justify-center gap-8 md:min-h-[50vh] order-1">
|
||||
<div>
|
||||
<img src="./static/avatar_512.jpg" alt=""
|
||||
class="rounded-3xl w-[256px] xl:max-w-[372px] 2xl:w-[512px]" />
|
||||
<a href="https://x.com/sleepy_muzzle"
|
||||
class="block mt-1 text-base text-center underline sm:text-right text-bg-pink hover:underline sm:no-underline"
|
||||
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" 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"
|
||||
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" 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" 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" data-i18n="QUICK_BIO_ENTHUSIAST">Self-Hosting Enthusiast<span
|
||||
class="inline sm:hidden">.</span></a>
|
||||
</div>
|
||||
|
||||
<div class="relative order-4 h-24 md:order-3 min-w-[372px] max-w-[512px] mx-auto">
|
||||
<img id="lastfm_image" src="https://lastfm.freetls.fastly.net/i/u/34s/2a96cbd8b46e442fc41c2b86b821562f.png" alt="" class="absolute object-cover inset-0 w-full max-h-[calc(100%+16px)] md:-z-10" />
|
||||
<div class="flex gap-4 p-2 text-white bg-black bg-opacity-75 backdrop-blur-md">
|
||||
<img id="lastfm_image" src="https://lastfm.freetls.fastly.net/i/u/34s/2a96cbd8b46e442fc41c2b86b821562f.png" alt="" class="w-24 h-24" />
|
||||
<div>
|
||||
<a id="lastfm_songlink" class="block">
|
||||
<span class="flex items-center justify-start gap-1 -ml-1"><img src="./static/material-symbols--pause.svg" alt="Paused" class="h-6 invert" id="lastfm_state" /><p id="lastfm_title" class="overflow-hidden text-xl truncate text-nowrap whitespace-nowrap">Loading...</p></span>
|
||||
<p id="lastfm_artist" class="overflow-hidden text-sm truncate text-nowrap whitespace-nowrap"></p>
|
||||
<p id="lastfm_album" class="overflow-hidden text-sm truncate text-nowrap whitespace-nowrap"></p>
|
||||
</a>
|
||||
<a href="https://www.last.fm/user/Radiquum" class="flex items-center gap-2 mt-2 text-white">
|
||||
<img src="./static/fa6-brands--lastfm.svg" alt="" class="w-6 h-6 invert"/>
|
||||
<span data-i18n="QUICK_BIO_LASTFM">My profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" data-i18n="BTN_OR">or</p>
|
||||
<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="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>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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" 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" 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" 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" 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" 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>
|
||||
</div>
|
||||
<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" 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" 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" 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" 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-[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" 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" 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>
|
||||
<li>JS/TS</li>
|
||||
<li>Next.js</li>
|
||||
<li>Flask</li>
|
||||
<li>Django</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<li>FastAPI</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<li>HTTP Toolkit</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<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" 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>
|
||||
<li>Vercel</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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" 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" 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"
|
||||
target="_blank" referrerpolicy="origin">Red Panda Stickers Telegram channel</a>. Plus,
|
||||
I’ve curated a <a class="text-bg-pink hover:underline" href="https://wahs.wah.su"
|
||||
target="_blank" referrerpolicy="origin">collection</a> of over 3000 red panda photos and
|
||||
videos.</p>
|
||||
</div>
|
||||
</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" 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" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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" data-i18n="LNK_TITLE">LINKS</h1>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
|
||||
<div class="flex flex-col gap-4 lg:[grid-column:span_2] lg:flex-row xl:flex-col xl:[grid-column:1]">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<div
|
||||
class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-square">
|
||||
<div class="relative flex items-end justify-end w-full h-full overflow-hidden"
|
||||
id="photos-image">
|
||||
<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_building.jpg" data-section-image="photos"
|
||||
data-slide="0" data-photo="photo_building" />
|
||||
<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_dandelion.jpg" data-section-image="photos"
|
||||
data-slide="1" data-photo="photo_dandelion" />
|
||||
<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_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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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"
|
||||
data-i18n="LNK_PHOTO_HEADER">
|
||||
PHOTOS</p>
|
||||
</div>
|
||||
</div>
|
||||
<a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
|
||||
href="/photos"
|
||||
target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-gray-500">
|
||||
<svg class="w-16 h-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-4h10q.3 0 .45-.275t-.05-.525l-2.75-3.675q-.15-.2-.4-.2t-.4.2L11.25 16L9.4 13.525q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17"/></svg>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium " data-i18n="LNK_PHOTO_GALLERY_TITLE">Online Gallery</p>
|
||||
<p class="text-base font-light " data-i18n="LNK_PHOTO_GALLERY">View my favorite images online</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue border-transparent border-2 border-solid transition-[border-color] w-full aspect-[2/1] max-h-[182px] overflow-hidden rounded-lg"
|
||||
href="https://t.me/photowah" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-[#2f7ca3]">
|
||||
<img class="w-16 h-16" alt="" src="./static/assets/Telegram.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium ">Photo-Wah</p>
|
||||
<p class="text-base font-light " data-i18n="LNK_PHOTO_PHOTOWAH">My Telegram Photo
|
||||
Channel</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-[170px] flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
|
||||
href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col items-center justify-center w-full h-full p-4 text-white bg-[#353231]">
|
||||
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-sm font-medium ">pixey</p>
|
||||
<!-- <p class="text-base font-light " data-i18n="LNK_PHOTO_PIXEY">See the photos like in
|
||||
instagram</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-[170px] flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
|
||||
href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col items-center justify-center w-full h-full p-4 text-white bg-[#353231]">
|
||||
<img class="w-16 h-16 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-sm font-medium ">instafops</p>
|
||||
<!-- <p class="text-base font-light " data-i18n="LNK_PHOTO_INSTAFOPS">Photos that more furry
|
||||
related</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-[170px] flex-1 border-transparent border-2 border-solid transition-[border-color] aspect-square overflow-hidden rounded-lg"
|
||||
href="https://photos.wah.su/share/1bc2wt0jpNrv_zNzq50C5wfBKL6sKj8zPmU6pOYpK7d8hWKyaNWaFGkFD4-r5bcY7Q0" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col items-center justify-center w-full h-full p-4 text-white bg-[#353231]">
|
||||
<img class="w-12 h-12 mx-auto my-2" alt="" src="./static/assets/immich.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-sm font-medium ">Immich</p>
|
||||
<!-- <p class="text-base font-light " data-i18n="LNK_PHOTO_INSTAFOPS">Other versions</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-1">
|
||||
<div
|
||||
class="w-full overflow-hidden border-2 border-transparent border-solid rounded-lg aspect-[2/1] max-h-[182px]">
|
||||
<div class="relative flex items-end justify-end w-full h-full overflow-hidden" id="arts-image">
|
||||
<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_sleepwithplush.jpg" data-section-image="arts"
|
||||
data-slide="0" data-photo="art_sleepwithplush" />
|
||||
<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_standing.jpg" data-section-image="arts"
|
||||
data-slide="1" data-photo="art_standing" />
|
||||
<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_sad.jpg" data-section-image="arts" data-slide="2"
|
||||
data-photo="art_sad" />
|
||||
<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_kiguboys.jpg" data-section-image="arts"
|
||||
data-slide="3" data-photo="art_kiguboys" />
|
||||
<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_hugs.jpg" data-section-image="arts" data-slide="4"
|
||||
data-photo="art_hugs" />
|
||||
<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_park.jpg" data-section-image="arts" data-slide="5"
|
||||
data-photo="art_park" />
|
||||
<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_blep.jpg" data-section-image="arts" data-slide="6"
|
||||
data-photo="art_blep" />
|
||||
<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_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" />
|
||||
<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"
|
||||
data-i18n="LNK_ARTS_HEADER">
|
||||
ARTS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid [grid-template-columns:1fr_1fr] gap-1">
|
||||
<a class="hover:border-bg-blue aspect-square w-full border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://furaffinity.net/user/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#715b38]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/fur-affinity.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium ">Furaffinity</p>
|
||||
<p class="text-base font-light ">radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-full aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://itaku.ee/profile/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-[#ffeb3c]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/itaku.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Itaku</p>
|
||||
<p class="text-base font-light">radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<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]" 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"
|
||||
href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex items-center justify-center w-full h-full gap-4 p-4 text-white bg-[#3c72a1]">
|
||||
<img class="object-contain w-16 h-16" alt=""
|
||||
src="./static/assets/logos--mastodon-icon.svg" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium ">Mastodon</p>
|
||||
<p class="text-base font-light break-words">@radiquum@furry.engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="grid [grid-template-columns:1fr_1fr] gap-1">
|
||||
<a class="hover:border-bg-blue w-full aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#05539f]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/Bluesky_Logo.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium ">Bluesky</p>
|
||||
<p class="text-base font-light ">radiquum.wah.su</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-full aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#3b79a7]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/logos--twitter.svg" />
|
||||
<div class="flex flex-col justify-end gap-1">
|
||||
<p class="text-2xl font-medium ">Twitter</p>
|
||||
<p class="text-base font-light ">@radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-full aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#1f6cc5]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium ">VKontakte</p>
|
||||
<p class="text-base font-light ">radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue w-full aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://t.me/radiquumprojects" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#2f7ca3]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/Telegram.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Radiquum Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 sm:-mt-[var(--sm--mt)] lg:-mt-[var(--lg--mt)] xl:-mt-0" data-i18n-style="LNK_PROJECTS_STYLE" style="--sm--mt:0px; --lg--mt:686px;">
|
||||
<div class="flex flex-wrap w-full gap-1">
|
||||
<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]" 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"
|
||||
href="https://anix.wah.su" target="_blank" referrerpolicy="origin">
|
||||
<div class="relative flex items-end w-full h-full p-4">
|
||||
<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" data-i18n="LNK_PROJECTS_ANIX">Unofficial web client for
|
||||
Anixart android app,
|
||||
made in Next.JS</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="grid [grid-template-columns:1fr_1fr] gap-1">
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin">
|
||||
<div
|
||||
class="bg-[#0E1621] text-white w-full h-full p-2 flex flex-col justify-around relative overflow-hidden -z-20">
|
||||
<img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px] -z-10"
|
||||
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" data-i18n="LNK_PROJECTS_TGP">Telegram bot to use
|
||||
telegram as a Google
|
||||
Photo alternative</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin">
|
||||
<div
|
||||
class="bg-[#F5F5F5] text-black w-full h-full p-2 flex flex-col justify-around relative overflow-hidden">
|
||||
<img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[170px] sm:w-[200px] object-cover"
|
||||
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" data-i18n="LNK_PROJECTS_WG">Random word generator
|
||||
inspired by @tsoding
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin">
|
||||
<div
|
||||
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" data-i18n="LNK_PROJECTS_FADL">Modification of the
|
||||
original project to
|
||||
add more functionality</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/Radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-2 text-white bg-black">
|
||||
<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" data-i18n="LNK_PROJECTS_GITHUB">View my other
|
||||
repositories</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a class="hover:border-bg-blue group w-full aspect-[2/1] max-h-[182px] border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://home.wah.su" target="_blank" referrerpolicy="origin">
|
||||
<div class="relative flex items-end w-full h-full px-2 py-4 overflow-hidden">
|
||||
<img class="absolute filter brightness-50 group-hover:scale-150 transition-all scale-9 sm:scale-100 -right-[90px] -top-[80px] sm:-right-32 sm:-top-24 object-cover -z-10"
|
||||
alt="" src="./static/assets/wah-su.svg" />
|
||||
<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" data-i18n="LNK_PROJECTS_WAHSU">My Self-Hosting endeavor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 lg:[grid-column:span_2] lg:flex-row xl:flex-col xl:[grid-column:4] sm:-mt-[var(--sm--mt)] lg:-mt-[var(--lg--mt)] xl:-mt-0" data-i18n-style="LNK_CONTFRIEN_STYLE" style="--sm--mt:572px; --lg--mt:0px;">
|
||||
<div class="flex flex-col w-full gap-1">
|
||||
<div
|
||||
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg -z-10">
|
||||
<div class="flex items-end justify-end w-full h-full bg-pink-600">
|
||||
<p class="font-bold text-4xl p-[8px]" data-i18n="LNK_CONTACT_HEADER">CONTACT</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid [grid-template-columns:1fr_1fr] gap-1">
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg w-full h-full"
|
||||
href="https://t.me/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#2f7ca3]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/Telegram.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Telegram</p>
|
||||
<p class="text-base font-light">@radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg w-full h-full"
|
||||
href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-black bg-white">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/matrix-favicon.svg" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Matrix</p>
|
||||
<p class="text-base font-light">@radiquum:wah.su
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg w-full h-full"
|
||||
href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#1f6cc5]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt="" src="./static/assets/VKLogo.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">VKontakte</p>
|
||||
<p class="text-base font-light">radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="w-full h-full overflow-hidden rounded-lg aspect-square" target="_blank" referrerpolicy="origin">
|
||||
<div class="flex flex-col justify-around w-full h-full p-4 text-white bg-[#2d347e]">
|
||||
<img class="object-contain w-16 h-16 mx-auto" alt=""
|
||||
src="./static/assets/discord-mark-blue.png" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-2xl font-medium">Discord</p>
|
||||
<p class="text-base font-light">radiquum</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-1 sm:-mt-[var(--sm--mt)] lg:-mt-[var(--lg--mt)] xl:-mt-0" data-i18n-style="LNK_FRIEN_STYLE" style="--sm--mt:0px; --lg--mt:500px;">
|
||||
<div
|
||||
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg -z-10">
|
||||
<div class="flex items-end justify-end w-full h-full bg-orange-400">
|
||||
<p class="font-bold text-4xl p-[8px] text-right" data-i18n="LNK_FRIEND_HEADER">
|
||||
COLLECTIONS & FRIENDS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid [grid-template-columns:1fr_1fr] gap-1">
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin">
|
||||
<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" data-i18n="LNK_COLLECTION_RPS">Telegram channel with
|
||||
red
|
||||
panda
|
||||
sticker packs</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://wahs.wah.su" target="_blank" referrerpolicy="origin">
|
||||
<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" data-i18n="LNK_COLLECTION_RPI">3000+ Photos and
|
||||
Videos
|
||||
of a red pandas</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin">
|
||||
<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" data-i18n="LNK_FRIEND_BLEP">VK Group of a
|
||||
photographer.
|
||||
City and
|
||||
Trains photography</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="hover:border-bg-blue aspect-square border-transparent border-2 border-solid transition-[border-color] overflow-hidden rounded-lg"
|
||||
href="https://github.com/itc1205" target="_blank" referrerpolicy="origin">
|
||||
<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" data-i18n="LNK_FRIEND_ITC">Github profile of another
|
||||
furry
|
||||
programmer</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="./static/script.js"></script>
|
||||
<script src="./static/i18n/strings/ru.js"></script>
|
||||
<script src="./static/i18n/i18n.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
9
next.config.ts
Normal file
9
next.config.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
output: 'export',
|
||||
trailingSlash: true
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
6331
package-lock.json
generated
6331
package-lock.json
generated
File diff suppressed because it is too large
Load diff
27
package.json
27
package.json
|
|
@ -1,5 +1,30 @@
|
|||
{
|
||||
"name": "radiquum.github.io",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"motion": "^12.23.9",
|
||||
"next": "15.4.2",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.11"
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.4.2",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
5
postcss.config.mjs
Normal file
5
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
const config = {
|
||||
plugins: ["@tailwindcss/postcss"],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
BIN
public/characters/Kentai_Radiquum_RedPanda/Color Palette.png
Normal file
BIN
public/characters/Kentai_Radiquum_RedPanda/Color Palette.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 400 KiB After Width: | Height: | Size: 400 KiB |
|
Before Width: | Height: | Size: 279 KiB After Width: | Height: | Size: 279 KiB |
BIN
public/fonts/LTSuperior-Mar2025/LTSuperior-Medium.ttf
Normal file
BIN
public/fonts/LTSuperior-Mar2025/LTSuperior-Medium.ttf
Normal file
Binary file not shown.
BIN
public/fonts/LTSuperior-Mar2025/LTSuperior-Regular.ttf
Normal file
BIN
public/fonts/LTSuperior-Mar2025/LTSuperior-Regular.ttf
Normal file
Binary file not shown.
BIN
public/fonts/LTSuperior-Mar2025/LTSuperior-SemiBold.ttf
Normal file
BIN
public/fonts/LTSuperior-Mar2025/LTSuperior-SemiBold.ttf
Normal file
Binary file not shown.
|
|
@ -1,8 +1,9 @@
|
|||
Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A.
|
||||
Copyright (c) 2024, LyonsType (lyonstype4.wixsite.com/lyonstype-beta),
|
||||
with Reserved Font Name LT Superior.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
9
public/icons/furaffinity.svg
Normal file
9
public/icons/furaffinity.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
3
public/icons/ic_baseline-discord.svg
Normal file
3
public/icons/ic_baseline-discord.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M38.5402 10.66C35.8802 9.42 33.0002 8.52 30.0002 8C29.9475 8.00075 29.8972 8.02232 29.8602 8.06C29.5002 8.72 29.0802 9.58 28.8002 10.24C25.6182 9.7603 22.3823 9.7603 19.2002 10.24C18.9202 9.56 18.5002 8.72 18.1202 8.06C18.1002 8.02 18.0402 8 17.9802 8C14.9802 8.52 12.1202 9.42 9.44023 10.66C9.42023 10.66 9.40023 10.68 9.38023 10.7C3.94023 18.84 2.44023 26.76 3.18023 34.6C3.18023 34.64 3.20023 34.68 3.24023 34.7C6.84023 37.34 10.3002 38.94 13.7202 40C13.7802 40.02 13.8402 40 13.8602 39.96C14.6602 38.86 15.3802 37.7 16.0002 36.48C16.0402 36.4 16.0002 36.32 15.9202 36.3C14.7802 35.86 13.7002 35.34 12.6402 34.74C12.5602 34.7 12.5602 34.58 12.6202 34.52C12.8402 34.36 13.0602 34.18 13.2802 34.02C13.3202 33.98 13.3802 33.98 13.4202 34C20.3002 37.14 27.7202 37.14 34.5202 34C34.5602 33.98 34.6202 33.98 34.6602 34.02C34.8802 34.2 35.1002 34.36 35.3202 34.54C35.4002 34.6 35.4002 34.72 35.3002 34.76C34.2602 35.38 33.1602 35.88 32.0202 36.32C31.9402 36.34 31.9202 36.44 31.9402 36.5C32.5802 37.72 33.3002 38.88 34.0802 39.98C34.1402 40 34.2002 40.02 34.2602 40C37.7002 38.94 41.1602 37.34 44.7602 34.7C44.8002 34.68 44.8202 34.64 44.8202 34.6C45.7002 25.54 43.3602 17.68 38.6202 10.7C38.6002 10.68 38.5802 10.66 38.5402 10.66ZM17.0402 29.82C14.9802 29.82 13.2602 27.92 13.2602 25.58C13.2602 23.24 14.9402 21.34 17.0402 21.34C19.1602 21.34 20.8402 23.26 20.8202 25.58C20.8202 27.92 19.1402 29.82 17.0402 29.82ZM30.9802 29.82C28.9202 29.82 27.2002 27.92 27.2002 25.58C27.2002 23.24 28.8802 21.34 30.9802 21.34C33.1002 21.34 34.7802 23.26 34.7602 25.58C34.7602 27.92 33.1002 29.82 30.9802 29.82Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
public/icons/ic_baseline-telegram.svg
Normal file
3
public/icons/ic_baseline-telegram.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 4.5C12.96 4.5 4 13.46 4 24.5C4 35.54 12.96 44.5 24 44.5C35.04 44.5 44 35.54 44 24.5C44 13.46 35.04 4.5 24 4.5ZM33.28 18.1C32.98 21.26 31.68 28.94 31.02 32.48C30.74 33.98 30.18 34.48 29.66 34.54C28.5 34.64 27.62 33.78 26.5 33.04C24.74 31.88 23.74 31.16 22.04 30.04C20.06 28.74 21.34 28.02 22.48 26.86C22.78 26.56 27.9 21.9 28 21.48C28.0139 21.4164 28.012 21.3503 27.9946 21.2876C27.9772 21.2249 27.9447 21.1673 27.9 21.12C27.78 21.02 27.62 21.06 27.48 21.08C27.3 21.12 24.5 22.98 19.04 26.66C18.24 27.2 17.52 27.48 16.88 27.46C16.16 27.44 14.8 27.06 13.78 26.72C12.52 26.32 11.54 26.1 11.62 25.4C11.66 25.04 12.16 24.68 13.1 24.3C18.94 21.76 22.82 20.08 24.76 19.28C30.32 16.96 31.46 16.56 32.22 16.56C32.38 16.56 32.76 16.6 33 16.8C33.2 16.96 33.26 17.18 33.28 17.34C33.26 17.46 33.3 17.82 33.28 18.1Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 934 B |
9
public/icons/itaku.svg
Normal file
9
public/icons/itaku.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
3
public/icons/material-symbols_mail.svg
Normal file
3
public/icons/material-symbols_mail.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 40C6.9 40 5.95867 39.6087 5.176 38.826C4.39333 38.0433 4.00133 37.1013 4 36V12C4 10.9 4.392 9.95867 5.176 9.176C5.96 8.39333 6.90133 8.00133 8 8H40C41.1 8 42.042 8.392 42.826 9.176C43.61 9.96 44.0013 10.9013 44 12V36C44 37.1 43.6087 38.042 42.826 38.826C42.0433 39.61 41.1013 40.0013 40 40H8ZM24 26L40 16V12L24 22L8 12V16L24 26Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 460 B |
1
public/icons/mdi_arrow-left.svg
Normal file
1
public/icons/mdi_arrow-left.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>
|
||||
|
After Width: | Height: | Size: 149 B |
1
public/icons/mdi_download.svg
Normal file
1
public/icons/mdi_download.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,4V16.25L17.25,11L18,11.66L11.5,18.16L5,11.66L5.75,11L11,16.25V4H12M3,19H4V21H19V19H20V22H3V19Z" /></svg>
|
||||
|
After Width: | Height: | Size: 177 B |
3
public/icons/mdi_github.svg
Normal file
3
public/icons/mdi_github.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 4C21.3736 4 18.7728 4.51732 16.3463 5.52241C13.9198 6.5275 11.715 8.00069 9.85786 9.85786C6.10714 13.6086 4 18.6957 4 24C4 32.84 9.74 40.34 17.68 43C18.68 43.16 19 42.54 19 42V38.62C13.46 39.82 12.28 35.94 12.28 35.94C11.36 33.62 10.06 33 10.06 33C8.24 31.76 10.2 31.8 10.2 31.8C12.2 31.94 13.26 33.86 13.26 33.86C15 36.9 17.94 36 19.08 35.52C19.26 34.22 19.78 33.34 20.34 32.84C15.9 32.34 11.24 30.62 11.24 23C11.24 20.78 12 19 13.3 17.58C13.1 17.08 12.4 15 13.5 12.3C13.5 12.3 15.18 11.76 19 14.34C20.58 13.9 22.3 13.68 24 13.68C25.7 13.68 27.42 13.9 29 14.34C32.82 11.76 34.5 12.3 34.5 12.3C35.6 15 34.9 17.08 34.7 17.58C36 19 36.76 20.78 36.76 23C36.76 30.64 32.08 32.32 27.62 32.82C28.34 33.44 29 34.66 29 36.52V42C29 42.54 29.32 43.18 30.34 43C38.28 40.32 44 32.84 44 24C44 21.3736 43.4827 18.7728 42.4776 16.3463C41.4725 13.9198 39.9993 11.715 38.1421 9.85786C36.285 8.00069 34.0802 6.5275 31.6537 5.52241C29.2272 4.51732 26.6264 4 24 4Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
public/icons/mdi_mastodon.svg
Normal file
3
public/icons/mdi_mastodon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M43.4568 29.0811C42.8474 32.1499 38.1462 35.5235 32.6397 36.1764C29.7885 36.5029 26.9808 36.8294 23.999 36.6988C19.1019 36.4594 15.2931 35.5235 15.2931 35.5235V36.8729C15.9895 41.7047 20.1249 41.9876 24.0643 42.14C28.0255 42.2488 31.5514 41.1388 31.5514 41.1388L31.7255 44.73C31.7255 44.73 28.9396 46.21 23.999 46.493C21.2784 46.6453 17.8831 46.4277 13.9436 45.4047C5.41181 43.1194 3.9318 33.9999 3.71415 24.7281L3.69238 17.2627C3.69238 7.81679 9.85184 5.05265 9.85184 5.05265C13.0077 3.61617 18.3619 2.96323 23.9337 2.96323H24.0643C29.6361 2.96323 34.9903 3.61617 38.1462 5.05265C38.1462 5.05265 44.3056 7.81679 44.3056 17.2627C44.3056 17.2627 44.3927 24.2493 43.4568 29.0811ZM37.0579 18.0027C37.0579 15.6521 36.405 13.8457 35.2079 12.4309C33.9891 11.0598 32.3785 10.3415 30.3543 10.3415C28.0473 10.3415 26.2843 11.2339 25.0872 13.0186L23.999 14.9339L22.9108 13.0186C21.6919 11.2339 19.9507 10.3415 17.6219 10.3415C15.6195 10.3415 14.0089 11.0598 12.7683 12.4309C11.5713 13.8457 10.9401 15.6521 10.9401 18.0027V29.4511H15.5107V18.3292C15.5107 16.0221 16.4901 14.8033 18.4707 14.8033C20.6472 14.8033 21.7355 16.218 21.7355 19.0039V25.0763H26.2408V19.0039C26.2408 16.218 27.329 14.8033 29.5273 14.8033C31.4861 14.8033 32.4655 16.0221 32.4655 18.3292V29.4511H37.0579V18.0027Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
public/icons/ri_bluesky-fill.svg
Normal file
3
public/icons/ri_bluesky-fill.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.0001 21.9214C22.1602 18.2638 17.1523 11.4451 12.4958 8.08455C8.03417 4.86523 6.33441 5.41978 5.21952 5.93903C3.92795 6.53097 3.69238 8.56018 3.69238 9.75029C3.69238 10.9446 4.33208 19.5308 4.74838 20.966C6.12931 25.7015 11.0316 27.3008 15.5521 26.7878C8.93177 27.791 3.04863 30.2563 10.7595 39.0378C19.244 48.0208 22.3876 37.1124 24.0001 31.5814C25.6125 37.1124 27.4686 47.6282 37.0863 39.0378C44.3078 31.5814 39.0704 27.791 32.4501 26.7878C36.9686 27.3008 41.8729 25.7015 43.2518 20.966C43.6681 19.5329 44.3078 10.9446 44.3078 9.75236C44.3078 8.5581 44.0722 6.53304 42.7806 5.93487C41.6657 5.41978 39.966 4.86107 35.5044 8.08039C30.8478 11.4472 25.8379 18.2659 24.0001 21.9214Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 811 B |
3
public/icons/ri_pixelfed-fill.svg
Normal file
3
public/icons/ri_pixelfed-fill.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.002 4.25C35.048 4.25 44.002 13.204 44.002 24.25C44.002 35.296 35.048 44.25 24.002 44.25C12.956 44.25 4.00195 35.296 4.00195 24.25C4.00195 13.204 12.956 4.25 24.002 4.25ZM26.064 16.448H20.816C18.84 16.448 17.238 18 17.238 19.914V33.41L22.428 28.468H26.064C29.49 28.468 32.266 25.778 32.266 22.458C32.266 19.138 29.488 16.448 26.064 16.448Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 471 B |
3
public/icons/ri_vk-fill.svg
Normal file
3
public/icons/ri_vk-fill.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.53546 7.2854C3.69238 10.1556 3.69238 14.7451 3.69238 23.9377V25.5623C3.69238 34.7414 3.69238 39.3309 6.53546 42.2146C9.40561 45.0577 13.9952 45.0577 23.1878 45.0577H24.8124C33.9915 45.0577 38.581 45.0577 41.4647 42.2146C44.3078 39.3445 44.3078 34.7549 44.3078 25.5623V23.9377C44.3078 14.7586 44.3078 10.1691 41.4647 7.2854C38.5945 4.44232 34.005 4.44232 24.8124 4.44232H23.1878C14.0087 4.44232 9.41915 4.44232 6.53546 7.2854ZM10.5428 16.8029H15.2001C15.349 24.5469 18.7607 27.8232 21.4684 28.5002V16.8029H25.8413V23.4774C28.5084 23.1931 31.3244 20.1469 32.2721 16.7894H36.6315C36.2757 18.5273 35.5656 20.1733 34.5453 21.6245C33.5251 23.0757 32.2166 24.301 30.7016 25.2239C32.3926 26.0652 33.886 27.2556 35.0832 28.7165C36.2804 30.1774 37.1542 31.8756 37.6468 33.6989H32.8407C31.8118 30.4903 29.2395 27.9992 25.8413 27.6608V33.6989H25.2998C16.0395 33.6989 10.7595 27.3629 10.5428 16.8029Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,019 B |
3
public/icons/simple-icons_immich.svg
Normal file
3
public/icons/simple-icons_immich.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.9757 4.00166C19.9608 4.00166 15.2992 5.81356 15.2992 10.4746V10.7273C17.5375 11.7197 20.1907 13.4917 22.6524 15.666C25.2723 17.9782 27.3823 20.4567 28.7406 22.7922C31.0738 18.6315 32.6338 13.6862 32.6521 10.5361V10.4746C32.6521 5.81523 27.9922 4 23.9773 4M36.497 11.4637C35.8227 11.4548 35.1516 11.5593 34.5121 11.7729L34.2704 11.851C34.0171 14.2796 33.1455 17.3432 31.8322 20.3503C30.4372 23.5502 28.7289 26.318 26.9206 28.3293C31.6088 29.2552 36.8037 29.2054 39.8136 28.2496L39.872 28.2329C44.3169 26.7934 44.6052 21.8115 43.3652 18.0032C42.3186 14.79 39.8986 11.5368 36.4987 11.4654M11.5043 11.5302C8.10268 11.6017 5.68274 14.8515 4.63443 18.0647C3.39446 21.873 3.68445 26.8549 8.12768 28.2961L8.36768 28.3742C10.0043 26.5573 12.5126 24.5892 15.3475 22.9252C18.3608 21.1565 21.3791 19.9198 24.0257 19.3546C20.7774 15.8555 16.5442 12.8501 13.5476 11.8577L13.4876 11.8377C12.8478 11.6252 12.1768 11.5218 11.5026 11.5319M19.2891 22.7656C14.9492 24.7637 10.7743 27.8523 8.901 30.3889L8.866 30.4371C6.11939 34.2072 8.821 38.4078 12.0693 40.76C15.3159 43.1154 20.1557 44.3788 22.9024 40.6087L23.0523 40.4076C21.8257 38.2931 20.7257 35.301 20.0141 32.0994C19.2591 28.6917 19.0108 25.4502 19.2891 22.7656ZM21.0757 28.3144C21.6407 33.0469 23.2957 37.9607 25.1356 40.5206L25.1706 40.5705C27.9172 44.3406 32.7555 43.0756 36.0037 40.7217C39.252 38.3679 41.9536 34.1673 39.207 30.3989L39.0603 30.1928C36.6654 30.7031 33.4738 30.8244 30.2005 30.5086C26.7173 30.1728 23.5507 29.4065 21.0757 28.3144Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
3
public/icons/uim_twitter.svg
Normal file
3
public/icons/uim_twitter.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M44.3078 11.4013C42.7867 12.0753 41.1733 12.5175 39.5212 12.7132C41.2614 11.6716 42.564 10.0334 43.1868 8.10336C41.5512 9.07492 39.7612 9.75904 37.8946 10.126C36.7509 8.90841 35.2677 8.06252 33.6374 7.69804C32.0071 7.33355 30.3049 7.46728 28.7515 8.08189C27.1982 8.6965 25.8653 9.76362 24.9257 11.1449C23.9861 12.5262 23.4832 14.1579 23.4822 15.8284C23.482 16.4673 23.5535 17.1042 23.6955 17.7272C20.3828 17.5609 17.1421 16.6999 14.1837 15.2C11.2254 13.7002 8.61541 11.5951 6.52328 9.02127C5.45765 10.8558 5.13118 13.0274 5.61033 15.0942C6.08947 17.1609 7.33821 18.9674 9.10235 20.1458C7.77833 20.104 6.4834 19.7468 5.32512 19.104V19.2096C5.32544 21.1337 5.99133 22.9985 7.20984 24.4875C8.42835 25.9766 10.1244 26.9984 12.0104 27.3794C11.2953 27.576 10.5567 27.6737 9.81515 27.6698C9.28839 27.6721 8.76265 27.6231 8.24537 27.5236C8.77806 29.1787 9.81433 30.6261 11.2095 31.6637C12.6046 32.7013 14.2889 33.2773 16.0273 33.3113C12.5333 36.0462 8.09798 37.2854 3.69238 36.7575C7.50169 39.2078 11.9366 40.508 16.4659 40.5023C19.5847 40.5233 22.6766 39.9245 25.562 38.7407C28.4475 37.5568 31.069 35.8114 33.2742 33.606C35.4795 31.4005 37.2246 28.7789 38.4082 25.8934C39.5919 23.0078 40.1904 19.9159 40.1691 16.7971C40.1691 16.4356 40.1603 16.0768 40.1427 15.7208C41.7753 14.5384 43.1855 13.0759 44.3078 11.4013Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
58
public/icons/wahsu.svg
Normal file
58
public/icons/wahsu.svg
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_39_821)">
|
||||
<g clip-path="url(#clip1_39_821)">
|
||||
<path d="M4 24.1666C4 13.1208 12.9543 4.16663 23.9999 4.16663C35.0457 4.16663 43.9999 13.121 44 24.1666C44 35.2123 35.0457 44.1665 23.9999 44.1667C12.9542 44.1667 4 35.2123 4 24.1666ZM23.9999 42.8027C34.2923 42.8027 42.6358 34.459 42.636 24.1666C42.636 13.8741 34.2923 5.53063 23.9999 5.53063C13.7075 5.53063 5.364 13.8743 5.364 24.1666C5.364 34.459 13.7077 42.8025 23.9999 42.8027Z" fill="#FE633D"/>
|
||||
<path d="M24.0002 43.9666C34.9354 43.9666 43.8002 35.1018 43.8002 24.1666C43.8002 13.2313 34.9354 4.36658 24.0002 4.36658C13.065 4.36658 4.2002 13.2313 4.2002 24.1666C4.2002 35.1018 13.065 43.9666 24.0002 43.9666Z" fill="#FE633D"/>
|
||||
<g clip-path="url(#clip2_39_821)">
|
||||
<g clip-path="url(#clip3_39_821)">
|
||||
<path d="M34.9773 24.1223C34.9773 25.6619 33.7317 26.9067 32.1915 26.9067C30.654 26.9067 29.4077 25.6619 29.4077 24.1223C29.4077 22.5848 31.9445 20.0745 33.4827 20.0745C35.0236 20.0745 34.9773 22.5848 34.9773 24.1223Z" fill="white"/>
|
||||
<path d="M18.5933 24.1223C18.5933 25.6619 17.3477 26.9067 15.8072 26.9067C14.2693 26.9067 13.0241 25.6619 13.0241 24.1223C13.0241 22.5848 12.9291 20.0745 14.4666 20.0745C16.0072 20.0745 18.5933 22.5848 18.5933 24.1223Z" fill="white"/>
|
||||
<path d="M30.2883 18.5532C30.2883 20.0924 29.0427 21.3379 27.5032 21.3379C25.965 21.3379 24.7188 20.0924 24.7188 18.5532C24.7188 17.016 25.965 13.4148 27.5032 13.4148C29.0427 13.4145 30.2883 17.0157 30.2883 18.5532Z" fill="white"/>
|
||||
<path d="M30.8982 29.5056C31.6453 32.5841 28.4942 35.0038 23.8532 34.916C19.2171 34.8279 16.1208 32.3371 16.9345 29.3468C17.7468 26.3603 20.8976 23.9368 23.9736 23.9368C27.0531 23.9371 30.1514 26.4317 30.8982 29.5056Z" fill="white"/>
|
||||
<path d="M23.2347 18.5532C23.2347 20.0924 21.9888 21.3379 20.4493 21.3379C18.9108 21.3379 17.6655 20.0924 17.6655 18.5532C17.6655 17.016 18.9108 13.4148 20.4493 13.4148C21.9888 13.4145 23.2347 17.0157 23.2347 18.5532Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g clip-path="url(#clip4_39_821)">
|
||||
<g clip-path="url(#clip5_39_821)">
|
||||
<path d="M4 24.1666C4 13.1208 12.9543 4.16663 23.9999 4.16663C35.0457 4.16663 43.9999 13.121 44 24.1666C44 35.2123 35.0457 44.1665 23.9999 44.1667C12.9542 44.1667 4 35.2123 4 24.1666ZM23.9999 42.8027C34.2923 42.8027 42.6358 34.459 42.636 24.1666C42.636 13.8741 34.2923 5.53063 23.9999 5.53063C13.7075 5.53063 5.364 13.8743 5.364 24.1666C5.364 34.459 13.7077 42.8025 23.9999 42.8027Z" fill="#FE633D"/>
|
||||
<path d="M24.0002 43.9666C34.9354 43.9666 43.8002 35.1018 43.8002 24.1666C43.8002 13.2313 34.9354 4.36658 24.0002 4.36658C13.065 4.36658 4.2002 13.2313 4.2002 24.1666C4.2002 35.1018 13.065 43.9666 24.0002 43.9666Z" fill="#FE633D"/>
|
||||
<g clip-path="url(#clip6_39_821)">
|
||||
<g clip-path="url(#clip7_39_821)">
|
||||
<path d="M34.9773 24.1223C34.9773 25.6619 33.7317 26.9067 32.1915 26.9067C30.654 26.9067 29.4077 25.6619 29.4077 24.1223C29.4077 22.5848 31.9445 20.0745 33.4827 20.0745C35.0236 20.0745 34.9773 22.5848 34.9773 24.1223Z" fill="white"/>
|
||||
<path d="M18.5933 24.1223C18.5933 25.6619 17.3477 26.9067 15.8072 26.9067C14.2693 26.9067 13.0241 25.6619 13.0241 24.1223C13.0241 22.5848 12.9291 20.0745 14.4666 20.0745C16.0072 20.0745 18.5933 22.5848 18.5933 24.1223Z" fill="white"/>
|
||||
<path d="M30.2883 18.5532C30.2883 20.0924 29.0427 21.3379 27.5032 21.3379C25.965 21.3379 24.7188 20.0924 24.7188 18.5532C24.7188 17.016 25.965 13.4148 27.5032 13.4148C29.0427 13.4145 30.2883 17.0157 30.2883 18.5532Z" fill="white"/>
|
||||
<path d="M30.8982 29.5056C31.6453 32.5841 28.4942 35.0038 23.8532 34.916C19.2171 34.8279 16.1208 32.3371 16.9345 29.3468C17.7468 26.3603 20.8976 23.9368 23.9736 23.9368C27.0531 23.9371 30.1514 26.4317 30.8982 29.5056Z" fill="white"/>
|
||||
<path d="M23.2347 18.5532C23.2347 20.0924 21.9888 21.3379 20.4493 21.3379C18.9108 21.3379 17.6655 20.0924 17.6655 18.5532C17.6655 17.016 18.9108 13.4148 20.4493 13.4148C21.9888 13.4145 23.2347 17.0157 23.2347 18.5532Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_39_821">
|
||||
<rect width="40" height="40" fill="white" transform="translate(4 4.16663)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_39_821">
|
||||
<rect width="40" height="40" fill="white" transform="translate(4 4.16663)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_39_821">
|
||||
<rect width="21.9543" height="21.5036" fill="white" transform="translate(13.0229 13.4148)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_39_821">
|
||||
<rect width="21.9543" height="21.5036" fill="white" transform="translate(13.0229 13.4148)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_39_821">
|
||||
<rect width="40" height="40" fill="white" transform="translate(4 4.16663)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_39_821">
|
||||
<rect width="40" height="40" fill="white" transform="translate(4 4.16663)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip6_39_821">
|
||||
<rect width="21.9543" height="21.5036" fill="white" transform="translate(13.0229 13.4148)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip7_39_821">
|
||||
<rect width="21.9543" height="21.5036" fill="white" transform="translate(13.0229 13.4148)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/images/opengraph.png
Normal file
BIN
public/images/opengraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 628 KiB |
BIN
public/images/photos/2024-06-14T19_32_04_024.JPG
Normal file
BIN
public/images/photos/2024-06-14T19_32_04_024.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
public/images/photos/2024-06-17T18_55_55_030.JPG
Normal file
BIN
public/images/photos/2024-06-17T18_55_55_030.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
public/images/photos/2024-06-17T19_44_15_068.JPG
Normal file
BIN
public/images/photos/2024-06-17T19_44_15_068.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
public/images/photos/2024-06-17T19_48_32_074.JPG
Normal file
BIN
public/images/photos/2024-06-17T19_48_32_074.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
public/images/photos/2024-06-22T20_17_57_001.JPG
Normal file
BIN
public/images/photos/2024-06-22T20_17_57_001.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/images/photos/IMG_20230602_190558.JPG
Normal file
BIN
public/images/photos/IMG_20230602_190558.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
public/images/photos/IMG_20230603_175135.JPG
Normal file
BIN
public/images/photos/IMG_20230603_175135.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/images/photos/IMG_20230604_043911_43.JPG
Normal file
BIN
public/images/photos/IMG_20230604_043911_43.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/images/photos/IMG_20240710_225123.jpg
Normal file
BIN
public/images/photos/IMG_20240710_225123.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
public/images/photos/IMG_20240710_225448.jpg
Normal file
BIN
public/images/photos/IMG_20240710_225448.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
BIN
public/images/photos/image_2024-06-02_16-55-04.png
Normal file
BIN
public/images/photos/image_2024-06-02_16-55-04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 616 KiB |
BIN
public/images/projects/anix/1.jpg
Normal file
BIN
public/images/projects/anix/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
public/images/projects/anix/2.png
Normal file
BIN
public/images/projects/anix/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
BIN
public/images/projects/anix/3.png
Normal file
BIN
public/images/projects/anix/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
public/images/projects/fadl.png
Normal file
BIN
public/images/projects/fadl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/images/projects/gh.png
Normal file
BIN
public/images/projects/gh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
public/images/projects/rps/1.jpg
Normal file
BIN
public/images/projects/rps/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
public/images/projects/rps/2.jpg
Normal file
BIN
public/images/projects/rps/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/images/projects/rps/3.jpg
Normal file
BIN
public/images/projects/rps/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/images/projects/rps/4.jpg
Normal file
BIN
public/images/projects/rps/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
public/images/projects/tgp/1.png
Normal file
BIN
public/images/projects/tgp/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/images/projects/tgp/2.png
Normal file
BIN
public/images/projects/tgp/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/images/projects/tgp/3.png
Normal file
BIN
public/images/projects/tgp/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/images/projects/tig/1.png
Normal file
BIN
public/images/projects/tig/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
BIN
public/images/projects/tig/2.png
Normal file
BIN
public/images/projects/tig/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
public/images/projects/wah-su.png
Normal file
BIN
public/images/projects/wah-su.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
public/images/protogen.png
Normal file
BIN
public/images/protogen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
public/images/protogen2.png
Normal file
BIN
public/images/protogen2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
public/images/protogen3.png
Normal file
BIN
public/images/protogen3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
public/images/red_panda.png
Normal file
BIN
public/images/red_panda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
BIN
public/images/red_panda2.png
Normal file
BIN
public/images/red_panda2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
public/images/red_panda3.png
Normal file
BIN
public/images/red_panda3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/favicon/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/static/favicon/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('/static/fonts/Inter/Inter-VariableFont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono Bold';
|
||||
src: url('/static/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono Medium';
|
||||
src: url('/static/fonts/Fira_Mono/FiraMono-Medium.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono';
|
||||
src: url('/static/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.bio {
|
||||
font-family: 'Fira Mono', monospace;
|
||||
}
|
||||
|
||||
#track-name::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
background-color: var(--cursor-color, transparent);
|
||||
-webkit-animation: var(--cursor-animation, none) 1s infinite;
|
||||
animation: var(--cursor-animation, none) 1s infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 192 B |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 176 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue