[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80459":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":13,"forks30d":13,"starsTrendScore":17,"compositeScore":18,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":8,"pushedAt":8,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":13,"starSnapshotCount":13,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},80459,"portfolio-template","cupidbity\u002Fportfolio-template","cupidbity",null,"TypeScript",82,17,51,0,8,19,29,24,3.77,false,"main",true,[],"2026-06-12 02:04:02","# Portfolio Template\n\nA customizable personal portfolio website built with React, TypeScript, and Tailwind CSS. Features interactive elements, smooth animations, dark\u002Flight mode, and a clean design.\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (v16 or higher)\n- npm or yarn\n\n### Installation\n\n1. Clone the repository\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fcupidbity\u002Fportfolio-template.git\ncd portfolio-template\n```\n\n2. Install dependencies\n```bash\nnpm install\n```\n\n3. Set up environment variables\n```bash\ncp .env.example .env\n```\n\n4. Start the development server\n```bash\nnpm run dev\n```\n\n5. Build for production\n```bash\nnpm run build\n```\n\n## Customization Guide\n\n### 1. Personal Information\n\n**Name & Title** — Update your name in these files:\n\n| File | What to change |\n|------|---------------|\n| `index.html` | Page `\u003Ctitle>` |\n| `src\u002Fcomponents\u002Fsection\u002FNavigation.tsx` | Nav bar name and aria-label |\n| `src\u002Fcomponents\u002Fsection\u002FAbout.tsx` | Hero greeting text (`AsciiMorphText`) |\n| `src\u002Fcomponents\u002FFooter.tsx` | Copyright name |\n\n**Roles** — Edit the typewriter carousel roles in `src\u002Fcomponents\u002Fsection\u002FAbout.tsx`:\n```tsx\nconst roles = [\n  'Software Engineer',\n  'Full-Stack Developer',\n  \u002F\u002F Add your own roles\n];\n```\n\n### 2. Profile Images\n\nAdd your profile images to `src\u002Fassets\u002F`:\n- `profile1.jpg`\n- `profile2.jpg`\n- `profile3.jpg`\n\nThen uncomment the imports in `src\u002Fassets\u002Findex.ts`:\n```ts\nimport profile1 from '.\u002Fprofile1.jpg';\nimport profile2 from '.\u002Fprofile2.jpg';\nimport profile3 from '.\u002Fprofile3.jpg';\n```\n\nUpdate the captions in `src\u002Fcomponents\u002Fsection\u002FAbout.tsx`:\n```tsx\nconst profileImages = [\n  { src: profile1, caption: \"your caption\" },\n  { src: profile2, caption: \"your caption\" },\n  { src: profile3, caption: \"your caption\" }\n];\n```\n\n### 3. Journal Image\n\nReplace `src\u002Fassets\u002Fjournal.PNG` with your own journal-style background image for the About section.\n\n### 4. Resume\n\nPlace your resume PDF at `public\u002Fresume.pdf` — the Resume button in the About section and Footer link to this path.\n\n### 5. Social Links & Environment Variables\n\nEdit your `.env` file with your actual URLs:\n```env\nVITE_GITHUB_URL=https:\u002F\u002Fgithub.com\u002Fyourusername\nVITE_LINKEDIN_URL=https:\u002F\u002Flinkedin.com\u002Fin\u002Fyourusername\nVITE_EMAIL=your.email@example.com\n\nVITE_GITHUB_PROJECT1_URL=https:\u002F\u002Fgithub.com\u002Fyourusername\u002Fproject-one\nVITE_GITHUB_PROJECT2_URL=https:\u002F\u002Fgithub.com\u002Fyourusername\u002Fproject-two\nVITE_GITHUB_PROJECT3_URL=https:\u002F\u002Fgithub.com\u002Fyourusername\u002Fproject-three\nVITE_GITHUB_PROJECT4_URL=https:\u002F\u002Fgithub.com\u002Fyourusername\u002Fproject-four\n```\n\nThese are consumed in `src\u002Fconfig\u002FsocialLinks.ts` — add more repository entries there as needed.\n\n### 6. Projects\n\n**Gallery cards** — Edit the projects array in `src\u002Fcomponents\u002Fsection\u002FProjects.tsx`:\n```tsx\n{\n  title: \"Your Project\",\n  description: \"A brief description of your project.\",\n  technologies: [\"React\", \"TypeScript\", \"Node.js\"],\n  icon: YourProjectIcon,        \u002F\u002F or use comingSoon as placeholder\n  detailsUrl: \"\u002Fprojects\u002Fyour-project\",\n  githubUrl: socialLinks.repositories.yourProject\n}\n```\n\n**Project icons** — Add icon images to `src\u002Fassets\u002Fproject_icons\u002F` and register them in `src\u002Fassets\u002Fproject_icons\u002Findex.ts`:\n```ts\nimport YourProjectIcon from '.\u002FYourProjectIcon.webp';\nexport { YourProjectIcon };\n```\n\n**Project detail pages** — Create a detail page for each project at `src\u002Fpages\u002Fprojects\u002FYourProject.tsx`. Use the available components:\n- `ProjectLayout` — Page wrapper with dark mode theming\n- `ProjectHeader` — Icon, title, subtitle, GitHub link, feature grid\n- `ImageCarousel` — Screenshot carousel with navigation\n- `ProjectOverview` — Multi-paragraph description\n- `TechStack` — Technology badges\n- `TechnicalHighlights` — Bulleted achievements list\n\n**Project snapshots** — Add screenshot images to `src\u002Fassets\u002Fproject_snapshots\u002Fyour-project\u002F` and import them in `src\u002Fassets\u002Findex.ts`.\n\n**Routing** — Register your project pages in `src\u002FApp.tsx`:\n```tsx\nconst YourProject = lazy(() => import('.\u002Fpages\u002Fprojects\u002FYourProject'))\n\u002F\u002F ...\n\u003CRoute path=\"\u002Fprojects\u002Fyour-project\" element={\u003CYourProject \u002F>} \u002F>\n```\n\n### 7. Experience\n\nEdit `src\u002Fcomponents\u002Fsection\u002FExperience.tsx` with your work history:\n```tsx\n{\n  title: \"Your Job Title\",\n  company: \"Company Name\",\n  location: \"City, State\",\n  period: \"Month Year - Month Year\",\n  description: [\n    \"Your accomplishment or responsibility\",\n  ]\n}\n```\n\n### 8. Certifications\n\nEdit `src\u002Fcomponents\u002Fsection\u002FCertifications.tsx` with your credentials. The section supports two types:\n- **Badges** (e.g., AWS) — with image, title, subtitle, and Credly URL\n- **Credentials** (e.g., CITI) — with image, title, issuer, dates, and credential ID\u002FURL\n\nReplace badge images in `src\u002Fassets\u002Fbadges\u002F` with your own.\n\n### 9. Skills\n\nUpdate your technical skills in `src\u002Fcomponents\u002Fsection\u002FSkills.tsx`. Skill icons are in `src\u002Fassets\u002Ftechstack\u002F`.\n\n## Project Structure\n\n```\nportfolio-template\u002F\n├── src\u002F\n│   ├── assets\u002F\n│   │   ├── project_icons\u002F       # Project icon images\n│   │   ├── project_snapshots\u002F   # Project screenshot folders\n│   │   ├── badges\u002F              # Certification badge images\n│   │   ├── stars\u002F               # Decorative star images\n│   │   ├── stickers\u002F            # Sticker images\n│   │   └── techstack\u002F           # Skill\u002Ftechnology icons\n│   ├── components\u002F\n│   │   ├── section\u002F             # Main page sections\n│   │   ├── project\u002F             # Project detail page components\n│   │   └── ui\u002F                  # Reusable UI components\n│   ├── config\u002F\n│   │   └── socialLinks.ts       # Social media & repo URLs\n│   ├── contexts\u002F\n│   │   └── DarkModeContext.tsx   # Theme management\n│   ├── pages\u002F\n│   │   ├── projects\u002F            # Individual project detail pages\n│   │   └── Contact.tsx          # Contact page\n│   ├── styles\u002F\n│   │   └── colors.ts            # Color palette\n│   └── App.tsx                  # Routes & layout\n├── public\u002F\n│   └── resume.pdf               # Your resume (add this)\n├── .env                         # Your environment variables (create from .env.example)\n└── .env.example                 # Environment variable template\n```\n\n## Features\n\n- Dark\u002Flight mode with system preference detection\n- Interactive ASCII text with morphing effects\n- Draggable star decorations\n- Aurora gradient backgrounds\n- Animated stickers on scroll\n- Image carousel for project screenshots\n- Responsive design across all devices\n- Lazy-loaded routes and components\n\n## Technologies\n\n- React 19, TypeScript, Vite\n- Tailwind CSS, Radix UI, Lucide Icons\n- GSAP, React Spring, OGL (WebGL)\n- React Router DOM\n\n## License\n\nMIT\n","这是一个使用React、TypeScript和Tailwind CSS构建的可定制个人作品集网站模板。项目提供了丰富的互动元素、流畅的动画效果、暗黑\u002F亮色模式切换以及简洁的设计风格，旨在帮助开发者展示其个人信息、技能及项目经历。该模板支持通过修改配置文件轻松添加或更改个人信息、角色描述、头像、简历链接等，并且可以自定义社交平台链接与项目展示内容。适用于希望创建专业在线形象以吸引潜在雇主注意或展示个人项目的前端开发人员和技术爱好者。",2,"2026-06-11 04:00:50","CREATED_QUERY"]