Roshingel's Portfolio

A modern, database-backed developer portfolio and blogging platform featuring a declarative admin CMS, live telemetry, and an interactive guestbook.

Completed

screenshot-146-e2c4b08a.png

6 images • Use arrows or dots to navigate

September 3, 2026·Updated September 3, 2026

Description

roshingel.vercel.app is a high-performance, full-stack personal developer portfolio and content management platform built with Next.js 16, React 19, TypeScript, and Tailwind CSS v4. Designed around a database-first philosophy, every piece of content—from career timeline and skills to projects and blog articles—is managed dynamically through a custom declarative admin dashboard without requiring redeployments.

Architecture & Core Highlights

The application is powered by Supabase Postgres using Drizzle ORM, with Supabase Storage for reference-counted media asset management. Performance is optimized with Next.js Cache Components (<code>use cache</code>) combined with fine-grained cache tag invalidations. A custom theming engine remaps the Tailwind palette at runtime, providing instant, transition-free switching between dark and light modes.

Key Features

Declarative Admin Panel: A centralized /admin suite built with fine-grained role-based permissions (RBAC) to manage content, media, guestbook entries, and comments.

Real-Time Developer Dashboard: Live integration with the GitHub GraphQL API and WakaTime API, displaying coding heatmaps, language breakdowns, and daily activity.

Interactive OAuth Guestbook: Auth.js v5 authentication supporting Google and GitHub sign-in, threaded replies, moderation pinning, and Resend email alerts.</li>

Engineered for Performance & SEO: Automated JSON-LD schema generation, dynamic sitemaps, Open Graph cards, and Cloudflare Turnstile bot protection.

Features

Declarative Admin CMS

Custom database-backed administrative console managing all site content, assets, and role-based permissions without redeployment.

Live Developer Telemetry

Real-time GitHub contribution graph and WakaTime coding analytics with automated 15-minute background refresh intervals.

Interactive OAuth Guestbook

Threaded community discussion with Google and GitHub authentication, message pinning, and automated email notifications.

Dynamic Theming Engine

Seamless dark and light theme switching powered by runtime CSS variable palette remapping without style cascading flashes.

Cache-Tag Performance & SEO

Built-in structured JSON-LD schemas, dynamic XML sitemaps, Open Graph generation, and tag-based Next.js server cache invalidation.

Tech Stack

AntigravityAI-powered development environment for coding, debugging, automation, and software development.

CloudflareWeb platform for CDN, security, DNS, and performance optimization.

CSSStyling language for designing and customizing web interfaces.

GitVersion control system for tracking and managing source code.

Github APIAPI for accessing and managing GitHub repositories and developer data.

Google MapsMapping platform for location services, maps, and geographic data.

HTMLMarkup language for structuring content and web pages.

Next.jsReact framework for building production-ready web applications.

Node.jsJavaScript runtime for building server-side and backend applications.

OpenCvComputer vision library for image processing and visual applications.

PostgreSQLAdvanced relational database system for storing and managing application data.

ReactJavaScript library for building interactive and reusable user interfaces.

TailwindCSSUtility-first CSS framework for rapidly building responsive user interfaces.

TypeScriptTyped superset of JavaScript for safer and more maintainable development.

VercelVercelCloud platform for deploying, hosting, and scaling modern web applications.

WakaTime APIAPI for tracking and analyzing coding activity and developer productivity.

Description

Architecture & Core Highlights

Key Features