👉 Live site: https://ibrahim-ach.pages.dev/
- Remix (Vite)
- React 18
- Cloudflare Pages
- Framer Motion
- Three.js (select background visuals)
- MDX
- Storybook
This project intentionally uses Remix instead of Next.js for Cloudflare-native deployment and edge rendering.
- Edge-rendered server components
- Low TTFB via Cloudflare Workers
- Explicit routing and data loading
- Clear server/client separation
- CSS code splitting is disabled
- Prevents production layout collapse caused by non-deterministic CSS chunk ordering
- Tradeoff: slightly larger CSS payload for deterministic rendering
- 3D asset support
.glb,.hdr, and shader files explicitly included in the build pipeline
These choices were made after debugging real production issues — not copied from templates.
- Node.js ≥ 18.18.0 (LTS recommended)
- npm ≥ 9
Install dependencies:
npm installOnce it's done start up a local server with:
npm run devTo view the components storybook:
npm run dev:storybookThis project is deployed on Cloudflare Pages.
npm run deployThis repository is private and not intended for public use, distribution, or reuse.
Unauthorized actions are not permitted, including but not limited to:
Copying or reusing code
Replicating design, animations, or layout
Redistributing or modifying any part of the project
Claiming any work contained here as your own
All code, design, assets, and intellectual property belong to Ibrahim.
How do I change the color of the background displacement sphere?
Edit the fragment shader used by the Three.js material.
See this discussion for details: https://github.com/ibrahimBytes/portfolio/issues/19#issuecomment-870996615
Why is CSS code splitting disabled?
In production builds, CSS chunking caused layout instability due to non-deterministic load order. Disabling it ensures predictable rendering at the cost of a slightly larger CSS bundle.