06Editorial · Magazine site
Material Studies
An issue-based editorial site on materials and a quieter future — objects, research and stories.
Self-initiated demonstration (live, completed)
- Role
- Design and development: Syed Ahad Haider
- Type
- Editorial · Magazine site
- Source
- github.com/syedahadhaider/react-material-website
- History
- Published to GitHub 12 September 2026
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- Framer Motion

About the project
A multi-page editorial site presented as a numbered issue, built as a demonstration of long-form layout. The home page opens on the current issue, an Objects archive collects material studies, Research and Stories carry the long-form pieces, and a contact page closes the loop — all in a dark, cinematic art direction set in Bodoni Moda and Manrope.
The problem it solves
Editorial hierarchy that survives a phone. A display face as high-contrast as Bodoni Moda and full-bleed photography both stop working at small sizes, so the type scale, measure and image crops are set per breakpoint rather than scaled down — and the issue structure keeps five page types reading as one publication.
Scope and limits
- Deployed as a demonstration: the issue, its studies and its stories are self-created content, not a running publication.
- Content is authored in the codebase — there is no CMS behind it.
What it does
- Issue-style home page
- Objects archive — paper, glass, surface and metal studies
- Research and Stories sections with issue anchors
- Contact page
- Dark cinematic art direction with full-bleed photography
Worth noticing
- 01Editorial hierarchy: Bodoni Moda display over Manrope text
- 02Photography-led layouts that stay readable on small screens
- 03Built on the Next.js App Router with Framer Motion transitions

Want something like this?
Open the live site, poke at it, then tell me what you have in mind. A two-line brief is enough to start.
Related work
- E-commerce · JewelryPLINTH: Laravel Jewelry StoreThe other multi-page build where every route carries its own metadata.Read the PLINTH case study
- Creative front-end · Interactive narrativeBranching Story Engine: React video & audio sequencerThe same dark art direction, driven by motion instead of type.Read the Branching Story Engine case study