{"repo":"jonbrown66/pixel-portfolio","free":true,"listed":false,"github":"https://github.com/jonbrown66/pixel-portfolio","clone":"git clone https://github.com/jonbrown66/pixel-portfolio.git","description":"This is a personal portfolio and blog website built with Next.js, React, and Tailwind CSS. The project features a unique pixel art style and is used to showcase personal projects, share technical articles, and provide information about services.","language":"TypeScript","stars":16,"topics":["8bit-style","blog-starter","nextjs","pixel-art","portfolio-template","react","retro-theme","typescript"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"Retro Pixel Art Portfolio and Blog Starter Template (基于 Next.js 与 Tailwind CSS) 这是一个专为创意开发者、像素艺术家、独立游戏开发者打造的复古 8-bit / 16-bit 像素艺术风格个人作品集与博客网站模版。项目已进行了深度的性能调优与细节优化，确保了在多端设备上均能实现极佳的 SEO (搜索引擎优化) 与 GEO (生成式引擎优化) 效果。 项目核心优化亮点 极致的跳转流畅度与性能优化：重构了博客卡片、作品卡片及服务卡片，将原本耗费主线程 CPU 算力的 JS 动画库 (Framer Motion) 彻底替换为硬件加速的 CSS 过渡与关键帧动画。结合 steps 逐帧函数实现符合复古风的动画入场。首屏 First Load JS 传输大小显著缩减 (博客与作品页 JS 削减至 193 字节)，确保静态导出后页面跳转和加载实现毫秒级瞬间呈现。 健壮的自定义光标交互 (Custom Cursor)：在 PC 端支持精细的可交互节点 hover 状态缩放与旋转物理反馈，同时使用 3D 变换提升滑动帧率。在移动触摸屏设备上加入自适应拦截逻辑，自动销毁光标，解决小黄点残留的痛点。并且通过类名隔离，保障了即使 React 运行时发生崩溃，系统光标也不会彻底消失。 彻底修复水合 mismatch 报错：通过在主题切换按钮中引入挂载状态检测 (Mounted State Verification)，完美消除了 Next.js 与 next-themes 因服务器偏好与客户端初始化不一致引起的 Hydration mismatch 运行时闪退报错。 精简紧凑的页脚占比：重新设计了 Footer 结构，删除了臃肿重复的导航，以极其优雅的一行 Flex 双栏排版呈现在页脚，提升视觉呼吸感。 SEO 与 GEO 双重最佳实践：全站应用语义化 HTML5 标签体系，规范 H1-H6 标题级别。所有博客与项目内容已全部静态化托管 (SSG)，大幅提升 AI 搜索引擎和传统爬虫的抓取精度与分词权重。 核心功能特色 英雄展示区 (Hero Section)：通过 SVG / CSS 动态像素电脑交互效果，凸显您的个人亮点。 关于我们 (About Section)：包含自适应技能条和经历时间线。 精致像素风表单 (Contact Form)：位于独立联系路由，配有精致的 Framer Motion 提交成功反馈弹窗。 静态内容中心 (lib/data.ts)：集中式存储 6 篇精选博客与 6 个精选项目，确保全站跳转可访问，无 404 死链。 明暗模式切换 (Theme Toggle)：支持一键切换黑白像素风。 本地像素图资产化：所有占位图已全部替换为高清晰度的本地像素艺术 WebP 图片，彻底消除外部拉伸大图导致的噪点和白屏延迟。 技术栈选择 (Tech Stack) 核心框架：Next.js (App Router, 支持 Static Exports 静态导出) 渲染库：React 18 & TypeScript 样式工具：Tailwind CSS & Autoprefixer 动画系统：纯 CSS 硬件加速 (Compositor Thread) & Framer Motion 交互组件库：Shadcn/ui & Lucide React 日期格式化：date-fns 本地开发与安装 系统要求 已安装 Node.js (推荐 v18+) 以及 npm / yarn。 安装步骤 1. 克","default_branch":null,"files":null,"tree":[],"storefront":"/r/jonbrown66","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/jonbrown66/pixel-portfolio/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}