Seed: portfolio template (18 files)
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
ArrowRight, ExternalLink, Palette, Github, Star,
|
||||
ChevronRight, ChevronDown
|
||||
} from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const projects = [
|
||||
{ title: "Fintech Dashboard Redesign", desc: "Complete overhaul of the analytics dashboard for a Series B fintech startup, improving engagement by 40%.", tags: ["React", "TypeScript", "Figma"], gradient: "from-violet-400 to-purple-600" },
|
||||
{ title: "E-Commerce Mobile App", desc: "End-to-end design and development of a premium shopping experience serving 100K+ monthly active users.", tags: ["React Native", "Node.js", "Stripe"], gradient: "from-sky-400 to-blue-600" },
|
||||
{ title: "Healthcare Platform", desc: "HIPAA-compliant patient portal with appointment scheduling, telehealth, and real-time chat.", tags: ["Next.js", "PostgreSQL", "Tailwind"], gradient: "from-amber-400 to-orange-600" },
|
||||
{ title: "SaaS Marketing Site", desc: "High-converting marketing website with interactive demos, resulting in 65% increase in trial signups.", tags: ["Astro", "GSAP", "Framer Motion"], gradient: "from-emerald-400 to-green-600" },
|
||||
];
|
||||
|
||||
const logos = ["Acme", "Globex", "Initech", "Umbrella", "Aperture", "Wayne"];
|
||||
|
||||
const testimonials = [
|
||||
{ name: "Sarah Chen", role: "CTO, TechVentures", quote: "Working with Alex was transformational. Delivered beyond expectations and on time." },
|
||||
{ name: "Marcus Lee", role: "Founder, DesignLab", quote: "Exceptional design sense combined with technical prowess. Highly recommended." },
|
||||
];
|
||||
|
||||
const designSkills = [
|
||||
{ name: "UI/UX Design", value: 95 },
|
||||
{ name: "Design Systems", value: 90 },
|
||||
{ name: "Prototyping", value: 85 },
|
||||
];
|
||||
|
||||
const devSkills = [
|
||||
{ name: "React / Next.js", value: 95 },
|
||||
{ name: "TypeScript", value: 90 },
|
||||
{ name: "Node.js", value: 85 },
|
||||
];
|
||||
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||
<Header />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section className="relative pt-32 pb-24 px-6 overflow-hidden">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 rounded-full bg-primary/10 blur-[120px]" />
|
||||
<div className="absolute top-40 right-20 w-96 h-96 rounded-full bg-violet-500/15 blur-[120px]" />
|
||||
<div className="absolute bottom-10 left-1/3 w-64 h-64 rounded-full bg-primary/10 blur-[120px]" />
|
||||
<div className="mx-auto max-w-6xl relative z-10">
|
||||
<Badge variant="secondary" className="px-3 py-1 text-sm font-medium mb-6">
|
||||
<span className="relative flex h-2 w-2 mr-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
|
||||
</span>
|
||||
Available for hire
|
||||
</Badge>
|
||||
<h1 className="text-6xl md:text-9xl font-black tracking-tighter leading-[0.9]">Alex Rivera</h1>
|
||||
<p className="mt-4 text-xl md:text-2xl text-muted-foreground font-light">Product Designer & Frontend Developer</p>
|
||||
<div className="h-1 w-32 bg-gradient-to-r from-primary via-violet-500 to-primary/50 rounded-full mt-6 animate-fade-in" />
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-8">
|
||||
<Button asChild size="lg" className="rounded-full px-8 text-base shadow-lg active:scale-[0.98]">
|
||||
<Link to="/work" className="inline-flex items-center gap-1 hover:gap-2 transition-all">View My Work <ArrowRight className="h-4 w-4" /></Link>
|
||||
</Button>
|
||||
<Button asChild size="lg" variant="outline" className="rounded-full px-8 text-base active:scale-[0.98]">
|
||||
<Link to="/contact">Get in Touch</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce"><ChevronDown className="h-6 w-6 text-muted-foreground" /></div>
|
||||
</section>
|
||||
|
||||
{/* ── CLIENT LOGOS ── */}
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-6xl px-6 text-center animate-fade-in">
|
||||
<div className="border-t border-border/50 mb-12" />
|
||||
<p className="text-sm uppercase tracking-wider text-muted-foreground font-medium mb-8">Trusted By</p>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center justify-items-center">
|
||||
{logos.map((name, i) => (
|
||||
<div key={i} className="grayscale opacity-40 hover:grayscale-0 hover:opacity-100 hover:text-primary transition-all duration-300 cursor-pointer text-xl font-bold text-muted-foreground">{name}</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-border/50 mt-12" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── FEATURED PROJECTS ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="flex items-end justify-between mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Selected Work</h2>
|
||||
<Button asChild variant="ghost" className="hidden sm:flex">
|
||||
<Link to="/work">View All <ChevronRight className="ml-1 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid gap-8 grid-cols-1 lg:grid-cols-2 stagger">
|
||||
{projects.map((p, i) => (
|
||||
<Link key={i} to="/project" className="group block hover:-translate-y-1 hover:shadow-xl transition-all duration-300 rounded-2xl">
|
||||
<div className="relative overflow-hidden rounded-2xl animate-scale-in">
|
||||
<div className={`aspect-video bg-gradient-to-br \${p.gradient} flex items-center justify-center transition-transform duration-500 group-hover:scale-105 relative`}>
|
||||
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||
<div className="absolute top-6 left-6 w-20 h-20 rounded-full bg-white/10 blur-xl" />
|
||||
<div className="absolute bottom-8 right-10 w-28 h-28 rounded-full bg-white/10 blur-2xl" />
|
||||
<Palette className="h-16 w-16 text-white/30 relative z-10" />
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent translate-y-full group-hover:translate-y-0 transition-transform duration-500">
|
||||
<h3 className="text-white font-semibold text-lg">{p.title}</h3>
|
||||
<p className="text-white/70 text-sm mt-1">{p.desc}</p>
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{p.tags.map((tag, j) => (
|
||||
<Badge key={j} variant="secondary" className="text-xs bg-white/10 text-white/90 border-white/20">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── TESTIMONIALS ── */}
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-center mb-16 animate-fade-up">What Clients Say</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8 stagger">
|
||||
{testimonials.map((t, i) => (
|
||||
<Card key={i} className="hover-card-lift transition-all duration-300">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex gap-0.5 mb-4">
|
||||
{[...Array(5)].map((_, j) => (
|
||||
<Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-muted-foreground italic leading-relaxed">"{t.quote}"</p>
|
||||
<div className="mt-6 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary/60 to-violet-500/60 flex items-center justify-center text-xs font-bold text-white">
|
||||
{t.name.split(" ").map((n: string) => n[0]).join("")}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-sm">{t.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{t.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── SKILLS PREVIEW ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-center mb-16 animate-fade-up">Skills & Expertise</h2>
|
||||
<div className="grid gap-8 md:grid-cols-2 stagger">
|
||||
<Card className="border shadow-sm hover-card-lift transition-all duration-300">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Palette className="h-5 w-5 text-primary" /> Design</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
{designSkills.map((s, i) => (
|
||||
<div key={i}>
|
||||
<div className="flex justify-between text-sm mb-1.5">
|
||||
<span className="font-medium">{s.name}</span>
|
||||
<span className="text-muted-foreground">{s.value}%</span>
|
||||
</div>
|
||||
<Progress value={s.value} className="h-2" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border shadow-sm hover-card-lift transition-all duration-300">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Github className="h-5 w-5 text-primary" /> Development</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
{devSkills.map((s, i) => (
|
||||
<div key={i}>
|
||||
<div className="flex justify-between text-sm mb-1.5">
|
||||
<span className="font-medium">{s.name}</span>
|
||||
<span className="text-muted-foreground">{s.value}%</span>
|
||||
</div>
|
||||
<Progress value={s.value} className="h-2" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-24">
|
||||
<div className="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-4 animate-fade-up">Let's Build Something Amazing</h2>
|
||||
<p className="text-muted-foreground mb-8 max-w-xl mx-auto">Have a project in mind? I would love to hear about it and explore how we can work together.</p>
|
||||
<div className="flex gap-4 justify-center">
|
||||
<Button asChild size="lg" className="rounded-full px-8 shadow-lg active:scale-[0.98]">
|
||||
<Link to="/contact">Start a Project <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user