feat: Introduce site configuration management with a new Prisma model and API endpoints, and add a health check endpoint.
This commit is contained in:
Moh Dzulfikri Maulana
@@ -70,6 +70,7 @@
|
||||
"@prisma/client",
|
||||
"@prisma/engines",
|
||||
"bcrypt",
|
||||
"esbuild",
|
||||
"prisma",
|
||||
"sharp",
|
||||
"unrs-resolver"
|
||||
|
||||
@@ -105,3 +105,15 @@ model Tag {
|
||||
|
||||
blogs Blog[]
|
||||
}
|
||||
|
||||
model SiteConfig {
|
||||
id String @id @default(cuid())
|
||||
cvUrl String?
|
||||
linkedinUrl String?
|
||||
githubUrl String?
|
||||
twitterUrl String?
|
||||
heroTitle String?
|
||||
heroSubtitle String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { format } from "date-fns";
|
||||
import Link from "next/link";
|
||||
import { Calendar, Clock, ArrowRight, Tag as TagIcon, Search } from "lucide-react";
|
||||
import {
|
||||
Calendar,
|
||||
Clock,
|
||||
ArrowRight,
|
||||
Tag as TagIcon,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -34,12 +40,16 @@ export default async function BlogPage() {
|
||||
Blog<span className="text-primary">.</span>
|
||||
</h1>
|
||||
<p className="max-w-xl text-lg text-foreground-muted leading-relaxed">
|
||||
Exploring the world of fullstack development, architecture, and developer productivity. Sharing what I learn along the way.
|
||||
Exploring the world of fullstack development, architecture, and
|
||||
developer productivity. Sharing what I learn along the way.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-col md:flex-row gap-4 items-center">
|
||||
<div className="relative w-full max-w-md group">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors" size={18} />
|
||||
<Search
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors"
|
||||
size={18}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search articles..."
|
||||
@@ -61,8 +71,13 @@ export default async function BlogPage() {
|
||||
<Clock className="text-primary/40" size={32} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-xl font-display font-semibold text-foreground">No publications yet</h3>
|
||||
<p className="text-foreground-muted max-w-xs">Writing takes time. Check back soon for new insights and stories.</p>
|
||||
<h3 className="text-xl font-display font-semibold text-foreground">
|
||||
No publications yet
|
||||
</h3>
|
||||
<p className="text-foreground-muted max-w-xs">
|
||||
Writing takes time. Check back soon for new insights and
|
||||
stories.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -82,11 +97,12 @@ function BlogCard({ blog, index }: { blog: any; index: number }) {
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
|
||||
<Calendar size={12} className="text-primary/60" />
|
||||
{blog.publishedAt ? format(new Date(blog.publishedAt), "MMM dd, yyyy") : "Draft"}
|
||||
{blog.publishedAt
|
||||
? format(new Date(blog.publishedAt), "MMM dd, yyyy")
|
||||
: "Draft"}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
|
||||
<Clock size={12} className="text-primary/60" />
|
||||
5 min read
|
||||
<Clock size={12} className="text-primary/60" />5 min read
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -95,13 +111,17 @@ function BlogCard({ blog, index }: { blog: any; index: number }) {
|
||||
</h2>
|
||||
|
||||
<p className="text-foreground-muted text-sm leading-relaxed line-clamp-3 mb-8">
|
||||
{blog.excerpt || "No excerpt available for this post. Click to read the full article."}
|
||||
{blog.excerpt ||
|
||||
"No excerpt available for this post. Click to read the full article."}
|
||||
</p>
|
||||
|
||||
<div className="mt-auto pt-6 border-t border-border/20 flex items-center justify-between">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{blog.tags.slice(0, 2).map((tag: any) => (
|
||||
<span key={tag.id} className="text-[10px] font-bold uppercase tracking-widest text-foreground-muted/60 flex items-center gap-1">
|
||||
<span
|
||||
key={tag.id}
|
||||
className="text-[10px] font-bold uppercase tracking-widest text-foreground-muted/60 flex items-center gap-1"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-primary" />
|
||||
{tag.name}
|
||||
</span>
|
||||
|
||||
54
src/app/api/dashboard/cms/site-config/route.ts
Normal file
54
src/app/api/dashboard/cms/site-config/route.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { z } from "zod";
|
||||
|
||||
const contactSchema = z.object({
|
||||
name: z.string().min(2, "Name must be at least 2 characters"),
|
||||
email: z.string().email("Invalid email address"),
|
||||
subject: z.string().min(4, "Subject must be at least 4 characters"),
|
||||
message: z.string().min(10, "Message must be at least 10 characters"),
|
||||
});
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const siteConfig = await prisma.siteConfig.findFirst();
|
||||
return NextResponse.json({ success: true, data: siteConfig });
|
||||
} catch (error) {
|
||||
console.error("Site config error:", error);
|
||||
return NextResponse.json(
|
||||
{ success: false, error: "Failed to get site config" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const parsed = contactSchema.safeParse(body);
|
||||
|
||||
if (!parsed.success) {
|
||||
return NextResponse.json(
|
||||
{ success: false, error: parsed.error.errors[0].message },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const { name, email, subject, message } = parsed.data;
|
||||
|
||||
await prisma.contactMessage.create({
|
||||
data: { name, email, subject, message },
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: "Message received! I will get back to you soon.",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Contact form error:", error);
|
||||
return NextResponse.json(
|
||||
{ success: false, error: "Failed to send message. Please try again." },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
12
src/app/api/health/route.ts
Normal file
12
src/app/api/health/route.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json(
|
||||
{
|
||||
status: "ok",
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
{ status: 200 },
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
@@ -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"
|
||||
/>
|
||||
@@ -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" />
|
||||
|
||||
@@ -1,10 +1,25 @@
|
||||
export function getVisitorId() {
|
||||
if (typeof window === "undefined") return null;
|
||||
|
||||
let visitorId = localStorage.getItem("visitor_id");
|
||||
|
||||
if (!visitorId) {
|
||||
if (crypto?.randomUUID) {
|
||||
visitorId = crypto.randomUUID();
|
||||
} else {
|
||||
visitorId = generateUUID();
|
||||
}
|
||||
|
||||
localStorage.setItem("visitor_id", visitorId);
|
||||
}
|
||||
|
||||
return visitorId;
|
||||
}
|
||||
|
||||
function generateUUID() {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
const v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user