|
2 | 2 | import Icon from "$components/Icon.svelte"; |
3 | 3 | import Head from "$components/Head.svelte"; |
4 | 4 | import projects from "./projects.json"; |
| 5 | + import { fade } from "svelte/transition"; |
| 6 | + import { onMount } from "svelte"; |
5 | 7 |
|
6 | 8 | const config = { |
7 | 9 | title: "Hyper-Z11", |
|
10 | 12 | url: "/", |
11 | 13 | isHome: true, |
12 | 14 | }; |
| 15 | +
|
| 16 | + const what = ["programmer", "karbit", "manusia", "WNI"]; |
| 17 | + let whatIndex = $state(0); |
| 18 | +
|
| 19 | + onMount(() => { |
| 20 | + const interval = setInterval(() => { |
| 21 | + whatIndex = (whatIndex + 1) % what.length; |
| 22 | + }, 3000); |
| 23 | +
|
| 24 | + return () => { |
| 25 | + clearInterval(interval); |
| 26 | + }; |
| 27 | + }); |
13 | 28 | </script> |
14 | 29 |
|
15 | 30 | <Head {config} /> |
16 | 31 |
|
17 | | -<div class="flex flex-col"> |
| 32 | +<div class="flex flex-col md:flex-row"> |
18 | 33 | <div class="mx-auto flex w-fit flex-col p-4"> |
19 | 34 | <img |
20 | 35 | class="m-auto max-h-fit max-w-30 rounded border-4 border-neutral-600 md:max-w-60" |
21 | 36 | src="/favicon.png" |
22 | 37 | alt="Profile" /> |
23 | 38 | <div class="mx-4 grow text-center"> |
24 | 39 | <h2 class="text-3xl font-semibold">Hyper-Z11</h2> |
25 | | - <p class="text-gray-500">Seorang programmer pemula</p> |
| 40 | + <p class="text-gray-500"> |
| 41 | + Seorang |
| 42 | + {#key whatIndex} |
| 43 | + <span in:fade={{ duration: 300, delay: 300 }} out:fade={{ duration: 300 }}> |
| 44 | + {what[whatIndex]} |
| 45 | + </span> |
| 46 | + {/key} |
| 47 | + </p> |
26 | 48 | </div> |
27 | 49 | </div> |
28 | 50 | <div class="grow"> |
|
31 | 53 | <p class="**:inline"> |
32 | 54 | Halo, saya <b>Hyper-Z11</b>. Seorang programmer pemula. Nama asli saya adalah |
33 | 55 | <b>Firjatullah Zeroun</b>. Saya dari |
34 | | - <a href="https://en.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. Saya suka |
| 56 | + <a href="https://id.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. Saya suka |
35 | 57 | koding sebagai hobi saya dan berkontribusi ke proyek sumber terbuka jika saya mau. Anda mungkin tidak akan menemukan |
36 | 58 | banyak hal disini. Jadi terima kasih sudah berkunjung. Dan jika anda mau, mungkin anda bisa mengunjungi |
37 | 59 | <a href="/blogs">kumpulan blog saya</a>. |
|
0 commit comments