Sumat's Portfolio Demo Respo Only for Project Info.

A State-of-the-Art AI-Integrated Professional Portfolio

Live Demo • Report Bug • Request Feature

⚠️ Important Note

This repository is a documentation-only showcase of a private project.

The source code is intentionally not public.

This README is provided to demonstrate:

System design & architecture

Applied GenAI engineering (RAG, agentic tools, fallback strategies)

Full-stack development practices

Production-ready engineering mindset

✨ Features

🤖 Advanced AI Virtual Assistant

Dual LLM Architecture: Powered by Gemini 1.5 Flash with Groq (Llama 3) fallback
RAG (Retrieval Augmented Generation): Context-aware responses using portfolio data
Agentic AI with Tools: Function calling for resume delivery, session archiving, and connection requests
Conversation Memory: Redis-backed chat history with intelligent context management
Multi-Level Rate Limiting: IP-based protection using Vercel Redis (KV)

💻 Premium User Experience

Responsive Design: Pixel-perfect across all devices (desktop, tablet, mobile)
Dark/Light Mode: Elegant theme switching with system preference detection
Interactive Project Previews: Live iframe previews with device mockups (desktop/tablet/mobile)
Smooth Animations: Framer Motion powered transitions and micro-interactions
Glassmorphic UI: Modern glassmorphism effects with backdrop blur
Idle Detection System: Smart user engagement with haptic feedback

📚 Blog & Content Management

MDX Support: Write blog posts with interactive React components
SEO Optimized: Server-side rendering with dynamic meta tags, Open Graph, and Twitter Cards
Syntax Highlighting: Beautiful code blocks with react-syntax-highlighter
RSS Feed: Auto-generated RSS feed for blog subscribers
Author Pages: Multi-author support with dedicated author profiles
Reading Time Estimation: Automatic calculation based on content length

🎯 Professional Features

Dynamic Portfolio Showcase: Interactive project cards with filtering
Skills Matrix: Categorized skill display (Frontend, Backend, AI, Cloud, etc.)
Timeline Journey: Visual career and education timeline
Automated Resume Delivery: Email integration using Resend API
Session Archiving: Lead generation with contact request storage
Contact Form: Secure message handling with validation

🎯 What Makes This Portfolio Special

🔹 AI-First Approach: Not just a static portfolio, but an intelligent assistant that can answer questions, deliver resumes, and handle connection requests autonomously.

🔹 Production-Ready Architecture: Built with enterprise-level patterns including server-side rate limiting, Redis caching, error boundaries, and comprehensive SEO.

🔹 Developer Experience: TypeScript-first development with ESLint, type safety, and modular component architecture.

🔹 Performance Optimized: Next.js 14 App Router, image optimization, lazy loading, and efficient bundle splitting.

🔹 Scalable & Maintainable: Redux state management, custom hooks, utility functions, and clean code principles.

🛠️ Tech Stack

Frontend

Framework: Next.js 14 (App Router)
Language: TypeScript 5.8
Styling: Tailwind CSS 3.4 + Custom CSS
UI Components: Radix UI + shadcn/ui
Icons: React Icons (Lucide, Font Awesome)
State Management: Redux Toolkit + React Redux
Forms: React Hook Form + Zod validation
Markdown: MDX with remark/rehype plugins
Theme: next-themes for dark/light mode

Backend & Services

AI Models:
- Google Gemini 1.5 Flash (Primary)
- Groq (Llama 3.3 70B) (Fallback)
Database & Cache: Vercel Redis (KV)
Email Service: Resend
Rate Limiting: Custom Redis-based middleware

DevOps & Deployment

Hosting: Vercel
Version Control: Git + GitHub
Package Manager: npm
Build Tool: Next.js Compiler (SWC)
Linting: ESLint + TypeScript ESLint

🏗️ Architecture

portfolio-hub/
│
├── 🎨 Frontend (Next.js App Router)
│   ├── Server Components (SSR/SSG)
│   ├── Client Components (Interactive UI)
│   └── API Routes (Backend Logic)
│
├── 🤖 AI Layer
│   ├── Gemini 1.5 Flash (Primary LLM)
│   ├── Groq Llama 3 (Fallback LLM)
│   ├── RAG System (Context Retrieval)
│   └── Tool Functions (Agentic Actions)
│
├── 💾 Data Layer
│   ├── Vercel Redis KV (Rate Limiting)
│   ├── Session Storage (Chat History)
│   └── Local Data (Portfolio Content)
│
└── 📧 External Services
    ├── Resend (Email Delivery)
    └── Vercel Analytics

Key Design Patterns

Component Composition: Reusable UI components with props-based configuration
Server/Client Separation: Strategic use of "use client" directive
Custom Hooks: Abstracted logic in src/hooks/
Redux Slices: Domain-driven state management
API Route Handlers: Secure backend endpoints with middleware
MDX Content: Content as code with React component embedding

🚀 Getting Started

Prerequisites

Node.js 18+ and npm
Vercel account (for Redis KV)
API keys for Gemini, Groq, and Resend

Installation

Clone the repository

git clone https://github.com/SumatM/sumat-s-portfolio-hub.git
cd sumat-s-portfolio-hub

Install dependencies
```
npm install
```
Set up environment variables

Create a .env.local file in the root directory:
```
cp .env.example .env.local
```
Fill in your API keys (see Environment Variables section)
Run the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:8080

Build for Production

npm run build
npm start

📦 Project Structure

sumat-s-portfolio-hub/
│
├── 📁 content/                     # MDX blog posts
│   └── blog/
│       ├── *.mdx                   # Blog post files
│       └── authors.yaml            # Author metadata
│
├── 📁 public/                      # Static assets
│   ├── portfolio.webp              # Project images
│   ├── sumat.webp                  # Profile photo
│   ├── sitemap.xml                 # SEO sitemap
│   └── robots.txt                  # Crawler instructions
│
├── 📁 scripts/                     # Build & utility scripts
│   ├── generate-seo.js             # SEO generation
│   └── new-post.js                 # Blog post creator
│
├── 📁 src/
│   │
│   ├── 📁 app/                     # Next.js 14 App Router
│   │   ├── layout.tsx              # Root layout
│   │   ├── page.tsx                # Home page
│   │   ├── globals.css             # Global styles
│   │   │
│   │   ├── 📁 api/                 # API routes
│   │   │   ├── chat/               # AI chatbot endpoint
│   │   │   ├── resume/             # Resume delivery
│   │   │   └── archive-session/    # Session archiving
│   │   │
│   │   ├── 📁 blog/                # Blog pages
│   │   │   ├── page.tsx            # Blog index
│   │   │   ├── [slug]/             # Individual posts
│   │   │   └── author/             # Author pages
│   │   │
│   │   ├── 📁 projects/            # Projects pages
│   │   │   ├── page.tsx            # Projects list
│   │   │   └── [id]/               # Project detail
│   │   │
│   │   └── 📁 skills/              # Skills pages
│   │       ├── page.tsx            # Skills list
│   │       └── [id]/               # Skill detail
│   │
│   ├── 📁 components/              # React components
│   │   ├── ChatBot.tsx             # AI Assistant
│   │   ├── ProjectCard.tsx         # Project cards
│   │   ├── SmoothScrollNav.tsx     # Navigation
│   │   ├── Footer.tsx              # Footer
│   │   └── ui/                     # shadcn/ui components
│   │
│   ├── 📁 data/                    # Static data
│   │   └── portfolioData.ts        # Portfolio content
│   │
│   ├── 📁 hooks/                   # Custom React hooks
│   │   ├── use-mobile.tsx          # Mobile detection
│   │   └── use-toast.ts            # Toast notifications
│   │
│   ├── 📁 lib/                     # Utility libraries
│   │   ├── blog.ts                 # Blog post utilities
│   │   ├── redis.ts                # Redis client
│   │   └── utils.ts                # Helper functions
│   │
│   ├── 📁 services/                # External services
│   │   ├── aiChatService.ts        # AI chat logic
│   │   └── emailService.ts         # Email handling
│   │
│   └── 📁 store/                   # Redux store
│       ├── store.ts                # Store configuration
│       ├── portfolioSlice.ts       # Portfolio state
│       └── hooks.ts                # Typed hooks
│
├── .env.local                      # Environment variables (gitignored)
├── next.config.js                  # Next.js configuration
├── tailwind.config.ts              # Tailwind configuration
├── tsconfig.json                   # TypeScript configuration
└── package.json                    # Dependencies

🔐 Environment Variables

Create a .env.local file with the following variables:

# AI Services
GEMINI_API_KEY=your_google_gemini_api_key_here
GROQ_API_KEY=your_groq_api_key_here

# Redis (Vercel KV)
KV_REST_API_URL=your_vercel_kv_rest_api_url
KV_REST_API_TOKEN=your_vercel_kv_rest_api_token
KV_REST_API_READ_ONLY_TOKEN=your_vercel_kv_read_only_token
KV_URL=your_vercel_kv_url

# Email Service (Resend)
RESEND_API_KEY=your_resend_api_key_here

# Application
NEXT_PUBLIC_SITE_URL=https://www.sumatmallick.xyz

Getting API Keys

Gemini API: Google AI Studio
Groq API: Groq Console
Vercel Redis: Vercel Dashboard → Storage → Create KV Database
Resend: Resend Dashboard

🔐 Source Code Warning

❌ Source code is private and not included in this repository
❌ This project is not open source
✅ Documentation is shared for learning, architectural review, and evaluation purposes only

This repository exists to showcase system design decisions, applied GenAI patterns, and full-stack engineering practices.

Please do not attempt to replicate this project verbatim.

🎨 Key Components

1. AI Chatbot (`ChatBot.tsx`)

The intelligent assistant that powers real-time interactions:

Session management with Redis
Multi-turn conversation support
Markdown rendering with syntax highlighting
Tool execution (resume delivery, connection requests)
Toast notifications for user feedback

2. Project Detail Page (`ProjectDetailPage.tsx`)

Interactive project showcase with:

Live iframe previews (desktop/tablet/mobile views)
Device mockups with browser chrome
Self-detection (displays message if viewing current site)
Responsive viewport controls
Dynamic tag display

3. Smooth Scroll Navigation (`SmoothScrollNav.tsx`)

Custom navigation with:

Active section highlighting
Smooth scroll behavior
Mobile-responsive hamburger menu
Theme toggle integration
Glassmorphic design

4. Blog System

MDX-powered blog with:

Server-side rendering for SEO
Dynamic metadata generation
Syntax-highlighted code blocks
Author attribution
Reading time estimation
Related posts (can be extended)

🤖 AI Virtual Assistant

The portfolio includes a sophisticated AI assistant with the following capabilities:

Core Features

Context Awareness: RAG system retrieves relevant portfolio information
Multi-Turn Conversations: Redis-backed chat history
Intelligent Fallback: Switches to Groq if Gemini fails
Tool Calling: Can execute functions like sending resume, archiving sessions

Available Tools

sendResumeViaEmail: Delivers resume to user's email using Resend API
archiveConnectionRequest: Stores user contact info for follow-up

Rate Limiting

IP-Based: 20 requests per hour per IP
Redis-Backed: Distributed rate limiting using Vercel KV
Graceful Degradation: Clear error messages when limit exceeded

Usage Example

// User: "Can you send me your resume?"
// Assistant: Executes sendResumeViaEmail tool
// Result: Email sent with resume attachment

📝 Blog System

Creating a New Blog Post

Use the provided script:

npm run new-post

This will create a new MDX file in content/blog/ with frontmatter template.

Blog Post Frontmatter

---
title: "Your Post Title"
date: "2025-12-26"
author: "sumat-mallick"
excerpt: "A brief description of your post"
image: "/blog-images/your-image.jpg"
tags: ["tag1", "tag2"]
---

MDX Features

Write in Markdown with JSX support
Embed React components
Code syntax highlighting
GitHub Flavored Markdown (GFM)

See HOW_TO_BLOG.md for detailed instructions.

🚢 Deployment

This project is optimized for Vercel deployment.

Deploy to Vercel

Push to GitHub
```
git push origin main
```
Import to Vercel
- Go to Vercel Dashboard
- Import your GitHub repository
- Configure environment variables
- Deploy!

Environment Variables on Vercel

Add all variables from .env.local to Vercel:

Settings → Environment Variables → Add each key-value pair

Vercel KV Setup

Go to Storage tab in Vercel Dashboard
Create a new KV Database
Copy connection strings to environment variables

📄 License

This project is open source and available under the MIT License.

Feel free to use this as a template for your own portfolio, but please give credit and don't copy it entirely. Make it your own! 🎨

📧 Contact

Sumat Mallick
Software Engineer | Full-Stack & GenAI Developer

🌐 Website: sumatmallick.xyz
📧 Email: [email protected]
💼 LinkedIn: linkedin.com/in/sumatmallick
🐙 GitHub: github.com/SumatM

⭐ If you found this helpful, please star the repository!

Built with ❤️ using Next.js, TypeScript, and AI

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

License

SumatM/portfolio

Folders and files

Latest commit

History

Repository files navigation