This looks awesome, and an interesting idea bringing the metro style into web-design. However, from a pure usability perspective looking at this one still image, I must say it's quite horrid haha, but of course I haven't used it live so...
The way it's organized in the image now could make for a nice page in a graphic design magazine, not so much for a web-page. Here are some of my suggestions to make it work for a webpage:
Make the site width fluid, stretching the full width of the window space
Group main navigation tiles together, decrease tile size by about 15-20%, and fixate tiles to the left
Also fixate the header (where the logo is) to the top, and drastically decrease height, or just place logo at top of the navigation tile menu
As you navigate to different "pages" using the fixed left tile menu, or by swiping finger across the content area on a touch screen, have the different pages slide in horizontally.
The pages would be chained horizontally in order, and you could either load all pages simultaneously or perform an AJAX load as you go to (or swipe to) each page.
A nice effect would be to leave the width of each "page" fluid up until maybe 1100 pixels (via max-width), and set the opacity of the pages to 40 or 50%. Then as the page chain slides, the current page would transition to an opacity of 100%. This way, a user who has a screen resolution width of 1440px+ would see the currently active page fully illuminated, and other pages to the right dimmed out, ready to be navigated to.
Have each page vertically scroll independently of other pages. You would probably use an iFrame for the pages.
Would be a challenge to develop, but certainly possible. Very extensive use of jQuery / jQueryUI, absolute positioning, etc.