rahuljangir.work — Personal Portfolio

Overview

A fully-featured personal portfolio and developer hub built with cutting-edge web technologies. It showcases my work, skills, and open-source contributions through beautiful, interactive UI components — all built as reusable shadcn/ui registry entries.

Architecture

Key Features

1. Custom Component Registry

A full shadcn/ui-compatible component registry with 12+ custom components, all installable via the shadcn CLI:

pnpm dlx shadcn@latest add "https://rahuljangir.work/r/slide-to-unlock"
npx shadcn@latest add "https://rahuljangir.work/r/wheel-picker"
npx shadcn@latest add "https://rahuljangir.work/r/apple-hello-effect"

Components include:

• Slide to Unlock — iOS-style interactive slider with haptic sound
• Wheel Picker — Native mobile picker with form integration
• Apple Hello Effect — Animated SVG greeting in multiple languages
• Shimmering Text — Animated gradient text effect
• Theme Switcher — Smooth dark/light/system toggle
• GitHub Stars — Real-time star count badge
• Testimonials Marquee — Auto-scrolling testimonial cards
• Scroll Fade Effect — Scroll-based opacity transitions
• Flip Sentences — Rotating text animation
• Work Experience — Timeline component with rich Markdown

2. GitHub Integration

Real-time GitHub contribution graph and repository stats:

// Fetches last year of contributions
const contributions = await fetch(
  `https://github-contributions-api.jogruber.de/v4/${GITHUB_USERNAME}?y=last`
);

• Live contribution heatmap with tooltips
• Star count badges on project cards
• Direct links to source repositories

3. WakaTime Coding Stats

Live dashboard showing coding activity:

• Weekly coding hours breakdown
• Top languages by time spent
• Project-level activity tracking
• Category distribution (coding, debugging, browsing)

4. MDX-Powered Blog

Full blogging system with:

• Syntax highlighting with Shiki
• Mermaid diagram support
• Component previews (live registry demos in blog posts)
• Table of contents generation
• Reading time estimation
• SEO metadata per post

5. Project Showcase

Rich project pages with:

• Grid and list view toggle
• Tag-based filtering
• Search functionality
• Similar projects suggestions
• Share menu (copy link, Twitter, LinkedIn)
• Mermaid architecture diagrams

6. Theme System

• HSL-based color tokens for seamless theming
• Flicker-free dark mode with inline script
• Animated transition between themes
• Persistent preference via localStorage

Tech Stack

const stack = {
  framework: "Next.js 16 (App Router)",
  language: "TypeScript (strict mode)",
  styling: "Tailwind CSS v4",
  components: "shadcn/ui + Custom Registry",
  content: "MDX with next-mdx-remote",
  animations: "Framer Motion",
  fonts: "Google Fonts (Inter, Outfit)",
  icons: "Lucide React + Simple Icons",
  deployment: "Vercel (Edge Network)",
  registry: "shadcn CLI compatible",
};

Design System

• Color Palette: HSL tokens with dark/light variants
• Typography: Inter for body, Outfit for headings
• Animations: Smooth micro-interactions with Framer Motion
• Layout: Responsive grid with mobile-first approach
• Glassmorphism: Frosted-glass effects on cards and modals

Performance

• 100 Lighthouse Performance score
• RSC — Server-rendered by default, minimal JS shipped
• ISR — GitHub data cached 24h, revalidated automatically
• Edge — Served from nearest Vercel edge location
• Optimized Images — Next.js Image with quality presets

Open Source

The entire component registry is open source and installable:

# Install any component into your own project
npx shadcn@latest add "https://rahuljangir.work/r/{component-name}"

All components ship with:

• Full TypeScript types
• Tailwind CSS styling (no CSS-in-JS)
• Composable API (compound components)
• Accessibility built-in
• Dark mode support