Skip to content

SumatM/portfolio

BranchesTags

Folders and files

NameName
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
 
 

Repository files navigation

Sumat's Portfolio Demo Respo Only for Project Info.

Portfolio Banner

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

Next.js TypeScript Tailwind CSS Gemini AI Groq Redis

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

📋 Table of Contents

✨ 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

  1. Clone the repository

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

  2. Install dependencies

    npm install

  3. 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)

  4. Run the development server

    npm run dev

  5. 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

  1. Gemini API: Google AI Studio
  2. Groq API: Groq Console
  3. Vercel Redis: Vercel Dashboard → Storage → Create KV Database
  4. 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

  1. sendResumeViaEmail: Delivers resume to user's email using Resend API
  2. 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

  1. Push to GitHub

    git push origin main

  2. 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

  1. Go to Storage tab in Vercel Dashboard
  2. Create a new KV Database
  3. 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

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

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

About

Sumat Mallick Portfolio

sumatmallick.xyz

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages