Engineering case study
Beastsandnumbers Production
A responsive media portfolio designed to make a varied body of photography and production work easy to explore.
- My role
- Full-stack developer
- Project type
- Media portfolio
01 — Context
Project overview
The production studio needed one web experience for photography, music videos, films, and commercial work.
I developed a responsive interface and supporting application layer that organise different media categories without making the browsing experience feel fragmented.
02 — Ownership
What I was responsible for
- Developed the responsive portfolio interface.
- Structured the experience around distinct media categories.
- Connected the React frontend to an Express and MongoDB application layer.
- Used motion to support navigation and presentation without replacing the content hierarchy.
03 — Engineering
Key technical decisions
Content-led information architecture
The navigation follows the studio’s real work categories, helping visitors move directly to the type of production they want to evaluate.
Separated frontend and data concerns
The React interface handles presentation while the Express and MongoDB layer supports content retrieval and future content growth.
04 — Problem solving
Challenges and approach
Presenting varied media consistently
Photography, films, and commercial work need different visual treatment. A shared page structure keeps the brand consistent while allowing each category to retain its character.
Responsive visual browsing
Media-rich layouts must remain legible and navigable across screen sizes, so hierarchy and spacing take priority over decorative density.
05 — Delivery
Outcome
The delivered site gives the studio a single responsive destination for presenting work across multiple production disciplines. No verified traffic or conversion metrics are available.
06 — Growth
What I learned
This project strengthened my understanding that a portfolio’s interface should frame the work and make it discoverable, not compete with it.