Full Stack AI Architect & Creator of VISAR Edge
Modular Cyberpunk & Executive Portfolio Hub built with React, Vite, Framer Motion, and Tailwind CSS.
This is the official personal portfolio, project matrix, and release hub for Devansh Sharma — Full Stack AI Architect, Cognitive Systems Engineer, and Creator of VISAR Edge.
The portfolio is engineered with a high-performance frontend architecture bridging interactive Framer Motion glassmorphism, dynamic data matrices, a simulated scifi terminal, and deep Generative Engine Optimization (GEO) structured data schemas.
The entire codebase is 100% Open Source and hosted at:
👉 github.com/RootDeveloperDS/devanshsharmadev
- ⭐ Dominant Open-Source Portfolio CTAs: Direct repository access points embedded across the top navigation bar, hero overview CTA group, command palette (⌘K), and a full-width glowing banner in the footer.
- 🛡️ Super-Rich Executive & Sci-Fi Footer (
Footer.tsx):- Full-width 100% Open-Source Portfolio Banner with one-click Star & Fork buttons.
- Brand identity block with dynamic status indicator (
ONLINE • REMOTE • BUILDING VISAR EDGE). - Quick multi-column navigation links and résumé view/download triggers.
- Interactive 18-Profile Social Matrix categorized by network type with hover glow micro-animations.
- 📱 Thin Mobile Screen Optimization (
TopNav.tsx):- Fluid padding and gap scaling for narrow viewports (320px–390px mobile screens).
- Glassmorphic header bar with brand monogram, compact tabs, theme toggle, and mobile-accessible ⌘K trigger.
- ⚡ Command Palette (
Ctrl/Cmd + K): Instant global search and direct navigation shortcuts for all portfolio sections, résumé actions, and social profiles. - 📊 Dynamic Content Matrix (
data.ts): Centralized single source of truth for all projects, experience timelines, social profiles, and system skills. - 🤖 VISAR AI Agent Floating Widget: Floating sci-fi logo widget with live status indicator and CDN asset optimization.
- 🌐 Generative Engine Optimization (GEO): Built-in Schema.org JSON-LD structured data script for seamless recognition by AI search engines (ChatGPT, Gemini, Claude).
| Category | Platform / Profile | URL |
|---|---|---|
| Code & AI | Portfolio Source Code | RootDeveloperDS/devanshsharmadev |
| Code & AI | GitHub Profile | RootDeveloperDS |
| Code & AI | Hugging Face | RootDeveloperDS |
| Professional | devanshsharma987 | |
| Professional | developersofroot@gmail.com | |
| Professional | Business Site | rootdeveloperds.odoo.com |
| Professional | Live Portfolio | devanshsharma.vercel.app |
| Social & Chat | X / Twitter | @devanshsha6563 |
| Social & Chat | Telegram Channel | t.me/developerofroot |
| Social & Chat | Personal Telegram | t.me/RootDeveloperDS |
| Social & Chat | @pro_gamer_devansh | |
| Social & Chat | u/RootDeveloper-DS | |
| Writing & Dev | Medium | @devanshsharma8029 |
| Writing & Dev | Dev.to | devansh_sharma_ds |
| Bio & Portfolios | Devpost | devanshsharma8029 |
| Bio & Portfolios | Devfolio | @Devansh1Sharma |
| Bio & Portfolios | Arratai | @devansh2 |
| Bio & Portfolios | About.me | devanshsharma |
- Framework: React 18 with Vite
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Shadcn UI / Radix UI
- Animations: Framer Motion
- Routing: React Router v6
- Icons: Lucide React
- Analytics: Vercel Analytics
src/
├── components/
│ ├── portfolio/ # Core portfolio views & widgets
│ │ ├── AccordionMatrix.tsx # Technical stack accordion matrix
│ │ ├── AnimatedBackground.tsx # Scifi particle grid canvas
│ │ ├── CommandPalette.tsx # Global ⌘K spotlight search
│ │ ├── ExperienceTab.tsx # Work history timeline & stack matrix
│ │ ├── Footer.tsx # Super-rich footer & social network grid
│ │ ├── HeroAvatar.tsx # Interactive 3D hex avatar with motion tilt
│ │ ├── OverviewTab.tsx # Hero section, quick status & platform ribbon
│ │ ├── ProjectsTab.tsx # Bento-grid project showcase
│ │ ├── TerminalTab.tsx # Simulated interactive terminal & contact channels
│ │ ├── ThemeProvider.tsx # Theme context (Sci-Fi / Executive modes)
│ │ ├── ThemeToggle.tsx # Mode switcher button
│ │ ├── TopNav.tsx # Responsive glassmorphic navigation header
│ │ ├── VisarAgentButton.tsx # Floating AI agent logo widget
│ │ └── data.ts # Centralized portfolio data matrix
│ └── ui/ # Reusable Shadcn UI primitives
├── pages/
│ ├── Index.tsx # Primary page layout & tab routing
│ └── NotFound.tsx # 404 Fallback page
├── App.tsx # App providers & router config
└── main.tsx # DOM entry point
-
Clone the open-source repository:
git clone https://github.com/RootDeveloperDS/devanshsharmadev.git cd devanshsharmadev -
Install dependencies:
npm install # or bun install -
Run development server:
npm run dev # or bun dev -
Build for production:
npm run build
To update content (name, biography, projects, experience, or social links), simply edit the single centralized data matrix:
👉 src/components/portfolio/data.ts
No UI component changes required!
© 2026 Devansh Sharma. All rights reserved.
This project is open-source under the MIT License. Contributions and forks are welcome at github.com/RootDeveloperDS/devanshsharmadev.