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

refactor: intro

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-26 21:46:28 +05:00
parent fec0e79c50
commit 94e55edf4c
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 15 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/Section/Intro.tsx
View file

@ -10,35 +10,13 @@ export const Intro = () => {
}, []); }, []);
return ( return (
<div className="flex gap-4 flex-col xl:gap-8"> <div>
<div className="w-full flex items-center justify-center py-24 bg-[#101316] rounded-tl-[256px] rounded-br-[256px]"> <div className="flex flex-col mx-auto max-w-fit md:items-center justify-center h-fit py-16 gap-4">
<h1 className="text-[#FFB1CD] tracking-tight font-bold text-[80px] text-center md:text-[128px] xl:text-[200px]"> <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>
Radiquum <div className="flex flex-col md:flex-row md:gap-8 overflow-hidden">
</h1> <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>
</div> <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>
<div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px] md:rounded-bl-[256px] md:rounded-tr-[256px] overflow-hidden"> <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 className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center 2xl:gap-16">
<p
className={`text-[#C8E8FE] ${
isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
} font-medium text-4xl md:text-5xl xl:text-8xl transition-transform duration-1000 ease-out`}
>
Photographer
</p>
<p
className={`text-[#FF8686] ${
isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
} font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-150 duration-1000 ease-out`}
>
Developer
</p>
<p
className={`text-[#FF851A] ${
isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
} font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-300 duration-1000 ease-out`}
>
Self-Hosting admirer
</p>
</div> </div>
</div> </div>
</div> </div>

4
app/components/CharacterImage.tsx
View file

@ -14,8 +14,8 @@ export const CharacterImage = ({
}: CharacterImageProps) => { }: CharacterImageProps) => {
return ( return (
<div className="relative rounded-4xl overflow-hidden"> <div className="relative rounded-4xl overflow-hidden">
<img src={image} alt="" className="rounded-4xl w-full md:w-[288px] aspect-square" /> <img src={image} alt="" className="w-full md:w-[288px] aspect-square" />
<div className="absolute left-0 right-0 bottom-0 z-10 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden"> <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"> <div className="p-4 flex gap-2 justify-between items-end">
<p className="text-5xl">{name}</p> <p className="text-5xl">{name}</p>
<p className="flex-1 text-right text-3xl"> <p className="flex-1 text-right text-3xl">

2
app/components/IconWithText.tsx
View file

@ -15,7 +15,7 @@ export const IconWithText = ({
}: IconWithTextProps) => { }: IconWithTextProps) => {
return ( return (
<div <div
className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] hover:scale-105 duration-100 ease-in-out`} 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] hover:scale-105 duration-100 ease-in-out`}
style={ style={
{ {
"--bg-color": backgroundColor || "#161213", "--bg-color": backgroundColor || "#161213",

10
app/page.tsx
View file

@ -10,18 +10,18 @@ import { Socials } from "./Section/Socials";
export default function Home() { export default function Home() {
return ( return (
<main> <main>
<Intro />
<div className="flex flex-col gap-4 md:gap-8 overflow-hidden bg-[#090909]"> <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"> <div className="flex flex-col gap-8 md:gap-16 overflow-hidden">
<Intro />
<Socials /> <Socials />
<Photos />
<Skills /> <Skills />
<Projects /> <Projects />
</div>
<div className="flex flex-col gap-8 md:gap-16 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]">
<Characters />
<Contacts /> <Contacts />
</div> </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>
<div className="bg-[#131314]"> <div className="bg-[#131314]">
<Footer /> <Footer />