mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-09-05 14:05:37 +05:00
feat: add animations
This commit is contained in:
parent
364f65d49f
commit
a2a120e05e
GPG key ID:
858E8EE696525EED
5 changed files with 123 additions and 21 deletions
|
|
@ -1,8 +1,13 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
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";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/furaffinity.svg",
|
||||
|
|
@ -19,6 +24,12 @@ 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 })
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
|
||||
|
|
@ -59,23 +70,21 @@ export const Characters = () => {
|
|||
/>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-5xl">Kentai</p>
|
||||
<p className="mt-2 text-3xl">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">
|
||||
about
|
||||
</button>
|
||||
</div>
|
||||
<div className="ml-21 hidden xl:block">
|
||||
<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"
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/red_panda2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden xl:block absolute -right-72">
|
||||
<img
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover"
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/red_panda3.png"
|
||||
alt=""
|
||||
/>
|
||||
|
|
@ -90,19 +99,17 @@ export const Characters = () => {
|
|||
/>
|
||||
<div className="flex flex-col xl:text-right">
|
||||
<p className="mt-2 text-3xl">Protogen</p>
|
||||
<p className="text-3xl">Male</p>
|
||||
<p className="text-3xl" ref={imagesProtogenRef}>Male</p>
|
||||
</div>
|
||||
<div className="mr-16 hidden xl:block">
|
||||
<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"
|
||||
src="/images/protogen2.png"
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/protogen3.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-10 hidden xl:block absolute -left-72">
|
||||
<img
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover"
|
||||
src="/images/protogen3.png"
|
||||
className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
|
||||
src="/images/protogen2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ export const CharacterImage = ({
|
|||
}: CharacterImageProps) => {
|
||||
return (
|
||||
<div className="relative rounded-4xl overflow-hidden">
|
||||
<img src={image} alt="" className="rounded-4xl md:w-[288px] aspect-square" />
|
||||
<div className="absolute left-0 right-0 bottom-0 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden">
|
||||
<img src={image} alt="" className="rounded-4xl 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="p-4 flex gap-2 justify-between items-end">
|
||||
<p className="text-5xl">{name}</p>
|
||||
<p className="flex-1 text-right text-3xl">
|
||||
|
|
|
|||
69
package-lock.json
generated
69
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"motion": "^12.23.9",
|
||||
"next": "15.4.2",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0"
|
||||
|
|
@ -3355,6 +3356,33 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.23.9",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.9.tgz",
|
||||
"integrity": "sha512-TqEHXj8LWfQSKqfdr5Y4mYltYLw96deu6/K9kGDd+ysqRJPNwF9nb5mZcrLmybHbU7gcJ+HQar41U3UTGanbbQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.23.9",
|
||||
"motion-utils": "^12.23.6",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
|
|
@ -4627,6 +4655,47 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/motion": {
|
||||
"version": "12.23.9",
|
||||
"resolved": "https://registry.npmjs.org/motion/-/motion-12.23.9.tgz",
|
||||
"integrity": "sha512-5PDgsbNtZ4cpfew3STYL0p06rIiy8vOveQuQBXUAa2+m1WMzjf65DXYn6eo88dM2s+XLxAQq3ZiOjcnKMACEtQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.23.9",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.23.9",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.9.tgz",
|
||||
"integrity": "sha512-6Sv++iWS8XMFCgU1qwKj9l4xuC47Hp4+2jvPfyTXkqDg2tTzSgX6nWKD4kNFXk0k7llO59LZTPuJigza4A2K1A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.23.6"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.23.6",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"motion": "^12.23.9",
|
||||
"next": "15.4.2",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue