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

feat: add animations

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-24 21:47:29 +05:00
parent 364f65d49f
commit a2a120e05e
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 123 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/Section/Intro.tsx
View file

@ -1,20 +1,45 @@
"use client";
import { useState, useEffect } from "react";
export const Intro = () => {
const [isAnimated, setIsAnimated] = useState<boolean>(false);
useEffect(() => {
setIsAnimated(true);
}, []);
return (
<div className="flex gap-4 flex-col xl:gap-8">
<div className="w-full flex items-center justify-center py-24 bg-[#101316] rounded-tl-[256px] rounded-br-[256px]">
<h1 className="text-[#FFB1CD] tracking-tight font-bold text-[90px] text-center md:text-[128px] xl:text-[200px] 2xl:text-[232px]">
<h1 className="text-[#FFB1CD] tracking-tight font-bold text-[80px] text-center md:text-[128px] xl:text-[200px]">
Radiquum
</h1>
</div>
<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]">
<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">
<div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center 2xl:gap-16">
<p className="text-[#C8E8FE] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
<p
className="text-[#C8E8FE] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform duration-1000 ease-out"
style={{
transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
}}
>
Photographer
</p>
<p className="text-[#FF8686] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
<p
className="text-[#FF8686] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-150 duration-1000 ease-out"
style={{
transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
}}
>
Developer
</p>
<p className="text-[#FF851A] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
<p
className="text-[#FF851A] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-300 duration-1000 ease-out"
style={{
transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
}}
>
Self-Hosting admirer
</p>
</div>