Components

​

Hero

• Uses next/image with priority on both the frame and profile images so they are preloaded.
• The pattern-bg CSS class applies the asanoha tile pattern at 3% opacity as an absolute overlay.
• The Japanese motto 美は、シンプルさの中に。 (“Beauty lies in simplicity”) is rendered with the .text-japanese class (Noto Serif JP).

​

Works

• A numbered badge (01, 02, …) in the top-left corner
• A hover-zoom project screenshot (next/image)
• GitHub and Demo links that fade in on hover
• The project title, Japanese subtitle, description, and technology tags

interface Project {
  title: string;         // Display name
  japanese: string;      // Japanese subtitle shown below title
  description: string;   // Short description paragraph
  image: StaticImageData; // Imported AVIF via next/image static import
  tags: string[];        // Technology labels
  github: string;        // GitHub URL (or "#" if private)
  demo: string;          // Live demo URL
}

• Images are statically imported at the top of data/projects.ts, so Next.js generates correct width/height metadata automatically.
• The uroko scale pattern (pattern-bg-uroko) is used as the section background texture.
• The grid is md:grid-cols-2 lg:grid-cols-3.

​

Skills

interface Skill {
  icon: LucideIcon;   // Lucide React icon component
  title: string;      // English category name (e.g. "Frontend")
  japanese: string;   // Japanese label (e.g. "フロントエンド")
  techs: string[];    // List of specific technologies
}

• The icon field is a Lucide icon component reference (not JSX). It is instantiated inside the .map() via const Icon = skill.icon; <Icon ... />.
• Each card receives a staggered animationDelay via inline style (index * 100ms).
• The wave pattern (pattern-bg-waves) is the section texture.
• The grid is sm:grid-cols-2 lg:grid-cols-3.

​

Experience

<TimelineSection
  title="Educación"
  japanese="学歴"
  icon={<GraduationCap />}
  items={educations}
  variant="primary"
/>
<TimelineSection
  title="Experiencia Laboral"
  japanese="職歴"
  icon={<Briefcase />}
  items={experiences}
  variant="accent"
/>

• A decorative vertical line and two animated dots are rendered absolutely on large screens to visually connect the two columns.
• The kumo cloud pattern (pattern-bg-kumo) is the section texture.
• Column layout switches from single to lg:grid-cols-2 at the lg breakpoint.

​

TimelineSection

interface TimelineSectionProps {
  title: string;                  // Section heading (e.g. "Educación")
  japanese: string;               // Japanese subtitle (e.g. "学歴")
  icon: ReactNode;                // Icon element rendered in the header badge
  items: TimelineItem[];          // Array of timeline entries
  variant: "primary" | "accent";  // Color theme — drives border and text colors
}

• Entry title and optional Japanese label
• Date badge (item.years) with a Calendar icon
• Subtitle (item.sub_title), e.g. institution or company name
• Detail paragraph (item.details)
• A ghost index number in the bottom-right corner

• The left border of each card (border-l-4) uses the variant color, creating the visual timeline track.
• The key for each item is ${item.title}-${item.years} to handle entries with the same title at different times.

​

Navigation

<nav className="fixed top-0 ...">
  <Link href="/#hero">
    <ProfileImage size="small" />
    <span>美は、シンプルさの中に</span>  {/* hover reveals Spanish translation */}
  </Link>
  <NavLinks />
  <AnimatedThemeToggler />
</nav>

• Navigation itself is a Server Component. The interactive pieces (NavLinks, AnimatedThemeToggler) are Client Components imported inside it — Next.js handles the boundary automatically.
• The logo text swaps between the Japanese motto and its Spanish translation on hover using a CSS opacity/translate transition (no JavaScript).

​

NavLinks

• Uses an IntersectionObserver-style scroll listener (getBoundingClientRect) to track which section is at top <= 150px.
• Smooth-scrolls via element.scrollIntoView({ behavior: "smooth" }) and updates the URL hash with history.pushState on click.
• On mobile, renders a hamburger toggle button that expands a vertical menu anchored to the bottom of the nav bar.
• The active indicator is an inline SVG diamond shape rendered from currentColor (uses text-accent).

​

AIDrawer

{
  initialOpen?: boolean; // Default: false. Pass true to open the drawer immediately on mount.
}

• Uses TextStreamChatTransport from the AI SDK (v5 API) to connect to /api/chat.
• The initial welcome message is injected as a pre-seeded UIMessage array (INITIAL_MESSAGES) — it is never sent to the server.
• formatMessageContent() from lib/chat-utils.tsx post-processes assistant text to turn URLs into clickable links and **text** into <strong> elements.
• Enter sends the message; Shift+Enter inserts a newline.
• AbortController cancellation is exposed via the stop function from useChat, wired to a stop button that appears while streaming.
• Focus is set on the textarea 300 ms after the drawer opens.

​

AIDrawerLazy

• Before the user clicks: renders a placeholder floating button (identical appearance to AIDrawer’s own FloatingButton).
• On mouseenter/focus: pre-fetches the AIDrawer chunk via a dynamic import() call (warm-up without mounting).
• On click: sets loaded = true, which mounts <AIDrawer initialOpen /> (with the drawer already open).
• AIDrawer is loaded with dynamic(..., { ssr: false }) to prevent server-side rendering of the chat UI.

​

Footer

​

ThemeProvider

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  ...
</ThemeProvider>

​

ThemeToggle

• Renders a disabled placeholder on first render (before mount) to avoid a hydration mismatch — resolvedTheme is only available client-side.
• Shows a Sun icon in dark mode and a Moon icon in light mode.

​

Shared/ProfileImage

type Props = {
  size?: "small" | "medium" | "large"; // Default: "medium"
  className?: string;                   // Default: ""
  borderColor?: string;                 // Default: "#B94A48" (Japanese red)
};

• Image source is hardcoded to /images/yo.avif.
• The border color defaults to the project’s primary red (#B94A48) applied as an inline style, so it works independently of Tailwind’s color utilities.