A cinematic first impression
An automatic opening slideshow combines reveal transitions, slow camera movement and gold progress indicators, with pause controls, touch navigation and support for reduced motion.
ARCHITECTURE & DESIGN / WEB PROJECT
DRN Design
Spaces with character. A website to match.
A website presentation for DRN Design that combines a refined studio identity with project discovery, immersive galleries and a practical content management system in French, English and Turkish.
PROJECT SCOPE
- Website design
- Multilingual development
- Interactive project presentation
- Content management
- Enquiry management
Open full-resolution image (opens in a new tab)
01 / THE BRIEF
A clear purpose.
Give the studio a distinctive digital presence that reflects its architectural character. Make projects, services and renovation stories easy to explore, while allowing the owner to update content and manage enquiries independently.
02 / THE APPROACH
Design meets function.
A black and gold palette, elegant serif typography and generous interior imagery establish the visual direction. An animated opening slideshow introduces the studio, followed by category-filtered projects, detailed case pages and interactive before-and-after comparisons. A protected management area brings projects, media, studio settings and contact enquiries together. Architectural entries and imagery used in the presentation are clearly identified as concepts.
03 / THE EXPERIENCE
Built around real tasks.
Projects worth exploring
Category filters lead to dedicated project pages with location, area, year and materials. Full-screen galleries and an interactive before-and-after slider bring the visual story into focus.
One studio, three languages
French, English and Turkish versions cover the studio introduction, services, project descriptions and contact journey, with language-aware project links.
Content in the owner's hands
A Google sign-in panel supports project creation, editing, drafts, publishing, featured work and recoverable archives. It also manages images, the logo, categories, contact details, social links and saved enquiries. The demonstration panel is accessible to signed-in Google users.
04 / WEB TECHNOLOGY
What makes it work.
Interface
- React
- TypeScript
- CSS3
- Lucide icons
Application
- Vinext
- Vite
- Cloudflare Workers
- Zod
Data & media
- Cloudflare D1 / SQLite
- Cloudflare R2
- Drizzle migrations
05 / INTEGRATIONS
Connected where it counts.
Cloudflare D1
ImplementedPersistent storage for projects, studio settings and contact enquiries. Enquiries are saved in the management panel; automatic email delivery is not configured.
Cloudflare R2
ImplementedAuthenticated image uploads and media storage support project covers, galleries, before-and-after imagery and studio branding.
The studio's drn.designn profile is linked from the public contact and social sections. Additional social links can be configured in the management panel.
Google Sign-In
New domain setup pendingGoogle OAuth 2.0 sign-in is implemented with state validation, PKCE, verified Google identity and signed sessions. The new Oyibo address is awaiting callback registration in Google Cloud.