mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
fixed socials and navbar
This commit is contained in:
liyunze
parent
010c4364a6
commit
576973d78e
6 changed files with 51 additions and 50 deletions
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Socials from "../socials/Socials.svelte";
|
||||
|
||||
// Roles
|
||||
const typingInterval: number = 50;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import Card from "../global/Card.astro";
|
||||
import Socials from "../socials/Socials.svelte";
|
||||
import Socials from "../socials/Socials.astro";
|
||||
import Greeting from "./Greeting.svelte";
|
||||
---
|
||||
|
||||
|
|
|
|||
47
src/components/socials/Socials.astro
Normal file
47
src/components/socials/Socials.astro
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<div class="flex flex-row items-center justify-center gap-2">
|
||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
||||
<div
|
||||
class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/github.svg"
|
||||
alt="github"
|
||||
class="aspect-square max-w-full"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://codepen.io/rythondev" target="_blank">
|
||||
<div
|
||||
class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/codepen.svg"
|
||||
alt="codepen"
|
||||
class="aspect-square h-5 w-5"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://youtube.com/@RythonDev" target="_blank">
|
||||
<div
|
||||
class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#00ffff] hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/youtube.svg"
|
||||
alt="youtube"
|
||||
class="aspect-square h-5 w-5"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://twitch.tv/RythonDev" target="_blank">
|
||||
<div
|
||||
class="flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#6eb900] hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/twitch.svg"
|
||||
alt="twitch"
|
||||
class="aspect-square h-4 w-4"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<a href="https://github.com/liyunze-coding" target="_blank">
|
||||
<div
|
||||
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/github.svg"
|
||||
alt="github"
|
||||
class="aspect-square max-w-full"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://codepen.io/rythondev" target="_blank">
|
||||
<div
|
||||
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter] duration-150 hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/codepen.svg"
|
||||
alt="codepen"
|
||||
class="aspect-square h-5 w-5"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://youtube.com/@RythonDev" target="_blank">
|
||||
<div
|
||||
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#00ffff] hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/youtube.svg"
|
||||
alt="youtube"
|
||||
class="aspect-square h-5 w-5"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://twitch.tv/RythonDev" target="_blank">
|
||||
<div
|
||||
class="mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-white transition-[filter,background-color] duration-150 hover:bg-[#6eb900] hover:invert"
|
||||
>
|
||||
<img
|
||||
src="/images/socials/twitch.svg"
|
||||
alt="twitch"
|
||||
class="aspect-square h-4 w-4"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -109,7 +109,7 @@ export const HoverNavigation = ({
|
|||
className="mr-3 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<div className="mx-5 flex flex-col items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
animate={{
|
||||
width: availableVisible ? "auto" : "0px",
|
||||
|
|
@ -118,12 +118,13 @@ export const HoverNavigation = ({
|
|||
className="flex w-auto flex-row items-center justify-center pr-2 whitespace-nowrap opacity-100 lg:w-0 lg:opacity-0"
|
||||
>
|
||||
<a
|
||||
tabIndex={1}
|
||||
href="/contact"
|
||||
className="overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500"
|
||||
>
|
||||
Available for work
|
||||
</a>
|
||||
<div className={`relative z-50 ml-3`}>
|
||||
<div className="relative z-50 ml-5">
|
||||
<div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
|
||||
<div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ import { ClientRouter } from "astro:transitions";
|
|||
thumbnail && (
|
||||
<>
|
||||
<meta name="twitter:image" content={thumbnail} />
|
||||
<meta name="og:image" content={thumbnail} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue