{"id":25072630,"url":"https://github.com/rajtilak-2020/Portfolio-V4","last_synced_at":"2025-12-30T20:04:32.712Z","repository":{"id":275577527,"uuid":"926508623","full_name":"rajtilak-2020/K-Rajtilak_s-Portfolio-V4","owner":"rajtilak-2020","description":"Minimalist developer portfolio using Next.js 14, React, TailwindCSS, Shadcn UI and Magic UI","archived":false,"fork":false,"pushed_at":"2025-03-15T13:37:26.000Z","size":1949599,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T14:22:46.892Z","etag":null,"topics":["css3","html5","javascript","magicui","mdx","mit-license","nextjs","nextjs14","nodejs","open-source","portfolio","react","shadcn-ui","tailwindcss","typescript","vercel","webdevelopment","websocket"],"latest_commit_sha":null,"homepage":"https://krajtilak.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajtilak-2020.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-03T11:35:55.000Z","updated_at":"2025-03-15T13:37:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"665dabde-f5aa-4eae-9e08-d3525ca5a1d8","html_url":"https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4","commit_stats":null,"previous_names":["rajtilak-2020/k-rajtilak_s-portfolio-v4"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajtilak-2020%2FK-Rajtilak_s-Portfolio-V4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajtilak-2020%2FK-Rajtilak_s-Portfolio-V4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajtilak-2020%2FK-Rajtilak_s-Portfolio-V4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajtilak-2020%2FK-Rajtilak_s-Portfolio-V4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajtilak-2020","download_url":"https://codeload.github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246512524,"owners_count":20789715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","javascript","magicui","mdx","mit-license","nextjs","nextjs14","nodejs","open-source","portfolio","react","shadcn-ui","tailwindcss","typescript","vercel","webdevelopment","websocket"],"created_at":"2025-02-06T22:31:50.637Z","updated_at":"2025-12-30T20:04:32.706Z","avatar_url":"https://github.com/rajtilak-2020.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\r\n    \r\n![Portfolio Banner](https://github.com/user-attachments/assets/ef338a9b-c22b-4961-9040-20cea83b6a28)\r\n\r\n**A cutting-edge, high-performance portfolio showcasing modern web development excellence**\r\n\r\n[![Website](https://img.shields.io/badge/🌐%20Live%20Website-krajtilak.dev-blue?style=for-the-badge\u0026logo=vercel)](https://krajtilak.vercel.app)\r\n[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white)](https://nextjs.org/)\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\r\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.0-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/)\r\n\r\n[![Build Status](https://img.shields.io/github/actions/workflow/status/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/codeql.yml?style=flat-square\u0026logo=github-actions\u0026logoColor=white)](https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/actions)\r\n[![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)](./LICENSE)\r\n[![Stars](https://img.shields.io/github/stars/rajtilak-2020/K-Rajtilak_s-Portfolio-V4?style=flat-square\u0026logo=github)](https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/stargazers)\r\n[![Forks](https://img.shields.io/github/forks/rajtilak-2020/K-Rajtilak_s-Portfolio-V4?style=flat-square\u0026logo=github)](https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/network)\r\n\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n## 🎯 Overview\r\n\r\n\u003e **A modern, performant, and visually stunning portfolio website that represents the pinnacle of contemporary web development.**\r\n\r\nThis is the **fourth iteration** of my personal portfolio, built from the ground up with modern web technologies and best practices. It showcases my journey as a developer through an elegant, responsive, and highly optimized user experience.\r\n\r\n### 🌟 What Makes This Special\r\n\r\n- 🎨 **Modern Design Language** - Clean, minimal, and accessible design with smooth animations\r\n- ⚡ **Lightning Fast** - Optimized for Core Web Vitals with 95+ Lighthouse scores\r\n- 📱 **Fully Responsive** - Seamless experience across all devices and screen sizes\r\n- 🌙 **Smart Theming** - Intelligent dark/light mode with system preference detection\r\n- 📝 **Dynamic Content** - MDX-powered blog with syntax highlighting and interactive elements\r\n- 🔍 **SEO Optimized** - Complete meta tags, structured data, and social sharing\r\n\r\n![Repository Analytics](https://repobeats.axiom.co/api/embed/f3794f44c2ba376464498ace2aee16211f6ced4a.svg)\r\n\r\n## ✨ Key Features\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🎨 User Experience Features\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- **Immersive Hero Section** with animated text and dynamic backgrounds\r\n- **Interactive Navigation** with smooth scrolling and active section highlighting  \r\n- **Project Showcase** with live previews, GitHub integration, and detailed case studies\r\n- **Skills Visualization** with animated progress bars and technology icons\r\n- **Contact Integration** with social links and direct messaging capabilities\r\n- **Blog System** with category filtering, search, and reading time estimates\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e⚡ Performance Features\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- **Code Splitting** - Automatic route-based and component-based splitting\r\n- **Image Optimization** - Next.js Image component with WebP/AVIF support\r\n- **Lazy Loading** - Progressive content loading for improved initial load times\r\n- **Bundle Analysis** - Optimized bundle sizes with tree-shaking\r\n- **Caching Strategy** - Strategic caching with Vercel Edge Network\r\n- **Core Web Vitals** - Optimized for Google's performance metrics\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🔧 Developer Features\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- **TypeScript Integration** - Full type safety with strict configuration\r\n- **Component Library** - Reusable UI components with ShadCN/UI\r\n- **Animation System** - Magic UI and Framer Motion for smooth interactions\r\n- **Content Management** - MDX support for rich content creation\r\n- **Development Tools** - ESLint, Prettier, and comprehensive testing setup\r\n- **CI/CD Pipeline** - Automated testing, building, and deployment\r\n\r\n\u003c/details\u003e\r\n\r\n## 🏗️ System Architecture\r\n\r\n```mermaid\r\ngraph TB\r\n    subgraph \"Client Layer\"\r\n        A[🌐 Browser] --\u003e B[⚡ Next.js App Router]\r\n        B --\u003e C[🎨 React Components]\r\n        C --\u003e D[💫 Magic UI Animations]\r\n        D --\u003e E[🎭 ShadCN/UI Components]\r\n    end\r\n    \r\n    subgraph \"Application Core\"\r\n        B --\u003e F[📱 Page Components]\r\n        F --\u003e G[🧩 Reusable Components]\r\n        G --\u003e H[📊 Data Layer]\r\n        H --\u003e I[🔄 State Management]\r\n        I --\u003e J[🎯 Business Logic]\r\n    end\r\n    \r\n    subgraph \"Content Management\"\r\n        K[📝 MDX Content] --\u003e L[🔍 Content Parser]\r\n        L --\u003e M[✨ Syntax Highlighter]\r\n        M --\u003e N[📖 Blog System]\r\n        N --\u003e F\r\n    end\r\n    \r\n    subgraph \"Styling System\"\r\n        O[🎨 Tailwind CSS] --\u003e P[🌙 Theme Provider]\r\n        P --\u003e Q[💡 Design Tokens]\r\n        Q --\u003e R[📐 Responsive Utilities]\r\n        R --\u003e E\r\n    end\r\n    \r\n    subgraph \"Build \u0026 Optimization\"\r\n        S[⚙️ Next.js Compiler] --\u003e T[📦 Webpack Bundle]\r\n        T --\u003e U[🗜️ Code Splitting]\r\n        U --\u003e V[🖼️ Image Optimization]\r\n        V --\u003e W[💨 Static Generation]\r\n    end\r\n    \r\n    subgraph \"Deployment \u0026 CDN\"\r\n        W --\u003e X[🚀 Vercel Platform]\r\n        X --\u003e Y[🌍 Edge Network]\r\n        Y --\u003e Z[📈 Analytics \u0026 Monitoring]\r\n        Z --\u003e A\r\n    end\r\n    \r\n    subgraph \"External Integrations\"\r\n        AA[📧 Email Service] --\u003e F\r\n        BB[🐙 GitHub API] --\u003e H\r\n        CC[📊 Analytics APIs] --\u003e Z\r\n        DD[🎯 SEO Tools] --\u003e B\r\n    end\r\n\r\n    classDef clientLayer fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#01579b\r\n    classDef appCore fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#4a148c\r\n    classDef content fill:#e8f5e8,stroke:#388e3c,stroke-width:2px,color:#1b5e20\r\n    classDef styling fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#e65100\r\n    classDef build fill:#fce4ec,stroke:#c2185b,stroke-width:2px,color:#880e4f\r\n    classDef deploy fill:#f1f8e9,stroke:#689f38,stroke-width:2px,color:#33691e\r\n    classDef external fill:#f5f5f5,stroke:#616161,stroke-width:2px,color:#212121\r\n\r\n    class A,B,C,D,E clientLayer\r\n    class F,G,H,I,J appCore\r\n    class K,L,M,N content\r\n    class O,P,Q,R styling\r\n    class S,T,U,V,W build\r\n    class X,Y,Z deploy\r\n    class AA,BB,CC,DD external\r\n```\r\n\r\n### 🔄 Data Flow Architecture\r\n\r\n```mermaid\r\nsequenceDiagram\r\n    participant User as 👤 User\r\n    participant Browser as 🌐 Browser\r\n    participant NextJS as ⚡ Next.js\r\n    participant Components as 🧩 Components\r\n    participant Data as 📊 Data Layer\r\n    participant CMS as 📝 Content\r\n    participant CDN as 🌍 Vercel CDN\r\n\r\n    User-\u003e\u003eBrowser: Visit Portfolio\r\n    Browser-\u003e\u003eNextJS: Request Page\r\n    NextJS-\u003e\u003eData: Fetch Static Data\r\n    NextJS-\u003e\u003eCMS: Parse MDX Content\r\n    NextJS-\u003e\u003eComponents: Hydrate Components\r\n    Components-\u003e\u003eBrowser: Render UI\r\n    Browser-\u003e\u003eCDN: Load Assets\r\n    CDN-\u003e\u003eBrowser: Optimized Assets\r\n    Browser-\u003e\u003eUser: Display Portfolio\r\n\r\n    Note over User,CDN: Lightning Fast Experience ⚡\r\n```\r\n\r\n## 🔧 Technology Stack\r\n\r\n\r\n### 🎯 Core Technologies\r\n\r\n| Technology | Version | Purpose | Performance Impact |\r\n|------------|---------|---------|-------------------|\r\n| **Next.js** | 14.x | React Framework | App Router, SSG, Image Optimization |\r\n| **TypeScript** | 5.x | Type Safety | Development Experience, Runtime Safety |\r\n| **Tailwind CSS** | 3.x | Styling Framework | Utility-First, Minimal CSS Bundle |\r\n| **ShadCN/UI** | Latest | Component Library | Consistent Design System |\r\n| **Magic UI** | Latest | Animations | Smooth UX Interactions |\r\n\r\n### 🛠️ Development Tools\r\n\r\n| Tool | Purpose | Benefits |\r\n|------|---------|----------|\r\n| **PNPM** | Package Manager | Faster installs, Disk efficiency |\r\n| **ESLint** | Code Linting | Code quality, Best practices |\r\n| **Prettier** | Code Formatting | Consistent code style |\r\n| **Husky** | Git Hooks | Pre-commit validation |\r\n\r\n### 🚀 Deployment \u0026 Performance\r\n\r\n| Service | Purpose | Impact |\r\n|---------|---------|---------|\r\n| **Vercel** | Hosting Platform | Edge deployment, Analytics |\r\n| **Vercel Edge Network** | CDN | Global performance |\r\n| **Next.js Analytics** | Performance Monitoring | Real user metrics |\r\n\r\n\r\n## 🚀 Quick Start\r\n\r\n### Prerequisites\r\n\r\n```bash\r\n# Required versions\r\nNode.js \u003e= 18.0.0\r\nPNPM \u003e= 8.0.0 (recommended)\r\nGit \u003e= 2.0.0\r\n```\r\n\r\n### One-Command Setup\r\n\r\n```bash\r\n# Clone and setup in one go\r\nnpx create-next-app@latest my-portfolio --example https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4\r\ncd my-portfolio \u0026\u0026 pnpm dev\r\n```\r\n\r\n### Manual Setup\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e📋 Step-by-step installation\u003c/b\u003e\u003c/summary\u003e\r\n\r\n```bash\r\n# 1️⃣ Clone the repository\r\ngit clone https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4.git\r\ncd K-Rajtilak_s-Portfolio-V4\r\n\r\n# 2️⃣ Install dependencies (PNPM recommended)\r\npnpm install\r\n# or npm install\r\n\r\n# 3️⃣ Create environment file\r\ncp .env.example .env.local\r\n\r\n# 4️⃣ Start development server\r\npnpm dev\r\n\r\n# 5️⃣ Open in browser\r\n# Navigate to http://localhost:3000\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n### 📋 Available Scripts\r\n\r\n```bash\r\n# Development\r\npnpm dev          # Start dev server with hot reload\r\npnpm dev:turbo    # Start dev server with Turbopack\r\n\r\n# Building\r\npnpm build        # Production build\r\npnpm start        # Start production server\r\npnpm export       # Static export\r\n\r\n# Code Quality\r\npnpm lint         # Run ESLint\r\npnpm lint:fix     # Fix linting issues\r\npnpm type-check   # TypeScript type checking\r\npnpm format       # Format code with Prettier\r\n\r\n# Testing\r\npnpm test         # Run unit tests\r\npnpm test:watch   # Watch mode testing\r\npnpm test:e2e     # End-to-end testing\r\n\r\n# Analysis\r\npnpm analyze      # Bundle size analysis\r\npnpm lighthouse   # Performance audit\r\n```\r\n\r\n## 📂 Project Structure\r\n\r\n```mermaid\r\ngraph TD\r\n    subgraph \"📁 Root Directory\"\r\n        A[🏠 K-Rajtilak-Portfolio-V4]\r\n    end\r\n    \r\n    subgraph \"📋 Configuration\"\r\n        A --\u003e B1[⚙️ next.config.mjs]\r\n        A --\u003e B2[🎨 tailwind.config.ts]\r\n        A --\u003e B3[📦 package.json]\r\n        A --\u003e B4[🔧 tsconfig.json]\r\n        A --\u003e B5[📝 .env.example]\r\n    end\r\n    \r\n    subgraph \"📁 Source Code\"\r\n        A --\u003e C[💻 src/]\r\n        C --\u003e C1[📱 app/]\r\n        C --\u003e C2[🧩 components/]\r\n        C --\u003e C3[📊 data/]\r\n        C --\u003e C4[🔧 lib/]\r\n        C --\u003e C5[🎨 styles/]\r\n    end\r\n    \r\n    subgraph \"📱 App Router\"\r\n        C1 --\u003e D1[📄 layout.tsx]\r\n        C1 --\u003e D2[🏠 page.tsx]\r\n        C1 --\u003e D3[📝 blog/]\r\n        C1 --\u003e D4[👤 about/]\r\n        C1 --\u003e D5[💼 projects/]\r\n        D3 --\u003e D3a[📄 slug/page.tsx]\r\n    end\r\n    \r\n    subgraph \"🧩 Components\"\r\n        C2 --\u003e E1[✨ magic-ui/]\r\n        C2 --\u003e E2[🎭 ui/]\r\n        C2 --\u003e E3[📱 sections/]\r\n        C2 --\u003e E4[🗂️ layout/]\r\n        \r\n        E1 --\u003e E1a[💫 blur-fade.tsx]\r\n        E1 --\u003e E1b[🚢 dock.tsx]\r\n        E1 --\u003e E1c[📝 animated-text.tsx]\r\n        \r\n        E2 --\u003e E2a[🔘 button.tsx]\r\n        E2 --\u003e E2b[💳 card.tsx]\r\n        E2 --\u003e E2c[👤 avatar.tsx]\r\n        \r\n        E3 --\u003e E3a[🎯 hero.tsx]\r\n        E3 --\u003e E3b[💼 projects.tsx]\r\n        E3 --\u003e E3c[🛠️ skills.tsx]\r\n        \r\n        E4 --\u003e E4a[📍 navbar.tsx]\r\n        E4 --\u003e E4b[👣 footer.tsx]\r\n    end\r\n    \r\n    subgraph \"📊 Data Layer\"\r\n        C3 --\u003e F1[📝 blog.ts]\r\n        C3 --\u003e F2[💼 projects.ts]\r\n        C3 --\u003e F3[📄 resume.ts]\r\n        C3 --\u003e F4[🛠️ skills.ts]\r\n    end\r\n    \r\n    subgraph \"📁 Content \u0026 Assets\"\r\n        A --\u003e G[📄 content/]\r\n        A --\u003e H[🌍 public/]\r\n        \r\n        G --\u003e G1[📝 blog/]\r\n        G --\u003e G2[💼 projects/]\r\n        G1 --\u003e G1a[📄 *.mdx files]\r\n        \r\n        H --\u003e H1[🖼️ images/]\r\n        H --\u003e H2[🎨 icons/]\r\n        H --\u003e H3[📄 favicon/]\r\n    end\r\n\r\n    classDef config fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#e65100\r\n    classDef source fill:#e8f5e8,stroke:#388e3c,stroke-width:2px,color:#1b5e20\r\n    classDef app fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#01579b\r\n    classDef components fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#4a148c\r\n    classDef data fill:#fce4ec,stroke:#c2185b,stroke-width:2px,color:#880e4f\r\n    classDef content fill:#f1f8e9,stroke:#689f38,stroke-width:2px,color:#33691e\r\n\r\n    class B1,B2,B3,B4,B5 config\r\n    class C,C1,C2,C3,C4,C5 source\r\n    class D1,D2,D3,D4,D5,D3a app\r\n    class E1,E2,E3,E4,E1a,E1b,E1c,E2a,E2b,E2c,E3a,E3b,E3c,E4a,E4b components\r\n    class F1,F2,F3,F4 data\r\n    class G,H,G1,G2,G1a,H1,H2,H3 content\r\n```\r\n\r\n### 📋 Directory Details\r\n```\r\nK-Rajtilak-Portfolio-V4/\r\n├── 📁 src/\r\n│   ├── 📱 app/                    # Next.js App Router\r\n│   │   ├── 📄 layout.tsx          # Root layout component\r\n│   │   ├── 🏠 page.tsx            # Homepage\r\n│   │   ├── 📝 blog/               # Blog pages\r\n│   │   │   ├── 📄 page.tsx        # Blog listing\r\n│   │   │   └── 📄 [slug]/         # Individual blog posts\r\n│   │   ├── 👤 about/              # About page\r\n│   │   └── 💼 projects/           # Projects showcase\r\n│   │\r\n│   ├── 🧩 components/             # Reusable components\r\n│   │   ├── ✨ magic-ui/           # Magic UI components\r\n│   │   │   ├── 💫 blur-fade.tsx\r\n│   │   │   ├── 🚢 dock.tsx\r\n│   │   │   └── 📝 animated-text.tsx\r\n│   │   ├── 🎭 ui/                 # ShadCN UI components\r\n│   │   │   ├── 🔘 button.tsx\r\n│   │   │   ├── 💳 card.tsx\r\n│   │   │   └── 👤 avatar.tsx\r\n│   │   ├── 📱 sections/           # Page sections\r\n│   │   │   ├── 🎯 hero.tsx\r\n│   │   │   ├── 💼 projects.tsx\r\n│   │   │   └── 🛠️ skills.tsx\r\n│   │   └── 🗂️ layout/             # Layout components\r\n│   │       ├── 📍 navbar.tsx\r\n│   │       └── 👣 footer.tsx\r\n│   │\r\n│   ├── 📊 data/                   # Static data\r\n│   │   ├── 📝 blog.ts             # Blog metadata\r\n│   │   ├── 💼 projects.ts         # Project data\r\n│   │   ├── 📄 resume.ts           # Resume information\r\n│   │   └── 🛠️ skills.ts           # Skills data\r\n│   │\r\n│   ├── 🔧 lib/                    # Utility functions\r\n│   │   ├── 🛠️ utils.ts            # Helper utilities\r\n│   │   ├── 📝 mdx.ts              # MDX processing\r\n│   │   └── 🎨 fonts.ts            # Font configurations\r\n│   │\r\n│   └── 🎨 styles/                 # Global styles\r\n│       └── 🌍 globals.css         # Global CSS\r\n│\r\n├── 📄 content/                    # MDX content\r\n│   ├── 📝 blog/                   # Blog posts\r\n│   │   ├── 📄 first-post.mdx\r\n│   │   └── 📄 second-post.mdx\r\n│   └── 💼 projects/               # Project documentation\r\n│\r\n├── 🌍 public/                     # Static assets\r\n│   ├── 🖼️ images/                 # Images\r\n│   ├── 🎨 icons/                  # Icons and favicons\r\n│   └── 📄 resume.pdf              # Resume file\r\n│\r\n└── ⚙️ Configuration Files\r\n    ├── 📦 package.json            # Dependencies\r\n    ├── ⚙️ next.config.mjs         # Next.js config\r\n    ├── 🎨 tailwind.config.ts      # Tailwind config\r\n    ├── 🔧 tsconfig.json           # TypeScript config\r\n    └── 📝 .env.example            # Environment template\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## 🎨 Design System\r\n\r\n### 🎯 Design Principles\r\n\r\n- **Minimalism** - Clean, uncluttered interfaces with purposeful whitespace\r\n- **Consistency** - Unified design language across all components\r\n- **Accessibility** - WCAG 2.1 AA compliant with proper contrast ratios\r\n- **Performance** - Optimized for fast loading and smooth interactions\r\n\r\n### 🌈 Color Palette\r\n\r\n```css\r\n/* Primary Colors */\r\n--primary: 220 90% 56%;           /* Blue */\r\n--primary-foreground: 220 90% 98%; \r\n\r\n/* Secondary Colors */\r\n--secondary: 220 14.3% 95.9%;     /* Light Gray */\r\n--secondary-foreground: 220 8.9% 46.1%;\r\n\r\n/* Accent Colors */\r\n--accent: 220 14.3% 95.9%;        /* Accent Blue */\r\n--accent-foreground: 220 8.9% 46.1%;\r\n\r\n/* Status Colors */\r\n--destructive: 0 62.8% 30.6%;     /* Red for errors */\r\n--success: 142 76% 36%;           /* Green for success */\r\n--warning: 38 92% 50%;            /* Orange for warnings */\r\n```\r\n\r\n### 📐 Typography Scale\r\n\r\n| Size | Usage | Font Weight |\r\n|------|-------|------------|\r\n| `text-4xl` | Headings | 700 (Bold) |\r\n| `text-2xl` | Subheadings | 600 (Semi-bold) |\r\n| `text-lg` | Body Large | 500 (Medium) |\r\n| `text-base` | Body Text | 400 (Regular) |\r\n| `text-sm` | Caption | 400 (Regular) |\r\n\r\n## 📱 Screenshots\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n### 🌙 Dark Mode Experience\r\n![Dark Mode Hero](https://github.com/user-attachments/assets/3cb7efe8-d998-43ac-a584-d2d9fb92dba1)\r\n\r\n### ☀️ Light Mode Experience  \r\n![Light Mode Hero](https://github.com/user-attachments/assets/bad2efa4-2d82-4823-9f81-1fdd36be8aa4)\r\n\r\n### 📱 Mobile Responsiveness\r\n\u003ctable\u003e\r\n\u003ctr\u003e\r\n\u003ctd align=\"center\"\u003e📱 Mobile\u003c/td\u003e\r\n\u003ctd align=\"center\"\u003e💻 Tablet\u003c/td\u003e\r\n\u003ctd align=\"center\"\u003e🖥️ Desktop\u003c/td\u003e\r\n\u003c/tr\u003e\r\n\u003ctr\u003e\r\n\u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/76a033b4-ff71-4757-8ba4-b1ffaea3a4a1\" width=\"200\"/\u003e\u003c/td\u003e\r\n\u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/ac41176a-b59b-4255-9cdb-efcc41e10c08\" width=\"300\"/\u003e\u003c/td\u003e\r\n\u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/419d3c0f-ffdf-43db-b367-8100d64636ea\" width=\"400\"/\u003e\u003c/td\u003e\r\n\u003c/tr\u003e\r\n\u003c/table\u003e\r\n\r\n\u003c/div\u003e\r\n\r\n## ⚡ Performance\r\n\r\n### 🏆 Lighthouse Scores\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n| Metric | Score | Description |\r\n|--------|-------|-------------|\r\n| **Performance** | 98/100 | Fast loading and smooth interactions |\r\n| **Accessibility** | 100/100 | WCAG 2.1 AA compliant |\r\n| **Best Practices** | 100/100 | Modern web standards |\r\n| **SEO** | 100/100 | Search engine optimized |\r\n\r\n\u003c/div\u003e\r\n\r\n### 📊 Core Web Vitals\r\n\r\n```mermaid\r\ngraph LR\r\n    subgraph \"⚡ Loading Performance\"\r\n        A[FCP: 1.2s] --\u003e A1[✅ Good]\r\n        B[LCP: 1.8s] --\u003e B1[✅ Good] \r\n        C[FID: 50ms] --\u003e C1[✅ Good]\r\n        D[CLS: 0.05] --\u003e D1[✅ Good]\r\n    end\r\n    \r\n    subgraph \"🎯 Optimization Targets\"\r\n        E[Images: WebP/AVIF]\r\n        F[Code Splitting: Automatic]\r\n        G[Bundle Size: \u003c 200KB]\r\n        H[Caching: Edge Network]\r\n    end\r\n    \r\n    classDef good fill:#c6f6d5,stroke:#38a169,stroke-width:2px,color:#22543d\r\n    classDef optimization fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#01579b\r\n    \r\n    class A1,B1,C1,D1 good\r\n    class E,F,G,H optimization\r\n```\r\n\r\n### 🔧 Performance Optimizations\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e⚡ View detailed optimizations\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### 🖼️ Image Optimization\r\n- **Next.js Image Component** - Automatic WebP/AVIF conversion\r\n- **Lazy Loading** - Images load only when needed\r\n- **Responsive Images** - Multiple sizes for different screen sizes\r\n- **Placeholder Blur** - Smooth loading experience\r\n\r\n#### 📦 Bundle Optimization  \r\n- **Tree Shaking** - Remove unused code automatically\r\n- **Code Splitting** - Load only necessary JavaScript\r\n- **Dynamic Imports** - Reduce initial bundle size\r\n- **Compression** - Gzip/Brotli compression\r\n\r\n#### 🚀 Runtime Performance\r\n- **Virtual Scrolling** - Efficient large list rendering\r\n- **Memoization** - Prevent unnecessary re-renders\r\n- **Service Worker** - Cache resources for offline access\r\n- **Prefetching** - Load next pages in advance\r\n\r\n\u003c/details\u003e\r\n\r\n## 🛠️ Development\r\n\r\n### 🎯 Development Workflow\r\n\r\n```mermaid\r\ngraph LR\r\n    A[🚀 Initial Setup] --\u003e B[📝 Create Feature Branch]\r\n    B --\u003e C[⚡ Add Component]\r\n    C --\u003e D[🧪 Write Tests]\r\n    D --\u003e E[📚 Update Docs]\r\n    E --\u003e F[🔄 Switch to Main]\r\n    F --\u003e G[🔗 Merge Feature]\r\n    G --\u003e H[🌐 Deploy to Vercel]\r\n\r\n    %% Branch styling\r\n    A --\u003e I[📋 main branch]\r\n    B --\u003e J[🌿 feature branch]\r\n    C --\u003e J\r\n    D --\u003e J\r\n    E --\u003e J\r\n    F --\u003e I\r\n    G --\u003e I\r\n    H --\u003e I\r\n\r\n    classDef mainBranch fill:#e6f7ff,color:#0066cc,stroke:#0052cc,stroke-width:3px,font-weight:bold\r\n    classDef featureBranch fill:#f0f8e6,color:#2d5016,stroke:#52c41a,stroke-width:2px\r\n    classDef commit fill:#fff2e6,color:#d46b08,stroke:#fa8c16,stroke-width:2px\r\n    classDef deploy fill:#f6ffed,color:#389e0d,stroke:#52c41a,stroke-width:3px,font-weight:bold\r\n\r\n    class I mainBranch\r\n    class J featureBranch\r\n    class A,C,D,E,G commit\r\n    class B,F commit\r\n    class H deploy\r\n```\r\n\r\n### 🧪 Testing Strategy\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🔍 Testing Approach\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Unit Testing\r\n- **Jest** - JavaScript testing framework\r\n- **React Testing Library** - Component testing utilities\r\n- **Coverage Reports** - Maintain \u003e80% code coverage\r\n\r\n#### Integration Testing  \r\n- **Playwright** - End-to-end testing\r\n- **Visual Regression** - Screenshot comparisons\r\n- **Performance Testing** - Lighthouse CI\r\n\r\n#### Quality Assurance\r\n- **ESLint** - Code quality and consistency  \r\n- **Prettier** - Code formatting\r\n- **Husky** - Pre-commit hooks\r\n- **TypeScript** - Static type checking\r\n\r\n\u003c/details\u003e\r\n\r\n### 🔧 Customization Guide\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🎨 How to customize for your use\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### 1. Personal Information\r\n```typescript\r\n// src/data/resume.ts\r\nexport const RESUME = {\r\n  name: \"Your Name\",\r\n  title: \"Your Title\", \r\n  email: \"your.email@example.com\",\r\n  // ... more personal data\r\n}\r\n```\r\n\r\n#### 2. Projects Data\r\n```typescript\r\n// src/data/projects.ts  \r\nexport const PROJECTS = [\r\n  {\r\n    title: \"Your Project\",\r\n    description: \"Project description\",\r\n    technologies: [\"Next.js\", \"TypeScript\"],\r\n    // ... project details\r\n  }\r\n]\r\n```\r\n\r\n#### 3. Styling Customization\r\n```css\r\n/* src/styles/globals.css */\r\n:root {\r\n  --your-custom-color: #your-hex-code;\r\n  --your-custom-font: 'Your Font Family';\r\n}\r\n```\r\n\r\n#### 4. Content Management\r\n```mdx\r\n\u003c!-- content/blog/your-post.mdx --\u003e\r\n---\r\ntitle: \"Your Blog Post\"\r\ndate: \"2024-01-01\"  \r\ndescription: \"Post description\"\r\n---\r\n\r\nYour MDX content here...\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## 📚 Documentation\r\n\r\n### 📖 Resources \u0026 References\r\n\r\n- **[Next.js Documentation](https://nextjs.org/docs)** - Framework documentation\r\n- **[ShadCN/UI Components](https://ui.shadcn.com/)** - Component library\r\n- **[Magic UI Documentation](https://magicui.design/)** - Animation components\r\n- **[Tailwind CSS](https://tailwindcss.com/docs)** - Utility-first CSS\r\n- **[MDX Documentation](https://mdxjs.com/)** - Markdown with JSX\r\n\r\n### 🎓 Learning Resources\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e📚 Recommended tutorials and guides\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Next.js Learning Path\r\n- [Next.js Learn Course](https://nextjs.org/learn)\r\n- [App Router Migration Guide](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration)\r\n- [Performance Optimization](https://nextjs.org/docs/app/building-your-application/optimizing)\r\n\r\n#### Design System Resources\r\n- [Building Design Systems](https://www.designbetter.co/design-systems-handbook)\r\n- [Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)\r\n- [Color Theory for Developers](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)\r\n\r\n#### Performance Optimization\r\n- [Web.dev Performance](https://web.dev/performance/)\r\n- [Core Web Vitals](https://web.dev/vitals/)\r\n- [Next.js Performance](https://nextjs.org/docs/app/building-your-application/optimizing/performance)\r\n\r\n\u003c/details\u003e\r\n\r\n### 🔧 API Reference\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e📡 Component APIs and Props\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Magic UI Components\r\n```typescript\r\n// BlurFade Component\r\n\u003cBlurFade delay={0.25} inView\u003e\r\n  \u003cYourComponent /\u003e\r\n\u003c/BlurFade\u003e\r\n\r\n// Dock Component  \r\n\u003cDock direction=\"middle\" className=\"your-styles\"\u003e\r\n  \u003cDockIcon\u003e...\u003c/DockIcon\u003e\r\n\u003c/Dock\u003e\r\n```\r\n\r\n#### Custom Hooks\r\n```typescript\r\n// Theme Hook\r\nconst { theme, setTheme } = useTheme()\r\n\r\n// MDX Hook\r\nconst { posts, getPost } = useMDX()\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## 🤝 Contributing\r\n\r\nWe welcome contributions from the community! Here's how you can help make this portfolio even better.\r\n\r\n### 🚀 How to Contribute\r\n\r\n```mermaid\r\nflowchart TD\r\n    A[🍴 Fork Repository] --\u003e B[🌟 Create Feature Branch]\r\n    B --\u003e C[💻 Make Changes]\r\n    C --\u003e D[🧪 Add Tests]\r\n    D --\u003e E[✅ Run Quality Checks]\r\n    E --\u003e F[📝 Commit Changes]\r\n    F --\u003e G[📤 Push to Branch]  \r\n    G --\u003e H[🔄 Create Pull Request]\r\n    H --\u003e I[👀 Code Review]\r\n    I --\u003e J{✅ Approved?}\r\n    J --\u003e|Yes| K[🎉 Merge to Main]\r\n    J --\u003e|No| L[🔄 Address Feedback]\r\n    L --\u003e I\r\n    \r\n    classDef process fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#01579b\r\n    classDef decision fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#e65100\r\n    classDef success fill:#e8f5e8,stroke:#388e3c,stroke-width:2px,color:#1b5e20\r\n    classDef feedback fill:#fce4ec,stroke:#c2185b,stroke-width:2px,color:#880e4f\r\n    \r\n    class A,B,C,D,E,F,G,H,I process\r\n    class J decision\r\n    class K success\r\n    class L feedback\r\n```\r\n\r\n### 📋 Contribution Guidelines\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🎯 Areas where you can contribute\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### 🐛 Bug Fixes\r\n- Report issues with detailed reproduction steps\r\n- Fix existing bugs and improve stability\r\n- Add error handling and edge cases\r\n\r\n#### ✨ Feature Enhancements\r\n- Improve existing components and functionality  \r\n- Add new interactive elements\r\n- Enhance accessibility features\r\n\r\n#### 📚 Documentation\r\n- Improve README and component documentation\r\n- Add code examples and tutorials\r\n- Create video guides and walkthroughs\r\n\r\n#### 🎨 Design Improvements\r\n- Enhance visual design and user experience\r\n- Add new themes and color schemes\r\n- Improve mobile responsiveness\r\n\r\n#### ⚡ Performance Optimizations\r\n- Reduce bundle size and improve loading times\r\n- Optimize images and assets\r\n- Implement advanced caching strategies\r\n\r\n\u003c/details\u003e\r\n\r\n### 🔍 Development Standards\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e📝 Code quality requirements\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Code Style\r\n```bash\r\n# Run linting\r\npnpm lint\r\n\r\n# Format code\r\npnpm format\r\n\r\n# Type checking\r\npnpm type-check\r\n```\r\n\r\n#### Commit Convention\r\n```bash\r\n# Use conventional commits\r\nfeat: add new component\r\nfix: resolve navigation bug  \r\ndocs: update README\r\nstyle: format code\r\nrefactor: restructure components\r\ntest: add unit tests\r\nchore: update dependencies\r\n```\r\n\r\n#### Pull Request Template\r\n- **Description**: Clear explanation of changes\r\n- **Type**: Bug fix, feature, documentation, etc.\r\n- **Testing**: How the changes were tested\r\n- **Screenshots**: For UI changes\r\n- **Breaking Changes**: Any breaking changes\r\n\r\n\u003c/details\u003e\r\n\r\n### 🏆 Recognition\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🌟 Contributor Hall of Fame\u003c/b\u003e\u003c/summary\u003e\r\n\r\n\u003c!-- This will be populated as contributors join --\u003e\r\n\r\n| Contributor | Contributions | GitHub |\r\n|-------------|---------------|--------|\r\n| **K Rajtilak** | Creator \u0026 Maintainer | [@rajtilak-2020](https://github.com/rajtilak-2020) |\r\n| *Your name here* | *Your contributions* | *Your GitHub* |\r\n\r\n*Want to see your name here? Start contributing today!*\r\n\r\n\u003c/details\u003e\r\n\r\n## 🔒 Security\r\n\r\n### 🛡️ Security Measures\r\n\r\n- **Content Security Policy (CSP)** - Prevents XSS attacks\r\n- **HTTPS Everywhere** - All traffic encrypted via Vercel SSL\r\n- **Dependency Scanning** - Automated vulnerability checks\r\n- **Environment Variables** - Secure configuration management\r\n- **Input Validation** - All user inputs properly sanitized\r\n\r\n### 📋 Security Reporting\r\n\r\nIf you discover a security vulnerability, please send an email to [rajtilak1062020@gmail.com](mailto:rajtilak1062020@gmail.com). All security vulnerabilities will be promptly addressed.\r\n\r\n## 📈 Analytics \u0026 Monitoring\r\n\r\n### 📊 Performance Monitoring\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🔍 Monitoring stack\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Real User Monitoring (RUM)\r\n- **Vercel Analytics** - Page views, user sessions\r\n- **Core Web Vitals** - Performance metrics\r\n- **Error Tracking** - JavaScript error monitoring\r\n- **Uptime Monitoring** - 99.9% availability tracking\r\n\r\n#### Development Analytics\r\n- **Bundle Analyzer** - JavaScript bundle optimization\r\n- **Lighthouse CI** - Automated performance testing  \r\n- **TypeScript Compiler** - Build-time error detection\r\n- **ESLint Reports** - Code quality metrics\r\n\r\n\u003c/details\u003e\r\n\r\n### 📊 Traffic Analytics\r\n\r\n```mermaid\r\npie title Website Traffic Sources\r\n    \"Direct\" : 35\r\n    \"GitHub\" : 25  \r\n    \"Search Engines\" : 20\r\n    \"Social Media\" : 15\r\n    \"Referrals\" : 5\r\n```\r\n\r\n## 🚀 Deployment\r\n\r\n### 🌍 Deployment Options\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e⚡ Multiple deployment strategies\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Vercel (Recommended)\r\n```bash\r\n# Install Vercel CLI\r\nnpm i -g vercel\r\n\r\n# Deploy to Vercel\r\nvercel --prod\r\n```\r\n\r\n#### Netlify\r\n```bash\r\n# Build the project\r\npnpm build\r\n\r\n# Deploy to Netlify\r\nnetlify deploy --prod --dir=out\r\n```\r\n\r\n#### Docker\r\n```dockerfile\r\n# Dockerfile included in repo\r\ndocker build -t portfolio .\r\ndocker run -p 3000:3000 portfolio\r\n```\r\n\r\n#### Self-hosted\r\n```bash\r\n# Build for production\r\npnpm build\r\n\r\n# Start production server\r\npnpm start\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n### ⚙️ Environment Configuration\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🔧 Environment variables setup\u003c/b\u003e\u003c/summary\u003e\r\n\r\n```env\r\n# .env.local template\r\nNEXT_PUBLIC_SITE_URL=https://your-domain.com\r\nNEXT_PUBLIC_SITE_NAME=\"Your Portfolio\"\r\nNEXT_PUBLIC_AUTHOR_NAME=\"Your Name\"\r\n\r\n# Analytics (Optional)\r\nNEXT_PUBLIC_GA_ID=your-google-analytics-id\r\nNEXT_PUBLIC_HOTJAR_ID=your-hotjar-id\r\n\r\n# Contact Form (Optional) \r\nCONTACT_EMAIL=your-email@example.com\r\nSMTP_HOST=your-smtp-host\r\nSMTP_PORT=587\r\n\r\n# Social Links\r\nNEXT_PUBLIC_GITHUB_URL=https://github.com/yourusername\r\nNEXT_PUBLIC_LINKEDIN_URL=https://linkedin.com/in/yourprofile\r\nNEXT_PUBLIC_TWITTER_URL=https://twitter.com/yourusername\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## 🔧 Troubleshooting\r\n\r\n### 🚨 Common Issues \u0026 Solutions\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🔍 Quick fixes for common problems\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Build Errors\r\n```bash\r\n# Clear cache and reinstall\r\nrm -rf .next node_modules package-lock.json\r\npnpm install\r\n\r\n# Clear Vercel cache\r\nvercel --prod --force\r\n```\r\n\r\n#### TypeScript Errors\r\n```bash\r\n# Run type checking\r\npnpm type-check\r\n\r\n# Fix auto-fixable issues\r\npnpm lint:fix\r\n```\r\n\r\n#### Styling Issues\r\n```bash\r\n# Rebuild Tailwind\r\npnpm build:css\r\n\r\n# Check Tailwind config\r\npnpm tailwindcss --help\r\n```\r\n\r\n#### Performance Issues\r\n```bash\r\n# Analyze bundle size\r\npnpm analyze\r\n\r\n# Run Lighthouse audit\r\npnpm lighthouse\r\n```\r\n\r\n#### MDX Content Issues\r\n```bash\r\n# Validate MDX files\r\npnpm mdx:validate\r\n\r\n# Check content structure\r\npnpm content:check\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n### 🔧 Debug Mode\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e🐛 Enable debug logging\u003c/b\u003e\u003c/summary\u003e\r\n\r\n```bash\r\n# Enable Next.js debug mode\r\nDEBUG=next* pnpm dev\r\n\r\n# Enable Vercel debug mode\r\nVERCEL_DEBUG=1 vercel dev\r\n\r\n# View detailed build logs  \r\nVERBOSE=1 pnpm build\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n## 📊 Project Statistics\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n### 📈 Repository Stats\r\n\r\n![GitHub stars](https://img.shields.io/github/stars/rajtilak-2020/K-Rajtilak_s-Portfolio-V4?style=social)\r\n![GitHub forks](https://img.shields.io/github/forks/rajtilak-2020/K-Rajtilak_s-Portfolio-V4?style=social)\r\n![GitHub watchers](https://img.shields.io/github/watchers/rajtilak-2020/K-Rajtilak_s-Portfolio-V4?style=social)\r\n\r\n### 🔢 Codebase Metrics\r\n\r\n| Metric | Value |\r\n|--------|--------|\r\n| **Lines of Code** | ~15,000+ |\r\n| **Components** | 50+ |\r\n| **Pages** | 10+ |\r\n| **Blog Posts** | Dynamic |\r\n| **Bundle Size** | \u003c 200KB |\r\n| **Dependencies** | \u003c 50 |\r\n\r\n\u003c/div\u003e\r\n\r\n## 🛣️ Roadmap\r\n\r\n### 🎯 Upcoming Features\r\n\r\n```mermaid\r\ntimeline\r\n    title Portfolio Development Roadmap\r\n    \r\n    section Q1 2024\r\n        Enhanced Animations    : Magic UI improvements\r\n                                : Micro-interactions\r\n        Blog System           : Search functionality\r\n                              : Categories \u0026 tags\r\n        \r\n    section Q2 2024  \r\n        Mobile App            : React Native version\r\n                              : Offline reading\r\n        CMS Integration       : Headless CMS setup\r\n                              : Content management\r\n        \r\n    section Q3 2024\r\n        AI Features           : Content recommendations\r\n                              : Smart search\r\n        Internationalization : Multi-language support\r\n                              : RTL layouts\r\n                              \r\n    section Q4 2024\r\n        Analytics Dashboard   : Custom analytics\r\n                              : User insights  \r\n        Community Features    : Comments system\r\n                              : Newsletter signup\r\n```\r\n\r\n### 🎉 Version History\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003e📋 Changelog and version history\u003c/b\u003e\u003c/summary\u003e\r\n\r\n#### Version 4.0.0 (Current)\r\n- ✨ Complete rewrite with Next.js 14\r\n- 🎨 New design system with ShadCN/UI\r\n- ⚡ Performance optimizations\r\n- 📱 Enhanced mobile experience\r\n- 🌙 Improved dark mode\r\n\r\n#### Version 3.0.0\r\n- 🚀 Next.js 13 with App Router\r\n- 💫 Magic UI integration\r\n- 📝 MDX blog system\r\n- 🎯 SEO improvements\r\n\r\n#### Version 2.0.0  \r\n- ⚛️ React 18 upgrade\r\n- 🎨 Tailwind CSS integration\r\n- 📱 Mobile-first design\r\n- ⚡ Performance focus\r\n\r\n#### Version 1.0.0\r\n- 🎯 Initial release\r\n- 📄 Static HTML/CSS/JS\r\n- 🎨 Basic responsive design\r\n\r\n\u003c/details\u003e\r\n\r\n## 💝 Acknowledgments\r\n\r\n### 🙏 Special Thanks\r\n\r\n**Inspiration \u0026 Resources**\r\n\r\n- **[Dillion Verma](https://github.com/dillionverma/)** - Base template inspiration\r\n- **[ShadCN](https://github.com/shadcn)** - Amazing component library  \r\n- **[Magic UI Team](https://magicui.design/)** - Beautiful animations\r\n- **[Vercel Team](https://vercel.com/)** - Excellent platform and tools\r\n- **[Next.js Team](https://nextjs.org/)** - Outstanding React framework\r\n\r\n\u003c/div\u003e\r\n\r\n### 🌟 Community\r\n\r\n- **Open Source Community** - For the amazing tools and libraries\r\n- **Design Community** - For inspiration and feedback\r\n- **Developer Community** - For knowledge sharing and support\r\n\r\n## 📄 License\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n**MIT License**\r\n\r\n```\r\nCopyright (c) 2024 K Rajtilak\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy\r\nof this software and associated documentation files (the \"Software\"), to deal\r\nin the Software without restriction, including without limitation the rights\r\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\ncopies of the Software, and to permit persons to whom the Software is\r\nfurnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in all\r\ncopies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\r\nSOFTWARE.\r\n```\r\n\r\n[📄 Full License](./LICENSE)\r\n\r\n\u003c/div\u003e\r\n\r\n## 📞 Contact \u0026 Support\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n### 🌐 Connect with Me\r\n\r\n[![Website](https://img.shields.io/badge/🌐%20Website-krajtilak.vercel.app-blue?style=for-the-badge)](https://krajtilak.vercel.app)\r\n[![GitHub](https://img.shields.io/badge/GitHub-rajtilak--2020-black?style=for-the-badge\u0026logo=github)](https://github.com/rajtilak-2020)\r\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-krajtilak2020-0077B5?style=for-the-badge\u0026logo=linkedin)](https://www.linkedin.com/in/krajtilak2020)\r\n[![Email](https://img.shields.io/badge/Email-rajtilak1062020%40gmail.com-red?style=for-the-badge\u0026logo=gmail)](mailto:rajtilak1062020@gmail.com)\r\n\r\n\u003c/div\u003e\r\n\r\n### 💬 Get Support\r\n\r\n- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/issues)\r\n- 💡 **Feature Requests**: [GitHub Discussions](https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/discussions)\r\n- ❓ **Questions**: [Email Support](mailto:rajtilak1062020@gmail.com)\r\n- 📚 **Documentation**: [GitHub Wiki](https://github.com/rajtilak-2020/K-Rajtilak_s-Portfolio-V4/wiki)\r\n\r\n### 🤝 Community\r\n\r\nJoin our growing community of developers and creators!\r\n\r\n- 🌟 **Star this repo** if you find it useful\r\n- 🍴 **Fork and customize** for your own portfolio\r\n- 📢 **Share with others** who might benefit\r\n- 🤝 **Contribute** to make it even better\r\n\r\n### 🚀 Ready to build your own portfolio?\r\n\r\nFeel free to fork this repository and make it your own. Don't forget to:\r\n- ⭐ Star the repo if you found it helpful\r\n- 🔄 Share it with your network  \r\n- 🤝 Contribute improvements back to the community\r\n\r\n---\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n    \r\n**Thank you for checking out my portfolio project!**\r\n\r\nThis portfolio represents my journey as a developer and my passion for creating beautiful, performant web experiences. Whether you're here to learn, contribute, or just browse, I appreciate your time and interest.\r\n\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n### 💫 *\"Code is poetry, and every portfolio tells a story\"*\r\n\r\n**Happy coding! 🚀**\r\n\r\n*Made with ❤️, ☕, and countless hours of debugging*\r\n\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"right\"\u003e\r\n\r\n![Visitor Count](https://visitor-badge.laobi.icu/badge?page_id=rajtilak-2020.K-Rajtilak_s-Portfolio-V4)\r\n\r\n\u003c/div\u003e\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajtilak-2020%2FPortfolio-V4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajtilak-2020%2FPortfolio-V4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajtilak-2020%2FPortfolio-V4/lists"}