Website Analysis: Bruno Simon_
A three-dimensional, drivable portfolio at bruno-simon.com.
Bruno Simon's portfolio is the future I want to build for myself. I work across game design, interaction design, and AI-assisted creation — and I want a portfolio that doesn't just show my work, but lets people play it. This site does exactly that: a full 3D world in Three.js where visitors drive a small car to explore his projects. It won Awwwards Site of the Year (2019) and is a benchmark for what a portfolio can be when it stops looking like every other website. I'm not here to copy his 3D — I'm here to learn his spirit, then build my own world (see my vision →).
Style Guide
Intent
To sell Bruno's skills as a creative developer — not by listing them, but by demonstrating them. The site itself is the proof of work. One statement: "I can build worlds. Hire me."
Voice
- Playful — "And don't break anything!"
- Confident — it lets the work speak without over-explaining
- Inviting — it hands you the controls and trusts you to explore
- Expert — beneath the playfulness is obvious technical mastery
Tone
- Landing / the world: playful, curious, a little mischievous — like a game tutorial.
- About / project panels: calm, professional, precise — it shifts from "game" to "CV" without breaking immersion.
Brand
Youthful, technical, and distinctly craft. The brand is "creative developer," not "designer" — independent, experimental, technically fearless. The consistency is total: every pixel, from the low-poly terrain to the UI type, belongs to the same world.
Three Personas
Maya, 34
Maya runs a studio that wins immersive-web campaigns. She needs a freelance creative developer for a client brief.
- Why she's drawn in: She was forwarded the link and immediately reads the technical bar — physics, shadows, a full 3D world in the browser. She doesn't need to read a CV; the site is his CV.
- What the site tells her: In two minutes she's driven past his skills, projects, and contact info. She learns he teaches Three.js at Three.js Journey, leads development at Immersive Garden, and freelances.
- What she can do with it: Gauge his ability, scope his rate, and reach out with a concrete brief — confident he can ship.
- Will she return? Yes. She bookmarks it to show her team and comes back whenever she needs "that drivable portfolio" as a creative benchmark.
Leo, 26
Leo builds static UI for a living and wants to move into real-time 3D. He found the site through Awwwards and the Three.js community.
- Why he's drawn in: He cares less about the projects than about how it's built. The site is a masterclass.
- What the site tells him: It points him to Bruno's teaching work, showing a clear path to learn the exact techniques used.
- What he can do with it: Inspect it, read the case studies, and enroll in the course. The portfolio becomes a funnel into Bruno's second business — education.
- Will he return? Repeatedly — first as a student, later as a peer referencing techniques.
Sofia, 21
Sofia is an Integrated Design student building her first portfolio, bored by the identical grid of portfolio templates.
- Why she's drawn in: It reframes what a portfolio is. She realizes a portfolio can be an experience, not a folder of images.
- What the site tells her: That differentiation is the whole point — the site stands out because it's built, not assembled.
- What she can do with it: She takes it as inspiration (and a warning: don't copy the car, copy the reasoning). She learns to ask "what experience represents my work?" instead of "which template looks nice?"
- Will she return? She'll return for reference and inspiration — and eventually as a peer.
Wireframe
The site has no traditional "pages" — it's one continuous 3D space. Information architecture:
- Entry / loader: site name + a "drive to explore" prompt.
- The world (home): a bounded 3D terrain. Navigation is spatial — you drive from area to area.
- Waypoints / markers: floating labels in 3D (About, Skills, Projects, Contact) act as the menu. Reaching a marker opens an info panel.
- Info panels: HTML/CSS overlays on top of the 3D scene — these are the "pages." Each is a card with text, images, and links.
- HUD / controls: on-screen hint for WASD/arrow keys + a subtle settings toggle.
Main "pages" (as panels): About (bio + roles) · Skills (tech stack) · Projects (cards: name, description, tech tags, link) · Contact (email/socials).
Copy Deck
Labeled breakdown of the landing copy:
| Label | Copy |
|---|---|
| Headline / hero intro | "My name is Bruno Simon, and I'm a creative developer (mostly for the web)." |
| Subhead / pitch | "This is my portfolio." |
| Call-to-action | "Please drive around to learn more about me and discover the many secrets of this world." |
| Microcopy / voice flourish | "And don't break anything!" |
| Role tags | Creative developer · Lead developer at Immersive Garden · Teacher at HETIC · Freelancer · WebGL lover |
| Section label | About |
| Section label | Skills |
| Section label | Projects |
| Section label | Contact |
Competition
Compared to a typical portfolio (Squarespace/WordPress template, or a standard image-grid designer site):
- Voice/tone: competitors are usually neutral and professional; Bruno's is playful and confident. Most sites tell you what they do; this one lets you do it.
- Brand: competitors read as "templates wearing someone's name"; Bruno's reads as authored — every detail deliberate.
- Style/design: competitors rely on grids, hero images, and scroll; Bruno replaces scrolling with navigation through space — the interaction model is the design.
- What competitors have that this lacks: fast load times, instant access to info, accessibility, SEO. A 3D site is heavier, slower, less accessible — a real trade-off.
- What I can learn: differentiation is powerful but costly (performance, accessibility). The best portfolio might borrow Bruno's spirit — an experience that proves your skill — while keeping some of a conventional site's usability. That's the lesson I'll apply to my own work.
My Portfolio Vision: A Three Kingdoms HD-2D World
Bruno's site taught me the core lesson: a portfolio should be an experience you can play, not a folder of images you scroll. But instead of copying his low-poly 3D world, I want to build my own version in a style that is unmistakably mine — an HD-2D Three Kingdoms world, inspired by Wandering Sword (逸剑风云录), the pixel-art martial-arts RPG that blends 16-bit pixel characters with 3D-rendered scenes, lighting, and depth of field.
The concept: visitors walk a pixel map of the Three Kingdoms. My projects are cities scattered across four territories, color-coded by faction — Shu (red), Wei (blue), Wu (green), and the unaffiliated warlords (grey). Entering a city opens a project, presented as a scroll or a pixel dialogue panel.
- It carries my cultural identity — the Three Kingdoms is a story I grew up with — into the work itself.
- HD-2D keeps the pixel nostalgia while adding spatial depth, a "2D that feels 3D" that reads as crafted, not templated.
- It's lighter and faster than a full 3D world like Bruno's, so it keeps more of a conventional site's usability.
- Each faction gives the portfolio a built-in narrative and organization — my game design, AI creation, and design work mapped onto a world instead of a menu.
This is the portfolio I want to build: where differentiation isn't a gimmick, but a world only I could make.