How I built this Terai-themed portfolio

Why the Terai?

I was born in Katahariya, Rautahat, on the flat plains of southern Nepal. Most developer portfolios look the same, so I wanted mine to say where I come from. The Terai is horizontal: endless fields, wide rivers, a sky that changes colour all day. So instead of scrolling up a page, you walk through a day.

The day cycle

As you scroll, the sky moves from dawn to dusk and a small clock counts the hours:

5:40 AM: sunrise over the paddy fields (Home)
10:00 AM: the harvest (Skills)
12:30 PM: the weekly market (Projects)
4:30 PM: a walk along the Bagmati (Experience)
7:10 PM: Chhath lamps at the ghat (Contact)

Under the hood, one scroll value from Framer Motion writes CSS variables, so React never re-renders while you scroll:

const { scrollYProgress } = useScroll();
const skyTop = useTransform(scrollYProgress, STOPS, TOP_COLOURS);
useMotionValueEvent(skyTop, 'change', (v) =>
  document.documentElement.style.setProperty('--sky-top', v));

The stack

MongoDB + Mongoose for all content: projects, skills, awards, posts.
Express 5 API with zod validation shared between client and server.
React Router 7 prerenders every public page to static HTML at build time, so it is fast and search engines see everything.
A small admin dashboard lets me publish posts like this one without touching code.

Respecting motion preferences

Every animation has a calm fallback. If your system asks for reduced motion, the sky simply changes per section and nothing moves on its own.

Thanks for walking the fields with me. 🌾