From 54eabc03f7efccef2e512fe1d8ef5c8909765bb7 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:09:46 +0000
Subject: [PATCH] Seed: portfolio template (18 files)

---
 src/pages/About.tsx | 146 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 src/pages/About.tsx

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..f8bd5b6
--- /dev/null
+++ b/src/pages/About.tsx
@@ -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>
+  );
+}
\ No newline at end of file