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

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>