Overview
TGM.One is my personal portfolio and blog, engineered to be more than a static showcase. It’s a dynamic, interactive experience designed to demonstrate my skills in full-stack development, 3D graphics, and modern DevOps practices. The centerpiece is an interactive 3D globe that visualizes my projects, creating an engaging way for visitors to explore my work. The site is built from the ground up using Nuxt 3 and Three.js, and serves as a living project that evolves with my career.
This project replaces a previous, simpler static site. The goal was to create a platform that not only displays content but also reflects the quality and complexity of the engineering I’m passionate about. It integrates with a custom backend API (Foligo) to dynamically fetch project and blog data, utilizes Incremental Static Regeneration (ISR) for optimal performance, and is deployed via a fully automated CI/CD pipeline to a Kubernetes cluster.
Key Features
- Interactive 3D Project Globe: A visually compelling 3D Earth, built with Three.js and globe.gl, that plots projects geographically. Users can rotate, zoom, and click on project icons to navigate to detailed case study pages.
- Advanced Label Collision Detection: To maintain readability on the globe, I implemented a custom screen-space collision detection algorithm. This prevents project labels from overlapping as the globe rotates, ensuring a clean and user-friendly interface.
- Performance-Optimized Architecture: The site uses Nuxt 3’s Incremental Static Regeneration (ISR) and route-level prerendering. This provides the speed of a static site with the flexibility of dynamic data, resulting in near-instant page loads and excellent SEO.
- Integrated Markdown Blog: A full-featured blog and project showcase system powered by Markdown. It includes support for Mermaid.js, allowing for the direct embedding of technical diagrams and charts within posts.
- Automated CI/CD Pipeline: The entire deployment process is automated using GitHub Actions. The pipeline builds and pushes multi-architecture (AMD64/ARM64) Docker images, deploying them seamlessly to a Rancher-managed Kubernetes cluster.
Technologies & Implementation
The core of TGM.One is built on the Nuxt 3 framework, chosen for its powerful server-side rendering capabilities, file-based routing, and rich module ecosystem. This provides a robust foundation for both the interactive frontend and the content-driven sections of the site.
- Frontend: Vue 3 (via Nuxt 3), Three.js for the 3D rendering engine, and globe.gl for the globe abstraction layer.
- Styling: Tailwind CSS was used for its utility-first approach, enabling rapid and responsive UI development.
- Content: All blog posts and project descriptions are written in Markdown and rendered using
markdown-it, with Mermaid.js integrated for diagram support. - Deployment: The application is containerized with Docker and deployed to a Kubernetes cluster managed by Rancher. GitHub Actions orchestrates the entire CI/CD process from commit to live deployment.
- Data: Project and blog content is fetched dynamically from the Foligo API, a separate backend service I developed.
graph TD
A["User Visits tgm.one"] --> B["Nuxt 3 Frontend"];
B --> C{"Cache Hit? (ISR)"};
C -->|Yes| D["Serve Cached Page"];
C -->|No| E["Fetch Data from Foligo API"];
E --> F["Render Page"];
F --> D;
D --> A;
subgraph "CI/CD Pipeline"
G["Git Push (GitHub)"] --> H["GitHub Actions"];
H --> I["Build Multi-Arch Docker Image"];
I --> J["Push to Private Registry"];
J --> K["Deploy to Rancher (Kubernetes)"];
end
Challenges & Solutions
The most significant technical challenge was preventing the project labels on the 3D globe from overlapping as the user rotates it. A naive approach of placing labels in 3D space would result in a cluttered and unreadable UI.
To solve this, I developed a custom collision detection system that operates in 2D screen space, not 3D world space. After projecting the 3D coordinates of each project onto the 2D screen, the algorithm places the screen into a grid. As it attempts to render each label, it checks the corresponding grid cells for occupancy. If the area is already taken by another label, the new label is hidden. This process is re-evaluated on every frame using requestAnimationFrame, ensuring the labels dynamically adjust for a fluid user experience. This approach is significantly more performant and effective for a UI element like this than complex 3D physics-based collision detection.
Results & Impact
The final result is a fast, visually engaging, and technically sophisticated portfolio that serves as my professional home on the web. It successfully demonstrates my capabilities across the full development lifecycle—from frontend design and 3D graphics to backend integration and enterprise-grade deployment.
- Enhanced User Engagement: The interactive globe provides a memorable and unique way for visitors to explore my work, differentiating my portfolio from standard template-based sites.
- Demonstrated DevOps Proficiency: The automated CI/CD pipeline showcases my ability to implement professional, repeatable deployment workflows using modern tools like Docker, Kubernetes, and GitHub Actions.
- Optimized Performance: Leveraging ISR ensures that the site achieves top-tier performance scores, providing an excellent user experience while remaining easily updatable with fresh content from the API.
{TODO: Add screenshot of main interface/dashboard}