summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/layout.tsx14
-rw-r--r--app/page.tsx4
-rw-r--r--app/styles.css207
-rw-r--r--tailwind.config.ts80
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")],
generated by cgit v1.2.3 (git 2.25.1) at 2026-11-01 13:13:35 +0000