Here is the Link To Acess it -https://virenp.vercel.app/
A high-end, fully animated personal portfolio built with React, TypeScript, and Vite. Features a blog system with admin panel, smooth Framer Motion animations, a particle canvas background, a built-in terminal modal, and an interactive AI assistant — all without any third-party AI API dependencies.
- Animated particle background — canvas-based, fully responsive
- Interactive AI assistant — keyword-driven chat about skills, projects & education
- Blog system — create, publish, and manage posts via a protected admin panel
- Terminal modal — themed terminal overlay with custom commands
- Dark / light mode — system-aware with manual toggle
- Fully responsive — mobile-first design with TailwindCSS
- Framer Motion — page transitions and micro-animations throughout
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build tool | Vite |
| Styling | TailwindCSS |
| Animations | Framer Motion |
| Icons | Lucide React |
| Routing | React Router v7 |
| Rich text | React Simple WYSIWYG |
Portfolio/
├── components/ # Shared / root-level components
│ ├── AIChat.tsx
│ ├── AnimatedBackground.tsx
│ ├── Education.tsx
│ ├── Hero.tsx
│ ├── Projects.tsx
│ ├── Skills.tsx
│ └── TerminalModal.tsx
├── frontend/
│ ├── components/ # App-specific components
│ │ ├── AIChat.tsx
│ │ ├── AnimatedBackground.tsx
│ │ ├── Education.tsx
│ │ ├── Hero.tsx
│ │ ├── Navbar.tsx
│ │ ├── Projects.tsx
│ │ ├── Skills.tsx
│ │ └── TerminalModal.tsx
│ ├── contexts/
│ │ ├── BlogContext.tsx
│ │ └── UIContext.tsx
│ ├── pages/
│ │ ├── Admin.tsx
│ │ ├── Blog.tsx
│ │ ├── Home.tsx
│ │ └── Login.tsx
│ ├── App.tsx
│ ├── constants.tsx
│ ├── declarations.d.ts
│ └── types.ts
├── index.html
├── index.tsx
├── package.json
├── tsconfig.json
└── vite.config.ts
Prerequisites: Node.js 18+
# 1. Install dependencies
npm install
# 2. Start the dev server
npm run devApp runs at http://localhost:3000.
# Build for production
npm run build
# Preview production build
npm run preview| Project | Description | Stack |
|---|---|---|
| SmartCrowd | Real-time crowd density & safety monitoring | YOLOv8, FastAPI, React.js |
| DualityAI | Safety detection model for Space Station challenge | YOLOv8, Streamlit, PyTorch |
- Oracle Cloud Infrastructure 2025 — AI Foundations Associate
- Google Cloud — Prepare Data for ML APIs
- Cisco — Introduction to Cyber Security
- NVIDIA — AI for All: From Basics to GenAI Practice
Viren Pandey — B.Tech CSE (AI/ML), Dr. A.P.J. Abdul Kalam Technical University
GitHub: @viren-pandey