yolando/website-portofolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement multilingual support and add contact section to portfolio

Browse Source
This commit is contained in:
Yolando
2026-04-03 18:45:07 +07:00
parent 9554674c79
commit b5a6acc622
4 changed files with 79 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
messages/en.json
View File

@@ -127,10 +127,25 @@
}
},
"Contact": {
"badge": "Let's Connect",
"title": "Get in Touch",
"subtitle": "Interested in working together? Whether you're a recruiter, hiring manager, or potential collaborator — I'd love to hear from you.",
"badge": "Contact",
"title": "Let's Collaborate",
"subtitle": "Have a project idea, job opportunity, or just want to chat? Feel free to send me a message.",
"info": {
"title": "Contact Information",
"subtitle": "You can also reach out to me directly through the channels below.",
"email": "Email",
"location": "Location",
"locationValue": "Jakarta, Indonesia",
"responseTime": "Response Time",
"responseTimeValue": "Less than 1 hour",
"fastResponse": "Fast Response",
"whatsappTemplate": "Hi Yolando, I saw your portfolio and would like to discuss a potential opportunity regarding...",
"openToWork": "Open to Work",
"openToWorkDesc": "Currently open for new opportunities in Backend/Fullstack Development."
},
"form": {
"heading": "Send Direct Message",
"subheading": "I'll get back to you as soon as possible via the email you provide.",
"nameLabel": "Full Name",
"namePlaceholder": "John Doe",
"emailLabel": "Email Address",

21
messages/id.json
View File

@@ -127,10 +127,25 @@
}
},
"Contact": {
"badge": "Mari Terhubung",
"title": "Hubungi Saya",
"subtitle": "Tertarik bekerja sama? Baik Anda seorang recruiter, hiring manager, atau kolaborator potensial — saya sangat ingin mendengarnya.",
"badge": "Kontak",
"title": "Mari Berkolaborasi",
"subtitle": "Punya ide proyek, tawaran pekerjaan, atau sekadar ingin berdiskusi? Jangan ragu untuk mengirimkan pesan.",
"info": {
"title": "Informasi Kontak",
"subtitle": "Anda juga dapat menjangkau saya secara langsung melalui saluran berikut.",
"email": "Email",
"location": "Lokasi",
"locationValue": "Jakarta, Indonesia",
"responseTime": "Waktu Respons",
"responseTimeValue": "Kurang dari 1 jam",
"fastResponse": "Fast Reponse",
"whatsappTemplate": "Halo Yolando, saya melihat portofolio Anda dan tertarik untuk berdiskusi lebih lanjut tentang...",
"openToWork": "Open to Work",
"openToWorkDesc": "Saat ini terbuka untuk peluang di bidang Backend/Fullstack Development."
},
"form": {
"heading": "Kirim Pesan Langsung",
"subheading": "Saya akan membalas secepatnya ke email yang Anda berikan.",
"nameLabel": "Nama Lengkap",
"namePlaceholder": "Budi Santoso",
"emailLabel": "Alamat Email",

BIN
public/uploads/1775215774470-Screenshot_2026-03-20_031020.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

59
src/features/messages/contact-section.tsx
View File

@@ -14,6 +14,7 @@ import {
MapPin,
Clock,
Sparkles,
MessageCircle,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { sendMessageAction } from "./actions";
@@ -56,7 +57,6 @@ export function ContactSection() {
<div className="relative max-w-5xl mx-auto px-6">
<AnimatedSection>
<SectionHeading
badge={t("badge")}
title={t("title")}
subtitle={t("subtitle")}
/>
@@ -67,10 +67,9 @@ export function ContactSection() {
{/* Left — Contact Info */}
<div className="lg:col-span-2 space-y-8">
<div>
<h3 className="text-lg font-bold mb-4">Let&apos;s Connect</h3>
<h3 className="text-lg font-bold mb-4">{t("info.title")}</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Tertarik untuk berkolaborasi atau punya pertanyaan? Jangan ragu
untuk menghubungi saya. Saya selalu terbuka untuk peluang baru.
{t("info.subtitle")}
</p>
</div>
@@ -80,9 +79,9 @@ export function ContactSection() {
<Mail size={18} />
</div>
<div>
<p className="text-sm font-semibold mb-0.5">Email</p>
<p className="text-sm font-semibold mb-0.5">{t("info.email")}</p>
<p className="text-sm text-muted-foreground font-mono">
yolando@pm.me
yolandomanullang@gmail.com
</p>
</div>
</div>
@@ -91,9 +90,9 @@ export function ContactSection() {
<MapPin size={18} />
</div>
<div>
<p className="text-sm font-semibold mb-0.5">Lokasi</p>
<p className="text-sm font-semibold mb-0.5">{t("info.location")}</p>
<p className="text-sm text-muted-foreground">
Jakarta, Indonesia
{t("info.locationValue")}
</p>
</div>
</div>
@@ -102,12 +101,34 @@ export function ContactSection() {
<Clock size={18} />
</div>
<div>
<p className="text-sm font-semibold mb-0.5">Response Time</p>
<p className="text-sm font-semibold mb-0.5">{t("info.responseTime")}</p>
<p className="text-sm text-muted-foreground">
Biasanya dalam 24 jam
{t("info.responseTimeValue")}
</p>
</div>
</div>
{/* WhatsApp */}
<div className="flex items-start gap-4">
<div className="p-2.5 rounded-xl bg-green-500/10 text-green-500 flex-shrink-0">
<MessageCircle size={18} />
</div>
<div>
<p className="text-sm font-semibold mb-0.5 flex items-center gap-2">
WhatsApp
<span className="px-2 py-0.5 rounded-md bg-green-500/10 text-green-500 text-[10px] uppercase font-bold tracking-wider">
{t("info.fastResponse", { fallback: "Fast Response" })}
</span>
</p>
<a
href={`https://wa.me/6282267852521?text=${encodeURIComponent(t("info.whatsappTemplate", { fallback: "Halo Yolando," }))}`}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-muted-foreground font-mono hover:text-green-500 transition-colors"
>
+62 822-6785-2521
</a>
</div>
</div>
</div>
{/* Decorative card */}
@@ -115,12 +136,11 @@ export function ContactSection() {
<div className="flex items-center gap-2 mb-2">
<Sparkles size={16} className="text-accent" />
<span className="text-xs font-mono font-bold text-accent uppercase tracking-wider">
Open to Work
{t("info.openToWork")}
</span>
</div>
<p className="text-xs text-muted-foreground leading-relaxed">
Saat ini tersedia untuk kesempatan backend/fullstack di industri
perbankan & fintech.
{t("info.openToWorkDesc")}
</p>
</div>
</div>
@@ -155,6 +175,13 @@ export function ContactSection() {
</div>
)}
<div className="mb-6">
<h3 className="text-xl md:text-2xl font-bold mb-2">{t("form.heading")}</h3>
<p className="text-sm text-muted-foreground">
{t("form.subheading")}
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
{/* Name */}
@@ -179,7 +206,7 @@ export function ContactSection() {
}))
}
placeholder={t("form.namePlaceholder")}
className="w-full px-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all"
className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300"
/>
</div>
@@ -205,7 +232,7 @@ export function ContactSection() {
}))
}
placeholder={t("form.emailPlaceholder")}
className="w-full px-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all"
className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300"
/>
</div>
</div>
@@ -232,7 +259,7 @@ export function ContactSection() {
}))
}
placeholder={t("form.messagePlaceholder")}
className="w-full px-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all resize-none"
className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300 resize-none"
/>
</div>