Skip to content

Commit 20fdde6

Browse files
ReKyleeReKylee
committed
changed skills section some more
1 parent 52b63c4 commit 20fdde6

7 files changed

Lines changed: 36 additions & 31 deletions

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<link href="/src/app.css" rel="stylesheet" />
7+
<link href="/app.css" rel="stylesheet" />
88
%sveltekit.head%
99
</head>
1010
<body data-sveltekit-preload-data="hover" class="bg-ctp-base text-ctp-text">

‎src/lib/components/SkillCog.svelte‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/lib/components/SkillIcon.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import { theme } from "$lib/stores/theme";
3+
4+
export let lightSrc: string;
5+
export let darkSrc: string;
6+
export let alt: string;
7+
export let delay: number = 0;
8+
</script>
9+
10+
<div
11+
class="group relative flex h-20 w-20 items-center justify-center"
12+
style="animation-delay: {delay}ms"
13+
>
14+
<img
15+
src={$theme === "light" ? lightSrc : darkSrc}
16+
{alt}
17+
class="h-full w-full object-contain transition-all duration-300 animate-in animate-bounce-in group-hover:scale-110 group-hover:drop-shadow-[0_0_10px_theme(colors.ctp.mauve)]"
18+
/>
19+
</div>

‎src/lib/components/SkillsSection.svelte‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { t } from "$lib/stores/language";
33
import Section from "$lib/components/Section.svelte";
44
import SkillCard from "$lib/components/SkillCard.svelte";
5-
import SkillCog from "$lib/components/SkillCog.svelte";
5+
import SkillIcon from "$lib/components/SkillIcon.svelte";
66
import BlinkingCursor from "$lib/components/BlinkingCursor.svelte";
77
</script>
88

@@ -35,8 +35,18 @@
3535
</div>
3636

3737
<div class="flex flex-wrap items-center justify-center gap-4 p-4">
38-
<SkillCog name="Unity" />
39-
<SkillCog name="Godot" delay={100} />
38+
<SkillIcon
39+
lightSrc="/unity-original-wordmark-logo.svg"
40+
darkSrc="/unity-original-wordmark-logo.svg"
41+
alt="Unity Logo"
42+
/>
43+
44+
<SkillIcon
45+
lightSrc="/godot_logo_vertical_color_light.svg"
46+
darkSrc="/godot_logo_vertical_color_dark.svg"
47+
alt="Godot Logo"
48+
delay={300}
49+
/>
4050
</div>
4151
</SkillCard>
4252
<SkillCard title={$t("skills.languages")} theme="green" delay={150}>

‎static/godot_logo_vertical_color_dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)