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

updated tailwind and astro version

Browse source
This commit is contained in:
liyunze 2025-06-06 20:20:46 +10:00
parent 8207aaf5e5
commit fd5db0121a
9 changed files with 1146 additions and 1995 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
astro.config.mjs
View file

@ -1,16 +1,23 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import svelte from "@astrojs/svelte"; import svelte from "@astrojs/svelte";
import mdx from "@astrojs/mdx"; import mdx from "@astrojs/mdx";
import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [tailwind(), svelte(), mdx()], integrations: [svelte(), mdx()],
server: {
port: 8008, server: {
hostname: "RythonDev", port: 8008,
}, hostname: "RythonDev",
site: "https://rython.dev", },
site: "https://rython.dev",
vite: {
plugins: [tailwindcss()],
},
}); });

2950
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -12,13 +12,13 @@
"dependencies": { "dependencies": {
"@astrojs/mdx": "^4.3.0", "@astrojs/mdx": "^4.3.0",
"@astrojs/svelte": "7.0.4", "@astrojs/svelte": "7.0.4",
"@astrojs/tailwind": "6.0.0", "@tailwindcss/vite": "^4.1.8",
"astro": "5.3.0", "astro": "^5.9.0",
"caniuse-lite": "^1.0.30001698", "caniuse-lite": "^1.0.30001698",
"moment": "^2.30.1", "moment": "^2.30.1",
"moment-timezone": "^0.5.47", "moment-timezone": "^0.5.47",
"svelte": "^5.19.9", "svelte": "^5.19.9",
"tailwindcss": "^3.4.17", "tailwindcss": "^4.1.8",
"typescript": "^5.7.3" "typescript": "^5.7.3"
}, },
"devDependencies": { "devDependencies": {

40
src/components/sections/MoreProjects.svelte
View file

@ -53,25 +53,25 @@
class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20" class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
> >
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
> >
<img <img
src="/images/projects/chess-opencv.webp" src="/images/projects/chess-opencv.webp"
alt="computer vision chess bot" alt="computer vision chess bot"
class="absolute left-1/2 class="absolute top-1/2
top-1/2 max-w-full left-1/2 max-w-full
rounded-xl border-2 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] rounded-xl
border-solid border-white opacity-40 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)]" border-2 border-solid border-white opacity-40"
width="700" width="700"
/> />
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<video <video
width="700" width="700"
class="playable opacity-1 absolute class="playable absolute top-1/2
left-1/2 top-1/2 left-1/2 max-w-full
max-w-full rounded-xl [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] rounded-xl
border-2 border-solid border-white [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)]" border-2 border-solid border-white opacity-100"
> >
<source <source
src="/videos/chess_opencv_demo.webm" src="/videos/chess_opencv_demo.webm"
@ -86,7 +86,7 @@
Computer Vision Chess bot Computer Vision Chess bot
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left" class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
> >
A script that plays against opponents on lichess. Uses A script that plays against opponents on lichess. Uses
OpenCV to detect the board and pieces, and the Stockfish OpenCV to detect the board and pieces, and the Stockfish
@ -130,14 +130,14 @@
Computer Vision AimLab Bot Computer Vision AimLab Bot
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right" class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
> >
A script that plays AimLab, a game that helps improve your A script that plays AimLab, a game that helps improve your
aim in FPS games. Uses OpenCV to detect the targets and aim in FPS games. Uses OpenCV to detect the targets and
win32API to move the mouse and click. win32API to move the mouse and click.
</p> </p>
<div <div
class="mb-10 mt-5 flex w-full flex-row flex-wrap justify-center lg:mb-0 lg:justify-end" class="mt-5 mb-10 flex w-full flex-row flex-wrap justify-center lg:mb-0 lg:justify-end"
> >
<div <div
class="my-1 mr-1 w-fit class="my-1 mr-1 w-fit
@ -163,24 +163,24 @@
</div> </div>
</div> </div>
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
> >
<img <img
src="/images/projects/aim-lab.webp" src="/images/projects/aim-lab.webp"
alt="aim lab" alt="aim lab"
class="absolute left-1/2 class="absolute top-1/2
top-1/2 max-w-full rounded-xl border-2 left-1/2 max-w-full [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] rounded-xl
border-solid border-white opacity-40 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)]" border-2 border-solid border-white opacity-40"
width="700" width="700"
/> />
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<video <video
width="700" width="700"
class="playable opacity-1 absolute class="playable absolute top-1/2
left-1/2 top-1/2 left-1/2 max-w-full
max-w-full rounded-xl [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] rounded-xl
border-2 border-solid border-white [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]" border-2 border-solid border-white opacity-100"
><source src="/videos/aim_lab_demo.webm" /></video ><source src="/videos/aim_lab_demo.webm" /></video
> >
</div> </div>

40
src/components/sections/ProjectsComponent.astro
View file

@ -15,7 +15,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20" class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
> >
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
> >
<Image <Image
src={CoworkingGuide} src={CoworkingGuide}
@ -32,16 +32,16 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
width="700" width="700"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl`
/> />
<div <div
class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]" class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
> >
<a <a
href="https://coworking-guide.vercel.app/" href="https://coworking-guide.vercel.app/"
target="_blank" target="_blank"
class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block" class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
>Visit site</a >Visit site</a
> >
</div> </div>
@ -50,7 +50,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
<a <a
href="https://coworking-guide.vercel.app/" href="https://coworking-guide.vercel.app/"
target="_blank" target="_blank"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500" class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</div> </div>
@ -61,7 +61,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
Coworking Guide Coworking Guide
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left" class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
> >
A guide to coworking streams for streamers, covers wide A guide to coworking streams for streamers, covers wide
range of topics from tips on how to get started with setting range of topics from tips on how to get started with setting
@ -98,7 +98,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
Chat-Task-Tic Widget Chat-Task-Tic Widget
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right" class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
> >
Used by 100+ Twitch streamers, allow viewers and streamers Used by 100+ Twitch streamers, allow viewers and streamers
to add their own tasks to the widget for accountability! to add their own tasks to the widget for accountability!
@ -129,7 +129,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
<a <a
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity" href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
target="_blank" target="_blank"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-600" class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-600"
>View repository</a >View repository</a
> >
</div> </div>
@ -140,7 +140,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20" class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20"
> >
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
> >
<Image <Image
src={Wnrs} src={Wnrs}
@ -158,17 +158,17 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
width="700" width="700"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
border-2 border-solid border-white rounded-xl border-2 border-solid border-white rounded-xl
aspect-video` aspect-video`
/> />
<div <div
class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]" class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
> >
<a <a
href="https://liyunze-coding.github.io/wnrs/" href="https://liyunze-coding.github.io/wnrs/"
target="_blank" target="_blank"
class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block" class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
>Visit site</a >Visit site</a
> >
</div> </div>
@ -177,7 +177,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
<a <a
href="https://hex-guess.vercel.app/" href="https://hex-guess.vercel.app/"
target="_blank" target="_blank"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500" class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</div> </div>
@ -188,7 +188,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
We're Not Really Strangers We're Not Really Strangers
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-left" class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
> >
Otherwise abbreviated as "WNRS", this is a digital Otherwise abbreviated as "WNRS", this is a digital
adaptation of the popular card game designed to foster adaptation of the popular card game designed to foster
@ -221,7 +221,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
Twitch Plays X Twitch Plays X
</h2> </h2>
<p <p
class="max-w-lg text-balance text-center text-xl lg:max-w-none lg:text-right" class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
> >
Allow Twitch chatters to play games such as Pokemon! Allow Twitch chatters to play games such as Pokemon!
Chatters can enter messages such as "up up down down left Chatters can enter messages such as "up up down down left
@ -247,12 +247,12 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
<a <a
href="https://github.com/liyunze-coding/TwitchPlaysX" href="https://github.com/liyunze-coding/TwitchPlaysX"
target="_blank" target="_blank"
class="opacity-1 rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 hover:bg-white hover:text-blue-500" class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
>View repository</a >View repository</a
> >
</div> </div>
<div <div
class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mb-0 lg:ml-auto lg:mr-5 lg:w-1/2" class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
> >
<Image <Image
src={TwitchPlays} src={TwitchPlays}
@ -269,16 +269,16 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
width="700" width="700"
class=`absolute max-w-full class=`absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1 [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-100
border-2 border-solid border-white rounded-xl` border-2 border-solid border-white rounded-xl`
/> />
<div <div
class="visit-div absolute left-1/2 top-1/2 aspect-video w-[700px] max-w-full rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0 [transform:translateX(-50%)_translateY(-50%)]" class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
> >
<a <a
href="https://github.com/liyunze-coding/TwitchPlaysX" href="https://github.com/liyunze-coding/TwitchPlaysX"
target="_blank" target="_blank"
class="opacity-1 absolute left-1/2 top-1/2 hidden rounded-xl bg-blue-600 px-5 py-3 font-bold transition-colors duration-300 [transform:translateX(-50%)_translateY(-50%)] hover:bg-white hover:text-blue-500 lg:block" class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
>View repository</a >View repository</a
> >
</div> </div>

44
src/components/sections/TaskWidget.svelte
View file

@ -116,13 +116,13 @@
</script> </script>
<div <div
class="image-container relative mb-3 ml-0 mr-0 aspect-video [perspective:200px] md:mr-5 lg:mb-0 lg:ml-1 lg:mr-0 lg:w-1/2" class="image-container relative mr-0 mb-3 ml-0 aspect-video [perspective:200px] md:mr-5 lg:mr-0 lg:mb-0 lg:ml-1 lg:w-1/2"
> >
<!-- task bot --> <!-- task bot -->
<div <div
class="task-widget absolute left-1/2 top-1/2 flex class="task-widget absolute top-1/2 left-1/2 flex
h-[99%] w-full h-[99%] w-full
flex-col opacity-30 [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]" [transform:translateX(-50%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)] flex-col opacity-30"
> >
<div <div
class="flex w-full flex-row items-center justify-between class="flex w-full flex-row items-center justify-between
@ -141,8 +141,8 @@
<div class="scroll-element primary absolute w-full px-1"> <div class="scroll-element primary absolute w-full px-1">
{#each streamers as { streamer, task }} {#each streamers as { streamer, task }}
<div <div
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040] class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
px-5 py-1 text-white" overflow-ellipsis whitespace-nowrap text-white"
> >
O {streamer} : {task} O {streamer} : {task}
</div> </div>
@ -151,8 +151,8 @@
<div class="scroll-element secondary absolute w-full px-1"> <div class="scroll-element secondary absolute w-full px-1">
{#each streamers as { streamer, task }} {#each streamers as { streamer, task }}
<div <div
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040] class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
px-5 py-1 text-white" overflow-ellipsis whitespace-nowrap text-white"
> >
O {streamer} : {task} O {streamer} : {task}
</div> </div>
@ -161,9 +161,9 @@
</div> </div>
</div> </div>
<div <div
class="task-widget absolute left-1/2 top-1/2 class="task-widget absolute top-1/2 left-1/2
flex h-[99%] flex h-[99%]
w-full flex-col [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]" w-full [transform:translateX(-51%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] flex-col"
> >
<div <div
class="flex w-full flex-row items-center justify-between class="flex w-full flex-row items-center justify-between
@ -182,8 +182,8 @@
<div class="scroll-element primary absolute w-full px-1"> <div class="scroll-element primary absolute w-full px-1">
{#each streamers as { streamer, task }} {#each streamers as { streamer, task }}
<div <div
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040] class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
px-5 py-1 text-white" overflow-ellipsis whitespace-nowrap text-white"
> >
O {streamer} : {task} O {streamer} : {task}
</div> </div>
@ -192,8 +192,8 @@
<div class="scroll-element secondary absolute w-full px-1"> <div class="scroll-element secondary absolute w-full px-1">
{#each streamers as { streamer, task }} {#each streamers as { streamer, task }}
<div <div
class="my-2 w-full overflow-hidden overflow-ellipsis whitespace-nowrap rounded-md bg-[#404040] class="my-2 w-full overflow-hidden rounded-md bg-[#404040] px-5 py-1
px-5 py-1 text-white" overflow-ellipsis whitespace-nowrap text-white"
> >
O {streamer} : {task} O {streamer} : {task}
</div> </div>
@ -202,20 +202,20 @@
</div> </div>
</div> </div>
<div <div
class="visit-div absolute left-1/2 top-1/2 h-full w-full class="visit-div absolute top-1/2 left-1/2 h-full w-full
overflow-hidden [transform:translateX(-50%)_translateY(-50%)]
rounded-md border-2 border-solid overflow-hidden rounded-md border-2
border-white bg-[rgba(0,0,0,0.5)] opacity-0 border-solid border-white bg-[rgba(0,0,0,0.5)]
[transform:translateX(-50%)_translateY(-50%)]" opacity-0"
> >
<a <a
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity" href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
target="_blank" target="_blank"
class="opacity-1 absolute left-1/2 top-1/2 class="absolute top-1/2 left-1/2 hidden
hidden rounded-xl bg-blue-500 px-5 py-3 [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-500 px-5 py-3
font-bold font-bold
transition-colors duration-300 opacity-100 transition-colors
[transform:translateX(-50%)_translateY(-50%)] hover:bg-white duration-300 hover:bg-white
hover:text-blue-500 lg:block">View repository</a hover:text-blue-500 lg:block">View repository</a
> >
</div> </div>

15
src/layouts/Layout.astro
View file

@ -5,7 +5,8 @@ interface Props {
} }
const { title, description } = Astro.props; const { title, description } = Astro.props;
import { ViewTransitions } from "astro:transitions"; import "../styles/global.css";
import { ClientRouter } from "astro:transitions";
--- ---
<!doctype html> <!doctype html>
@ -25,7 +26,7 @@ import { ViewTransitions } from "astro:transitions";
</head> </head>
<body> <body>
<slot /> <slot />
<ViewTransitions /> <ClientRouter />
</body> </body>
</html> </html>
<style is:global> <style is:global>
@ -55,17 +56,11 @@ import { ViewTransitions } from "astro:transitions";
scroll-behavior: smooth; scroll-behavior: smooth;
} }
* {
margin: 0;
padding: 0;
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:
#202020; radial-gradient(circle, #383838 1px, transparent 1px), #202020;
background-size: 20px 20px; background-size: 20px 20px;
} }
</style> </style>

24
src/pages/socials.astro
View file

@ -56,7 +56,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -107,7 +107,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -161,7 +161,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -209,7 +209,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -288,7 +288,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -309,7 +309,7 @@ import profile from "./_images/profile.webp";
> >
<div <div
id="github-icon" id="github-icon"
class="icon-box 2-10 absolute left-1/2 top-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full" class="icon-box 2-10 absolute top-1/2 left-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full"
> >
<svg <svg
width="38px" width="38px"
@ -358,7 +358,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -482,7 +482,7 @@ import profile from "./_images/profile.webp";
</div> </div>
<span <span
id="time-in-aus" id="time-in-aus"
class="uppercase text-[#ccc]"></span> class="text-[#ccc] uppercase"></span>
<span <span
id="time-difference" id="time-difference"
class="text-[#ccc]" class="text-[#ccc]"
@ -500,7 +500,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -540,7 +540,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -598,7 +598,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -639,7 +639,7 @@ import profile from "./_images/profile.webp";
class="social-card-content group flex flex-col items-start justify-between" class="social-card-content group flex flex-col items-start justify-between"
> >
<div <div
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-100" class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

1
src/styles/global.css Normal file
View file

@ -0,0 +1 @@
@import "tailwindcss";