{"id":29161254,"url":"https://github.com/codemeapixel/portfolio","last_synced_at":"2026-03-01T03:33:36.702Z","repository":{"id":262643065,"uuid":"723532812","full_name":"CodeMeAPixel/Portfolio","owner":"CodeMeAPixel","description":"My personal portfolio, shop, blog and documentation site built using TanStack Start, Prisma and Tailwind CSS","archived":false,"fork":false,"pushed_at":"2026-02-19T03:15:58.000Z","size":149777,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-19T03:26:10.399Z","etag":null,"topics":["blog","documentation","portfolio","react","tailwindcss","tanstack","tanstack-start","typescript"],"latest_commit_sha":null,"homepage":"https://codemeapixel.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeMeAPixel.png","metadata":{"files":{"readme":null,"changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-11-26T00:45:54.000Z","updated_at":"2026-02-18T21:19:02.000Z","dependencies_parsed_at":"2025-04-11T23:44:50.815Z","dependency_job_id":null,"html_url":"https://github.com/CodeMeAPixel/Portfolio","commit_stats":null,"previous_names":["therealtoxicdev/portfolio","codemeapixel/portfolio"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/CodeMeAPixel/Portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeMeAPixel%2FPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeMeAPixel%2FPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeMeAPixel%2FPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeMeAPixel%2FPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeMeAPixel","download_url":"https://codeload.github.com/CodeMeAPixel/Portfolio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeMeAPixel%2FPortfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29959379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"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":["blog","documentation","portfolio","react","tailwindcss","tanstack","tanstack-start","typescript"],"created_at":"2025-07-01T03:09:49.015Z","updated_at":"2026-03-01T03:33:36.688Z","avatar_url":"https://github.com/CodeMeAPixel.png","language":"TypeScript","readme":"# CodeMeAPixel Portfolio\n\n[![Next.js](https://img.shields.io/badge/Next.js-15.3.0-black?logo=next.js\u0026style=flat-square)](https://nextjs.org/)\n[![React](https://img.shields.io/badge/React-19.0.0-61DAFB?logo=react\u0026style=flat-square\u0026logoColor=white)](https://react.dev/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript\u0026style=flat-square\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4.17-38bdf8?logo=tailwindcss\u0026style=flat-square\u0026logoColor=white)](https://tailwindcss.com/)\n[![Framer Motion](https://img.shields.io/badge/Framer_Motion-11.15.0-0055FF?logo=framer\u0026style=flat-square\u0026logoColor=white)](https://www.framer.com/motion/)\n[![License: MIT](https://img.shields.io/github/license/CodeMeAPixel/portfolio?style=flat-square)](LICENSE)\n[![Open in GitHub Codespaces](https://img.shields.io/badge/Codespaces-Open%20in%20GitHub-181717?logo=github\u0026style=flat-square)](https://github.com/codemeapixel/portfolio/codespaces)\n\n\u003e **A modern, full-stack developer portfolio built with Next.js 15, React 19, TypeScript, and Tailwind CSS. Optimized for performance, accessibility, and exceptional developer experience.**\n\n---\n\n## 🚀 Features\n\n- **Next.js 15+**: App Router, SSR, SSG, ISR, API routes, and Turbopack acceleration.\n- **React 19**: Utilizing the latest React version with improved performance.\n- **TypeScript**: End-to-end type safety with full TypeScript integration.\n- **Tailwind CSS**: Utility-first, responsive design with multiple theme support.\n- **MDX Blog**: Write posts with Markdown + JSX featuring syntax highlighting (via Shiki/Rehype Pretty Code), line numbers, and custom components.\n- **Dynamic Projects \u0026 Referrals**: Modular TypeScript data files for easy content management.\n- **Animated UI**: Powered by Framer Motion v11, custom CSS animations, and engaging pixel/glitch effects.\n- **Theme System**: Multiple color themes (blue, purple, teal, rose, amber) with instant switching and local storage persistence.\n- **Responsive Design**: Mobile-first approach with optimized layouts for all devices.\n- **Accessibility**: WCAG-compliant with keyboard navigation, semantic HTML, and proper contrast ratios.\n- **Playlist \u0026 Music Player**: Custom React audio implementation with playlists and pagination.\n- **Social Integration**: Configurable link hub with tooltips powered by Radix UI.\n- **Advanced SEO**: Comprehensive metadata, Open Graph tags, and Twitter cards for maximum discoverability.\n- **Vercel Optimized**: Ready for edge deployment with Vercel's platform features.\n- **Developer Experience**: ESLint configuration, TypeScript strict mode, and organized project structure.\n\n---\n\n## 🛠️ Tech Stack\n\n| Tool                  | Version    | Description                                                  |\n|-----------------------|------------|--------------------------------------------------------------|\n| [Next.js]             | 15.3.0     | React framework with App Router, SSR, and edge capabilities  |\n| [React]               | 19.0.0     | UI library with the latest improvements and concurrent features |\n| [TypeScript]          | 5.x        | Static typing for safer, more maintainable code              |\n| [Tailwind CSS]        | 3.4.17     | Utility-first CSS framework with theming support             |\n| [Framer Motion]       | 11.15.0    | Production-ready motion library for React                    |\n| [MDX]                 | 5.0.0      | Markdown + JSX for rich content authoring                    |\n| [Radix UI]            | 1.x-2.x    | Unstyled, accessible UI primitives for custom components     |\n| [React Icons]         | 5.5.0      | Comprehensive icon library with consistent design            |\n| [Rehype Pretty Code]  | 0.14.0     | Syntax highlighting with themes and line highlighting        |\n| [Shiki]               | 3.2.1      | TextMate grammar-based syntax highlighter                    |\n| [Tailwind Merge]      | 2.6.0      | Utility for merging Tailwind CSS classes                     |\n| [date-fns]            | 4.1.0      | Modern JavaScript date utility library                       |\n| [clsx]                | 2.1.1      | Tiny utility for constructing className strings conditionally |\n| [Turbopack]           | Built-in   | Incremental bundler for faster builds and refreshes          |\n\n---\n\n## 📦 Project Structure\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eClick to expand\u003c/strong\u003e\u003c/summary\u003e\n\n```\nsrc/\n  app/                # Next.js app directory (routes, pages, layouts)\n  components/         # Reusable UI components (layouts, static, ui, etc.)\n  lib/                # Data, API clients, and utility functions\n    links/            # Link hub, playlists, categories, etc.\n    projects/         # Project data and logic\n  posts/              # Blog posts in MDX format\n  styles/             # Tailwind and global CSS\n  types/              # TypeScript types and interfaces\npublic/               # Static assets (images, covers, previews)\n```\n\u003c/details\u003e\n\n---\n\n## 📝 Usage\n\n### 1. **Install dependencies**\n\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n# or\nbun install\n```\n\n### 2. **Run the development server**\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to view the site.\n\n### 3. **Build for production**\n\n```bash\nnpm run build\nnpm start\n```\n\n---\n\n## ✍️ Adding Content\n\n### Blog Posts\n\n- Add `.mdx` files to `src/posts/`.\n- Use frontmatter for metadata:\n  ```md\n  ---\n  title: 'My Post'\n  date: '2025-03-01'\n  description: 'A short summary.'\n  tags: ['Next.js', 'React']\n  ---\n  ```\n\n### Projects\n\n- Add or edit files in `src/lib/projects/data/`.\n- Use the `Project` type for structure and documentation.\n\n### Referrals\n\n- Add or edit files in `src/lib/referrals/data/`.\n- Use the `Referral` and `ReferralCategory` types.\n\n---\n\n## 🎨 Theming\n\n- Supports multiple color themes (blue, purple, teal, rose, amber, etc.).\n- Theme is persisted and can be changed via the UI.\n\n---\n\n## 🎵 Playlist \u0026 Music Player\n\n- Curated playlists in `src/lib/links/data/playlist/`.\n- Custom React music player with pagination and genre filtering.\n\n---\n\n## 🧩 Customization\n\n- **Navigation:** Edit `src/components/static/Navbar.tsx` for links and icons.\n- **Social Links:** Configure in `src/lib/links/data/`.\n- **Animations:** Customize in `src/styles/globals.css` and Framer Motion props.\n\n---\n\n## 🛡️ Accessibility \u0026 SEO\n\n- Keyboard navigable, focus-visible, and color contrast checked.\n- SEO meta tags and Open Graph support for rich sharing.\n\n---\n\n## 📄 License\n\nThis project is [MIT licensed](LICENSE).\n\n---\n\n## 🙋‍♂️ Author\n\n**CodeMeAPixel**  \n[Portfolio](https://codemeapixel.dev) • [GitHub](https://github.com/CodeMeAPixel) • [Twitter](https://twitter.com/CodeMeAPixel)\n\n---\n\n## ⭐️ Show your support\n\nIf you like this project, please consider starring the repo and sharing it!\n\n[![Star on GitHub](https://img.shields.io/github/stars/CodeMeAPixel/portfolio?style=social)](https://github.com/CodeMeAPixel/portfolio)\n\n---\n\n[Next.js]: https://nextjs.org/\n[React]: https://react.dev/\n[TypeScript]: https://www.typescriptlang.org/\n[Tailwind CSS]: https://tailwindcss.com/\n[Framer Motion]: https://www.framer.com/motion/\n[MDX]: https://mdxjs.com/\n[Radix UI]: https://www.radix-ui.com/\n[PrismJS]: https://prismjs.com/\n[React Icons]: https://react-icons.github.io/react-icons/\n[Vercel]: https://vercel.com/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemeapixel%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemeapixel%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemeapixel%2Fportfolio/lists"}