🌸 Sakura Forge Website

The official website for Sakura Forge — a cohesive, Free & Open Source toolchain for developer infrastructure with elegant, composable, and emotionally lightweight design philosophy.

"Technical precision with poetic restraint."

✨ Features

🎨 Design System

• Sakura Aesthetic: Japanese-inspired design
• Color Palette: Sakura pink (#ff8094) + Midnight blue (#04182a)
• Typography: Clean, modern fonts with elegant transitions
• Responsive Design: Mobile-first approach with seamless desktop scaling

🌸 Interactive Elements

• Floating Petals: Realistic physics-based sakura petals in About section
• Central Hanzi: Glowing '花' (flower) character with subtle pulse animation
• Smooth Scrolling: Enhanced navigation with scroll indicators
• Hover Effects: Elegant micro-interactions throughout the interface

🚀 Technical Implementation

• Framework: SvelteKit + TypeScript + Vite
• Styling: CSS Custom Properties with component-scoped styles
• Icons: Custom sakura emoji favicon
• Performance: Optimized animations with prefers-reduced-motion support
• SEO: Complete meta tags and semantic HTML structure

🏗️ Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── Hero.svelte          # Main hero section with animations
│   │   ├── About.svelte         # About section with floating petals
│   │   ├── Projects.svelte      # Showcase of active & planned projects
│   │   ├── Header.svelte        # Navigation header
│   │   └── ProjectCard.svelte   # Reusable project display component
│   └── assets/
│       └── favicon.svg          # Custom sakura emoji favicon
├── routes/
│   ├── +layout.svelte          # Global layout with favicon config
│   └── +page.svelte            # Main homepage
├── app.css                     # Global styles and design tokens
└── app.html                    # HTML template

🎯 Content Sections

Hero

• Title: "Sakura Forge" with sakura emoji
• Tagline: "Blooming developer infrastructure"
• Philosophy: Core principles and ecosystem overview
• CTAs: Links to GitHub organization and projects

About

• Philosophy Pillars: Six core principles (Clarity, Signal, Extensibility, Transparency, Resilience, Aesthetic)
• Visual Element: Animated sakura petals falling around glowing hanzi character
• Mission Statement: Technical precision with poetic restraint

Projects

• Active Projects: Currently available tools (Sakura Secrets)
• Planned Projects: Roadmap of upcoming tools in the ecosystem
• Status Indicators: Clear distinction between active and incubating projects

🛠️ Development

Prerequisites

• Node.js 18+
• npm or pnpm

Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📱 Browser Support

• Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile: iOS Safari, Chrome Mobile, Samsung Internet
• Accessibility: Screen readers, keyboard navigation, reduced motion support

🎨 Customization

The design system uses CSS custom properties defined in app.css:

:root {
  --sf-color-sakura-500: #ff8094;      /* Primary sakura pink */
  --sf-color-midnight-800: #04182a;     /* Deep background */
  --sf-gradient-bloom: /* Sakura gradient */;
  --sf-radius-md: 0.5rem;               /* Border radius */
  --sf-dur-base: 200ms;                 /* Animation duration */
}

🚀 Deployment

GitHub Pages with Custom Domain

This site is configured for deployment on GitHub Pages with the custom domain sakurity.tech.

Automatic Deployment

The site automatically deploys via GitHub Actions when changes are pushed to the main branch:

1. Build Process: SvelteKit builds a static site using @sveltejs/adapter-static
2. Static Generation: All pages are pre-rendered for optimal performance
3. Domain Configuration: CNAME file automatically sets up sakurity.tech
4. Deploy: GitHub Pages serves the built site from the gh-pages branch

Manual Deployment

To deploy manually:

cd website
npm run build          # Build the static site
npm run deploy         # Build + configure for GitHub Pages

Custom Domain Setup

The repository includes:

• CNAME file: static/CNAME contains sakurity.tech
• DNS Configuration: Point your domain's DNS to GitHub Pages IPs
• GitHub Settings: Repository > Settings > Pages > Custom domain

Alternative Hosting

Built for static hosting on:

• GitHub Pages (primary, with custom domain)
• Netlify / Vercel
• Any static host

Build output is in the build/ directory after running npm run build.

📄 License

This website is part of the Sakura Forge ecosystem and is licensed under the Apache License 2.0.

See the LICENSE file for the full license text.

Copyright Notice

Copyright 2025 Sakura Forge

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

---

"Bloom steady. Build tools that breathe." 🌸