Portfolio Book

Component 9

About

Turn your portfolio into a flippable notebook

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Portfolio Book to your project and fits it to your theme.

Code

How Portfolio Book is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { PortfolioBook } from "@/components/ui/portfolio-book";
import "@/index.css";

const AVATAR_URL = "https://cdn.21st.dev/assets/mirror/48/488e6e55c09231285cfbf5587165ecca32a0a7941ab6db9cc48eccde10bfc491.png";

const PROJECTS = [
  {
    number: "01",
    title: "Brand Identity",
    description: "Coffee brand with serious character.",
    imageUrl: "https://cdn.21st.dev/assets/mirror/e2/e279928294d24f8b1dd8f02175d836cbd5ba88998aea605edc972462200fa3b3.png",
  },
  {
    number: "02",
    title: "Poster Design",
    description: "Think Create Inspire — studio prints.",
    imageUrl: "https://cdn.21st.dev/assets/mirror/e5/e53ca51ff5f5b67572b31a0dc4971b1cbc9191216112a7a164cfa60d3513a78f.png",
  },
  {
    number: "03",
    title: "Packaging",
    description: "Minimal skincare packaging & box.",
    imageUrl: "https://cdn.21st.dev/assets/mirror/d3/d305fc9c29ceb8783515a586acd209c29039af3b585418859b743e92ba66bbcf.png",
  },
  {
    number: "04",
    title: "Social Media",
    description: "High-engagement editorial drops.",
    imageUrl: "https://cdn.21st.dev/assets/mirror/c3/c380e57ef30218a2ae8e6cc15b142ff8f8f6a0758c3ddb74e39728c9744dc544.png",
  },
];

export default function DemoOne() {
  return (
    <PortfolioBook
      authorName="Kuro"
      authorRole="Visual Design • Creative Chaos"
      authorTagline="Good design. Questionable decisions. ✦"
      volumeLabel="Vol. 2026"
      avatarUrl={AVATAR_URL}
      bioIntro="Kuro here. I turn wild ideas into sharp visual stories."
      bioFocus="Clean aesthetics, bold details, and way too much caffeine."
      services={[
        "Brand Identity & Vibe",
        "Logo & Iconography",
        "Print & Merch",
        "Social & Digital Art",
        "UI/UX & Interactive",
      ]}
      skills={[
        { name: "Photoshop", level: 88 },
        { name: "Illustrator", level: 92 },
        { name: "InDesign", level: 75 },
        { name: "Figma", level: 90 },
        { name: "After Effects", level: 80 },
      ]}
      quote="Currently designing instead of sleeping."
      projects={PROJECTS}
      moreProjectsUrl="https://www.ayushmxxn.com/"
      experience={[
        {
          period: "2023 – Present",
          role: "Freelance Visual Designer & Art Director",
          description: "Crafting bold brand identities, posters & digital visual systems.",
        },
        {
          period: "2022 – 2023",
          role: "Studio Designer & Visual Artist",
          description: "Designed editorial layouts, brand collateral & social drops.",
        },
      ]}
      education={{
        degree: "Bachelor of Design",
        school: "Independent Study & Creative Practice",
        period: "2020 – 2024",
      }}
      contact={{
        portfolio: "https://www.ayushmxxn.com/",
        twitter: "https://x.com/ayushmxxn",
        social: "@ayushmxxn",
        discord: "https://discord.com/invite/kzk6uWey3g",
      }}
    />
  );
}