Building MGZon: Developer Portfolio + AI Bot + Social Network (9 min demo)

#mgzon #ai #javascript #webdev

After 3 months of solo development, 15,000+ lines of code, and countless iterations, I'm excited to share MGZon - a developer portfolio platform where every profile has its own AI bot.

📌 What makes MGZon different?

Feature	LinkedIn	GitHub	MGZon
Profile-specific AI Bot	❌	❌	✅
Visitors can ask the AI	❌	❌	✅
AI answers from real profile data	❌	❌	✅
Voice Input (ask by speaking)	❌	❌	✅
Text-to-Speech (bot reads aloud)	❌	❌	✅
Drag & drop section reordering	❌	❌	✅
Save/Load multiple layouts	❌	❌	✅
Full Arabic & English support	❌	❌	✅

🤖 The AI Bot Has 3 Modes

Visitor Mode - Talks in first person: "I am a developer with 5 years experience"

Owner Mode - Talks in second person: "You are a developer with..."
Command Mode - Natural language commands: "Add skill GraphQL 75%"

⚡ Key Features

AI Bot Capabilities:

Answers questions about you in 5 languages (Arabic, English, French, German, Spanish)
Analyzes strengths & weaknesses
Suggests improvements
Natural language commands (add/update/delete skills)

Social Features:

Posts, comments, likes, shares, follows
Job board with applications
Real-time messaging
Notifications
Stories (24-hour)

Developer Features:

Smart Resume Import (upload PDF → auto-fill everything)
GitHub Integration (import repos with README, commits, contributors)
Voice Input & Text-to-Speech
Drag & Drop layout customization
Save/Load multiple layouts
Customizable themes & dark mode

🛠️ Tech Stack

Backend:  Node.js + Express + MongoDB + Socket.IO
Frontend: HTML5 + TailwindCSS + Vanilla JS
AI:       HuggingFace Inference API (DeepSeek R1, Qwen 2.5)
Storage:  Cloudinary
Deployment: HuggingFace Spaces + Firebase