A pocket-sized portfolio that opens like a book. Built as a tiny desk scene with a flip-through book on a spring, draggable/swappable stickers, and hand-drawn marker underlines that draw themselves on hover.
Live demo: https://feralui.vercel.app/#/deskfolio
Book-readme.mp4
- The book opens and turns pages on a spring. Drag a corner, tap a side, or use the arrow keys.
- Desk stickers are draggable, resizable, and swappable via a long-press radial menu.
- Self-drawing scribble underlines: each project name gets a real marker scribble that a "pen" traces along its own path on hover (the centerline is derived from the filled SVG shape, then drawn via
stroke-dashoffsetinside a mask). - Editable text: the journal/about copy is editable in place.
npm install deskfolioPeer deps (provide these in your app): react, react-dom, motion.
import { DeskFolio } from 'deskfolio'
import 'deskfolio/styles.css'
export default function Page() {
return <DeskFolio />
}DeskFolioPage is also exported if you want to supply your own page wrapper.
DeskFolio loads its stickers/backgrounds from absolute paths (/stickers/…, /backgrounds/…, /mort-profile.webp). Copy the shipped assets into your app's web root so they resolve:
cp -r node_modules/deskfolio/public/* public/(They live under deskfolio/public: stickers/, backgrounds/, and the two .webp images.)
- React 19 + motion.dev
- Vite + TypeScript
web-hapticsfor tactile feedback- Assets: a mix of Freepik + hand-built SVGs
npm install
npm run devBuild for production:
npm run build