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

refactor: change animation for links

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-25 00:45:23 +05:00
parent a2a120e05e
commit dfbed4197e
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 22 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/Section/Intro.tsx
View file

@ -19,26 +19,23 @@ export const Intro = () => {
<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 transition-transform duration-1000 ease-out"
style={{
transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
}}
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] 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)",
}}
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] 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)",
}}
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>

14
app/components/IconWithText.tsx
View file

@ -2,11 +2,21 @@ type IconWithTextProps = {
icon: string;
text: string;
desc: string;
hoverTextColor?: string | null;
};
export const IconWithText = ({ icon, text, desc }: IconWithTextProps) => {
export const IconWithText = ({
icon,
text,
desc,
hoverTextColor,
}: IconWithTextProps) => {
return (
<div className="flex items-center gap-1 hover:text-[#c8e8fe] transition-colors">
<div
className={`flex items-center gap-1 ${
hoverTextColor ? `hover:text-${hoverTextColor}` : ""
} transition-[color,_scale] hover:scale-105 duration-100`}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={icon} alt={""} />
<div>

2
app/components/Section.tsx
View file

@ -2,7 +2,7 @@ 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">
<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>
);