const dwiky: Developer = {
name: "Dwiky Candra",
location: "Indonesia 🇮🇩",
role: "Full-Stack Developer & 3D Web Specialist",
currentFocus: [
"Building immersive 3D web experiences",
"Integrating AI into modern applications",
"Optimizing performance at scale"
],
techStack: {
frontend: ["React", "Next.js 14", "TypeScript", "Tailwind CSS"],
graphics: ["Three.js", "React Three Fiber", "WebGL", "GSAP"],
ai: ["LangChain", "OpenAI", "Groq", "Vector Databases"],
backend: ["Node.js", "PostgreSQL", "Prisma", "tRPC"],
tools: ["Vite", "Framer Motion", "Zustand", "TanStack Query"]
},
philosophy: {
code: "Clean, maintainable, and performant",
design: "User experience is everything",
learning: "Always experimenting with cutting-edge tech"
},
transformation: () => "☕ Coffee → 💻 Code → ✨ Magic"
};
I live at the intersection of design, physics, and code—crafting web experiences that don't just work, they captivate.
An immersive cyberpunk-themed e-learning platform with browser-based IDE, AI assistant, and gamification system. From absolute beginner to full-stack developer.
| Feature | Technology Stack | Description |
|---|---|---|
| Multi-Engine Code Runner | Pyodide (WASM) + Vue SFC Loader + TypeScript Compiler | Execute HTML/CSS/JS, Python, TypeScript, Vue, and Git commands in-browser |
| Monaco Code Editor | Monaco Editor + Custom Cyberpunk Theme | Professional IDE experience with IntelliSense, multi-file support, and syntax highlighting |
| Nebula AI Assistant | Google Gemini Flash + RAG | Context-aware coding hints with < 500ms response time |
| Gamification Engine | XP System + Streaks + Leaderboard | 5-tier progression (Trainee → Master) with confetti rewards |
| Activity Analytics | 365-day Heatmap + Velocity Tracking | GitHub-style contribution graph with full-screen dashboard |
| Neural Tech Tree | 3D Hexagon Nodes + Progress Visualization | Interactive skill tree mapping 19 courses with unit-level breakdowns |
| Virtual Terminal | Custom Command Parser + Git Simulation | 50+ supported commands including full Git workflow simulation |
|
🟢 Beginner Track
|
🔵 Intermediate Track
|
🟣 Advanced Track
|
🔧 Technical Architecture
Frontend Stack
- Framework: React 19 + Vite 7 for blazing-fast HMR
- UI: Tailwind CSS 4 + Framer Motion for fluid animations
- Routing: React Router DOM 7 with lazy loading
- State: Context API + localStorage persistence
- Editor: Monaco Editor 0.45 with custom syntax highlighting
Backend Infrastructure
- Database: Neon PostgreSQL (serverless)
- API: Vercel Serverless Functions
- Authentication: JWT + bcrypt + OAuth (Google/GitHub)
- Email: Nodemailer for verification & password reset
Code Execution Engines
- Python: Pyodide WASM runtime (no server required)
- TypeScript: In-browser transpilation with ts.transpileModule
- Vue: vue3-sfc-loader for Single File Component parsing
- Git: Custom virtual Git implementation with full command support
AI Integration
- Model: Google Gemini Flash 1.5
- Architecture: RAG (Retrieval-Augmented Generation)
- Context: Course content + user progress
- Personality: Cyberpunk-themed "Nebula" assistant
Gamification System
XP Breakdown:
- Reading Content: 20 XP
- Hands-on Lessons: 50 XP
- Quizzes: 100 XP
- Projects: 250 XP
Level Formula: XP = 100 × Level × (Level + 1)
Ranks: Trainee → Junior → Mid-Level → Senior → MasterPerformance Optimizations
- Code splitting with React.lazy()
- Monaco Editor lazy initialization
- Virtual scrolling for long course lists
- Debounced auto-save (500ms)
- Memoized progress calculations
- Task Validation System: Real-time regex-based code validation for instant feedback
- Ghost Progress Detection: Identifies outdated progress from refactored content with "Update Available" badges
- Multi-Branch Git Snapshots: Each virtual branch maintains isolated file states
- Specialization Tracks: 3 curated learning paths (Frontend/Backend/Full-Stack) with 120-280 hour curricula
- Community Forum: Category-filtered discussions with user tier badges and vote system
const achievements = {
expertise: {
"3D Web Development": "Advanced shader programming & real-time rendering",
"AI Integration": "Building context-aware intelligent applications",
"Performance Optimization": "Delivering 60 FPS experiences at scale",
"Full-Stack Development": "End-to-end product development"
},
approach: {
codeQuality: "Clean, maintainable, and well-documented",
userExperience: "Obsessed with delightful interactions",
performance: "Every millisecond matters",
innovation: "Always pushing boundaries"
},
currentlyExploring: [
"WebGPU for next-gen graphics",
"AI-powered creative tools",
"Real-time collaborative experiences",
"Advanced animation techniques"
]
};| Principle | Description |
|---|---|
| 🎨 Design First | User experience drives technical decisions |
| ⚡ Performance Obsessed | Fast is a feature, not a luxury |
| 🧪 Experiment Boldly | Innovation comes from trying new things |
| 📚 Learn Continuously | Technology evolves, so must we |
| 🤝 Collaborate Openly | Best solutions emerge from teamwork |
I'm always excited to collaborate on innovative projects or discuss cutting-edge web technologies!
- 14 Mei 2026 — [Frontend] Redesigned Command Center layout and added Topbar in kydev v0.8.8, unifying navigation and enabling faster access to core features. ·
kydev - 14 Mei 2026 — Tidak ada perubahan file yang terdeteksi dalam commit ini sehingga tidak ada dampak teknis yang tercatat. Silakan kirim detail file atau pesan commit bila ingin ringkasan capaian teknis.
- 14 Mei 2026 — [General] Tested webhook integration in kydev to ensure reliable event delivery and reduce missed notifications during external service integrations. ·
kydev - 14 Mei 2026 — Commit ini tidak menyertakan pesan atau daftar file yang diubah/ditambahkan, sehingga tidak ada perubahan teknis yang dapat dievaluasi.
- 14 Mei 2026 — Commit contains no message or file details, so the technical impact cannot be determined.
- 14 Mei 2026 — Applied repository updates; commit message and metadata were empty, so the technical impact cannot be determined.
