Initial: resume template via tAI
This commit is contained in:
Joe Wee
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Read",
|
||||||
|
"Write",
|
||||||
|
"Edit",
|
||||||
|
"Bash",
|
||||||
|
"Glob",
|
||||||
|
"Grep"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"model": "claude-sonnet-4-20250514"
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
# .tai-manifest.tn — resume (vite-react)
|
||||||
|
# Auto-generated by tAI manifest generator
|
||||||
|
# tN (tAI Notation) — compact template encoding
|
||||||
|
|
||||||
|
σ:template|resume|vite-react|8 files|23KB
|
||||||
|
σ:docs|CLAUDE.md|783B|imports:1
|
||||||
|
σ:docs|README.md|35B
|
||||||
|
σ:entry|index.html|275B|title="Resume"
|
||||||
|
σ:component|src/components/Footer.tsx|248B
|
||||||
|
σ:component|src/components/Header.tsx|436B|imports:1|uses:[Button]
|
||||||
|
σ:style|src/index.css|59B
|
||||||
|
σ:bootstrap|src/main.tsx|236B|imports:3|uses:[React,App]
|
||||||
|
σ:page|src/pages/Index.tsx|21375B|imports:10
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
# Jordan Lee
|
||||||
|
Personal resume/CV with experience, projects, education, skills, certifications
|
||||||
|
Stack: React 18 / TypeScript / Vite / Tailwind CSS / shadcn/ui
|
||||||
|
Pages: Index (single page)
|
||||||
|
Palette: clean minimal with primary accent
|
||||||
|
|
||||||
|
## Files
|
||||||
|
- src/pages/Index.tsx (21KB)
|
||||||
|
- src/components/Header.tsx (0KB)
|
||||||
|
- src/components/Footer.tsx (0KB)
|
||||||
|
|
||||||
|
## Imports
|
||||||
|
UI: @/components/ui/{button,card,badge,input,textarea,tabs,accordion,dialog,sheet}
|
||||||
|
Icons: lucide-react
|
||||||
|
Toast: import { toast } from "sonner"
|
||||||
|
Theme: ThemeToggle in headers (next-themes)
|
||||||
|
Router: react-router-dom BrowserRouter
|
||||||
|
|
||||||
|
## Rules
|
||||||
|
- MODIFY existing files — never rebuild from scratch
|
||||||
|
- Pages import Header + Footer from @/components/
|
||||||
|
- Tailwind only — no inline styles
|
||||||
|
- Use existing shadcn components — don't create custom ones
|
||||||
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Resume</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="border-t py-8">
|
||||||
|
<div className="container text-center text-sm text-muted-foreground">
|
||||||
|
© 2026 Jordan Lee. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||||
|
<div className="container flex h-16 items-center justify-between">
|
||||||
|
<span className="text-xl font-bold">Jordan Lee</span>
|
||||||
|
<Button>Get Started</Button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
@@ -0,0 +1,404 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
||||||
|
import {
|
||||||
|
Menu, ArrowRight, Mail, Linkedin, Github, Twitter, Download,
|
||||||
|
ExternalLink, MapPin, Calendar, Briefcase, GraduationCap, Award,
|
||||||
|
Figma, Globe, Database, Terminal, Layers, Cpu, Send, CheckCircle
|
||||||
|
} from "lucide-react";
|
||||||
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
||||||
|
|
||||||
|
export default function ResumePage() {
|
||||||
|
const [mobileOpen, setMobileOpen] = useState(false);
|
||||||
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
const onScroll = () => setScrolled(window.scrollY > 20);
|
||||||
|
window.addEventListener("scroll", onScroll);
|
||||||
|
return () => window.removeEventListener("scroll", onScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ label: "Experience", href: "#experience" },
|
||||||
|
{ label: "Education", href: "#education" },
|
||||||
|
{ label: "Skills", href: "#skills" },
|
||||||
|
{ label: "Contact", href: "#contact" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const certifications = [
|
||||||
|
{ name: "AWS Solutions Architect", issuer: "Amazon Web Services", year: "2024" },
|
||||||
|
{ name: "Google Cloud Professional", issuer: "Google Cloud", year: "2023" },
|
||||||
|
{ name: "PMP Certified", issuer: "Project Management Institute", year: "2022" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const experience = [
|
||||||
|
{
|
||||||
|
company: "Stripe", role: "Senior Software Engineer", dates: "2022 – Present",
|
||||||
|
bullets: ["Led the redesign of the merchant dashboard serving 2M+ users, improving task completion by 35%.", "Architected a real-time analytics pipeline processing 500K events per second.", "Mentored a team of 6 engineers and established code review best practices."],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
company: "Vercel", role: "Software Engineer", dates: "2020 – 2022",
|
||||||
|
bullets: ["Built core deployment infrastructure handling 10M+ builds per month.", "Shipped the Edge Functions runtime adopted by 50K+ projects in first quarter."],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
company: "Airbnb", role: "Frontend Engineer", dates: "2018 – 2020",
|
||||||
|
bullets: ["Developed the new search experience increasing booking conversion by 18%.", "Created a shared component library used across 12 product teams."],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
company: "Freelance", role: "Web Developer", dates: "2016 – 2018",
|
||||||
|
bullets: ["Delivered 30+ client projects ranging from e-commerce to SaaS dashboards.", "Achieved a 100% on-time delivery rate with 5-star average client rating."],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const projects = [
|
||||||
|
{ title: "FinTrack Dashboard", desc: "Real-time financial analytics platform with interactive charts and alerts.", tags: ["React", "TypeScript", "D3.js"], gradient: "from-violet-500 to-indigo-600" },
|
||||||
|
{ title: "MedConnect", desc: "Telemedicine platform connecting patients with specialists worldwide.", tags: ["Next.js", "Prisma", "WebRTC"], gradient: "from-rose-500 to-orange-500" },
|
||||||
|
{ title: "EcoShop", desc: "Sustainable e-commerce marketplace with carbon-neutral shipping tracker.", tags: ["Remix", "Stripe", "PostgreSQL"], gradient: "from-emerald-500 to-teal-500" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const technicalSkills = [
|
||||||
|
{ name: "React / Next.js", value: 95 },
|
||||||
|
{ name: "TypeScript", value: 90 },
|
||||||
|
{ name: "Node.js", value: 85 },
|
||||||
|
{ name: "Python", value: 88 },
|
||||||
|
{ name: "PostgreSQL", value: 80 },
|
||||||
|
{ name: "AWS / Cloud", value: 75 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const tools = [
|
||||||
|
{ icon: Figma, label: "Figma" },
|
||||||
|
{ icon: Globe, label: "Vercel" },
|
||||||
|
{ icon: Database, label: "Supabase" },
|
||||||
|
{ icon: Terminal, label: "Docker" },
|
||||||
|
{ icon: Layers, label: "Terraform" },
|
||||||
|
{ icon: Cpu, label: "GitHub" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||||
|
{/* ── HEADER ── */}
|
||||||
|
<header
|
||||||
|
className={\`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${
|
||||||
|
scrolled
|
||||||
|
? "bg-background/95 backdrop-blur-lg border-b shadow-sm"
|
||||||
|
: "bg-transparent"
|
||||||
|
}\`}
|
||||||
|
>
|
||||||
|
<div className="mx-auto max-w-5xl flex items-center justify-between px-6 py-4">
|
||||||
|
<a href="/" className="text-lg font-bold tracking-tight">
|
||||||
|
Taylor Morgan
|
||||||
|
</a>
|
||||||
|
<div className="hidden md:flex items-center gap-8">
|
||||||
|
<nav className="flex items-center gap-8">
|
||||||
|
{navLinks.map((l) => (
|
||||||
|
<a
|
||||||
|
key={l.href}
|
||||||
|
href={l.href}
|
||||||
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
{l.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||||
|
<SheetTrigger asChild className="md:hidden">
|
||||||
|
<Button variant="ghost" size="icon"><Menu className="h-5 w-5" /></Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent side="right" className="w-72">
|
||||||
|
<nav className="mt-8 flex flex-col gap-4">
|
||||||
|
{navLinks.map((l) => (
|
||||||
|
<a key={l.href} href={l.href} className="text-lg font-medium" onClick={() => setMobileOpen(false)}>
|
||||||
|
{l.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
<ThemeToggle />
|
||||||
|
</nav>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="relative pt-32 pb-24 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-1/4 right-1/4 w-80 h-80 rounded-full bg-primary/8 blur-[100px]" />
|
||||||
|
<div className="absolute bottom-0 left-1/3 w-64 h-64 rounded-full bg-violet-500/6 blur-[80px]" />
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 mx-auto max-w-5xl px-6">
|
||||||
|
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-8 animate-fade-up">
|
||||||
|
<div className="relative w-32 h-32 shrink-0">
|
||||||
|
<div className="absolute inset-0 rounded-full bg-gradient-to-br from-primary via-violet-500 to-rose-500 shadow-xl ring-4 ring-primary/20 animate-pulse" />
|
||||||
|
<div className="absolute inset-0 rounded-full opacity-20" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "8px 8px" }} />
|
||||||
|
<div className="absolute bottom-2 right-2 w-4 h-4 rounded-full bg-emerald-500 ring-2 ring-background" />
|
||||||
|
<div className="absolute -bottom-1 -left-1 w-3 h-3 rounded-full bg-violet-400 border-2 border-background" />
|
||||||
|
</div>
|
||||||
|
<div className="text-center sm:text-left">
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black tracking-tighter leading-[1.05]">
|
||||||
|
Taylor Morgan
|
||||||
|
</h1>
|
||||||
|
<p className="mt-3 text-xl text-muted-foreground leading-relaxed">Senior Full-Stack Engineer</p>
|
||||||
|
<p className="mt-4 text-muted-foreground leading-relaxed max-w-lg">
|
||||||
|
Passionate engineer with 8+ years building scalable web applications. I love clean architecture, great UX, and shipping products that make a difference.
|
||||||
|
</p>
|
||||||
|
<div className="mt-6 flex flex-wrap items-center justify-center sm:justify-start gap-3">
|
||||||
|
<Button variant="outline" size="icon" asChild className="hover:text-primary hover:scale-110 transition-all">
|
||||||
|
<a href="mailto:taylor@example.com"><Mail className="h-4 w-4" /></a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="icon" asChild className="hover:text-primary hover:scale-110 transition-all">
|
||||||
|
<a href="#"><Linkedin className="h-4 w-4" /></a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="icon" asChild className="hover:text-primary hover:scale-110 transition-all">
|
||||||
|
<a href="#"><Github className="h-4 w-4" /></a>
|
||||||
|
</Button>
|
||||||
|
<Button className="ml-2">
|
||||||
|
<Download className="mr-2 h-4 w-4" /> Download CV
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── EXPERIENCE ── */}
|
||||||
|
<section id="experience" className="py-24">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="flex items-center gap-3 mb-12 animate-fade-up">
|
||||||
|
<Briefcase className="h-6 w-6 text-primary" />
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Experience</h2>
|
||||||
|
</div>
|
||||||
|
<div className="relative border-l-2 border-primary/20 ml-4">
|
||||||
|
{experience.map((job, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={\`relative pl-8 pb-12 last:pb-0 rounded-lg hover:bg-muted/50 transition-colors \${i % 2 === 1 ? "bg-muted/30 -ml-4 pl-12 py-8 rounded-r-xl" : ""}\`}
|
||||||
|
>
|
||||||
|
<div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full bg-primary ring-4 ring-primary/20 border-2 border-background" />
|
||||||
|
<div className="flex flex-wrap items-center gap-3 mb-2">
|
||||||
|
<h3 className="font-semibold text-lg">{job.company}</h3>
|
||||||
|
<Badge variant="outline" className="text-xs">{job.dates}</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-primary font-medium text-sm mb-3">{job.role}</p>
|
||||||
|
<ul className="space-y-1.5 border-l-2 border-primary/10 pl-3">
|
||||||
|
{job.bullets.map((b, j) => (
|
||||||
|
<li key={j} className="text-sm text-muted-foreground flex items-start gap-2">
|
||||||
|
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-primary/40 shrink-0" />
|
||||||
|
{b}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── PROJECTS ── */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="flex items-center gap-3 mb-12 animate-fade-up">
|
||||||
|
<Layers className="h-6 w-6 text-primary" />
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Featured Projects</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6 stagger">
|
||||||
|
{projects.map((p, i) => (
|
||||||
|
<Card key={i} className="group overflow-hidden hover-lift hover:shadow-lg transition-all duration-300 backdrop-blur-sm bg-card/80 border-border/50">
|
||||||
|
<div className={\`aspect-video bg-gradient-to-br \${p.gradient} rounded-t-xl flex items-center justify-center relative overflow-hidden\`}>
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
|
||||||
|
<div className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur group-hover:scale-110 transition-transform relative z-10" />
|
||||||
|
</div>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-base">{p.title}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<CardDescription className="text-sm leading-relaxed mb-3">{p.desc}</CardDescription>
|
||||||
|
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||||
|
{p.tags.map((tag, j) => (
|
||||||
|
<Badge key={j} variant="secondary" className="text-xs">{tag}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a href="#" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:gap-3 transition-all">
|
||||||
|
View Project <ArrowRight className="h-3.5 w-3.5" />
|
||||||
|
</a>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── EDUCATION ── */}
|
||||||
|
<section id="education" className="py-24">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="flex items-center gap-3 mb-12 animate-fade-up">
|
||||||
|
<GraduationCap className="h-6 w-6 text-primary" />
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Education</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 gap-6 mb-10">
|
||||||
|
<Card className="hover-lift hover:shadow-md transition-shadow backdrop-blur-sm bg-card/80">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<GraduationCap className="h-4 w-4 text-primary" /> Stanford University
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-muted-foreground leading-relaxed">M.S. Computer Science</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-wrap items-center gap-2">
|
||||||
|
<Badge variant="outline" className="text-xs">2014 – 2016</Badge>
|
||||||
|
<Badge className="text-xs">With Distinction</Badge>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="hover-lift hover:shadow-md transition-shadow backdrop-blur-sm bg-card/80">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<GraduationCap className="h-4 w-4 text-primary" /> UC Berkeley
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-muted-foreground leading-relaxed">B.S. Computer Science</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-wrap items-center gap-2">
|
||||||
|
<Badge variant="outline" className="text-xs">2010 – 2014</Badge>
|
||||||
|
<Badge className="text-xs">Magna Cum Laude</Badge>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-3 flex items-center gap-2">
|
||||||
|
<Award className="h-5 w-5 text-primary" /> Certifications
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{["AWS Solutions Architect", "Google Cloud Professional", "PMP Certified"].map((cert, i) => (
|
||||||
|
<Badge key={i} variant="secondary" className="px-3 py-1">{cert}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── SKILLS ── */}
|
||||||
|
<section id="skills" className="py-24 bg-muted/30">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-12 animate-fade-up">Skills & Tools</h2>
|
||||||
|
<div className="grid lg:grid-cols-3 gap-12">
|
||||||
|
{/* Technical */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<h3 className="font-semibold mb-6 flex items-center gap-2 text-sm uppercase tracking-wider text-muted-foreground">
|
||||||
|
<Terminal className="h-4 w-4 text-primary" /> Development
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-5">
|
||||||
|
{technicalSkills.map((s, i) => (
|
||||||
|
<div key={i}>
|
||||||
|
<div className="flex justify-between mb-1.5">
|
||||||
|
<span className="text-sm font-medium">{s.name}</span>
|
||||||
|
<span className="text-xs text-muted-foreground tabular-nums">{s.value}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 rounded-full bg-muted overflow-hidden">
|
||||||
|
<div className="h-full rounded-full bg-gradient-to-r from-primary via-violet-500 to-rose-500 transition-all duration-500" style={{ width: \`\${s.value}%\` }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Soft Skills + Tools */}
|
||||||
|
<div className="lg:col-span-2 space-y-10">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4 flex items-center gap-2 text-sm uppercase tracking-wider text-muted-foreground">
|
||||||
|
<Figma className="h-4 w-4 text-primary" /> Design & Soft Skills
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{["Leadership", "Communication", "Problem Solving", "Mentoring"].map((s, i) => (
|
||||||
|
<Badge key={i} variant="outline" className="px-4 py-1.5 text-sm">{s}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-muted-foreground">Tools & Platforms</h3>
|
||||||
|
<div className="grid grid-cols-3 sm:grid-cols-6 gap-4 stagger">
|
||||||
|
{tools.map((t, i) => (
|
||||||
|
<div key={i} className="flex flex-col items-center gap-2 p-3 rounded-xl bg-background border hover:border-primary/40 hover:shadow-sm transition-all">
|
||||||
|
<t.icon className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<span className="text-xs font-medium text-center">{t.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CERTIFICATIONS ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="flex items-center gap-3 mb-12 animate-fade-up">
|
||||||
|
<Award className="h-6 w-6 text-primary" />
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Certifications & Awards</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-3 gap-6 stagger">
|
||||||
|
{certifications.map((c, i) => (
|
||||||
|
<Card key={i} className="hover-lift hover:shadow-lg hover:shadow-primary/5 transition-all backdrop-blur-sm bg-card/80 border-border/50">
|
||||||
|
<CardHeader className="flex flex-row items-start gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-violet-500/20 flex items-center justify-center shrink-0">
|
||||||
|
<Award className="h-6 w-6 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base flex items-center gap-1.5">
|
||||||
|
{c.name} <CheckCircle className="h-4 w-4 text-emerald-500" />
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-muted-foreground leading-relaxed">{c.issuer}</CardDescription>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Badge variant="outline" className="text-xs">{c.year}</Badge>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CONTACT ── */}
|
||||||
|
<section id="contact" className="py-24">
|
||||||
|
<div className="mx-auto max-w-xl px-6 text-center">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-2 animate-fade-up">Let's Connect</h2>
|
||||||
|
<p className="text-muted-foreground leading-relaxed mb-2">Have a project in mind? I’d love to hear from you.</p>
|
||||||
|
<a href="mailto:taylor@example.com" className="inline-flex items-center gap-2 text-primary font-medium hover:underline">
|
||||||
|
<Mail className="h-4 w-4 shadow-lg shadow-primary/10" /> taylor@example.com
|
||||||
|
</a>
|
||||||
|
<Card className="mt-8 backdrop-blur-sm bg-card/80 border-border/50">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<form onSubmit={(e) => { e.preventDefault(); toast.success("Message sent! I'll get back to you within 24 hours."); e.currentTarget.reset(); }} className="text-left space-y-4">
|
||||||
|
<Input placeholder="Your Name" className="h-11" required />
|
||||||
|
<Input placeholder="Your Email" type="email" className="h-11" required />
|
||||||
|
<Textarea placeholder="Your message..." className="min-h-[120px] resize-none" required />
|
||||||
|
<Button type="submit" className="w-full h-11 active:scale-[0.97] transition-transform">
|
||||||
|
<Send className="mr-2 h-4 w-4" /> Send Message
|
||||||
|
</Button>
|
||||||
|
<p className="text-xs text-muted-foreground text-center">Typically responds within 24 hours</p>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FOOTER ── */}
|
||||||
|
<footer className="py-12 border-t">
|
||||||
|
<div className="mx-auto max-w-5xl px-6 text-center">
|
||||||
|
<p className="text-muted-foreground mb-4">Let's build something great together.</p>
|
||||||
|
<div className="flex justify-center gap-2 mb-6">
|
||||||
|
{[Github, Linkedin, Twitter, Mail].map((Icon, i) => (
|
||||||
|
<Button key={i} variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground">
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">© 2026 Taylor Morgan. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user