home/Projects/docs.pivoine.art

🌸 Pivoine Docs Hub

A stunning, modern documentation hub landing page for all Pivoine projects by Valknar. Built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4.

✨ Features

• Modern Stack: Built with Next.js 15 App Router, React 19, TypeScript, and Tailwind CSS 4
• Stunning Design: Glassmorphism effects, gradient animations, and interactive elements
• Custom Branding Icon: Beautiful animated peony flower icon with documentation elements 🌸
• Responsive: Fully responsive design that works on all devices
• Performance Optimized: Turbopack for lightning-fast dev builds, image optimization, and production-ready configuration
• SEO Ready: Comprehensive metadata and Open Graph tags
• Type Safe: Full TypeScript support for better developer experience
• Developer Experience: Hot reload, fast refresh, and excellent tooling

🎨 Design Highlights

• Interactive Background: Mouse-tracking animated orbs that follow cursor movement
• Glassmorphism: Frosted glass aesthetic with backdrop blur effects
• Smooth Animations: Hover effects, scale transitions, and gradient animations
• Modern Color Scheme: Purple and pink gradients with dark theme
• Clean Typography: Inter font family for optimal readability
• Custom Scrollbar: Styled scrollbar matching the site theme

📁 Project Structure

pivoine-docs-hub/
├── app/                    # Next.js App Router directory
│   ├── globals.css        # Global styles and Tailwind imports
│   ├── layout.tsx         # Root layout with metadata
│   └── page.tsx           # Main landing page component
├── components/            # Reusable React components
│   ├── icons/            # Custom animated project icons
│   │   ├── KomposeIcon.tsx
│   │   └── index.ts
│   └── README.md
├── public/                # Static assets (add your images here)
├── eslint.config.mjs     # ESLint configuration (flat config)
├── .gitignore            # Git ignore rules
├── next.config.js        # Next.js configuration
├── package.json          # Project dependencies
├── postcss.config.js     # PostCSS configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
└── README.md             # This file

🚀 Getting Started

Prerequisites

• Node.js: 18.18.0 or higher
• pnpm: 8.0.0 or higher (recommended package manager)

Installation

1. Clone the repository (if not already):

   cd /home/valknar/Projects/docs.pivoine.art
   

2. Install dependencies:

   pnpm install
   

3. Start the development server:

   pnpm dev
   

4. Open your browser and navigate to:

   http://localhost:3000
   

The page will automatically reload when you make changes to the code.

📦 Available Scripts

• pnpm dev - Start the development server on http://localhost:3000
• pnpm build - Build the application for production
• pnpm start - Start the production server (run after build)
• pnpm lint - Run ESLint to check code quality
• pnpm type-check - Run TypeScript compiler to check types

🛠️ Configuration

Next.js 15 Configuration

The next.config.js includes:

• React Strict Mode for identifying potential problems
• Turbopack: Lightning-fast bundler enabled by default in dev mode (--turbopack flag)
• Automatic console removal in production
• Security headers (X-Frame-Options, CSP, etc.)
• Image optimization with AVIF and WebP support
• React 19 support with improved performance

TypeScript Configuration

TypeScript is configured for strict mode with:

• Path aliases (@/* points to root directory)
• Next.js plugin for optimal type checking
• Strict type checking enabled

Tailwind CSS 4

Tailwind CSS 4 uses a new CSS-first configuration approach:

• Configuration via @theme in CSS files instead of JavaScript
• No more bulky config file needed (minimal config for content paths only)
• Built-in CSS variable support
• Faster build times and smaller bundle sizes
• Import with @import "tailwindcss" instead of @tailwind directives

📝 Adding New Documentation Sites

To add a new documentation project to the hub:

1. Open app/page.tsx
2. Add a new project to the projects array:

const projects = [
  {
    name: 'Kompose',
    status: 'Active',
    description: 'Comprehensive documentation for Kompose project',
    url: '/kompose',
    gradient: 'from-violet-500 to-purple-600'
  },
  {
    name: 'Your New Project',
    status: 'Active',
    description: 'Description of your new project',
    url: '/your-project',
    gradient: 'from-blue-500 to-cyan-600'
  }
]

3. Create the documentation at the specified path (e.g., /kompose)

Custom Project Icons

The Kompose project features a custom animated icon (KomposeIcon) with:

• Interactive hover effects with glowing animations
• Click/tap interactions with ripple effects
• Pulsing status indicator
• 3D rotation on interaction

To add a custom icon for your project:

1. Create your icon component in components/icons/YourIcon.tsx
2. Export it in components/icons/index.ts
3. Import and conditionally render it in app/page.tsx

See components/README.md for detailed instructions.

🎯 Deployment

Building for Production

pnpm build

This creates an optimized production build in the .next directory.

Starting Production Server

pnpm start

Deployment Platforms

This project can be deployed to:

Vercel (Recommended)

# Install Vercel CLI
pnpm add -g vercel

# Deploy
vercel

Netlify

# Install Netlify CLI
pnpm add -g netlify-cli

# Deploy
netlify deploy --prod

Docker

Create a Dockerfile:

FROM node:18-alpine AS base

# Install pnpm
RUN npm install -g pnpm

# Dependencies
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# Builder
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build

# Runner
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
CMD ["node", "server.js"]

🔧 Customization

Changing Colors

Edit the gradient colors in app/page.tsx:

gradient: 'from-violet-500 to-purple-600'  // Change these Tailwind classes

Modifying Metadata

Update SEO metadata in app/layout.tsx:

export const metadata: Metadata = {
  title: 'Your Custom Title',
  description: 'Your custom description',
  // ... other metadata
}

Custom Fonts

The project uses Inter font by default. To change:

import { YourFont } from 'next/font/google'

const yourFont = YourFont({ subsets: ['latin'] })

🔗 Links

• Live Site: https://docs.pivoine.art
• Blog: http://pivoine.art
• Source Code: https://code.pivoine.art
• Kompose Docs: https://docs.pivoine.art/kompose

🤝 Contributing

This is a personal project by Valknar. For suggestions or issues, please reach out through pivoine.art.

📄 License

Copyright © 2025 Valknar. All rights reserved.

🙏 Acknowledgments

• Next.js - The React Framework for Production
• Tailwind CSS - A utility-first CSS framework
• Lucide React - Beautiful & consistent icons
• Vercel - Platform for deploying Next.js applications

---

Built with ❤️ by Valknar | pivoine.art