From 39c599279f71fadf9b74c650d3ae66801c85f447 Mon Sep 17 00:00:00 2001
From: littleblack111 <littleblack11111@gmail.com>
Date: Sun, 13 Oct 2024 17:59:15 +0800
Subject: add(layout,page): added reveal animation for layout(global) and
 zoomIn animation for page(/)

move(animations): styles -> tailwind
add(styles): wrapper
---
 app/layout.tsx     |  14 ++--
 app/page.tsx       |   4 +-
 app/styles.css     | 207 ++---------------------------------------------------
 tailwind.config.ts |  80 +++++++++++++++++++++
 4 files changed, 96 insertions(+), 209 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 0f5e733..8da348a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -70,12 +70,14 @@ export default function RootLayout({children,}: Readonly<{children: React.ReactN
 	return (
 		<html lang="en" style={{ "--blur-size": 0 } as React.CSSProperties}>
 		<body className={`${MonotonFont.variable} ${RockSaltFont.variable} ${InterFont.variable} ${JetBrainsMonoFont.variable}`}>
-			<Header />
-			<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-				{children}
-			</ThemeProvider>
-			<Analytics />
-			<Performance />
+			<div className="animate-reveal">
+				<Header />
+				<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+					{children}
+				</ThemeProvider>
+				<Analytics />
+				<Performance />
+			</div>
 		</body>
 		</html>
 	);
diff --git a/app/page.tsx b/app/page.tsx
index 79800a1..d14ccd3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,9 +9,9 @@ import Parallax from "react-next-parallax";
 
 export default function Home() {
 	return (
-		<div className={cn("h-screen w-full top-0 left-0 overflow-hidden fixed -z-6")}>
+		<div className={cn("h-screen w-full top-0 left-0 overflow-hidden fixed -z-6 animate-ZoomInFast")}>
 			<section className={cn("top-0 left-0 m-0 p-0 w-full h-full bg-center bg-no-repeat bg-cover text-foreground dark:text-dforground bg-background dark:bg-dbackground")}>
-				<Parallax fullPageListening spotGlareEnable={false} lineGlareEnable={false} className={cn("tilt relative top-[15%] left-[10%] h-[70%] w-[80%] bg-transparent flex justify-center items-center z-[999] overflow-visible")}>
+				<Parallax fullPageListening spotGlareEnable={false} lineGlareEnable={false} className={cn("tilt relative top-[15%] left-[10%] h-[70%] w-[80%] bg-transparent flex justify-center items-center z-[999] overflow-visible animate-zoomIn")}>
 					<div className={cn("relative w-full h-full border border-white rounded-[1em] flex justify-center items-center text-center z-[11] shadow-[0_0_100px_rgba(5,1,13,0.4)]")}>
 						<div className="relative w-full text-center">
 							<h2 className="font-inter text-[2.5vw] " data-parallax-offset="-5">Hello! I&apos;m</h2>
diff --git a/app/styles.css b/app/styles.css
index 33729de..6acdf80 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -100,6 +100,12 @@ body::-webkit-scrollbar {
     display: none;
 }
 
+.wrapper {
+	background: none repeat scroll 0 0 var(--background);
+	margin: 0 auto;
+	overflow: hidden;
+}
+
 @media (prefers-reduced-motion: no-preference) {
     :has(:target) {
         scroll-behavior: smooth;
@@ -107,148 +113,6 @@ body::-webkit-scrollbar {
 
 	/* animation ============================================== */
 
-	@keyframes slideInTop {
-		from {
-			transform: translateY(-300px);
-		}
-		to {
-			transform: translateY(0);
-		}
-	}
-
-	@keyframes bounce {
-		0%, 20%, 50%, 80%, 100% {
-			transform: translateY(0px);
-		}
-		40% {
-			transform: translateY(30px);
-		}
-		80% {
-			transform: translateY(-15px);
-		}
-	}
-
-	@keyframes zoomIn {
-		0% {
-			scale: 0.01;
-		}
-		65% {
-			scale: 1.05;
-		}
-		100% {
-			scale: 1;
-			position: relative;
-		}
-	}
-
-	@keyframes zoomOut {
-		from {
-			transform: scale(1);
-		}
-		to {
-			transform: scale(0.01);
-		}
-	}
-
-	@keyframes fadeZoomIn {
-		from {
-			opacity: 0.35;
-			scale: 1.15;
-		}
-		to {
-			opacity: 1;
-			scale: 1;
-		}
-	}
-
-	@keyframes reveal {
-		from {
-			-webkit-filter: blur(32px);
-			-moz-filter: blur(32px);
-			-o-filter: blur(32px);
-			-ms-filter: blur(32px);
-			filter: blur(32px);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
-			transform: scale(2);
-		}
-	}
-
-	@keyframes shake {
-		0% { transform: rotate(0deg); }
-		25% { transform: rotate(.5deg); }
-		50% { transform: rotate(0eg); }
-		75% { transform: rotate(-.5deg); }
-		100% { transform: rotate(0deg); }
-	}
-
-	@keyframes background-pan {
-		from {
-			background-position: 0% center;
-		}
-		to {
-			background-position: -200% center;
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			scale: 0.8;
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-			scale: 1;
-		}
-	}
-
-	@keyframes fadeOut {
-		from {
-
-		}
-		to {
-			opacity: 0;
-			scale: 0.8
-		}
-	}
-
-	@keyframes scroll {
-		from {
-			opacity: 0.8;
-			scale: 0.75;
-		}
-		to {
-			opacity: 1;
-			scale: 1;
-		}
-	}
-
-	@keyframes rotate {
-		from {
-			rotate: 0deg;
-		}
-		
-		50% {
-			scale: 1 1.25;
-		}
-		
-		to {
-			rotate: 360deg;
-		}
-	}
-
-	@keyframes minimize {
-		from {
-			scale: 1;
-			opacity: 1;
-		}
-		to {
-			scale: 0;
-			opacity: 0;
-		}
-	}
-
-
 	/* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
@@ -291,63 +155,6 @@ body::-webkit-scrollbar {
 		animation-duration: 1s;
 	}
 
-	/* real utility classes */
-
-	.animate.slideInTop {
-		animation-name: slideInTop;
-		-webkit-transition-timing-function: ease-in;
-		transition-timing-function: ease-in;
-		-webkit-animation-timing-function: ease-in;
-		animation-timing-function: ease-in;
-	}
-
-	.animate.bounce {
-		-webkit-animation-name: bounce;
-		animation-name: bounce;
-	}
-
-	.animate.zoomIn {
-		-webkit-transition-timing-function: linear;
-		transition-timing-function: linear;
-		-webkit-animation-name: reveal;
-		animation-name: zoomIn;
-	}
-
-	.animate.zoomOut {
-		-webkit-transition-timing-function: linear;
-		transition-timing-function: linear;
-		-webkit-animation-name: zoomOut;
-		animation-name: zoomOut;
-	}
-
-	.animate.reveal {
-		animation-duration: 500ms;
-		-webkit-transition-timing-function: linear;
-		transition-timing-function: linear;
-		-webkit-animation-name: reveal;
-		animation-name: reveal;
-	}
-
-	.animate.shake {
-		-webkit-animation-name: shake;
-		animation-name: shake;
-	}
-
-	.animate.fadeIn {
-		-webkit-animation-name: fadeIn;
-		animation-name: fadeIn;
-	}
-
-	.animate.fadeOut {
-		-webkit-animation-name: fadeOut;
-		animation-name: fadeOut;
-	}
-
-	.animate.fadeZoomIn {
-		-webkit-animation-name: fadeZoomIn;
-		animation-name: fadeZoomIn;
-	}
-
 	.aniamte.persist {
 		animation-fill-mode: forwards;
 	}
@@ -408,5 +215,3 @@ a:hover, Button:hover {
 a:active, Button:active {
     transform: scale(0.9);
 }
-
-
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 025a42f..ce7e9c8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -64,6 +64,86 @@ const config: Config = {
                 rocksalt: ['var(--font-rocksalt)'],
 				jetbrains: ['var(--font-jetbrains)'],
             },
+            keyframes: {
+                slideInTop: {
+                    'from': { transform: 'translateY(-300px)' },
+                    'to': { transform: 'translateY(0)' }
+                },
+                bounce: {
+                    '0%, 20%, 50%, 80%, 100%': { transform: 'translateY(0px)' },
+                    '40%': { transform: 'translateY(30px)' },
+                    '80%': { transform: 'translateY(-15px)' }
+                },
+                zoomIn: {
+                    '0%': { scale: '0.01' },
+                    '65%': { scale: '1.05' },
+                    '100%': { scale: '1', position: 'relative' }
+                },
+                zoomOut: {
+                    'from': { transform: 'scale(1)' },
+                    'to': { transform: 'scale(0.01)' }
+                },
+                fadeZoomIn: {
+                    'from': { opacity: '0.35', scale: '1.15' },
+                    'to': { opacity: '1', scale: '1' }
+                },
+                reveal: {
+                    'from': {
+                        filter: 'blur(32px)',
+                        backdropFilter: 'blur(32px)',
+                        transform: 'scale(2)'
+                    }
+                },
+                shake: {
+                    '0%': { transform: 'rotate(0deg)' },
+                    '25%': { transform: 'rotate(.5deg)' },
+                    '50%': { transform: 'rotate(0deg)' },
+                    '75%': { transform: 'rotate(-.5deg)' },
+                    '100%': { transform: 'rotate(0deg)' }
+                },
+                backgroundPan: {
+                    'from': { backgroundPosition: '0% center' },
+                    'to': { backgroundPosition: '-200% center' }
+                },
+                fadeIn: {
+                    'from': { scale: '0.8', opacity: '0' },
+                    'to': { opacity: '1', scale: '1' }
+                },
+                fadeOut: {
+                    'from': {},
+                    'to': { opacity: '0', scale: '0.8' }
+                },
+                scroll: {
+                    'from': { opacity: '0.8', scale: '0.75' },
+                    'to': { opacity: '1', scale: '1' }
+                },
+                rotate: {
+                    'from': { rotate: '0deg' },
+                    '50%': { scale: '1 1.25' },
+                    'to': { rotate: '360deg' }
+                },
+                minimize: {
+                    'from': { scale: '1', opacity: '1' },
+                    'to': { scale: '0', opacity: '0' }
+                }
+            },
+			animation: {
+				slideInTop: 'slideInTop 1s ease-out',
+				bounce: 'bounce 1s ease-out',
+				ZoomIn: 'zoomIn 1s ease-out',
+				ZoomInFast: 'zoomIn 300ms ease-out',
+				ZoomOut: 'zoomOut 1s ease-out',
+				fadeZoomIn: 'fadeZoomIn 1s ease-out',
+				reveal: 'reveal 500ms ease-out forwards',
+				revealFast: 'reveal 300ms ease-out forwards',
+				shake: 'shake 1s ease-out',
+				backgroundPan: 'backgroundPan 1s linear infinite',
+				fadeIn: 'fadeIn 1s ease-out',
+				fadeOut: 'fadeOut 1s ease-out',
+				scroll: 'scroll 1s ease-out',
+				rotate: 'rotate 1s linear infinite',
+				minimize: 'minimize 1s ease-out'
+			}
         }
     },
     plugins: [require("tailwindcss-animate")],
-- 
cgit v1.2.3