mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-09-08 15:33:54 +05:00
feat: add detailed character page
This commit is contained in:
parent
2e734f3cb8
commit
8440465230
GPG key ID:
858E8EE696525EED
15 changed files with 224 additions and 24 deletions
150
app/character/kentai/page.tsx
Normal file
150
app/character/kentai/page.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
/* eslint-disable @next/next/no-img-element */
|
||||
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 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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue