Dark Mode
Utilities
Registry Architecture
Astro is ideal for content-heavy sites and editorial portfolios where raw performance is essential. With Astro island architecture, you can keep the majority of your page as zero-JavaScript static HTML while selectively hydrating Jolocky interactive sections.
1. Create or Configure an Astro Project#
Create a new Astro project with the React and Tailwind integrations:
pnpm create astro@latest my-portfolio -- --template minimal --install --git npx astro add react tailwind
2. Install Motion and Smooth Scroll Dependencies#
Install the animation and icon dependencies used by Jolocky blocks:
pnpm add motion lenis lucide-react clsx tailwind-merge
3. Initialize Project Configuration#
Set up compatibility with the registry CLI:
pnpm dlx shadcn@latest init
Ensure your components.json points to your styles and aliases match your tsconfig.json.
4. Install a Jolocky Section#
Install a section via the CLI:
pnpm dlx shadcn@latest add https://jolocky.com/r/aurora-drift
5. Render Using Astro Client Directives#
When importing interactive Jolocky React components into .astro files, use an Astro client directive such as client:load or client:visible to enable interactive spring physics in the browser:
---
import { AuroraDriftFooter } from "@/components/footers/aurora-drift";
import "@/styles/globals.css";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Portfolio | Built with Jolocky</title>
</head>
<body class="bg-background text-foreground min-h-screen">
<IglooStickyHeader client:load />
<main class="container mx-auto px-4 py-16">
<h1 class="text-4xl font-bold tracking-tight">Editorial Showcase</h1>
</main>
</body>
</html>