Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-09-08 15:33:54 +05:00
Code Issues Projects Releases Packages Wiki Activity

feat: add detailed character page

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-27 02:32:03 +05:00
parent 2e734f3cb8
commit 8440465230
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
15 changed files with 224 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

71
app/Section/Characters.tsx
View file

@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import Link from "next/link";
@ -5,8 +6,8 @@ import { IconWithText } from "../components/IconWithText";
import { Section } from "../components/Section";
import { CharacterImage } from "../components/CharacterImage";
import { useInView } from "motion/react"
import { useEffect, useRef } from "react";
import { useInView } from "motion/react";
import { useRef } from "react";
const links = [
{
@ -24,19 +25,24 @@ const links = [
];
export const Characters = () => {
const imagesRedPandaRef = useRef(null)
const imagesRedPandaIsInView = useInView(imagesRedPandaRef, { once: true })
const imagesProtogenRef = useRef(null)
const imagesProtogenIsInView = useInView(imagesProtogenRef, { once: true })
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>
<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">
<Link
href={item.url}
key={`characters.link.${item.text}`}
className="flex-1"
>
<IconWithText
icon={item.icon}
text={item.text}
@ -49,12 +55,14 @@ export const Characters = () => {
</div>
</div>
<div className="flex flex-col gap-4 mt-2 md:hidden">
<CharacterImage
name="Kentai"
species="Red Panda"
gender="Male"
image="/images/red_panda.png"
/>
<Link href="/character/kentai">
<CharacterImage
name="Kentai"
species="Red Panda"
gender="Male"
image="/images/red_panda.png"
/>
</Link>
<CharacterImage
name=""
species="Protogen"
@ -72,14 +80,26 @@ export const Characters = () => {
/>
<div className="flex flex-col">
<p className="text-5xl">Kentai</p>
<p className="mt-2 text-3xl" ref={imagesRedPandaRef}>Red Panda</p>
<p className="mt-2 text-3xl" ref={imagesRedPandaRef}>
Red Panda
</p>
<p className="text-3xl">Male</p>
<div className="flex-1"></div>
<button className="rounded-full bg-[#491f1f] px-4 py-2 text-3xl">
<Link
href="/character/kentai"
className="rounded-full bg-[#491f1f] hover:bg-[#601f1f] transition-colors px-4 py-2 text-3xl text-center"
>
about
</button>
</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)" }}>
<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"
@ -101,9 +121,18 @@ export const Characters = () => {
/>
<div className="flex flex-col xl:text-right">
<p className="mt-2 text-3xl">Protogen</p>
<p className="text-3xl" ref={imagesProtogenRef}>Male</p>
<p className="text-3xl" ref={imagesProtogenRef}>
Male
</p>
</div>
<div className="bottom-0 right-[488px] absolute hidden xl:flex gap-4 transition-transform duration-1000 ease-out" style={{ transform: !imagesProtogenIsInView ? "translateX(-100vw)" : "translateX(0)" }}>
<div
className="bottom-0 right-[488px] 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"

2
app/Section/Intro.tsx
View file

@ -13,7 +13,7 @@ export const Intro = () => {
<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&apos;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 md:flex-row md:gap-8 overflow-hidden">
<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>