fikri/fullstack-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce site configuration management with a new Prisma model and API endpoints, and add a health check endpoint.

Browse Source
This commit is contained in:
Moh Dzulfikri Maulana
2026-03-10 01:27:17 +07:00
parent 5b45c32109
commit da231dd779
8 changed files with 245 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/sections/portfolio/ContactSection.tsx
View File

@@ -1,58 +1,60 @@
'use client'
"use client";
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Send, CheckCircle2, Mail, MapPin, Clock } from 'lucide-react'
import type { ContactFormData } from '@/types'
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Send, CheckCircle2, Mail, MapPin, Clock } from "lucide-react";
import type { ContactFormData } from "@/types";
const schema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Please enter a valid email'),
subject: z.string().min(4, 'Subject must be at least 4 characters'),
message: z.string().min(10, 'Message must be at least 10 characters'),
})
name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Please enter a valid email"),
subject: z.string().min(4, "Subject must be at least 4 characters"),
message: z.string().min(10, "Message must be at least 10 characters"),
});
const contactInfo = [
{ icon: Mail, label: 'Email', value: 'hello@yourportfolio.dev' },
{ icon: MapPin, label: 'Location', value: 'Indonesia' },
{ icon: Clock, label: 'Response time', value: 'Within 24 hours' },
]
{ icon: Mail, label: "Email", value: "developer@dzulfikri.com" },
{ icon: MapPin, label: "Location", value: "Indonesia" },
{ icon: Clock, label: "Response time", value: "Within 24 hours" },
];
export function ContactSection() {
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
const [errorMsg, setErrorMsg] = useState('')
const [status, setStatus] = useState<
"idle" | "loading" | "success" | "error"
>("idle");
const [errorMsg, setErrorMsg] = useState("");
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<ContactFormData>({ resolver: zodResolver(schema) })
} = useForm<ContactFormData>({ resolver: zodResolver(schema) });
const onSubmit = async (data: ContactFormData) => {
setStatus('loading')
setStatus("loading");
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
const res = await fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
})
const json = await res.json()
});
const json = await res.json();
if (json.success) {
setStatus('success')
reset()
setStatus("success");
reset();
} else {
setErrorMsg(json.error || 'Something went wrong')
setStatus('error')
setErrorMsg(json.error || "Something went wrong");
setStatus("error");
}
} catch {
setErrorMsg('Network error. Please try again.')
setStatus('error')
setErrorMsg("Network error. Please try again.");
setStatus("error");
}
}
};
return (
<section id="contact" className="py-32 relative overflow-hidden">
@@ -88,8 +90,8 @@ export function ContactSection() {
transition={{ duration: 0.5, delay: 0.2 }}
className="text-foreground-muted mt-4 max-w-xl mx-auto"
>
Have a project in mind? Let's talk about how I can help you build something
remarkable.
Have a project in mind? Let's talk about how I can help you build
something remarkable.
</motion.p>
</div>
@@ -103,7 +105,7 @@ export function ContactSection() {
className="lg:col-span-2 space-y-4"
>
{contactInfo.map((item) => {
const Icon = item.icon
const Icon = item.icon;
return (
<div
key={item.label}
@@ -113,19 +115,28 @@ export function ContactSection() {
<Icon size={16} className="text-accent" />
</div>
<div>
<p className="text-xs text-foreground-muted font-mono">{item.label}</p>
<p className="text-sm text-foreground font-medium">{item.value}</p>
<p className="text-xs text-foreground-muted font-mono">
{item.label}
</p>
<p className="text-sm text-foreground font-medium">
{item.value}
</p>
</div>
</div>
)
);
})}
<div className="p-5 rounded-xl bg-gradient-to-br from-accent/10 to-purple-500/5 border border-border mt-6">
<p className="text-sm text-foreground-muted leading-relaxed">
I'm currently open to{' '}
<span className="text-foreground font-medium">freelance projects</span>,{' '}
<span className="text-foreground font-medium">full-time positions</span>, and
interesting technical collaborations.
I'm currently open to{" "}
<span className="text-foreground font-medium">
freelance projects
</span>
,{" "}
<span className="text-foreground font-medium">
full-time positions
</span>
, and interesting technical collaborations.
</p>
</div>
</motion.div>
@@ -140,7 +151,7 @@ export function ContactSection() {
>
<div className="rounded-2xl bg-surface-elevated border border-border p-8">
<AnimatePresence mode="wait">
{status === 'success' ? (
{status === "success" ? (
<motion.div
key="success"
initial={{ opacity: 0, scale: 0.95 }}
@@ -155,10 +166,11 @@ export function ContactSection() {
Message Sent!
</h3>
<p className="text-foreground-muted text-sm">
Thank you for reaching out. I'll get back to you within 24 hours.
Thank you for reaching out. I'll get back to you within 24
hours.
</p>
<button
onClick={() => setStatus('idle')}
onClick={() => setStatus("idle")}
className="mt-6 text-sm text-accent hover:text-accent/80 transition-colors"
>
Send another message
@@ -179,12 +191,14 @@ export function ContactSection() {
Name
</label>
<input
{...register('name')}
{...register("name")}
placeholder="Your Name"
className="w-full px-4 py-3 bg-surface border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20 transition-all text-sm"
/>
{errors.name && (
<p className="mt-1.5 text-xs text-red-400">{errors.name.message}</p>
<p className="mt-1.5 text-xs text-red-400">
{errors.name.message}
</p>
)}
</div>
<div>
@@ -192,13 +206,15 @@ export function ContactSection() {
Email
</label>
<input
{...register('email')}
{...register("email")}
type="email"
placeholder="you@email.com"
className="w-full px-4 py-3 bg-surface border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20 transition-all text-sm"
/>
{errors.email && (
<p className="mt-1.5 text-xs text-red-400">{errors.email.message}</p>
<p className="mt-1.5 text-xs text-red-400">
{errors.email.message}
</p>
)}
</div>
</div>
@@ -208,12 +224,14 @@ export function ContactSection() {
Subject
</label>
<input
{...register('subject')}
{...register("subject")}
placeholder="Project inquiry / Collaboration / etc."
className="w-full px-4 py-3 bg-surface border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20 transition-all text-sm"
/>
{errors.subject && (
<p className="mt-1.5 text-xs text-red-400">{errors.subject.message}</p>
<p className="mt-1.5 text-xs text-red-400">
{errors.subject.message}
</p>
)}
</div>
@@ -222,17 +240,19 @@ export function ContactSection() {
Message
</label>
<textarea
{...register('message')}
{...register("message")}
rows={5}
placeholder="Tell me about your project, goals, and timeline..."
className="w-full px-4 py-3 bg-surface border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20 transition-all text-sm resize-none"
/>
{errors.message && (
<p className="mt-1.5 text-xs text-red-400">{errors.message.message}</p>
<p className="mt-1.5 text-xs text-red-400">
{errors.message.message}
</p>
)}
</div>
{status === 'error' && (
{status === "error" && (
<p className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 px-4 py-3 rounded-xl">
{errorMsg}
</p>
@@ -240,10 +260,10 @@ export function ContactSection() {
<button
type="submit"
disabled={status === 'loading'}
disabled={status === "loading"}
className="w-full flex items-center justify-center gap-2 px-6 py-3.5 bg-accent text-background font-semibold rounded-xl hover:bg-accent/90 transition-all hover:shadow-glow disabled:opacity-60 disabled:cursor-not-allowed"
>
{status === 'loading' ? (
{status === "loading" ? (
<>
<div className="w-4 h-4 border-2 border-background/30 border-t-background rounded-full animate-spin" />
Sending...
@@ -263,5 +283,5 @@ export function ContactSection() {
</div>
</div>
</section>
)
);
}

72
src/components/sections/portfolio/HeroSection.tsx
View File

@@ -1,7 +1,15 @@
"use client";
import { motion } from "framer-motion";
import { ArrowRight, Github, Linkedin, Mail, ChevronDown, MessageCircle, Zap } from "lucide-react";
import {
ArrowRight,
Github,
Linkedin,
Mail,
ChevronDown,
MessageCircle,
Zap,
} from "lucide-react";
import dynamic from "next/dynamic";
import { HeroSection as HeroData } from "@/lib/constant";
import { useEffect, useState } from "react";
@@ -15,7 +23,7 @@ const LottieAnimation = dynamic(
loading: () => (
<div className="w-20 h-20 animate-pulse bg-accent/20 rounded-xl" />
),
}
},
);
const containerVariants = {
@@ -44,17 +52,14 @@ export function HeroSection() {
const [showScrollIndicator, setShowScrollIndicator] = useState(true);
useEffect(() => {
fetch("/lottie/loading.json")
.then((res) => res.json())
.then((data) => setLoadingAnimation(data))
.catch((err) =>
console.error("Failed to load Lottie animation:", err)
);
.catch((err) => console.error("Failed to load Lottie animation:", err));
// Check dark mode
const checkDarkMode = () => {
setIsDark(document.documentElement.classList.contains('dark'));
setIsDark(document.documentElement.classList.contains("dark"));
};
checkDarkMode();
@@ -63,7 +68,7 @@ export function HeroSection() {
const observer = new MutationObserver(checkDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
attributeFilter: ["class"],
});
return () => observer.disconnect();
@@ -74,7 +79,7 @@ export function HeroSection() {
const scrollTop = window.scrollY;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
// Hide scroll indicator when user is at the bottom (within 50px of bottom)
if (scrollTop + windowHeight >= documentHeight - 50) {
setShowScrollIndicator(false);
@@ -83,8 +88,8 @@ export function HeroSection() {
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
@@ -108,9 +113,9 @@ export function HeroSection() {
className="absolute inset-0 lg:hidden opacity-10"
style={{
backgroundImage: `url(${HeroData.image})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
aria-hidden="true"
/>
@@ -153,8 +158,8 @@ export function HeroSection() {
</motion.div>
{/* Lottie animation */}
<motion.div
variants={itemVariants}
<motion.div
variants={itemVariants}
className="-mt-8 block lg:hidden overflow-hidden rounded-md"
>
{loadingAnimation && (
@@ -289,7 +294,6 @@ export function HeroSection() {
>
{/* Window frame */}
<div className="relative h-full w-full rounded-lg border border-border bg-surface-elevated shadow-2xl overflow-hidden">
{/* Window header */}
<div className="flex items-center justify-between px-3 py-2 border-b border-border bg-surface-elevated/70">
<div className="flex gap-2">
@@ -316,15 +320,15 @@ export function HeroSection() {
<div className="absolute -bottom-8 -left-8 rounded-xl bg-surface-elevated border border-border p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-accent/10 text-accent">
<Zap
size={24}
strokeWidth={2}
aria-hidden="true"
/>
<Zap size={24} strokeWidth={2} aria-hidden="true" />
</div>
<div>
<p className="text-lg font-semibold text-foreground">10+ Projects</p>
<p className="text-sm text-foreground-muted">Completed successfully</p>
<p className="text-lg font-semibold text-foreground">
10+ Projects
</p>
<p className="text-sm text-foreground-muted">
Completed successfully
</p>
</div>
</div>
</div>
@@ -333,15 +337,15 @@ export function HeroSection() {
<div className="absolute -top-12 -right-8 rounded-xl bg-surface-elevated border border-border p-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-accent/10 text-accent">
<Zap
size={24}
strokeWidth={2}
aria-hidden="true"
/>
<Zap size={24} strokeWidth={2} aria-hidden="true" />
</div>
<div>
<p className="text-lg font-semibold text-foreground">Production Systems</p>
<p className="text-sm text-foreground-muted">Built & Maintained</p>
<p className="text-lg font-semibold text-foreground">
Production Systems
</p>
<p className="text-sm text-foreground-muted">
Built & Maintained
</p>
</div>
</div>
</div>
@@ -371,7 +375,11 @@ export function HeroSection() {
</span>
<motion.div
animate={{ y: [0, 4, 0] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
transition={{
duration: 1.5,
repeat: Infinity,
ease: "easeInOut",
}}
className="flex items-center justify-center"
>
<ChevronDown size={16} className="text-accent" />