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-filter frosted 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