# Galaxy Portfolio - An interactive zoom journey from Milky Way to desk

**URL:** <https://discourse.threejs.org/t/galaxy-portfolio-an-interactive-zoom-journey-from-milky-way-to-desk/82229>\
**Category:** Showcase\
**Created:** [May 7, 2025, 5:57pm UTC](https://discourse.threejs.org/t/galaxy-portfolio-an-interactive-zoom-journey-from-milky-way-to-desk/82229 "2025-05-07T17:57:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![techinz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/techinz/32/59572_2.png) [@techinz](https://discourse.threejs.org/u/techinz)\
**Post date:** [May 7, 2025, 5:57pm UTC](https://discourse.threejs.org/t/galaxy-portfolio-an-interactive-zoom-journey-from-milky-way-to-desk/82229/1 "2025-05-07T17:57:57Z")

</div>

I wanted to share my latest project - an interactive 3D portfolio that lets users zoom from our Milky Way galaxy all the way down to my workspace:

> **[techinz.dev (Vladyslav Shtatskyi) - Galaxy portfolio | Full Stack Developer](https://www.techinz.dev)**

## Concept

I just wanted to create a memorable alternative to standard portfolio website. It works like Google Earth but extends the concept from space to my desk, where my actual HTML portfolio appears on a 3D monitor.

## Implementation

The journey consists of 7 distinct scenes (galaxy → solar system → earth → continent → city → district → room), with smooth transitions handled by a custom scene manager:

- **Scene precompilation system** that eliminates frame drops during transitions by pre-rendering to a 1×1 offscreen buffer
- **Device detection** for different journey endpoints (monitor on desktop, phone on mobile)
- **HTML content** rendered inside 3D models with working interactivity

The precompilation system was particularly important - it prevents the typical shader compilation stutter that happens during first scene transition. By rendering all scenes to offscreen buffers during loading, all shaders get compiled before they’re actually needed. This gives buttery-smooth transitions without frame drops.

## Performance considerations

- Models processed with gltfjsx for optimization
- Texture compression for faster loading
- 3D HTML integration with platform-specific handling

## Open source

The entire project is [available on GitHub](https://github.com/techinz/galaxy-portfolio) if anyone wants to see how specific parts were implemented.

I’d love to hear your feedback.

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [May 7, 2025, 6:12pm UTC](https://discourse.threejs.org/t/galaxy-portfolio-an-interactive-zoom-journey-from-milky-way-to-desk/82229/2 "2025-05-07T18:12:21Z")

</div>

This was actually super fun, reminds me of the Men in Black opening! You could also try the reverse, with the camera zooming out to your profile, like in Contact!

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 7, 2025, 6:21pm UTC](https://discourse.threejs.org/t/galaxy-portfolio-an-interactive-zoom-journey-from-milky-way-to-desk/82229/3 "2025-05-07T18:21:01Z")

</div>

Lovely work! Did you reveal your absolute location zooming into that house? 😅

---

<div class="post-metadata">

**Author:** ![techinz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/techinz/32/59572_2.png) [@techinz](https://discourse.threejs.org/u/techinz)\
**Post date:** [May 7, 2025, 7:56pm UTC](https://discourse.threejs.org/t/galaxy-portfolio-an-interactive-zoom-journey-from-milky-way-to-desk/82229/4 "2025-05-07T19:56:52Z")

</div>

Thank you! No, I hope the real residents of that house don’t sue me 😄