This is a submission for the AI Challenge for Cross-Platform Apps - WOW Factor
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. Think of it as a museum where every exhibit invites you to touch, play, and explore.
Instead of boring 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. It's part portfolio, part playground, part digital art installation.
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:
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 specific logic, rendering, and interactivity.
🧩 Grid Feature Breakdown
1. Profile Interactive Card (Top Left)
Component: InteractiveProfile
Purpose: Personal introduction and avatar display.
Features:
- Parallax Effect: The avatar, background particles, and text layers move at different rates relative to the mouse cursor, creating a sense of depth.
- Holographic Rings: Rotating rings around the avatar simulate a futuristic interface.
- Scanning Animation: A vertical scan line moves across the card on hover, revealing a…
Youtube Demo:
Screenshots Across Platforms
Windows Desktop:
The full grid experience running natively on Windows with buttery-smooth 60fps animations
Web Browser (WASM):
Identical experience running directly in Chrome – zero installation required
Touch-Enabled Devices:
All interactions adapted beautifully for touch input on tablets and mobile
Cross-Platform Magic
This app runs on all major platforms from a single shared codebase:
- ✅ Windows (WinUI 3 native)
- ✅ WebAssembly (runs in 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. They usually mean "write once, debug everywhere." But Uno Platform genuinely delivered.
What shocked me: I wrote the entire particle system, 3D math, physics engine, and game loop once using standard C# and XAML. No platform-specific code. No conditional compilation. The same Canvas rendering, the same DispatcherTimer animation loops, the same pointer events – they all just worked across Windows native and WebAssembly.
The magic moment: When I hit F5 and saw my complex 3D room scanner with momentum-based rotation running flawlessly in a browser at 60fps, I literally said "No way" out loud. Same performance, same smoothness, zero modifications.
The Uno Platform tooling handled all the platform abstraction beautifully. I focused entirely on crafting experiences, not fighting build systems.
Interactive Features
Every single card in the grid is fully interactive. Here's what makes each one special:
🎭 Profile Card - The Digital Twin
Hover over my avatar and watch as:
- Parallax layers create depth (background, particles, avatar, text all move at different speeds)
- Holographic rings rotate around the profile like a sci-fi interface
- A scanning line sweeps across revealing a "digital analysis" effect
- Particles float and react to your cursor position
Why it's cool: It makes a simple profile picture feel like stepping into a futuristic interface.
⏱️ Timeline - Work History Reimagined
Instead of boring bullet points:
- Interactive nodes expand on hover, revealing role details with smooth easing
- Glow effects pull focus to the active experience
- Staggered entrance animations bring the timeline to life on page load
- Each milestone pulses gently, inviting exploration
Why it's cool: Your work history becomes a journey you can explore, not just read.
🎯 Skill Radar - The Tech Gyroscope
This isn't just a chart:
- 3D tilt effect makes the entire radar track your 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, adding life to the data
Why it's cool: It transforms boring skill percentages into a living, rotating interface from a sci-fi movie.
🌊 Poetique - The Living Blob
An organic shape that never sits still:
- Morphs continuously using Perlin-like noise on Bezier control points
- Runs away from your cursor – try to touch it and watch it deform
- Gradient fill shifts as the shape transforms
- Feels genuinely alive and unpredictable
Why it's cool: It's mesmerizing. People often just sit and watch it move.
🔒 FreeShare - Data in Motion
Watch secure transfer come to life:
- Data packets fly outward from a central shield along specific paths
- Click to trigger a burst – the shield spins rapidly and packets explode outward
- Hover for acceleration – the entire simulation speeds up
- Visualizes security and speed simultaneously
Why it's cool: It makes abstract concepts like "secure file transfer" tangible and exciting.
🏠 TouchReno - The 3D Room You Can Spin
A full 3D wireframe room renderer:
- Click and drag to rotate – it has real physics momentum and gradually slows down
- Auto-rotation kicks in after you stop interacting
- Laser scanning line sweeps vertically, highlighting edges like LiDAR
- Fully manual 3D perspective math – no game engine, just pure rendering
Why it's cool: The physics feel satisfying. That momentum when you "flick" the room and it keeps spinning? Chef's kiss.
🌌 Contact Constellation - Physics Playground
Your contact links become a living star system:
- Icons act as physics bodies connected by springs
- Mouse creates gravity wells – push the nodes around
- Springs stretch and contract, trying to maintain structure
- Dynamic line rendering updates 60 times per second
Why it's cool: Getting someone's email address has never been this fun.
🪐 Dev.to - Solar System Link
A portal to my blog posts:
- Planets orbit a central sun at different speeds
- Click for warp speed – stars streak past, planets accelerate
- Procedural starfield creates depth
- Full orbital mechanics simulation
Why it's cool: It turns a simple blog link into a space voyage.
🎮 NotePage - Bug Blaster Game
A fully playable mini-game:
- Move your ship with the mouse
- Auto-firing lasers shoot bugs falling from the top
- Real collision detection and score tracking
- Actual game loop running at 60fps
Why it's cool: It's a playable game inside a portfolio card. How many portfolios can say that?
💚 Matrix Rain - Digital Aesthetic
Classic hacker vibes:
- Characters fall vertically in columns
- Trail effects fade naturally
- Randomized speeds and timings create organic movement
- Instant recognition factor
Why it's cool: Everyone recognizes it. It's like visual shorthand for "I code."
🐍 Snake Grid - The Intelligent Footer
A constantly moving light trail:
- Snake navigates a grid, choosing random directions
- Never immediately backtracks (pathfinding logic)
- Glowing head leads the trail
-
Terminal-style text overlay with
<Code with Creativity />
Why it's cool: Even the footer refuses to sit still.
The Wow Factor
What Makes People Say "Wow"?
The moment of delight: When someone hovers over the skill radar and watches it tilt in 3D space like it's tracking their hand, their eyes light up. When they discover the room scanner has momentum and they can "flick" it to spin – they always do it again. And again.
The hidden game: When people realize one of the cards is a fully functional space shooter, they stop treating it like a portfolio and start treating it like an experience. They play for a minute, then explore to see what else is hidden here.
It remembers you're human: Every interaction has weight, momentum, easing. Nothing snaps. Nothing teleports. The blob doesn't just avoid your cursor – it recoils. The timeline doesn't just expand – it blooms. These micro-physics make everything feel alive.
Technical Achievements I'm Proud Of
Pure Math Rendering: The 3D room scanner uses manual matrix transformations and perspective projection. No 3D engine. Just math, a canvas, and determination.
60fps Across the Board: With 11 simultaneous animation loops, particle systems, physics simulations, and a game running – I maintain 60fps on Windows and WebAssembly. Extensive optimization made this possible.
Physics That Feel Right: The momentum on the room scanner, the spring connections on the constellation, the organic blob movement – getting physics to feel good is harder than getting them mathematically correct.
Cohesive Chaos: With 11 wildly different experiences, I could have ended up with a chaotic mess. Instead, the consistent dark theme, glowing accents, and shared animation timing create a unified language.
What This Represents
This portfolio is a statement: developers can be artists, and code can be poetry. I could have made another minimalist portfolio with fade-in animations. Instead, I built a digital playground that makes people smile.
When recruiters visit, they don't just read about my skills – they experience them. They see that I understand:
- Advanced math (3D projections, orbital mechanics)
- Physics simulation (momentum, springs, collision detection)
- Game development (loops, rendering, input handling)
- Creative coding (particles, morphing shapes, procedural generation)
- Performance optimization (60fps with 11 concurrent systems)
But more importantly, they see I care about craft, delight, and human connection.
Technical Notes
Architecture: Built with Uno Platform + WinUI 3, using a MainPage dashboard hosting specialized UserControls for each card.
Rendering: Primarily Canvas with Shape elements and Composition layers for performance.
Animation: Mix of DispatcherTimer and CompositionTarget.Rendering for 60fps loops.
Math Libraries: Heavy use of System.Numerics.Vector2, Matrix4x4 for 3D, and good old trigonometry.
Interactivity: Standard pointer events (PointerMoved, PointerPressed, etc.) drive all interactions.
Try it yourself: Hover over the cards. Drag the room. Play the game. Watch the blob run away. This portfolio doesn't just tell you what I can do – it shows you.
Because at the end of the day, we're not just building apps. We're crafting experiences. And experiences should be unforgettable.
✨
Built with ❤️ using Uno Platform – proving that .NET developers can create stunning cross-platform experiences that run everywhere from a single codebase.
Top comments (0)