Skip to content

Commit a6513cb

Browse files
hyperz111hyperz111
committed
feat: add some languages & tools
1 parent b11837e commit a6513cb

3 files changed

Lines changed: 140 additions & 57 deletions

File tree

‎src/routes/+page.svelte‎

Lines changed: 62 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import Icon from "$components/Icon.svelte";
33
import Head from "$components/Head.svelte";
4-
import projects from "./projects.json";
4+
import data from "./data-for-home.json";
55
import { fade } from "svelte/transition";
66
import { onMount } from "svelte";
77
@@ -25,50 +25,72 @@
2525
clearInterval(interval);
2626
};
2727
});
28+
29+
const gridMenu = [
30+
["Bahasa Pemograman", "languages"],
31+
["Alat-alat", "tools"],
32+
];
2833
</script>
2934

3035
<Head {config} />
3136

32-
<div class="flex flex-col md:flex-row">
33-
<div class="mx-auto flex w-fit flex-col p-4">
34-
<img
35-
class="m-auto max-h-fit max-w-30 rounded border-4 border-neutral-600 md:max-w-60"
36-
src="/favicon.png"
37-
alt="Profile" />
38-
<div class="mx-4 grow text-center">
39-
<h2 class="text-3xl font-semibold">Hyper-Z11</h2>
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>
37+
<div>
38+
<div class="flex flex-col md:flex-row">
39+
<div class="mx-auto flex w-fit flex-col p-4">
40+
<img
41+
class="m-auto max-h-fit max-w-30 rounded border-4 border-neutral-600 md:max-w-60"
42+
src="/favicon.png"
43+
alt="Profile" />
44+
<div class="mx-4 grow text-center">
45+
<h2 class="text-3xl font-semibold">Hyper-Z11</h2>
46+
<p class="text-gray-500">
47+
Seorang
48+
{#key whatIndex}
49+
<span in:fade={{ duration: 300, delay: 300 }} out:fade={{ duration: 300 }}>
50+
{what[whatIndex]}
51+
</span>
52+
{/key}
53+
</p>
54+
</div>
4855
</div>
49-
</div>
50-
<div class="grow">
51-
<section id="about">
52-
<h2>Tentang</h2>
53-
<p class="**:inline">
54-
Halo, saya <b>Hyper-Z11</b>. Seorang programmer pemula. Nama asli saya adalah
55-
<b>Firjatullah Zeroun</b>. Saya dari
56-
<a href="https://id.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. Saya suka
57-
koding sebagai hobi saya dan berkontribusi ke proyek sumber terbuka jika saya mau. Anda mungkin tidak akan menemukan
58-
banyak hal disini. Jadi terima kasih sudah berkunjung. Dan jika anda mau, mungkin anda bisa mengunjungi
59-
<a href="/blogs">kumpulan blog saya</a>.
60-
</p>
61-
</section>
56+
<div class="grow">
57+
<section id="about">
58+
<h2>Tentang</h2>
59+
<p class="**:inline">
60+
Halo, saya <b>Hyper-Z11</b>. Seorang programmer pemula. Nama asli saya adalah
61+
<b>Firjatullah Zeroun</b>. Saya dari
62+
<a href="https://id.wikipedia.org/wiki/Indonesia"><b><Icon icon="pin-map" class="mx-1" />Indonesia</b></a>. Saya
63+
suka koding sebagai hobi saya dan berkontribusi ke proyek sumber terbuka jika saya mau. Anda mungkin tidak akan
64+
menemukan banyak hal disini. Jadi terima kasih sudah berkunjung. Dan jika anda mau, mungkin anda bisa mengunjungi
65+
<a href="/blogs">kumpulan blog saya</a>.
66+
</p>
67+
</section>
6268

63-
<section id="projects">
64-
<h2>Proyek</h2>
65-
<p>Saya telah bekerja dan berkontribusi ke beberapa proyek di bawah ini:</p>
66-
<ul class="list-disc">
67-
{#each projects as { name, description, url } (url)}
68-
<li class="mx-5"><a href={url}>{name} - {description}</a></li>
69-
{/each}
70-
</ul>
71-
</section>
69+
<section id="projects">
70+
<h2>Proyek</h2>
71+
<p>Saya telah bekerja dan berkontribusi ke beberapa proyek di bawah ini:</p>
72+
<ul class="list-disc">
73+
{#each data.projects as { name, description, url } (url)}
74+
<li class="mx-5"><a href={url}>{name} - {description}</a></li>
75+
{/each}
76+
</ul>
77+
</section>
78+
</div>
79+
</div>
80+
<div>
81+
{#each gridMenu as menu}
82+
<section>
83+
<h2>{menu[0]}</h2>
84+
<div class="grid gap-2 min-[375px]:grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
85+
{#each data[menu[1]] as { name, icon, color } (name)}
86+
<div class="group flex cursor-pointer gap-2 rounded-xl border-2 border-neutral-300 p-4 hover:scale-90">
87+
<Icon {icon} style="color: {color}" />
88+
<span class="">{name}</span>
89+
</div>
90+
{/each}
91+
</div>
92+
</section>
93+
{/each}
7294
</div>
7395
</div>
7496

@@ -80,7 +102,7 @@
80102
}
81103
82104
section > h2 {
83-
@apply text-3xl font-black;
105+
@apply mb-2 text-3xl font-black;
84106
}
85107
86108
a {

‎src/routes/data-for-home.json‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"projects": [
3+
{
4+
"name": "Acode-Foundation/Acode",
5+
"description": "Editor kode yang kuat untuk Android",
6+
"url": "https://github.com/Acode-Foundation/Acode"
7+
},
8+
{
9+
"name": "bombshell-dev/clack",
10+
"description": "Prompt CLI",
11+
"url": "https://github.com/bombshell-dev/clack"
12+
},
13+
{
14+
"name": "eslint/create-config",
15+
"description": "Utilitas untuk membuat berkas konfigurasi ESLint.",
16+
"url": "https://github.com/eslint/create-config"
17+
}
18+
],
19+
"languages": [
20+
{
21+
"name": "JavaScript",
22+
"icon": "javascript",
23+
"color": "yellow"
24+
},
25+
{
26+
"name": "TypeScript",
27+
"icon": "typescript",
28+
"color": "cornflowerblue"
29+
},
30+
{
31+
"name": "JSON",
32+
"icon": "braces",
33+
"color": "orange"
34+
},
35+
{
36+
"name": "Markdown",
37+
"icon": "markdown",
38+
"color": "white"
39+
},
40+
{
41+
"name": "HTML",
42+
"icon": "code-slash",
43+
"color": "orange"
44+
},
45+
{
46+
"name": "CSS",
47+
"icon": "css",
48+
"color": "darkorchid"
49+
}
50+
],
51+
"tools": [
52+
{
53+
"name": "Git",
54+
"icon": "git",
55+
"color": "orangered"
56+
},
57+
{
58+
"name": "Node.js",
59+
"icon": "app",
60+
"color": "green"
61+
},
62+
{
63+
"name": "Vite",
64+
"icon": "lightning",
65+
"color": "darkviolet"
66+
},
67+
{
68+
"name": "NPM",
69+
"icon": "app",
70+
"color": "red"
71+
},
72+
{
73+
"name": "PNPM",
74+
"icon": "app",
75+
"color": "yellow"
76+
}
77+
]
78+
}

‎src/routes/projects.json‎

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

0 commit comments

Comments
 (0)