Mumshad Portfolio

Motion-led personal engineering portfolio

A single-page engineering portfolio built on Vite and Tailwind v4, with scroll and entrance choreography carrying the narrative instead of discrete pages. Deliberately light: a site arguing that its author builds fast software cannot itself be slow, so the toolchain stays thin and the layout is fluid rather than breakpoint-hopping.

The problem

An engineering portfolio has about five seconds to establish credibility. A template does not, and a heavy site actively undermines the claim it is making about the person who built it — a three-second first paint is an argument against its own author.

Our approach

Vite and Tailwind CSS v4 through the first-party Vite plugin, keeping the toolchain thin and the build near-instant. Framer Motion drives a single continuous scroll narrative instead of discrete pages, and the entire layout is fluid rather than breakpoint-hopping, so there is no width at which it looks like it was designed for a different screen.

The outcome

A fast, self-contained page that reads as one continuous story on a phone and on a desktop, with no framework weight to justify.

What is inside

Vite build with Tailwind CSS v4 via the official Vite plugin

Framer Motion scroll-linked and entrance animation

Single continuous-scroll narrative structure

Fluid responsive layout from small phones upward

Lucide and React Icons icon systems

Engineering notes · 3 min read

The site is the argument

Pages

continuous scroll

None

UI framework

Tailwind v4 only

Fluid

Breakpoints

no width looks borrowed

A portfolio makes a claim about how its author builds software, and then demonstrates it by loading. A slow, heavy, component-library-laden page arguing that its author cares about performance is self-refuting, so the constraint here was that nothing ships unless it earns its bytes.

That ruled out a UI framework. Tailwind v4 through the first-party Vite plugin, and Framer Motion for the scroll choreography, is the whole dependency story.

One narrative, not a set of pages

Splitting a portfolio into routes asks the reader to decide what to look at before they know anything. A single continuous scroll makes that decision for them, in the order the story actually works, and removes navigation entirely.

The layout is fluid rather than breakpoint-driven for the same reason: there should be no viewport width at which the page looks like it was designed for a different one and is coping.

Vite build with Tailwind CSS v4 via the official plugin — near-instant rebuilds
Framer Motion scroll-linked and entrance animation, reduced-motion respected
No routing, no data layer, no state management: there is nothing to manage

Why there is no demo button on this card

Every other project on this site ships a clickable mock of its platform. This one does not, and the reason is worth stating plainly: it has no login, no dashboard, no records and no admin surface. There is no product UI to mock.

Inventing a "portfolio studio" to satisfy the seven-screen rule would mean shipping a demo of software that does not exist — which the demo’s own honesty page would then have to disclaim in full. The honest demo of a website is the website. The decision is recorded in docs/PROJECT_DECISIONS.md.

Technology

Front end

React

Vite

Tailwind CSS v4

Framer Motion

Lucide

React Icons

Tooling

PostCSS

Autoprefixer

Platforms