Product Engineer | Creative Developer | React, Next.js, TypeScript Specialist | Building Premium Web Experiences
A modern, progressive web application portfolio with stunning animations and interactive experiences
Live Demo: abhisheksingh.tech
This repository is for SHOWCASE and REFERENCE purposes only.
This is a proprietary portfolio - the code and design are the exclusive property of Abhishek Singh and are protected under copyright law.
- ❌ Copy, clone, or fork this repository for your own use
- ❌ Use this code in your own projects
- ❌ Modify or create derivative works
- ❌ Distribute, share, or republish the code
- ❌ Use for commercial purposes
- ❌ Remove or modify copyright notices
- ✅ View the live website
- ✅ Browse the code for learning and inspiration
- ✅ Reference the techniques and approaches used
If you're interested in using any part of this portfolio, you must contact me directly:
- Email: Abhishek23main@gmail.com
- Subject: "Portfolio License Permission Request"
This is a cutting-edge portfolio website built for a Product Engineer, showcasing exceptional design, performance, and interactivity. The project demonstrates modern web development practices with a focus on user experience, accessibility, and performance optimization.
Built with Next.js 16, React 19, and TypeScript, this portfolio features smooth animations powered by Framer Motion, a custom admin dashboard with Supabase integration, and Progressive Web App (PWA) capabilities for an app-like experience on any device.
- Smooth Scroll Experience - Lenis-powered buttery smooth scrolling
- Advanced Animations - Framer Motion for stunning, performant animations
- 3D Interactions - Interactive tilt effects and perspective transforms
- Bento Grid Layout - Modern, responsive card-based design
- Dark Theme - Sleek, minimal dark interface with subtle accents
- Command Palette - Quick navigation via keyboard shortcuts (⌘K)
- Code Splitting - Dynamic imports for optimal bundle sizes
- Image Optimization - AVIF/WebP formats with Next.js Image
- PWA Support - Offline capabilities and installable app experience
- Security Headers - X-Frame-Options, CSP, and other security best practices
- Lazy Loading - Below-the-fold content loaded on demand
- Gaming Profile - Cyberpunk-themed gaming stats showcase
- Command Palette - Quick navigation via keyboard shortcuts (⌘K)
- Consciousness Mode - A hidden, "witnessed" UI state triggered by holding Shift + Slow Scroll for 7 seconds.
- Social Stories - Instagram-style highlights fetched dynamically via the Dedigram API.
- Admin Dashboard - Full CMS for content management
- MFA Security - Two-factor authentication for admin access
This portfolio contains several hidden interactive features and surprises. Pay attention to details, explore thoroughly, and you might discover something special. Hint: Sometimes the journey matters as much as the destination.
- Next.js 16.2 - React framework with App Router
- React 19.2 - UI library
- TypeScript 5 - Type safety
- Tailwind CSS 4.1 - Utility-first CSS framework
- Framer Motion 12.2 - Production-ready animation library
- Radix UI - Accessible component primitives
- Lucide React - Beautiful & consistent icon set
- 21st.dev - Premium UI components and design inspiration
- Supabase - Backend as a Service (Authentication & Database)
- OpenAI API - AI-powered text optimization
- @ducanh2912/next-pwa - Progressive Web App support
- Lenis - Smooth scroll library
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (main)/ # Main site group (Page transitions & Layout)
│ │ │ ├── page.tsx # Homepage with Bento Gallery
│ │ │ ├── about/ # Experience & Education
│ │ │ ├── works/ # Project portfolio showcase
│ │ │ ├── gaming/ # Cyberpunk Gaming profile
│ │ │ ├── github/ # GitHub Intelligence & Stats
│ │ │ └── minimal/ # Minimalist view toggle
│ │ ├── admin/ # Full-featured CMS Dashboard
│ │ │ ├── login/ # Authentication
│ │ │ ├── mfa-setup/ # 2FA Security configuration
│ │ │ ├── projects/ # Project management
│ │ │ └── [modules]/ # Settings, Stories, Tech, etc.
│ │ ├── actions/ # Server Actions (Gallery, AI Optimization)
│ │ └── api/ # API Endpoints (Ratings, Webhooks)
│ │
│ ├── components/
│ │ ├── home/ # Featured, Bento, Identity cards
│ │ ├── works/ # Project grid, Changelog overlays
│ │ ├── ui/ # Atomic design (Shadcn + Custom interactions)
│ │ ├── admin/ # Dashboard-specific widgets
│ │ └── github/ # Live API integrations
│ │
│ ├── app/
│ │ └── api/
│ │ └── telegram/ # Telegram Bot API integration
│ │ ├── webhook/ # Real-time story publishing logic
│ │ └── media/ # Telegram file proxy system
│ │
│ ├── lib/ # Shared logic, fonts & static data
│ ├── utils/ # Supabase clients & GitHub helpers
│ ├── fonts/ # Custom typography assets
│ └── types/ # TypeScript interfaces & declarations
│
├── public/ # Static assets (images, icons, manifest)
├── scripts/ # Build scripts & maintenance utilities
├── Dockerfile # Multi-stage production container build
└── docker-compose.yml # Local/Production service orchestration
This portfolio embodies:
- Minimalism - Clean, focused design without unnecessary elements
- Performance - Optimized for speed and smooth interactions
- Attention to Detail - Subtle animations and micro-interactions
- Accessibility - WCAG compliant with keyboard navigation
- Progressive Enhancement - Works everywhere, enhanced on modern browsers
- Installable on mobile and desktop
- Offline support for cached pages
- App-like experience with custom splash screens
- Service worker caching for instant loads
- Telegram Bot API Integration - Automated syncing of social media stories directly to the portfolio via a dedicated bot.
- Real-time Telegram CMS - Upload, manage, and delete stories via Telegram DM with instant Supabase injection.
- Supabase Data Layer - Real-time metadata management for story sequences and link attribution.
- Hidden Interactions - Advanced event listeners for intenational discovery (Shift+Scroll logic).
- Docker-Native - Multi-stage Node 22-Alpine builds optimized for minimal image size.
- Next.js Standalone - Decoupled runtime strategy for enterprise-grade production reliability.
- Docker Compose - Unified service orchestration for seamless environment parity.
- Supabase Auth & MFA - Multi-factor authentication with TOTP for all admin nodes.
- AI-Powered CMS - Integrated OpenAI optimization for portfolio text and project descriptions.
- Real-time Management - Dynamic content editing with instant Supabase synchronization.
- Next.js Image component for automatic optimization
- Dynamic imports for code splitting
- Font optimization with
next/font - Lazy loading for below-the-fold content
- Edge-ready deployment architecture
Top-notch, enterprise-grade security implementation:
- Two-Factor Authentication (2FA) - Multi-factor authentication with TOTP for admin access
- Supabase Authentication - Industry-standard OAuth and email verification
- Row Level Security (RLS) - Database-level access control policies
- Security Headers - X-Frame-Options, X-Content-Type-Options, CSP, Referrer-Policy
- Permission Policies - Strict camera, microphone, and geolocation restrictions
- Environment Variables - Sensitive data protected and never exposed to client
- Input Validation - Comprehensive sanitization and validation
- Session Management - Secure token-based authentication with automatic expiry
- HTTPS Only - Forced secure connections in production
- Protected Routes - Server-side authentication checks for admin areas
Fully responsive across all devices:
- 📱 Mobile - Optimized touch interactions
- 💻 Desktop - Enhanced with hover effects and keyboard shortcuts
- 🖥️ Large Screens - Maximized content layout
- ⌚ Small Devices - Graceful degradation
Visit the live portfolio: abhisheksingh.tech
Experience the full interactive features, smooth animations, and discover the hidden easter eggs!
Copyright © 2026 Abhishek Singh. All Rights Reserved.
This project is licensed under a Proprietary License. See the LICENSE file for complete terms.
- This code is NOT open source
- Viewing for reference/learning is permitted
- Copying, using, or distributing is prohibited without written permission
- Commercial use is strictly forbidden
To request permission: Email Abhishek23main@gmail.com with subject "Portfolio License Permission Request"
Interested in working together? Let's connect!
Abhishek Singh - Product Engineer
- 📧 Email: Abhishek23main@gmail.com
- 🔗 LinkedIn: linkedin.com/in/abhishek-singh200423
- 🐙 GitHub: AbhishekS04
- 🐦 X (Twitter): @_abhishek2304
- 🌐 Portfolio: abhisheksingh.tech
- 📍 Location: Kolkata, India
- 🎨 Modern web development (React, Next.js, TypeScript)
- ⚡ Performance optimization & SEO
- 🎭 Interactive animations & UI/UX design
- 🔐 Full-stack development with authentication
- 📱 Progressive Web Apps
- 🤝 Freelance & consulting services
Special thanks to the amazing open-source community and the teams behind:
- Next.js & Vercel - The React framework and deployment platform
- React Team - For the incredible UI library
- Framer Motion - Best-in-class animation library
- Radix UI - Accessible component primitives
- Supabase - Backend infrastructure and authentication
- Tailwind CSS - Utility-first CSS framework
- Lenis - Smooth scrolling magic
- 21st.dev - 🌟 Special shoutout for premium UI components and design inspiration
- Dedigram API - Powering the automated social stories delivery system
- Version: 0.1.0
- Last Updated: January 2026
- Status: Active & Maintained
- Framework: Next.js 16.1.1
- Deployment: Vercel
Visit the live site: abhisheksingh.tech
This repository is for showcase purposes only. All rights reserved.
Made with ❤️ by Abhishek Singh
© 2026 Abhishek Singh. Do not copy or distribute without permission..