{"id":34826003,"url":"https://github.com/shubhcoding01/viratkohli","last_synced_at":"2026-05-24T03:33:41.243Z","repository":{"id":328814314,"uuid":"1116861526","full_name":"shubhcoding01/viratkohli","owner":"shubhcoding01","description":"Virat Kohli Portfolio | Not Official","archived":false,"fork":false,"pushed_at":"2026-04-01T14:15:59.000Z","size":22527,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-24T03:33:36.415Z","etag":null,"topics":["nextjs"],"latest_commit_sha":null,"homepage":"https://viratkohli-gold.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/shubhcoding01.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-15T13:40:05.000Z","updated_at":"2026-04-01T14:16:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/shubhcoding01/viratkohli","commit_stats":null,"previous_names":["shubhcoding01/viratkohli"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shubhcoding01/viratkohli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhcoding01%2Fviratkohli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhcoding01%2Fviratkohli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhcoding01%2Fviratkohli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhcoding01%2Fviratkohli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubhcoding01","download_url":"https://codeload.github.com/shubhcoding01/viratkohli/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhcoding01%2Fviratkohli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33420660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"online","status_checked_at":"2026-05-24T02:00:06.296Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["nextjs"],"created_at":"2025-12-25T15:10:04.263Z","updated_at":"2026-05-24T03:33:41.235Z","avatar_url":"https://github.com/shubhcoding01.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 👑 Virat Kohli 3D Portfolio - The King's Arena\n\nA high-performance, cinematic portfolio website dedicated to the G.O.A.T, Virat Kohli. This project pushes the boundaries of web development by combining immersive 3D rendering with broadcast-quality motion graphics and a \"King-Level\" user experience.\n\n\u003e **Status:** Active Development\n\u003e **Stack:** Next.js 16, React 19, Three.js (R3F), Framer Motion, Tailwind CSS v4\n\n---\n\n## ⚡ Key Features (Implemented)\n\nWe have moved beyond standard web design to create a \"Hype\" experience:\n\n### 🎬 1. \"The Hype\" Loading Screen\n* **Video Integration:** Seamlessly loops `sign.mp4` (Virat signing the camera) as the base layer.\n* **Glitch Overlay:** Rapid-fire 0.08s image cycling of historical milestones (2008-2025) mixed with a scanline overlay.\n* **Time-Based Loading:** Custom 3.5s \"Hype Cycle\" that forces a high-energy build-up before the site reveals.\n* **Liquid Gold Animation:** A custom CSS fluid fill effect on the percentage counter.\n\n### 🌓 2. Cinematic Hero Section\n* **Split-Screen Gradient:** A custom `linear-gradient` mask that renders the left side pitch-black for readability while fading the right side into the Hero Image.\n* **Smart Countdown:** Real-time logic that automatically detects the *next* match date (checking against current time) and starts a countdown.\n* **Parallax Watermark:** Mouse-tracking \"18\" background watermark that moves in opposition to the cursor.\n\n### ⏳ 3. Sticky Career Timeline\n* **Scroll-Triggered Cross-Fade:** A fixed `sticky` background layer that smoothly fades between era-specific wallpapers (Grayscale → Blur → Visible) as the user scrolls.\n* **3D Flip Cards:** Interactive timeline cards that flip 180° on hover to reveal hidden stats/images.\n* **Negative Margin Layering:** Advanced CSS layering using `-mt-[100vh]` to pull content over a fixed visual layer.\n\n### 🔦 4. Spotlight Stats Grid\n* **Mouse-Tracking Spotlight:** A radial gradient that follows the user's cursor across the grid, revealing the border and grid texture only where the mouse hovers.\n* **3D Tilt:** Cards tilt subtly based on mouse position using `framer-motion` transforms.\n\n---\n\n## 🚀 How to Install \u0026 Run\n\n### Step 1: Clone the Repository\nOpen your terminal and run the following command to download the code:\n\n```bash\ngit clone [https://github.com/shubhcoding01/viratkohli.git](https://github.com/shubhcoding01/viratkohli.git)\ncd viratkohli\nStep 2: Install Required Packages\nThis project uses Next.js 16 and React 19. Run this command to install all dependencies listed in package.json.\n\nBash\n\nnpm install\nTip: If you see peer dependency errors due to React 19, run: npm install --legacy-peer-deps\n\nStep 3: Run the Arena\nStart the local development server:\n\nBash\n\nnpm run dev\nOpen http://localhost:3000 in your browser to enter the arena.\n\n🛠️ Required Packages (Dependencies)\nTo run this project successfully, your package.json must include these key libraries. If you are starting from scratch, install them using the commands below.\n\n1. The 3D Engine (Three.js \u0026 R3F)\nThese packages power the \"Stadium\" and 3D Models.\n\nBash\n\nnpm install three @types/three @react-three/fiber @react-three/drei\n2. Cinematic Effects (Post-Processing)\nRequired for the Bloom (Glow), Glitch, and Vignette effects.\n\nBash\n\nnpm install @react-three/postprocessing postprocessing\n3. Physics \u0026 Interactions\nRequired for realistic collisions (if adding balls/objects).\n\nBash\n\nnpm install @react-three/rapier\n4. Animation \u0026 Motion\nFramer Motion handles the UI (Loading Screen, Hero Split), while GSAP handles complex 3D camera timelines.\n\nBash\n\nnpm install framer-motion gsap @gsap/react\n5. UI, State \u0026 Utils\nZustand manages the global state (Idle vs Aggressive mode). Lenis provides the smooth luxury scrolling.\n\nBash\n\nnpm install zustand lenis clsx tailwind-merge howler\n📂 Project Structure\nThis project follows the \"Canvas vs. DOM\" separation pattern to prevent hydration errors and ensure performance.\n\nPlaintext\n\nsrc/\n├── app/                  # Next.js App Router\n│   ├── (sections)/       # Logical Sections (Hero, Stats, Career)\n│   ├── layout.tsx        # Global Font \u0026 Metadata\n│   └── page.tsx          # Main Entry (Composes sections)\n├── components/\n│   ├── canvas/           # 3D Components (Must go inside \u003cCanvas\u003e)\n│   │   ├── Scene.tsx     # The 3D World Wrapper\n│   │   ├── Effects.tsx   # Bloom, Vignette, Glitch\n│   │   └── Avatar.tsx    # Virat 3D Model\n│   ├── dom/              # 2D UI Components (Standard HTML)\n│   │   ├── LoadingScreen # The Hype Reel\n│   │   ├── Navbar.tsx    # Navigation\n│   │   └── StatCard.tsx  # Spotlight Cards\n│   └── ui/               # Reusable primitives\n├── hooks/\n│   └── useMouse.ts       # Custom hook for parallax/spotlight math\n├── store/\n│   └── useStore.ts       # Global Zustand State\n└── public/               # Assets\n    ├── images/           # Milestones (virat2011.png, viratbg1.png)\n    ├── videos/           # sign.mp4\n    └── models/           # .glb 3D files\n🎨 Asset Credits\nFont: Geist (Vercel) \u0026 Custom Sports Heading Font.\n\nImages: Virat Kohli Official / BCCI / ICC (Used for educational/portfolio demonstration).\n\nVideo: sign.mp4 (Fan Edit / Commercial snippet).\n\n\"I don't play for records, I play for the win.\" — Virat Kohli","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhcoding01%2Fviratkohli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhcoding01%2Fviratkohli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhcoding01%2Fviratkohli/lists"}