Portfolio - Interactive Bento Grid Experience 🎨✨

Source: Dev.to

What I Built

I created an Interactive Bento Grid Portfolio – a living, breathing showcase of my work that transforms the traditional portfolio into an immersive digital experience. Instead of static cards, I built 11 unique micro‑experiences arranged in a modern Bento Grid layout. Each card is a fully interactive world: a 3D room you can spin with physics‑based momentum, a playable space‑shooter game, a radar chart that tilts like a gyroscope, and even an organic morphing blob that runs away from your cursor.

The theme? “Code with Creativity” – proving that developer portfolios don’t have to be sterile résumés. They can be fun, surprising, and memorable.

Demo

GitHub Repo: https://github.com/yourusername/interactive-bento-grid

Portfolio – Interactive Bento Grid Experience

This project is a high‑performance, interactive portfolio application built with Uno Platform and WinUI 3. It features a modern “Bento Grid” layout where each card represents a different project or aspect of the developer’s profile, brought to life with advanced animations, physics‑based interactions, and custom rendering.

Architecture

The application uses a MainPage acting as a dashboard, hosting varying‑sized Border elements (cards). Each card contains a specialized UserControl that encapsulates its own logic, rendering, and interactivity.

Grid Feature Breakdown

1. Profile Interactive Card (Top Left)

• Component: InteractiveProfile
• Features:
  • Parallax Effect: Avatar, background particles, and text layers move at different rates relative to the mouse cursor, creating depth.
  • Holographic Rings: Rotating rings around the avatar simulate a futuristic interface.
  • Scanning Animation: A vertical scan line sweeps across the card on hover.

2. Timeline – Work History Reimagined

• Interactive nodes expand on hover, revealing role details with smooth easing.
• Glow effects draw focus to the active experience.
• Staggered entrance animations bring the timeline to life on page load; each milestone pulses gently.

3. Skill Radar – The Tech Gyroscope

• 3D Tilt Effect: The radar tracks the mouse like a gyroscope.
• Floating Tech Tags: Orbit in 3D space, scaling based on simulated Z‑depth.
• Interactive Vertices: Hover over skill points to see exact percentages; the background grid pulses rhythmically.

4. Poetique – The Living Blob

• An organic, morphing blob reacts to cursor proximity, fleeing when approached and returning when the cursor moves away.

Screenshots Across Platforms

Windows Desktop – native performance at 60 fps.

Web Browser (WASM) – runs directly in Chrome with zero installation.

Touch‑Enabled Devices – interactions adapt beautifully for tablets and mobile.

Cross‑Platform Magic

The app runs on all major platforms from a single shared codebase:

• ✅ Windows (WinUI 3 native)
• ✅ WebAssembly (any browser)
• ✅ iOS (ready to deploy)
• ✅ Android (ready to deploy)
• ✅ macOS (ready to deploy)
• ✅ Linux (ready to deploy)

The Single Codebase Experience

Coming from a web‑development background, I was skeptical about “write once, run anywhere” promises. Uno Platform delivered:

• The entire particle system, 3D math, physics engine, and game loop were written once in standard C# and XAML.
• No platform‑specific code or conditional compilation.
• The same Canvas rendering, DispatcherTimer loops, and pointer events worked across Windows native and WebAssembly.

The magic moment was hitting F5 and seeing the complex 3D room scanner with momentum‑based rotation run flawlessly in a browser at 60 fps—identical performance to the native Windows version.

Interactive Features Summary

Every card in the grid is fully interactive, turning a typical portfolio into a playground:

• Profile Card: Parallax layers, holographic rings, scanning line, responsive particles.
• Timeline: Expandable nodes, glow focus, staggered animations, pulsing milestones.
• Skill Radar: 3D tilt, orbiting tags, hover‑revealed percentages, rhythmic grid.
• Living Blob: Cursor‑reactive morphing shape that retreats and returns.

These micro‑experiences showcase how code can be both functional and artistic, offering visitors a memorable, exploratory journey through a developer’s work.