Cho-P4
7f98e191bb
- SearchBar: overlay fade + panel slide-down with spring enter / ease-in exit (200ms)
- MarkdownToolbar image popover: scale+slide with same pattern (180ms)
- ConfirmModal: new component replacing window.confirm, scale+translate animations
- AdminPage: uses ConfirmModal for article deletion
- AppShell: enter-only page transition (key={location.key}) avoids double-load issue
All @keyframes defined locally in each CSS module to ensure reliable scoping.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
blweb · Personal Blog
Still water runs deep — ink dissolves in silence.
A personal blog built with React + Vite, combining Japanese minimalist aesthetics with glassmorphism design. No backend required, ready to deploy as static files.
Features
- Japanese minimalist style — sakura palette, kanji watermarks, manuscript grid backgrounds
- Glassmorphism cards — rounded corners with
backdrop-filterfrosted glass effect - Light / dark theme toggle — persisted to
localStorage - Sakura petal animation — Canvas petals drift on every route transition
- Admin panel — PIN-protected; create, edit, and delete articles
- Rich text editor — toolbar with bold, italic, headings, blockquotes, and image insertion (URL or local file → base64)
- Client-side search — real-time filtering, no server needed
- No backend — all data stored in
localStorage; deploy anywhere as static files
Tech Stack
| Tech | Purpose |
|---|---|
| React 18 | UI framework |
| Vite | Build tool |
| React Router v6 | Client-side routing |
| CSS Modules + Custom Properties | Styling & theme system |
| localStorage | Data persistence |
Getting Started
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
Open http://localhost:5173 in your browser.
Project Structure
src/
├── components/
│ ├── admin/ # Admin panel (PIN gate, editor, toolbar)
│ ├── article/ # Article components (card, grid, body)
│ ├── layout/ # Layout (Header, Footer, AppShell)
│ └── ui/ # Shared UI (theme toggle, search, tags, petal canvas)
├── contexts/ # React Contexts (theme, article data)
├── pages/ # Page components
├── styles/ # Global styles, design tokens, animations
└── utils/ # Helpers (search, date formatting, slug generation)
Routes
| Path | Page |
|---|---|
/ |
Home (article list) |
/article/:slug |
Article detail |
/about |
About me |
/admin |
Admin panel (PIN required) |
/admin/new |
Create article |
/admin/edit/:slug |
Edit article |
Admin Panel
Navigate to /admin. The default PIN is 2501.
To change it, update the CORRECT_PIN constant in src/components/admin/AdminGate.jsx.
Deployment
Netlify: public/_redirects is already configured for SPA routing. Drag and drop the dist/ folder.
GitHub Pages / other static hosts: After npm run build, copy dist/index.html to dist/404.html.
License
MIT