rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 07:44:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add in fade in animation

Browse source
This commit is contained in:
liyunze 2025-02-08 18:53:19 +08:00
parent 170a9b04b2
commit 80dbbc1d92
4 changed files with 69 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/elements/Card.astro
View file

@ -1,9 +1,10 @@
--- ---
interface Props { interface Props {
primaryColor: string; primaryColor: string;
bgColor?: string | undefined; bgColor?: string;
scaleOnHover?: boolean | undefined; scaleOnHover?: boolean;
pixelHeight?: string | undefined; pixelHeight?: string;
className?: string;
} }
const { const {
@ -11,10 +12,11 @@ const {
bgColor = "#282828", bgColor = "#282828",
scaleOnHover = false, scaleOnHover = false,
pixelHeight = "70px", pixelHeight = "70px",
className = "",
} = Astro.props; } = Astro.props;
--- ---
<div class="card z-10" class:list={[{ scale: scaleOnHover }]}> <div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
<slot /> <slot />
</div> </div>

106
src/layouts/Layout.astro
View file

@ -1,7 +1,7 @@
--- ---
interface Props { interface Props {
title: string; title: string;
description: string; description: string;
} }
const { title, description } = Astro.props; const { title, description } = Astro.props;
@ -10,62 +10,62 @@ import { ViewTransitions } from "astro:transitions";
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta name="viewport" content="width=device-width" /><meta <meta name="viewport" content="width=device-width" /><meta
name="keywords" name="keywords"
content="Rython, student, developer, frontend, web developer, streamer, coworking" content="Rython, student, developer, frontend, web developer, streamer, coworking"
/> />
<meta name="author" content="RythonDev" /> <meta name="author" content="RythonDev" />
<meta name="theme-color" content="#2B2D31" /> <meta name="theme-color" content="#2B2D31" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<slot /> <slot />
<ViewTransitions /> <ViewTransitions />
</body> </body>
</html> </html>
<style is:global> <style is:global>
@font-face { @font-face {
font-family: "Fredoka"; font-family: "Fredoka";
src: url("/fonts/Fredoka-Regular.ttf") format("truetype"); src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* Montserrat Fonts */ /* Montserrat Fonts */
@font-face { @font-face {
font-family: "Montserrat"; font-family: "Montserrat";
src: url("/fonts/Montserrat-Bold.ttf") format("truetype"); src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Montserrat"; font-family: "Montserrat";
src: url("/fonts/Montserrat-Regular.ttf") format("truetype"); src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
color: #fff; color: #fff;
background: radial-gradient(circle, #383838 1px, transparent 1px), background: radial-gradient(circle, #383838 1px, transparent 1px),
#202020; #202020;
background-size: 20px 20px; background-size: 20px 20px;
} }
</style> </style>

6
src/pages/index.astro
View file

@ -19,7 +19,11 @@ import Footer from "../components/sections/FooterComponent.astro";
<NavBar /> <NavBar />
<div id="home" class="pt-20 flex justify-center items-center"> <div id="home" class="pt-20 flex justify-center items-center">
<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]"> <div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
<Card bgColor="#252525" primaryColor="#BEADFA"> <Card
bgColor="#252525"
primaryColor="#BEADFA"
className="animate-fadeIn"
>
<Intro client:load /> <Intro client:load />
</Card> </Card>
</div> </div>

5
tailwind.config.cjs
View file

@ -15,9 +15,14 @@ module.exports = {
"background-position": "0% 50%", "background-position": "0% 50%",
}, },
}, },
fadeIn: {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
},
}, },
animation: { animation: {
gradient: "gradient 15s ease infinite", gradient: "gradient 15s ease infinite",
fadeIn: "fadeIn 1s ease",
}, },
}, },
}, },