Skip to content

Commit 8b09441

Browse files
frullahfrullah
committed
update home contents
1 parent 9cfdefa commit 8b09441

File tree

6 files changed

+163
-28
lines changed

6 files changed

+163
-28
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
"dependencies": {
1212
"compression": "^1.7.1",
1313
"polka": "next",
14-
"sirv": "^1.0.0"
14+
"sirv": "^1.0.0",
15+
"sveltejs-tippy": "^3.0.0",
16+
"tippy.js": "^6.3.1"
1517
},
1618
"devDependencies": {
1719
"@babel/core": "^7.0.0",

‎pnpm-lock.yaml‎

Lines changed: 29 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ContactLink.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script>
2+
import Icon from "./Icon.svelte";
3+
import tippy from "sveltejs-tippy";
4+
import "tippy.js/dist/svg-arrow.css";
5+
export let content;
6+
export let href;
7+
export let name;
8+
const tippyProps = {
9+
placement: "bottom",
10+
interactive: true,
11+
content: content,
12+
};
13+
</script>
14+
15+
<a {href} rel="noopener" target="_blank" use:tippy={tippyProps}>
16+
<Icon class="text-[40px] {name}" {name} />
17+
</a>

‎src/components/InlineSvg.svelte‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,29 @@
55
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
66
/>
77
</symbol>
8-
98
<symbol id="times" viewBox="0 0 352 512">
109
<path
1110
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1211
/>
1312
</symbol>
13+
<symbol id="github-square" viewBox="0 0 448 512">
14+
<path
15+
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"
16+
/>
17+
</symbol>
18+
<symbol id="whatsapp-square" viewBox="0 0 448 512">
19+
<path
20+
d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"
21+
/>
22+
</symbol>
23+
<symbol id="envelope" viewBox="0 0 512 512">
24+
<path
25+
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
26+
/>
27+
</symbol>
28+
<symbol id="linkedin" viewBox="0 0 448 512">
29+
<path
30+
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
31+
/>
32+
</symbol>
1433
</svg>

‎src/components/Sections/HomeSection.svelte‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script>
2+
import ContactLink from "../ContactLink.svelte";
3+
4+
const contacts = [
5+
{
6+
name: "whatsapp-square",
7+
content: "+62 859 3993 6593",
8+
href: "callto:+6285939936593",
9+
},
10+
{
11+
name: "github-square",
12+
content: "@frullah",
13+
href: "https://github.com/frullah",
14+
},
15+
{
16+
name: "linkedin",
17+
content: "@fajarullah",
18+
href: "https://www.linkedin.com/in/fajarullah/",
19+
},
20+
{
21+
name: "envelope",
22+
content: "[email protected]",
23+
href: "mailto:[email protected]",
24+
},
25+
];
26+
</script>
27+
28+
<section id="home">
29+
<div class="container max-w-screen-sm mx-auto mt-24 p-4">
30+
<h1 aria-label="introduction" class="text-2xl text-center mb-4">
31+
Hi, I am <strong aria-label="my name">Fajarullah</strong>
32+
</h1>
33+
<p aria-label="about me" class="text-center mb-4">
34+
I am a Full Stack Engineer, I love to build web stuff. I often use
35+
<a
36+
class="text-primary-600"
37+
rel="noopener"
38+
target="_blank"
39+
href="https://www.ruby-lang.org">Ruby</a
40+
>, and
41+
<a
42+
class="text-primary-600"
43+
rel="noopener"
44+
target="_blank"
45+
href="https://developer.mozilla.org/docs/Web/JavaScript">JavaScript</a
46+
>
47+
as my programming languages. When I have free time, sometime i learn about
48+
machine learning, playing
49+
<a
50+
class="text-primary-600"
51+
rel="noopener"
52+
target="_blank"
53+
href="https://osu.ppy.sh/users/5132441">osu!</a
54+
>, watching animes, or learn foreign languages.
55+
</p>
56+
57+
<ul aria-label="contact links" class="flex mx-auto justify-center">
58+
{#each contacts as contact}
59+
<li class="mx-1">
60+
<ContactLink
61+
name={contact.name}
62+
content={contact.content}
63+
href={contact.href}
64+
/>
65+
</li>
66+
{/each}
67+
</ul>
68+
</div>
69+
</section>
70+
71+
<style global lang="scss">
72+
.icon {
73+
&.envelope {
74+
@apply text-red-600;
75+
}
76+
77+
&.github-square {
78+
color: #333;
79+
}
80+
81+
&.whatsapp-square {
82+
color: #4fce5d;
83+
}
84+
85+
&.linkedin {
86+
color: #0e76a8;
87+
}
88+
}
89+
</style>

‎src/routes/index.svelte‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,9 @@
1+
<script>
2+
import HomeSection from "../components/Sections/HomeSection.svelte";
3+
</script>
4+
15
<svelte:head>
26
<title>Fajarullah</title>
37
</svelte:head>
48

5-
<section id="home" class="container max-w-screen-sm mx-auto mt-24 p-4">
6-
<h1 class="text-2xl text-center mb-4">Hi, I am <strong>Fajarullah</strong></h1>
7-
<p class="text-center mb-4">
8-
I am a Full Stack Engineer, I love to build web stuff. I often use
9-
<a
10-
class="text-primary-600"
11-
rel="noopener"
12-
target="_blank"
13-
href="https://www.ruby-lang.org">Ruby</a>, and
14-
<a
15-
class="text-primary-600"
16-
rel="noopener"
17-
target="_blank"
18-
href="https://developer.mozilla.org/docs/Web/JavaScript">JavaScript</a>
19-
as my programming languages. When I have free time, sometime i learn about machine learning, playing
20-
<a
21-
class="text-primary-600"
22-
rel="noopener"
23-
target="_blank"
24-
href="https://osu.ppy.sh/users/5132441">osu!</a>, watching animes, or
25-
learn foreign languages.
26-
</p>
27-
</section>
9+
<HomeSection />

0 commit comments

Comments
 (0)