Shikishi (色紙, mounted paper) is a premium Astro theme built for studios, designers, and photographers. The visual direction draws from mounted paper sheets, exhibition labels, ink-and-gold accents, and measured GSAP motion — a monochrome-first editorial sensibility with generous whitespace and thoughtful typography.
Features
Production-Ready Pages
- Home — Hero with featured works grid, journal highlights, and about teaser
- Works listing — Portfolio grid with category filtering (Web, Online Shop, Branding)
- Work detail — Large-format hero composition with project scope, challenge, and approach
- Journal listing — Article grid with category filtering and pagination
- Journal article — Reading progress bar, table of contents, author bio
- About — Profile with concept imagery; sub-pages for Beginners and Partners
- Contact — Multi-step form with client-side submission state
- Privacy — Static policy page
- 404 — Custom error page
Polished Components
Navigation · Footer · Hero · BlogCard · PostGrid · Pagination · ReadingProgress · TableOfContents · TagCloud · AuthorBio · ContactStepper · Badge · Button · Card · Input · Modal · ThemeToggle
GSAP Animations
- SPA-style page transitions with fade and slide
- Scroll-triggered reveals via data-reveal attributes
- GSAP loaded dynamically — zero first-paint cost
- prefers-reduced-motion respected for accessibility
Design Details
- Fixed right sidebar with hamburger menu and vertical tagline
- Full-screen navigation drawer with hierarchical menu
- Light/dark theme toggle
- Monochrome palette with dusty terracotta accent
- Light font-weight (300) with generous line-height and letter-spacing
Performance-First
- Fonts loaded via system stack — no external font requests
- Prefetch on hover for instant navigation
- Sitemap auto-generated at build
- SSR-safe — all GSAP imports are dynamic
- Fully static output — no client-side data fetching
Built with: Astro v6, Tailwind CSS v4, GSAP 3, MDX, TypeScript
