A high-fidelity, premium developer workspace and portfolio manager dashboard built to monitor, manage, and showcase every facet of a modern engineer's digital identity. It provides real-time telemetry, productivity workspaces, playgrounds, and communication hubs.
The dashboard utilizes a state-of-the-art Modern Dark Mode aesthetic featuring:
- Glassmorphism Layouts: Semi-transparent panels, backdrop blur effects, and refined border treatments.
- Micro-animations: Smooth UI transitions, interactive states, and stagger animations powered by Framer Motion.
- Responsive-First Architecture: Precision sizing and sidebar collapsibility across desktop, tablet, and mobile displays.
- Live GitHub Insights: Programmatically queries your public/private profiles for commit charts, repository counts, calendars, and last-commit tracking.
- Telemetry Grid: Highlights total projects, core tech stacks, active server deployments, and active year stats.
- Skill Density: Displays custom percentage bars and layout tags showing category-based language distribution.
- Component Registry: Built-in library to showcase your custom-built interactive elements (e.g., Shaders Hero Section, Interactive Card Layouts, Social Proof testimonial sections).
- Template Showcases: Dynamic layout previews for production sites (e.g., Modern Creative Agency, Video Collaboration Platforms) featuring live demo links.
- Code Inspector: Inspect, copy, and explore source codes directly inside the dashboard (secured with administrator access).
- Real-time compilation: Interactive sandbox that executes JavaScript on-the-fly as you type.
- Smart Code Editor: Configured with line-number indicators, auto-indentation on bracket insertion, and tab-indentation.
- Integrated Logger: Catches console logs, warnings, errors, and tabular charts within a simulated console window.
- Collapsible Sidebar Channels: Modular workspaces managing project context, task lists, learning paths, ideas, and goals.
- Interactive Documents Manager: Syncs with the backend api to dynamically organize rich text documents and user-created layouts.
- Workflow Helper Site: Custom bookmarks manager to catalog references, development tools, documentation links, and AI commands (with LocalStorage cache persistence).
- Performance Radar Charts: Renders interactive skill charts highlighting strengths in Frontend, Backend, Tools, Design, and Soft Skills.
- Expertise Form Creator: Form portal allowing instant additions of newly mastered skills, featuring dynamic range handles for mastery percentage.
- YouTube Collections: Create and organize external YouTube playlists for structured engineering resource bookmarking.
- Video Tracker: Shows visibility statuses, video counters, date thresholds, thumbnails, and quick deletion flags.
- Split-Panel Layout: Effortless drag-and-drop PDF upload with side-by-side preview frame.
- Smart history: Retains the last 5 uploads in LocalStorage for prompt comparisons.
- Actions panel: Instantly download, print, or review resume history directly from the browser window.
- Real-time contacts portal: Keeps tracking of client requests and portfolio contact submissions.
- Interactive messages manager: Mark messages as read, inspect sender logs, reply to mail, or remove logs.
- Framework: Next.js 16 (App Router), React 19
- Styling: Tailwind CSS v4, Lucide Icons, Glassmorphic variables
- Animation: Framer Motion / Motion.js
- Charts: Recharts (Responsive Area, Radar, Pie, and Polar Grid charts)
- State Management: Zustand & React Hooks (backed by LocalStorage)
- Forms: React Hook Form
- API Base: Node.js & Mongoose Services Integration (runs on Port
5000) - Mailing: Nodemailer
- Source Control: GitHub REST APIs with Access Tokens
- Node.js (v18.x or higher)
- A running instance of the Portfolio Backend Server
git clone <repository-url>
cd portfolio-dashboard
npm installCreate a .env file in the root directory:
# API Gateway Endpoints
NEXT_PUBLIC_API_URL=https://portfolio-server-ruby-pi.vercel.app/api/v1 # For Production
# NEXT_PUBLIC_API_URL=http://localhost:5000/api/v1 # For Local Development
# Integrations
GITHUB_ACCESS_TOKEN=your_github_access_token_here
NEXT_PUBLIC_GITHUB_USERNAME=UmayerCoding1
npm run devOpen http://localhost:3000 (or whichever port Next.js assigns) to access the workspace.
Designed with ❤️ by Umayer Hossain