1 page personal portfolio for showing who I am, what I build, and where to find me.
koutyuke.dev • Docs • License
koutyuke.dev is a one-page personal portfolio site for presenting the shape of koutyuke.
The UI is built around React components, styled with Tailwind CSS v4 and Radix Colors, and animated with Motion.dev. The floating navigation expands from a button into a menu with continuous motion. Theme switching supports system | light | dark, with state managed by Jotai and DOM synchronization isolated in theme-sync.tsx.
| Area | Detail |
|---|---|
| Single Page | Collects hero, about, footprints, contact, and footer into one page |
| Floating Navigation | Navigation that smoothly expands from a button into a menu |
| Theme Switching | Supports system | light | dark and follows OS preferences |
| Component First | Keeps UI reviewable through React components and Storybook |
| Strict Tooling | Runs TypeScript strict, Oxlint, Oxfmt, Stylelint, and Vitest via Vite+ |
| Layer | Tools |
|---|---|
| Toolchain | Vite+ (vp) |
| Runtime | Node.js v24 |
| Package manager | pnpm |
| UI | React |
| Styling | Tailwind CSS v4, @radix-ui/colors, the-new-css-reset |
| Motion | Motion.dev |
| State | Jotai |
| Test / Catalog | Vitest, Storybook |
| Quality | Oxfmt, Oxlint, Stylelint, Lefthook |
| Environment | Nix, direnv |
| Deploy | Cloudflare Pages |
node, pnpm, git, and nixfmt-rfc-style are provided by the Nix shell. vp is not managed by Nix yet, so install it with the official installer.
curl -fsSL https://vite.plus | bash
direnv allow
vp install
vp devDaily development tasks are routed through Vite+.
| Command | Description |
|---|---|
vp dev |
Start the development server |
vp check |
Run format, lint, and type checks |
vp test |
Run tests |
vp run css:lint |
Lint CSS with Stylelint |
vp run storybook |
Build Storybook for production |
vp build |
Create a production build |
vp run deploy |
Deploy to Cloudflare Pages |
src/
├── app/ # application shell and global styles
├── entities/ # domain data and entity UI
│ ├── footprint/ # footprint content model
│ └── profile/ # profile model and social links UI
├── features/
│ └── theme/ # theme state and DOM sync
├── pages/
│ └── home/ # home page composition
├── shared/ # shared UI primitives and utilities
└── widgets/ # page sections and floating navigation
├── about/
├── contact/
├── floating-navigation/
├── footer/
├── footprints/
└── hero/
| Document | Description |
|---|---|
| docs/README.md | Documentation index |
| docs/DESIGN.md | Visual design, theme, motion, and accessibility principles |
| docs/FRONTEND.md | Frontend implementation and toolchain notes |
| docs/ARCHITECTURE.md | Directory structure, data flow, and coding rules |
| docs/presentational-container-pattern.md | Presenter / Container Pattern responsibilities and dependency flow |
MIT License. See LICENSE for details.