Manamoy Banerjee — Professional Portfolio & Personal Brand Platform

---

🎯 Project Overview

Manamoy Banerjee Portfolio is a production-grade personal branding platform designed to showcase technical expertise, project portfolio, and professional narrative with modern web technologies. Built with Next.js, TypeScript, Tailwind CSS, and deployed on Vercel.

Key Features:

• ✅ Portfolio Showcase: Project case studies, technical deep-dives
• ✅ Dynamic Certifications: Google Sheets API integration for live credential updates
• ✅ Responsive Design: Mobile-first, accessible, pixel-perfect UI
• ✅ Blog Engine: Technical writing, tutorials, articles
• ✅ Recruiter Dashboard: Optimized for ATS and hiring manager review
• ✅ Dark/Light Mode: Theme switching with persistent storage
• ✅ SEO Optimized: Meta tags, structured data, Open Graph
• ✅ Zero-Downtime Deployment: Vercel CI/CD integration

---

🌟 Why This Project Matters

A portfolio website is not just a static page — it's your digital storefront:

• First Impressions: Recruiters spend 6-10 seconds scanning your portfolio
• Technical Credibility: Custom-built portfolio proves full-stack development skills
• Career Acceleration: Professional online presence increases opportunities
• Long-term Asset: Owned domain & asset (vs. relying on LinkedIn alone)
• Personal Brand: Tells your unique story beyond a resume

This project demonstrates production-grade web development across frontend, deployment, and user experience.

---

📸 Live Demo & Screenshots

🚀 Live Portfolio

Homepage

Projects Showcase

Certifications Dashboard

Dark Mode Theme

---

✨ Key Features Breakdown

1. Dynamic Portfolio Showcase

• Project case studies with images & descriptions
• Technology stack visualization per project
• Live GitHub integration (repo links, stats)
• Project metrics (accuracy, performance, users)

2. Certification Management

• Google Sheets API Integration for live updates
• No database needed — sheets as backend
• Automatic fallback to static data if offline
• Skill-based filtering & tagging

3. Responsive Web Design

• Mobile-first approach (tested on iPhone, iPad, Android)
• Touch-optimized navigation
• Fast Core Web Vitals (LCP, CLS, FID)
• Accessible color contrast & keyboard navigation

4. Multi-Theme System

• Theme 1: Aurora Intelligence (Blue/Purple)
• Theme 2: Nova Horizon (Orange/Pink)
• Context-based theme switching
• Persistent theme preference

5. Blog Engine

• Markdown-based articles
• Technical writing showcase
• Search & filtering by tags
• Reading time estimates

6. Performance Optimized

• Lazy loading for images & components
• Code splitting with dynamic imports
• CDN-backed static assets
• Optimized bundle size (~85KB gzipped)

7. SEO & Open Graph

• Dynamic meta tags per page
• Structured data (Schema.org)
• Open Graph for social sharing
• Sitemap generation
• robots.txt configuration

---

🛠️ Tech Stack

Frontend

• Next.js 14+ - React framework with App Router
• React 19 - UI library with hooks & context
• TypeScript 5.0+ - Static type safety
• Tailwind CSS 4.0 - Utility-first styling
• Vite - Lightning-fast build tool

Styling & Design

• Tailwind CSS - Core utility framework
• CSS Variables - Custom color palettes
• Framer Motion - Micro-interactions & animations
• Radix UI - Accessible component primitives

Data & Backend

• Google Sheets API - Certifications data source
• Local Storage - Client-side caching
• Static JSON - Fallback data storage
• Fetch API - HTTP requests & data retrieval

Deployment & DevOps

• Vercel - Serverless hosting & auto-deployment
• GitHub Actions - CI/CD pipeline
• ESLint & Prettier - Code quality & formatting
• npm - Package management

Developer Tools

• TypeScript - Type checking
• Vite Config - Build optimization
• Environment Variables - Secrets management
• Source Maps - Debugging support

---

📊 Performance Metrics

---

🎮 What You Can Do

• Explore Projects: View detailed case studies with screenshots
• Check Certifications: See real-time credentials (powered by Google Sheets)
• Read Articles: Browse technical blog posts & tutorials
• Switch Themes: Toggle between Aurora & Nova color palettes
• Dark Mode: Toggle dark/light mode (persisted to localStorage)
• Contact Form: Send messages directly from portfolio
• Share Projects: Social sharing buttons (Twitter, LinkedIn)
• Download Resume: One-click resume PDF download
• View Timeline: Interactive career & education timeline

---

📂 Project Structure

src/
├── app/                           # Next.js App Router
│   ├── layout.tsx                 # Root layout & metadata
│   └── page.tsx                   # Home page
│
├── components/                    # Reusable UI components
│   ├── ui/                        # Atomic components
│   │   ├── Button.tsx
│   │   ├── Badge.tsx
│   │   └── CurrentFocus.tsx      # Live status indicator
│   ├── layout/                    # Framework components
│   │   ├── Header.tsx
│   │   ├── Navigation.tsx
│   │   └── Footer.tsx
│   ├── sections/                  # Page sections
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── Projects.tsx
│   │   ├── Skills.tsx
│   │   ├── Certifications.tsx
│   │   └── Contact.tsx
│   └── shared/                    # Cross-cutting components
│       ├── ParticleCanvas.tsx
│       └── ThemeProvider.tsx
│
├── data/                          # Static data & configs
│   ├── portfolioData.ts           # Projects, experience
│   ├── blogData.ts                # Articles, tutorials
│   └── skillsData.ts              # Technical skills
│
├── hooks/                         # Custom React hooks
│   ├── useLocalStorage.ts
│   ├── useTheme.ts
│   └── useResize.ts
│
├── services/                      # Business logic
│   ├── sheetsService.ts           # Google Sheets API
│   ├── seoService.ts              # Meta tags & SEO
│   └── analyticsService.ts        # Tracking
│
├── types.ts                       # TypeScript interfaces
├── index.css                      # Global styles
└── main.tsx                       # Entry point

---

🚀 Installation & Setup

Prerequisites

✓ Node.js 18.0+
✓ npm or yarn
✓ Git
✓ (Optional) Vercel account for deployment

Clone Repository

git clone https://github.com/ManamoyB/Manamoy_Banerjee_Website.git
cd Manamoy_Banerjee_Website

Install Dependencies

npm install

Environment Variables

Create .env.local file:

VITE_GOOGLE_SHEET_ID="your_sheet_id_here"
VITE_GOOGLE_FORM_ID="your_form_id_here"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Run Development Server

npm run dev

Visit http://localhost:3000 in your browser.

Build for Production

npm run build
npm run preview

Deploy to Vercel

vercel deploy --prod

---

🔌 Google Sheets API Integration

Setup Instructions

1. Create a Google Sheet with these columns:

   • Title - Certificate name
   • Issuer - Organization (Google, DeepLearning.AI, etc.)
   • IssueDate - Format: YYYY-MM or YYYY-MM-DD
   • Skills - Comma-separated tags
   • CredentialUrl - Verification link with https://

2. Publish to Web:

   • File → Share → Publish to Web
   • Select: "Entire Document" → "Comma-Separated Values (.csv)"
   • Copy the published URL

3. Get Sheet ID:

   • From URL: https://docs.google.com/spreadsheets/d/{SHEET_ID}/edit
   • Copy the ID between /d/ and /edit

4. Configure Environment:

   VITE_GOOGLE_SHEET_ID="1sXeB...abc123..."
   

5. Automatic Fallback:

   • If API fails, uses static JSON backup
   • Offline-first approach with client-side caching

---

📈 Development Process

Phase 1: Design & Planning

• Wireframed portfolio layout in Figma
• Designed color systems & typography scales
• Created component architecture diagram

Phase 2: Frontend Development

• Built atomic component library
• Implemented Next.js App Router
• Set up Tailwind CSS with custom theme

Phase 3: Dynamic Data Integration

• Integrated Google Sheets API
• Implemented caching strategy
• Added offline fallback data

Phase 4: Theme System

• Created context-based theme switching
• Implemented persistent theme storage
• Built multi-color palette system

Phase 5: Performance & Optimization

• Optimized images with Next.js Image
• Implemented code splitting & lazy loading
• Achieved 98+ Lighthouse score

Phase 6: Deployment & CI/CD

• Configured Vercel deployment
• Set up GitHub Actions workflows
• Automated testing & builds

---

🧠 Architecture Deep Dive

Component Hierarchy

<RootLayout>
  <ThemeProvider>
    <Header>
      <Navigation />
      <ThemeToggle />
    </Header>
    
    <Main>
      <Hero />
      <About />
      <Skills />
      <Projects />
      <Certifications />
      <Blog />
      <Contact />
    </Main>
    
    <Footer />
  </ThemeProvider>
</RootLayout>

Data Flow

User Interaction
    ↓
React Component (useState, useContext)
    ↓
Theme/Data Context
    ↓
Services (API calls, local storage)
    ↓
Google Sheets API / Static Fallback
    ↓
Component Re-render

Theme System

ThemeContext
  ├── currentTheme: 'aurora' | 'nova'
  ├── isDarkMode: boolean
  ├── colors: ColorPalette
  └── toggleTheme(): void

CSS Variables
  ├── --primary-color
  ├── --secondary-color
  ├── --accent-color
  └── --bg-color

---

📈 Key Learnings

• Next.js App Router: Understanding file-based routing & layouts
• TypeScript: Strict typing prevents runtime errors
• Tailwind CSS: Utility-first approach faster than custom CSS
• Google Sheets as Database: Cost-effective, no backend needed
• Performance: Small bundle size matters for user experience
• Accessibility: WCAG compliance improves user satisfaction
• SEO: Meta tags & structured data improve search visibility
• Vercel Deployment: Seamless git-based CI/CD workflow

---

🚀 Future Improvements

• Analytics Dashboard - Track portfolio views & click patterns
• AI Chat Integration - Claude API for interactive Q&A
• Blog Search - Full-text search across articles
• Portfolio Versions - Switch between different portfolio themes
• Email Notifications - Get alerts on new messages
• Resume Export - Generate PDF resume dynamically
• Social Links - Connect GitHub, LinkedIn, Twitter embeds
• Dark Mode Auto-Detect - System preference detection
• i18n Support - Multi-language portfolio
• WebGL Animations - Advanced 3D background effects

---

🎓 Technologies & Frameworks

Frontend Frameworks

• Next.js 14+ - React framework with SSR/SSG
• React 19 - Latest React features
• TypeScript - Type-safe JavaScript

Styling

• Tailwind CSS 4.0 - Utility-first CSS framework
• CSS Variables - Dynamic theming
• Framer Motion - Animations

Data & APIs

• Google Sheets API - Dynamic data source
• Fetch API - HTTP client
• Local Storage - Client-side persistence

Deployment

• Vercel - Serverless hosting
• GitHub - Version control & CI/CD
• npm - Package management

---

💻 Quick Commands

# Development
npm run dev              # Start dev server
npm run lint            # Run ESLint
npm run type-check      # TypeScript checking

# Production
npm run build           # Build for production
npm run preview         # Preview production build
npm run start           # Start production server

# Deployment
vercel deploy           # Deploy to Vercel
vercel deploy --prod    # Deploy to production

---

📞 Contact & Support

Author: Manamoy Banerjee

Connect:

• Portfolio: manamoybanerjeeprofessionalportfoliowebsite-23jllh83g.vercel.app
• GitHub: @ManamoyB
• LinkedIn: Manamoy's Profile
• Email: [your.email@example.com]

Issues & Questions:

• Open a GitHub Issue
• Check documentation in repo
• Review deployment logs on Vercel

---

📄 License

This project is open source. Feel free to fork and customize for your own portfolio!

---

⭐ If This Helped You

If you found this portfolio template useful:

• ⭐ Star this repository
• 🍴 Fork to build your own portfolio
• 💬 Share with your network
• 📧 Mention in your resume

---

🙌 Credits & Acknowledgments

• Next.js & React Teams - Excellent documentation
• Tailwind Labs - Amazing utility-first CSS
• Vercel - Seamless deployment platform
• Google Sheets - Free dynamic data backend
• Community - Feedback and suggestions

---

Last Updated: June 2026 | Status: Active Development | Node 18+ | Next.js 14+