[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81386":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},81386,"rbp-portfolio","DavidHDev\u002Frbp-portfolio","DavidHDev","React Bits Pro - free personal portfolio template with smooth animations, project case studies, and a minimal aesthetic.","https:\u002F\u002Frbp-portfolio.vercel.app",null,"TypeScript",44,13,37,0,3,6,7,9,50.14,false,"main",[],"2026-06-12 04:01:33","# Portfolio Template\n\nA Next.js 16+ personal portfolio template built around a signature WebGL flow shader, a magnetic morphing portrait, Lenis smooth scroll, and a calm black-and-white design system. Designed for individual designers and engineers who want a brand-ready scaffold with a distinctive look on day one.\n\n## Features\n\n- ✅ **Next.js 16+** with App Router\n- ✅ **TypeScript** (strict mode)\n- ✅ **Tailwind CSS v4** with token-driven theming\n- ✅ **Dark Mode** via next-themes (class-based) with view-transition reveal\n- ✅ **Motion** via motion\u002Freact with reduced-motion support\n- ✅ **WebGL Flow Shader** — aspect-correct circular fade baked into the fragment, theme-aware bg sync\n- ✅ **Lenis Smooth Scroll** with anchor-link integration\n- ✅ **Portrait Morph** — hover-driven webp swap with magnetic cursor follow\n- ✅ **Polaroid Strip, Skills, Stack, Experience, Education** — co-located content sections for an `\u002Fabout` route\n- ✅ **Projects Grid** — dribbble-style mockup cards with hover lift and image zoom\n- ✅ **Contact Card** — single-click copy email with hover content swap, embedded shader\n- ✅ **Animated Pill Nav** — spring-animated active indicator, hydration-safe theme toggle\n- ✅ **Site Frame** — fixed top\u002Fleft\u002Fright rails with rounded inner corners\n- ✅ **SEO Ready** — metadata, Open Graph, Twitter cards, sitemap, robots\n- ✅ **Accessibility** — skip links, focus rings, ARIA labels, `prefers-reduced-motion` guards\n- ✅ **Edge Compatible** — no Node-only APIs\n\n## Sections Included\n\n- **Nav** — Fixed pill nav with spring-animated active indicator and hydration-safe theme toggle\n- **Hero** — WebGL flow shader backdrop, two-line headline, morphing portrait, magnetic CTAs\n- **Projects** — Grid of dribbble-style project cards with hover lift, image zoom, and external links\n- **About** — Polaroid strip, skills grid, interactive Matter.js stack chips, expandable experience timeline, education list\n- **Contact Card** — Embedded shader, copy-to-clipboard email, secondary social CTAs\n- **Page Backdrop** — Site-wide flow shader, mobile-attenuated, baked radial fade to background\n- **Skip-to-Content** — Keyboard-first accessibility entry point\n\n## Getting Started\n\n### Install dependencies\n\n```bash\nnpm install\n```\n\n### Run development server\n\n```bash\nnpm run dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) in your browser.\n\n## Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm run dev` | Start development server |\n| `npm run build` | Build for production |\n| `npm run start` | Start production server |\n| `npm run lint` | Run ESLint |\n| `npm run lint:fix` | Fix ESLint errors |\n| `npm run format` | Format code with Prettier |\n| `npm run format:check` | Check code formatting |\n| `npm run typecheck` | Run TypeScript type checking |\n\n## Project Structure\n\n```\n├── app\u002F\n│   ├── about\u002F                       # About route\n│   ├── projects\u002F                    # Projects route\n│   ├── globals.css                  # Design tokens, frame, project-card styles\n│   ├── layout.tsx                   # Root layout with providers, nav, backdrop\n│   ├── page.tsx                     # Home page\n│   ├── robots.ts                    # Dynamic robots.txt\n│   ├── sitemap.ts                   # Dynamic sitemap\n│   ├── icon.svg                     # Favicon\n│   └── apple-icon.svg               # Apple touch icon\n├── components\u002F\n│   ├── about\u002F\n│   │   ├── education.tsx            # Education list with bordered logo squares\n│   │   ├── experience.tsx           # Expandable timeline with fade-mask collapse\n│   │   ├── polaroid-strip.tsx       # Tilted polaroid photos with dotted backs\n│   │   ├── skills.tsx               # Skills grid\n│   │   └── stack.tsx                # Matter.js physics-driven tech chips\n│   ├── contact\u002F\n│   │   ├── contact-button.tsx       # Click-to-copy email button\n│   │   ├── contact-card.tsx         # Shader-backed contact card\n│   │   └── contact-card-ctas.tsx    # Social CTAs\n│   ├── hero\u002F\n│   │   ├── hero.tsx                 # Hero layout and copy\n│   │   ├── hero-ctas.tsx            # Magnetic primary\u002Fsecondary CTAs\n│   │   └── portrait-morph.tsx       # Hover-swap portrait with magnetic follow\n│   ├── layout\u002F\n│   │   ├── nav.tsx                  # Pill nav with theme toggle\n│   │   ├── page-backdrop.tsx        # Site-wide shader backdrop\n│   │   ├── providers.tsx            # Theme + smooth-scroll providers\n│   │   ├── skip-to-content.tsx      # Skip link for a11y\n│   │   └── smooth-scroll.tsx        # Lenis smooth-scroll wrapper\n│   ├── projects\u002F\n│   │   └── projects.tsx             # Projects grid\n│   ├── shaders\u002F\n│   │   └── shader-flow.tsx          # WebGL flow shader (raw OGL)\n│   └── ui\u002F\n│       ├── dotted-pattern.tsx       # Shared dotted texture\n│       └── motion-primitives.tsx    # FadeIn, ScaleUnblur entrance helpers\n├── lib\u002F\n│   ├── config.ts                    # Site config\n│   ├── metadata.ts                  # SEO metadata utilities\n│   └── motion.tsx                   # Motion components & hooks\n└── public\u002F\n    ├── josh.webp                    # Default portrait\n    ├── josh_wave.webp               # Hover portrait\n    ├── linkedin.svg                 # Social icon\n    ├── x.svg                        # Social icon\n    └── site.webmanifest             # PWA manifest\n```\n\n## Customization\n\n### 1. Update Site Configuration\n\nEdit `lib\u002Fmetadata.ts` to update:\n- Site name, description, and URL\n- Social media handles\n- Keywords and authors\n\nThe default `siteConfig.url` is `https:\u002F\u002Fexample.com` — replace it with your production URL before deploying so OpenGraph and the sitemap emit correct absolute URLs.\n\n### 2. Replace Brand & Portrait\n\n- Swap `public\u002Fjosh.webp` and `public\u002Fjosh_wave.webp` with your own default + hover portraits. Keep both files the same dimensions and aspect ratio for a clean morph.\n- Update headline, eyebrow, and subtitle copy in `components\u002Fhero\u002Fhero.tsx`.\n- Update social handles and email in `components\u002Fcontact\u002Fcontact-card.tsx` and `components\u002Fcontact\u002Fcontact-card-ctas.tsx`.\n\n### 3. Update About Content\n\nAll about-page content is co-located in its component file — there is no separate content directory.\n\n- `components\u002Fabout\u002Fpolaroid-strip.tsx` — image paths and captions\n- `components\u002Fabout\u002Fskills.tsx` — skill list\n- `components\u002Fabout\u002Fstack.tsx` — tech logos and physics chips\n- `components\u002Fabout\u002Fexperience.tsx` — roles, companies, dates, descriptions\n- `components\u002Fabout\u002Feducation.tsx` — schools, programs, dates\n\n### 4. Update Projects\n\nEdit the project array in `components\u002Fprojects\u002Fprojects.tsx`. Each entry includes a title, description, image (dribbble mockup or your own), and external link.\n\n### 5. Replace Icons\n\nReplace the following files with your brand assets:\n- `app\u002Ficon.svg` — Favicon (32x32)\n- `app\u002Fapple-icon.svg` — Apple touch icon (180x180)\n- `public\u002Fog-image.png` — Open Graph image (1200x630)\n\n### 6. Tune the Shader\n\nThe flow shader (`components\u002Fshaders\u002Fshader-flow.tsx`) is used by both the page backdrop and the contact card. Key knobs (all exposed as props with sensible defaults):\n\n- `colorLowA`, `colorHighA` — palette stops in linear RGB\n- `flowSpeed` — `[x, y]` flow vector\n- `iterations` — domain-warp iteration count (up to 24)\n- `scale` — domain scale\n- `brightness` — output multiplier\n- `fadeCx`, `fadeCy`, `fadeRx`, `fadeRy` — aspect-correct circular fade center and radii. The fade is baked into the fragment shader and reads `--background` from CSS so theme changes are picked up automatically via a `MutationObserver` on `\u003Chtml>`.\n\nThe shader:\n- Caps DPR at `min(devicePixelRatio, 1.25)` for `ShaderFlow`\n- Sizes to host container via `ResizeObserver`\n- Pauses via `IntersectionObserver` when offscreen and on `visibilitychange`\n- Uses `highp` precision; renders a single opaque draw (no CSS mask layers)\n\n### 7. Add Routes\n\n```tsx\n\u002F\u002F app\u002Fcontact\u002Fpage.tsx\nimport { createMetadata } from \"@\u002Flib\u002Fmetadata\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = createMetadata({\n  title: \"Contact\",\n  description: \"Get in touch.\",\n  path: \"\u002Fcontact\",\n});\n\nexport default function ContactPage() {\n  return \u003Cmain id=\"main-content\">...\u003C\u002Fmain>;\n}\n```\n\n## Design System\n\n### Colors\n\n- `--background` \u002F `--foreground` — Page background and text\n- `--muted` \u002F `--muted-foreground` — Subtle surfaces and secondary text\n- `--border` — Hairline rails and dividers\n- `--ring` — Focus rings\n- `--frame` — Site-frame color (matches `--background`)\n\nThe palette is strict black and white. No accent or semantic color hues are used.\n\n### Typography\n\n- **Sans:** Geist Sans\n- **Mono:** Geist Mono\n- **Serif:** Fraunces (used selectively for display headlines)\n\n### Layout Conventions\n\n- Headlines: maximum two lines, no italic, no em-dashes\n- Site frame: fixed top + left + right rails with two top corner cutouts (desktop only; hidden under 850px)\n- Card hovers: project cards use a single resting + single hover shadow tier with translate-y lift\n- No `backdrop-blur` (except the experience collapsed-fade)\n- Cursor: `pointer` on all clickable nav and CTA items\n\n## Accessibility\n\nThe template includes:\n- Skip-to-content link\n- Visible focus rings on all interactive elements\n- ARIA labels on toggles, social links, and the contact button\n- `prefers-reduced-motion` guards on the theme toggle view-transition\n- Shaders pause when offscreen and on tab hide\n- Proper heading hierarchy (single `\u003Ch1>` per page)\n- WCAG 2.1 AA contrast compliance in both themes\n\n## Performance\n\n- WebGL context cleanup on unmount via `WEBGL_lose_context`\n- Single mount-once shader effect; uniforms updated via refs\n- Shaders pause when offscreen (`IntersectionObserver`) and on tab hide (`visibilitychange`)\n- DPR capped to keep shading cost bounded on retina displays\n- Page-backdrop fade is baked into the fragment shader (single opaque draw, no mask layers)\n- Matter.js is dynamic-imported inside the stack section\n- Lenis smooth scroll runs on a single rAF loop\n- Edge-compatible runtime\n\n## Notes\n\n- The `next.config.ts` `images.remotePatterns` allows `images.unsplash.com` and `cdn.dribbble.com` for the polaroid and project mockups respectively.\n- The portfolio uses a single `@\u002F` path alias.\n- The project image cards use a disclaimer comment at the top of `components\u002Fprojects\u002Fprojects.tsx` noting that dribbble mockups are placeholders to be replaced with your own work.\n\n## License\n\nThis template is free to use in personal and commercial projects. You may not resell or redistribute the template itself.\n","React Bits Pro 是一个免费的个人作品集模板，具有流畅的动画、项目案例研究和简约美学。该项目基于Next.js 16+构建，采用TypeScript严格模式编写，并使用Tailwind CSS v4进行样式设计。它具备暗黑模式切换、响应式WebGL流体效果、Lenis平滑滚动以及磁性变形肖像等特性。此外，还提供了丰富的交互元素如项目网格、技能展示和个人经历时间线等。此模板非常适合希望快速搭建个性化在线简历或作品展示平台的设计者与工程师使用。",2,"2026-06-11 04:04:52","CREATED_QUERY"]