Skip to content

Commit ab74f02

Browse files
ikhsan3adiikhsan3adi
committed
Simplify
1 parent c374b5d commit ab74f02

File tree

5 files changed

+131
-130
lines changed

5 files changed

+131
-130
lines changed

‎src/lib/components/navigation/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { NavLink } from './types';
22

33
export const navLinks: NavLink[] = [
44
{ text: 'Home', link: 'home' },
5-
{ text: 'About', link: 'about' },
5+
// { text: 'About', link: 'about' },
66
// { text: 'Portfolio', link: 'portfolio' },
77
// { text: 'Tools', link: 'tools' },
88
{ text: 'Social', link: 'social' },

‎src/lib/components/sections/Contact.svelte‎

Lines changed: 123 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
22
import { submitContactRequest } from '$lib/api/contact';
3-
import { emailLink } from '$lib/api/socials';
3+
import { emailLink, whatsappLink } from '$lib/api/socials';
4+
5+
import bg from '$lib/components/graphics/hero-bg.svg';
46
57
import type { ButtonColorVariant } from '$lib/components/colors';
68
import { inputClass } from '$lib/components/form';
@@ -16,7 +18,7 @@
1618
import Saos from 'saos';
1719
import Fa from 'svelte-fa';
1820
19-
// const whatsappButton: ButtonColorVariant = { key: 'whatsapp' };
21+
const whatsappButton: ButtonColorVariant = { key: 'whatsapp' };
2022
const emailButton: ButtonColorVariant = { key: 'email' };
2123
const primaryButton: ButtonColorVariant = { key: 'primary' };
2224
const disabledButton: ButtonColorVariant = { key: 'disabled' };
@@ -45,130 +47,129 @@
4547
</script>
4648

4749
<section>
48-
<Wrappper>
49-
<div class="w-full">
50-
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
51-
<h1
52-
class="text-center mx-auto my-10 md:my-12 lg:my-16 dark:text-white duration-500"
53-
id="contact"
54-
>
55-
Contact
56-
</h1>
57-
</Saos>
58-
59-
<div class="flex flex-wrap sm:flex-nowrap justify-between gap-4 lg:gap-5 xl:gap-6">
60-
<!-- Whatsapp Button -->
61-
<div class="w-full">
62-
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
63-
<Button
64-
disabled={true}
65-
noDarkVariant={false}
66-
fullWidth={true}
67-
variant={disabledButton}
68-
centerText={true}
69-
>
70-
<div class="w-8 h-8" slot="icon">
71-
<Whatsapp />
72-
</div>
73-
<span>Whatsapp me (disabled)</span>
74-
</Button>
75-
</Saos>
50+
<div
51+
class="bg-cover bg-no-repeat bg-center flex relative duration-500"
52+
style="background-image: url({bg});"
53+
>
54+
<Wrappper>
55+
<div class="w-full">
56+
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
57+
<h1
58+
class="text-center mx-auto my-10 md:my-12 lg:my-16 dark:text-white duration-500"
59+
id="contact"
60+
>
61+
Contact
62+
</h1>
63+
</Saos>
64+
65+
<div class="flex flex-wrap sm:flex-nowrap justify-between gap-4 lg:gap-5 xl:gap-6">
66+
<!-- Whatsapp Button -->
67+
<a href={whatsappLink} target="_blank" class="w-full">
68+
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
69+
<Button noDarkVariant={false} fullWidth={true} variant={whatsappButton}>
70+
<div class="w-8 h-8" slot="icon">
71+
<Whatsapp />
72+
</div>
73+
<span>WhatsApp Me!</span>
74+
</Button>
75+
</Saos>
76+
</a>
77+
<!-- Email Button -->
78+
<a href={emailLink} target="_blank" class="w-full">
79+
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
80+
<Button noDarkVariant={false} fullWidth={true} variant={emailButton}>
81+
<div class="w-8 h-8" slot="icon">
82+
<Email />
83+
</div>
84+
<span>Email Me!</span>
85+
</Button>
86+
</Saos>
87+
</a>
7688
</div>
77-
<!-- Email Button -->
78-
<a href={emailLink} target="_blank" class="w-full">
79-
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
80-
<Button noDarkVariant={false} fullWidth={true} variant={emailButton}>
81-
<div class="w-8 h-8" slot="icon">
82-
<Email />
83-
</div>
84-
<span>Email me</span>
85-
</Button>
86-
</Saos>
87-
</a>
88-
</div>
8989

90-
<div class="my-16">
91-
{#if enableMessageForm}
92-
<div class="lg:flex lg:justify-between">
93-
<div class="hidden lg:block my-auto pr-8 xl:pr-12">
94-
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
95-
<h1 class="dark:text-white duration-500">Message me!</h1>
96-
</Saos>
97-
</div>
98-
<Saos
99-
animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'}
100-
once
101-
css_observer={'width: 100%;'}
102-
>
103-
<div
104-
class="w-full bg-custom-1 dark:bg-slate-700 border-4 border-slate-900 dark:border-white h-max px-8 py-4 md:px-12 md:py-6"
90+
<div class="my-16">
91+
{#if enableMessageForm}
92+
<div class="lg:flex lg:justify-between">
93+
<div class="hidden lg:block my-auto pr-8 xl:pr-12">
94+
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>
95+
<h1 class="dark:text-white duration-500">Message me!</h1>
96+
</Saos>
97+
</div>
98+
<Saos
99+
animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'}
100+
once
101+
css_observer={'width: 100%;'}
105102
>
106-
<!-- CONTACT FORM -->
107-
<form method="dialog">
108-
<div class="flex flex-col mb-4">
109-
<label for="name"><h4 class="dark:text-white">Name</h4></label>
110-
<input
111-
bind:value={data.name}
112-
type="text"
113-
id="name"
114-
name="name"
115-
class={inputClass}
116-
required
117-
/>
118-
119-
<label for="email"><h4 class="dark:text-white">Email</h4></label>
120-
<input
121-
bind:value={data.email}
122-
type="email"
123-
id="email"
124-
name="email"
125-
class={inputClass}
126-
required
127-
/>
128-
129-
<label for="message"><h4 class="dark:text-white">Message</h4></label>
130-
<textarea
131-
bind:value={data.message}
132-
id="message"
133-
name="message"
134-
class={inputClass}
135-
required
136-
/>
137-
</div>
138-
<div class="ml-1">
139-
<button
140-
type="submit"
141-
class="block w-full"
142-
on:click={buttonDisabled ? () => 0 : handleSubmit}
143-
>
144-
<Button
145-
noDarkVariant={false}
146-
fullWidth={true}
147-
variant={buttonDisabled ? disabledButton : primaryButton}
148-
disabled={buttonDisabled}
103+
<div
104+
class="w-full bg-custom-1 dark:bg-slate-700 border-4 border-slate-900 dark:border-white h-max px-8 py-4 md:px-12 md:py-6"
105+
>
106+
<!-- CONTACT FORM -->
107+
<form method="dialog">
108+
<div class="flex flex-col mb-4">
109+
<label for="name"><h4 class="dark:text-white">Name</h4></label>
110+
<input
111+
bind:value={data.name}
112+
type="text"
113+
id="name"
114+
name="name"
115+
class={inputClass}
116+
required
117+
/>
118+
119+
<label for="email"><h4 class="dark:text-white">Email</h4></label>
120+
<input
121+
bind:value={data.email}
122+
type="email"
123+
id="email"
124+
name="email"
125+
class={inputClass}
126+
required
127+
/>
128+
129+
<label for="message"><h4 class="dark:text-white">Message</h4></label>
130+
<textarea
131+
bind:value={data.message}
132+
id="message"
133+
name="message"
134+
class={inputClass}
135+
required
136+
/>
137+
</div>
138+
<div class="ml-1">
139+
<button
140+
type="submit"
141+
class="block w-full"
142+
on:click={buttonDisabled ? () => 0 : handleSubmit}
149143
>
150-
<Fa icon={faPaperPlane} slot="icon" />
151-
<h4
152-
class="{submisstionStatus === 'Failed'
153-
? 'text-red-500'
154-
: 'text-inherit'} "
144+
<Button
145+
noDarkVariant={false}
146+
fullWidth={true}
147+
variant={buttonDisabled ? disabledButton : primaryButton}
148+
disabled={buttonDisabled}
155149
>
156-
{submisstionStatus === 'Initial'
157-
? 'Send'
158-
: submisstionStatus === 'Failed'
159-
? 'Failed, try again'
160-
: submisstionStatus}
161-
</h4>
162-
</Button>
163-
</button>
164-
</div>
165-
</form>
166-
<!-- CONTACT FROM END -->
167-
</div>
168-
</Saos>
169-
</div>
170-
{/if}
150+
<Fa icon={faPaperPlane} slot="icon" />
151+
<h4
152+
class="{submisstionStatus === 'Failed'
153+
? 'text-red-500'
154+
: 'text-inherit'} "
155+
>
156+
{submisstionStatus === 'Initial'
157+
? 'Send'
158+
: submisstionStatus === 'Failed'
159+
? 'Failed, try again'
160+
: submisstionStatus}
161+
</h4>
162+
</Button>
163+
</button>
164+
</div>
165+
</form>
166+
<!-- CONTACT FROM END -->
167+
</div>
168+
</Saos>
169+
</div>
170+
{/if}
171+
</div>
171172
</div>
172-
</div>
173-
</Wrappper>
173+
</Wrappper>
174+
</div>
174175
</section>

‎src/lib/components/sections/Hero.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
<h4 class="mb-4 dark:text-white duration-500">
3333
<Typewriter mode={'loop'} interval={25}>
3434
A
35-
<span class="text-emerald-600 dark:text-primary">mobile developer</span>
36-
<span class="text-green-600 dark:text-green-400">back-end developer</span>
37-
<span class="text-orange-600 dark:text-orange-400">front-end developer</span>
35+
<span class="text-emerald-600 dark:text-primary">Student</span>
36+
<span class="text-green-600 dark:text-green-400">Programmer</span>
37+
<span class="text-orange-600 dark:text-orange-400">Computer User</span>
3838
</Typewriter>
3939
</h4>
4040

‎src/lib/components/sections/Social.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script lang="ts">
22
import { socials } from '$lib/api/socials';
33
4-
import Wrappper from '$lib/components/widgets/Wrappper.svelte';
54
import Button from '$lib/components/buttons/Button.svelte';
5+
import Wrappper from '$lib/components/widgets/Wrappper.svelte';
66
77
import Saos from 'saos';
88
</script>
99

1010
<section>
11-
<div class="w-full mb-4">
11+
<div class="w-full pb-16 border-t-4 border-b-4 border-slate-800 dark:border-white">
1212
<Wrappper>
1313
<div class="w-full">
1414
<Saos animation={'scale-up-center 1s cubic-bezier(0.4, 0, 0.2, 1) both'} once>

‎src/routes/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
// import type { PageData } from './$types';
33
4-
import About from '$lib/components/sections/About.svelte';
4+
// import About from '$lib/components/sections/About.svelte';
55
import Contact from '$lib/components/sections/Contact.svelte';
66
import Footer from '$lib/components/sections/Footer.svelte';
77
import Hero from '$lib/components/sections/Hero.svelte';
@@ -16,7 +16,7 @@
1616
<main>
1717
<Navbar />
1818
<Hero />
19-
<About />
19+
<!-- <About /> -->
2020
<!-- <Portfolio fetch={data.fetch} projectService={data.projectService} /> -->
2121
<!-- <Tools /> -->
2222
<Social />

0 commit comments

Comments
 (0)