Mobile Portfolio

The brief

The mobile-first version of the portfolio at mblportfolio.nabinghimire23.com.np: a multilingual (English, Nepali, Spanish) build rendered inside an interactive device shell with drag, resize and app-style screens.

Problem

The previous portfolio was designed on a desktop and merely adapted on a phone, which is backwards when most visitors arrive on mobile. I wanted the phone to be the primary canvas, and I wanted the site to speak to Nepali visitors in Nepali without maintaining three separate codebases.

My role

Solo build. I designed the device-shell interaction, built the shell and its screens, wired the locale routing, and set up the per-locale metadata, Open Graph images, sitemap and robots output.

Process

• Made the phone frame the layout, so desktop visitors see the same object rather than a stretched variant
• Moved all copy into per-locale content files so translations never live inside components
• Built the shell interaction (drag, resize, tilt) with Framer Motion and kept keyboard and reduced-motion paths alongside it
• Generated per-locale Open Graph images and sitemap entries at build time
• Checked the whole thing on a real phone before touching the desktop breakpoint
• Built the shell interaction on transform-only animation so gestures never trigger layout, with a reduced-motion path that swaps the tilt for a static frame rather than disabling the shell
• Reviewed each locale route for missing strings before shipping, since one untranslated key breaks the illusion of a native build

Result

A live mobile-first portfolio on its own sub-domain with three locales served from one content source and per-locale search metadata. The measurable part is the plumbing: three locales, three sitemaps, three sets of social images, zero duplicated page templates. It also became the design reference for the phone-frame project presentation this site now uses on mobile case studies. The honest limitation is translation quality: the Nepali and Spanish copy is written and reviewed by me rather than by a native translator, which is fine for a personal portfolio and would not be good enough for a commercial product. If this build were a client project, the next step would be a proper review pass per locale, and the routing already supports that without touching a component. Two of the three locales are useful today and the third exists to prove the routing generalises rather than to claim a market.

What it had to do

• English, Nepali and Spanish routes from one content source
• Interactive tilting device shell with drag and resize
• Per-locale Open Graph images, sitemap and robots

Stack

• Next.js
• next-intl
• Framer Motion
• Tailwind CSS
• Markdown