Project Overview: The Ultimate Developer Portal

This project is a high-performance, developer-focused portfolio and client portal designed from the ground up to solve two main challenges: hosting a rich, interactive web application at absolute zero running cost, and providing an end-to-end management pipeline for freelance clients and recruiter outreach.

Unlike typical static portfolios, this platform operates as a multi-tier SaaS. It is split into four primary architectural layers: a highly polished Public Frontend, a secure **Client Portal**, an **Admin Control Panel**, and a **Security Telemetry Auditor**.

1. Public-Facing Portal (The Recruiter Experience)

The public site is optimized for conversion, enabling recruiters to easily evaluate tech capability and schedule enquiries:

Dynamic Status Pill: Displays a green glow reflecting live status (e.g. Currently working as Backend Developer at Dyashin Technosoft) or dynamically transitions to a blue glow (Open to New Opportunities / Freelance) if the user's active work experience end-date has passed.
Case Study Showcase: Features a visual project browser with custom tag categorization, priority sorting, and rich case study page lookups.
Interactive AI Recruiter Assistant: A sliding chatbot widget powered by DeepSeek/Gemini that answers questions about my tech stack, credentials, and work history. It features prompt-injection guardrails preventing recruiters from manipulating output.
SEO Optimizations: Leverages Next.js Server-Side Rendering (SSR) for blogs and project details, ensuring semantic HTML structure, proper meta-tag configurations, and sub-second initial page loads.

2. The Collaborative Client Portal

To support freelance development contracts, the application features an isolated dashboard where clients can manage active projects:

Milestone Budgeting: Projects are structured into base prices, custom discount structures, and installment schedules (e.g., 25% upfront, 50% on milestone testing, 25% on final code delivery) with live payment statuses.
Integrated Chat Room: A secure discussion room where the client can chat directly with the engineer, preventing messages from being lost across disjointed email threads.
Quotation Proposal Approvals: When a project scope is created, the client can review the net price and approve or decline the quotation directly within the dashboard.
OTP Profile Verification: If a client changes sensitive details (like contact email or phone), the system dispatches a secure 6-digit OTP code to verify identity, preventing unauthorized profile takeovers.

3. The Admin Management Suite

The admin suite provides high-privilege configuration options to update the portfolio state dynamically:

Profile & Media Manager: Dynamic updates for bios, summaries, location, and social links. Integrates with file upload components to upload profile pictures or resumes directly.
Financial summary suite: Aggregates payment installment logs to compile Lifetime, Yearly, and Monthly revenue figures. It also features a custom date range calculator for compiling tax and income statistics.
Staff Accounts (RBAC): Enables the creation of view-only administrator accounts for recruiters. Recruiters can log in and browse internal analytics dashboards and telemetry reports without being able to write or modify data.
GitHub API Sync: Fetches repository lists dynamically, counts commit statistics, and parses repository Readme markdown directly to convert it to styled case studies.

4. System Telemetry & Security reports

A custom auditor maps and records request patterns into a separate database schema (request_audit), producing analytical reports:

Geo-IP Mapping: Maps client IP addresses to coordinates, resolving country and city data dynamically.
Session Path Tracking: Records the exact paths (visit history) and timestamps of routes browsed, enabling analysis of recruiter click patterns.
Device & OS Telemetry: Resolves user-agents to track browser engines, operating systems, and device form factors.
AI Cost Protection: Tracks AI usage limits (Gemini/DeepSeek) on a per-user, per-day basis, blocking key exhaustion and mitigating potential DDOS billing spikes.
Central Error Log: Catches server-side runtime stack traces and request contexts, dispatching email alerts when anomalies are detected.

5. Architecture & Cost-Optimization Case Study

For a personal portfolio, running continuous compute containers is highly inefficient. I designed a cost-optimal architecture that costs exactly **$0/month** to run at scale:

Infrastructure Layer Technology Chosen Cost-Saving Rationale

Hosting & compute

Vercel (Serverless)

Scale-to-zero serverless functions eliminate JVM active RAM memory costs ($5-$7/month container minimums).

Database

Supabase (PostgreSQL)

Fully-managed free-tier PostgreSQL instance with connection pooling, saving RDS provision costs ($15+/month).

Object Storage

Cloudflare R2

Generous 10GB free tier and **$0 egress fees**, preventing bandwidth charges when recruiters download PDF resumes.

Developer Portfolio & Freelance Portal

Highlights

Key Features