My Portfolio
MERN Stack Headless CMS & Real-Time Analytics
Project Overview
This portfolio is not just a static website; it is a meticulously engineered full-stack application designed to showcase technical proficiency, modern design principles, and scalable architecture. Built from the ground up using the MERN stack, it eliminates hardcoded data via a custom CMS.
Overview
This portfolio is not just a static website; it is a meticulously engineered full-stack application designed to showcase technical proficiency, modern design principles, and scalable architecture. Built from the ground up using the MERN stack (MongoDB, Express.js, React, Node.js), it completely eliminates the need for hardcoded data by implementing a custom headless CMS.
Core Architecture
The structural paradigm of this project centers around separation of concerns. A robust RESTful Node.js backend handles all data persistence and business logic, while the React frontend consumes these APIs to render blazing-fast, dynamic interfaces enhanced with custom CSS transitions.
Admin Dashboard Portal
A fully protected, JWT-authenticated backend portal allowing seamless CRUD (Create, Read, Update, Delete) operations for managing Projects, Skills, Work Experiences, and visitor Messages without touching a single line of code.
Real-Time Visitor Analytics
Custom middleware and tracking hooks implemented to silently capture visitor footprints—including IP, device type, referrer source (e.g., Google, ChatGPT), browser, and session duration. The admin panel features advanced visual data representations, displaying daily/weekly traffic, top pages, device breakdowns, and source percentages.
Security & Cloud Storage
Implemented strict Cross-Origin Resource Sharing (CORS) policies, Helmet.js for HTTP header security, MongoDB sanitization to prevent NoSQL injections, and IP-based rate limiting with a globally accessible live countdown banner for 429 errors. Integrated Multer natively with Cloudinary to seamlessly handle and securely pipe all file uploads (project galleries, thumbnails, skill icons, and PDF resumes) directly to the cloud.
Fluid UI/UX Design
Dark-mode optimized, fully responsive UI utilizing Tailwind CSS, ensuring pixel-perfect rendering from 4K desktop monitors down to mobile screens.
Screenshots & Gallery
