Seed: portfolio template (18 files)
This commit is contained in:
@@ -0,0 +1,146 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import {
|
||||||
|
Download, Award, Briefcase, GraduationCap, ArrowRight
|
||||||
|
} from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ value: "8+", label: "Years Experience" },
|
||||||
|
{ value: "50+", label: "Projects Completed" },
|
||||||
|
{ value: "30+", label: "Happy Clients" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const experience = [
|
||||||
|
{ company: "TechVentures Inc.", role: "Senior Product Designer", years: "2022: Present", desc: "Leading design for the core product suite, managing a team of 4 designers, and establishing the company design system." },
|
||||||
|
{ company: "DesignLab Studio", role: "UI/UX Designer & Developer", years: "2020: 2022", desc: "Designed and built web applications for Fortune 500 clients. Led the frontend development of 12+ projects." },
|
||||||
|
{ company: "Pixel Perfect Agency", role: "Junior Designer", years: "2018: 2020", desc: "Crafted visual identities, marketing materials, and responsive websites for startups and SMBs." },
|
||||||
|
{ company: "Freelance", role: "Web Designer", years: "2016: 2018", desc: "Built custom WordPress and React sites for local businesses while completing university studies." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const awards = [
|
||||||
|
{ title: "Best Portfolio Design", org: "Awwwards", year: "2024" },
|
||||||
|
{ title: "Design Excellence", org: "CSS Design Awards", year: "2023" },
|
||||||
|
{ title: "Top 10 Designers", org: "Dribbble", year: "2023" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="pt-32 pb-24 px-6">
|
||||||
|
<div className="mx-auto max-w-6xl grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-6 animate-fade-up">About Me</h1>
|
||||||
|
<p className="text-muted-foreground leading-relaxed text-lg mb-4">I am a multidisciplinary designer and developer with 8+ years of experience crafting digital products that people love. I specialize in bridging the gap between design and engineering.</p>
|
||||||
|
<p className="text-muted-foreground leading-relaxed text-lg mb-10">When I am not pushing pixels or writing code, you will find me exploring national parks, experimenting with film photography, or contributing to open-source projects.</p>
|
||||||
|
<div className="grid grid-cols-3 gap-6 mb-8">
|
||||||
|
{stats.map((s, i) => (
|
||||||
|
<div key={i}>
|
||||||
|
<div className="text-3xl font-bold bg-gradient-to-r from-primary to-violet-500 bg-clip-text text-transparent">{s.value}</div>
|
||||||
|
<div className="text-sm text-muted-foreground mt-1">{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" className="rounded-full px-6 active:scale-[0.98]">
|
||||||
|
<Download className="mr-2 h-4 w-4" /> Download Resume
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div className="aspect-square rounded-2xl bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5 flex items-center justify-center relative overflow-hidden animate-scale-in">
|
||||||
|
<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-8 left-8 w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
|
||||||
|
<div className="absolute bottom-10 right-10 w-32 h-32 rounded-full bg-primary/10 blur-3xl" />
|
||||||
|
<div className="text-6xl font-black text-primary/20 relative z-10">
|
||||||
|
{("Alex Rivera").split(" ").map((n: string) => n[0]).join("")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── EXPERIENCE ── */}
|
||||||
|
<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 mb-12 flex items-center gap-3 animate-fade-up">
|
||||||
|
<Briefcase className="h-7 w-7 text-primary" /> Experience
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-0 stagger">
|
||||||
|
{experience.map((e, i) => (
|
||||||
|
<div key={i} className="relative pl-8 pb-12 last:pb-0 border-l-2 border-primary/20">
|
||||||
|
<div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-primary border-4 border-background ring-4 ring-primary/20" />
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
|
||||||
|
<h3 className="font-semibold text-lg">{e.role}</h3>
|
||||||
|
<span className="text-sm text-muted-foreground">{e.years}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-medium text-primary mb-2">{e.company}</div>
|
||||||
|
<p className="text-muted-foreground leading-relaxed">{e.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── AWARDS ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-12 flex items-center gap-3 animate-fade-up">
|
||||||
|
<Award className="h-7 w-7 text-primary" /> Recognition
|
||||||
|
</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6 stagger">
|
||||||
|
{awards.map((a, i) => (
|
||||||
|
<Card key={i} className="hover-card-lift transition-all duration-300 backdrop-blur-sm bg-card/80">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<Badge variant="secondary" className="mb-3">{a.year}</Badge>
|
||||||
|
<h3 className="font-semibold mb-1">{a.title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{a.org}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── EDUCATION ── */}
|
||||||
|
<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 mb-12 flex items-center gap-3 animate-fade-up">
|
||||||
|
<GraduationCap className="h-7 w-7 text-primary" /> Education
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">B.S. Computer Science</h3>
|
||||||
|
<div className="text-sm text-primary">Stanford University</div>
|
||||||
|
<div className="text-sm text-muted-foreground">2012: 2016</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">UX Design Certificate</h3>
|
||||||
|
<div className="text-sm text-primary">Google / Coursera</div>
|
||||||
|
<div className="text-sm text-muted-foreground">2018</div>
|
||||||
|
</div>
|
||||||
|
</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">Interested in working together?</h2>
|
||||||
|
<p className="text-muted-foreground mb-8">I'm always open to new opportunities and collaborations.</p>
|
||||||
|
<Button asChild size="lg" className="rounded-full px-8 shadow-lg active:scale-[0.98]">
|
||||||
|
<Link to="/contact" className="inline-flex items-center gap-1 hover:gap-2 transition-all">Get in Touch <ArrowRight className="h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user