This is the portfolio project for DevRGD, demonstrating a modern, flicker-free tri-mode theming system (Light, Dark, System) using Next.js 16 App Router, Tailwind CSS 4.1, and TypeScript.
It is built as a clean, copy-pasteable, and SEO-friendly portfolio template, with persistent user theme preferences and offline-ready features.
- Tri-Mode Theme: Light, Dark, and System mode respecting OS preferences.
- Flicker-Free UX: Uses an inline
<script>(ThemeScript) to set the theme on<html>before React hydration. - Persistent Preferences: Stores user choice (
light,dark, orsystem) inlocalStorage. - System Sync: Updates theme automatically when the OS-level preference changes while in System mode.
- SEO-Optimized: Metadata, OpenGraph, Twitter cards, and structured data (
SEOSchema) included. - Modern Stack: Next.js 16, Tailwind CSS 4.1, React 19, TypeScript 5, Framer Motion.
- Reusable Context & Hooks:
ThemeProvideranduseThemehook manage theme globally. - Progressive Web App Ready: Includes
manifest.jsonand offline caching setup (manual service worker can be added).
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS 4.1 + PostCSS
- Language: TypeScript
- Animations: Framer Motion
- Icons: React Icons
- Renders inline in
<head>for flicker-free theme application. - Reads
localStoragefor stored theme or defaults to system. - Sets
data-themeattribute on<html>before React mounts.
- Client Component that syncs React state with
ThemeScript. - Provides a
toggleThemefunction: light → dark → system. - Updates
<html>dynamically and listens for OS theme changes when in System mode.
- Clone the repository
git clone https://github.com/DevRGD/space-of-devrgd.git- Navigate to the project directory
cd space-of-devrgd- Install dependencies
npm install
# or
pnpm install
# or
yarn install- Start the development server
npm run devOpen http://localhost:3000 to view the portfolio.
app/
├─ about/ # About page
├─ blog/ # Blog section
├─ contact/ # Contact page
├─ projects/ # Portfolio projects
├─ skills/ # Skills page
├─ layout.tsx # Root layout with ThemeScript
├─ page.tsx # Home page
components/
├─ Footer.tsx
├─ Navbar.tsx
├─ PageLink.tsx
├─ SEOSchema.tsx # JSON-LD structured data
├─ ThemeProvider.tsx
├─ ThemeScript.tsx
├─ ThemeToggleButton.tsx
public/
├─ manifest.json
├─ icons/ # Favicons and PWA icons
├─ og-image.png
- Fully responsive and accessible
- Tri-mode theme with flicker-free UX
- SEO-optimized metadata and structured data
- Next.js 16 + Tailwind CSS 4.1 + TypeScript
- Ready for Vercel deployment and PWA support