🚀 Revolutionary 3D Developer Portfolio Template - Transform your GitHub repositories into an interactive 3D galaxy where each repo exists as an explorable planet in space.
- 🪐 3D Repository Visualization - Your repos become planets with sizes based on stars and activity
- 🔄 Real-time GitHub Integration - Live data from your actual repositories
- 🎮 Interactive Navigation - Orbit controls, zoom, and click-to-explore functionality
- 📱 Fully Responsive - Optimized experience across all devices
- 🌙 Immersion Mode - Press
Fto hide UI for distraction-free viewing
- Single-click planets → Show floating repository stats
- Double-click planets → Open detailed repository modal
- Click Developer Core → View your GitHub profile
- ESC key → Clear all floating stats
- F key → Toggle immersion mode
- ⚡ Next.js 15 with App Router and TypeScript
- 🎨 Three.js + React Three Fiber for 3D graphics
- 🎭 Framer Motion for cinematic animations
- 🎨 Tailwind CSS 4 for modern styling
- 🔒 Security-first approach with sessionStorage
- 📊 Smart Data Visualization with language-based color coding
# Option A: Use GitHub Template
Click "Use this template" button above
# Option B: Clone directly
git clone https://github.com/JasonDoug/codegalaxy.git my-portfolio
cd my-portfolio
npm installCreate a .env.local file:
NEXT_PUBLIC_GITHUB_USERNAME=your-github-username
NEXT_PUBLIC_GITHUB_TOKEN=your-github-tokenGet Your GitHub Token:
- Go to GitHub Settings → Developer settings → Personal access tokens
- Create a fine-grained token with read-only access to public repositories
- Or create a classic token with
public_reposcope
npm run devOpen http://localhost:3000 to explore your Code Galaxy! 🌌
- Click the gear icon → System Config
- Enter your GitHub credentials
- Test connection and save
- Enjoy your personalized 3D portfolio!
Language Colors (src/lib/github.ts):
export const LANGUAGE_COLORS = {
JavaScript: '#f7df1e',
TypeScript: '#3178c6',
Python: '#3776ab',
// Add your languages here
}Galaxy Background (src/app/page.tsx):
className="bg-gradient-to-b from-slate-950 via-purple-950 to-slate-900"Planet Sizing Algorithm (src/lib/github.ts):
// Customize how repository metrics affect planet sizes
const baseSize = Math.max(0.5, Math.min(2, stars / 200 + size / 10000));Orbital Positioning (src/lib/github.ts):
// Modify 3D positioning algorithm
transformRepositoryFor3D(repositories, index)- Welcome Message:
src/app/page.tsx - Developer HUD:
src/components/DeveloperHUD.tsx - Repository Modals:
src/components/RepositoryDetail.tsx - GitHub Profile:
src/components/GitHubProfile.tsx
From Vercel, Add Project, then find your cloned repo.
- Visit your deployed demo
- Click the gear icon (⚙️) on the left side
- Click "System Config" in the menu
- Enter your GitHub username and token
- Click "Test Connection" to verify
- Click "Save & Apply"
- Your portfolio will instantly load your real repositories!
Netlify:
npm run build
npm run export # Static exportDocker:
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
CMD ["npm", "start"]npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintsrc/
├── app/ # Next.js App Router
│ ├── page.tsx # Main galaxy interface
│ └── globals.css # Global styles
├── components/ # React components
│ ├── CodeGalaxy.tsx # 3D visualization core
│ ├── DeveloperHUD.tsx # Statistics overlay
│ └── *.tsx # Other UI components
├── lib/ # Utilities & API
│ ├── github.ts # GitHub API integration
│ └── mockData.ts # Fallback demo data
├── hooks/ # Custom React hooks
└── types/ # TypeScript definitions
- Frontend: Next.js 15, React 19, TypeScript 5
- 3D Graphics: Three.js, React Three Fiber, React Three Drei
- Styling: Tailwind CSS 4, Framer Motion
- API: GitHub REST API with Bearer authentication
- Icons: Lucide React
| Input | Action |
|---|---|
Mouse Drag |
Orbit around galaxy |
Mouse Wheel |
Zoom in/out |
Single Click Planet |
Toggle floating stats |
Double Click Planet |
Open repository details |
Click Developer Core |
View GitHub profile |
ESC |
Clear all floating stats |
F |
Toggle immersion mode |
- Explore freely - The galaxy rotates slowly automatically
- Use immersion mode for presentations or screenshots
- Check planet sizes - Larger planets = more stars/activity
- Orbital rings indicate repository activity levels
- Color coding represents primary programming language
Required:
NEXT_PUBLIC_GITHUB_USERNAME=your-username
NEXT_PUBLIC_GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxxOptional:
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX # Google Analytics
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com # Plausible AnalyticsFor Classic Tokens:
public_repo- Read public repository dataread:user- Read user profile information
For Fine-grained Tokens:
- Repository access: Public repositories (read)
- Account permissions: Profile (read)
- Live Demo: codegalaxy-demo.vercel.app
- Documentation: Full setup guide
- Customization: Advanced configuration
We love contributions! Here's how you can help:
- 🍴 Fork the repository
- 🌿 Create a feature branch:
git checkout -b feature/amazing-addition - 💾 Commit your changes:
git commit -m 'Add amazing feature' - 🚀 Push to the branch:
git push origin feature/amazing-addition - 🔄 Submit a Pull Request
git clone https://github.com/JasonDoug/codegalaxy.git
cd codegalaxy
npm install
npm run devThis project is licensed under the MIT License - see the LICENSE file for details.
- Three.js Community for incredible 3D web graphics
- Vercel Team for Next.js and deployment platform
- GitHub for providing the API that powers this experience
- React Three Fiber for bringing React and Three.js together
- All Contributors who help make this project better
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
- 📧 Email: your-email@domain.com
⭐ Star this repo if you find it useful! ⭐
Made with ❤️ by developers, for developers