3D Language Visualization Feature

Overview

Added a new 3D layout option for the Top Languages card that displays programming language usage statistics with an isometric 3D bar chart visualization.

Preview

• Just access my profile page and see the result!

Changes Made

1. New 3D Layout Functions (src/cards/top-languages.js)

• calculate3DLayoutHeight() - Calculates card height for 3D layout
• create3DBar() - Creates individual 3D bars with isometric projection
• lightenColor() - Lightens colors for 3D lighting effects
• darkenColor() - Darkens colors for 3D shading
• render3DLayout() - Renders the complete 3D visualization

2. API Validation Update (api/top-langs.js)

• Added "3d" to the valid layout options array

3. Layout Integration

• Updated getDefaultLanguagesCountByLayout() to support 3D layout (default: 6 languages)
• Added 3D layout case in renderTopLanguages() function

Features

• Isometric 3D bars with depth and perspective
• Gradient lighting effects (light to dark)
• Multiple face rendering (front, top, right, back faces)
• 3D base plane with grid lines for depth perception
• Language labels and percentages below each bar
• Smooth animations with staggered appearance

Usage

https://your-vercel-app.vercel.app/api/top-langs?username=USERNAME&layout=3d

Technical Details

• Pure SVG-based implementation (no external libraries)
• Maintains compatibility with existing themes and customization options
• Responsive bar sizing based on card width and language count
• Color manipulation functions for realistic 3D lighting effects