Building erginos.io — Why I Ditched the Scroll Bar

Every portfolio site looks exactly the same right now. A big bold heading, a list of logos, and an endless vertical scroll. I wanted mine to feel less like a resume and more like a physical desk you can look around. Here is how I actually built it.

The Landscape Canvas

Instead of scrolling down, you pan across. On desktop, the viewport is essentially a camera moving over a massive absolute-positioned grid. I used Framer Motion's spring physics so the camera doesn't just cut to the next section—it physically drags you there.

On mobile, I ripped this out entirely. Complex gestures on small screens are a nightmare, so it gracefully falls back to a standard vertical stack.

const LandscapeViewport = ({ activeSection, children }) => {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  useEffect(() => {
    animate(x, targetX, { type: 'spring', stiffness: 80 });
    animate(y, targetY, { type: 'spring', stiffness: 80 });
  }, [activeSection]);

  return <motion.div style={{ x, y }}>{children}</motion.div>;
};

Cards That Actually React to You

I am tired of standard hover states. I wanted the UI to react to where you are, not just what you're clicking.

Every card on the grid has a proximity glow. I track the mouse position, calculate the Euclidean distance to every card's center, and light up the borders based on how close you get. It's mathematically simple but makes the whole grid feel alive.

The Typography

I landed on Outfit for body text and JetBrains Mono for the technical details. It's a cliché to use monospace fonts for developer portfolios, but JetBrains Mono actually looks good on a 4K monitor. The pairing says "I write code" without screaming it at you.

What's Next

The blog you're reading right now is built on MDX, which finally lets me mix standard markdown with live React components. I'm going to start wiring up more interactive elements into these posts soon.