Glassmorphism Portfolio

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion, Variants } from "framer-motion";
5import type { LucideIcon } from "lucide-react";
6import {
7  ArrowUpRight,
8  Dribbble,
9  Github,
10  Linkedin,
11  Twitter,
12} from "lucide-react";
13 
14type Highlight = {
15  title: string;
16  description: string;
17};
18 
19type SocialLink = {
20  label: string;
21  handle: string;
22  href: string;
23  icon: LucideIcon;
24};
25 
26const highlights: Highlight[] = [
27  {
28    title: "Collaborations",
29    description:
30      "Linear, Framer, Gamma, Clearbit, and early-stage founders crafting premium launches.",
31  },
32  {
33    title: "Latest drop",
34    description:
35      "Aurora OS motion system · 47 reusable blueprints, adaptive tokens, and launch storyboard.",
36  },
37  {
38    title: "Availability",
39    description:
40      "2 advisory spots for Q1 · Remote friendly across EU & US time zones.",
41  },
42];
43 
44const socialLinks: SocialLink[] = [
45  {
46    label: "Twitter",
47    handle: "@caspermotions",
48    href: "https://x.com/caspermotions",
49    icon: Twitter,
50  },
51  {
52    label: "LinkedIn",
53    handle: "Casper Lightman",
54    href: "https://linkedin.com/in/casperlightman",
55    icon: Linkedin,
56  },
57  {
58    label: "Dribbble",
59    handle: "caspermotion",
60    href: "https://dribbble.com/caspermotion",
61    icon: Dribbble,
62  },
63  {
64    label: "GitHub",
65    handle: "casper-studio",
66    href: "https://github.com/casper-studio",
67    icon: Github,
68  },
69];
70 
71const listVariants: Variants = {
72  hidden: { opacity: 0, y: 16 },
73  visible: {
74    opacity: 1,
75    y: 0,
76    transition: {
77      duration: 0.4,
78      staggerChildren: 0.08,
79    },
80  },
81};
82 
83const itemVariants: Variants = {
84  hidden: { opacity: 0, y: 12 },
85  visible: {
86    opacity: 1,
87    y: 0,
88    transition: {
89      duration: 0.35,
90    },
91  },
92};
93 
94export function GlassmorphismPortfolioBlockBaseui() {
95  return (
96    <section className="relative min-h-screen overflow-hidden px-6 py-24 lg:py-32">
97      <div className="mx-auto max-w-6xl">
98        <motion.div
99          initial={{ opacity: 0, y: 40 }}
100          whileInView={{ opacity: 1, y: 0 }}
101          viewport={{ once: true, amount: 0.3 }}
102          transition={{ duration: 0.6, ease: "easeOut" }}
103          className="relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-8 backdrop-blur-2xl md:p-12"
104        >
105          {/* Glass gradient overlay */}
106// … truncated