{"id":25522442,"url":"https://github.com/kleviss/klevs-portfolio-main","last_synced_at":"2026-05-03T07:48:00.570Z","repository":{"id":267293788,"uuid":"900802881","full_name":"kleviss/klevs-portfolio-main","owner":"kleviss","description":"Gjej Makine Albania - Inovative App for finding cars in Albania","archived":false,"fork":false,"pushed_at":"2025-01-12T16:23:20.000Z","size":2476,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-12T16:33:46.787Z","etag":null,"topics":["expo","monorepo","pnpm","portofolio-website"],"latest_commit_sha":null,"homepage":"","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/kleviss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2024-12-09T13:56:03.000Z","updated_at":"2025-01-12T16:23:23.000Z","dependencies_parsed_at":"2024-12-09T14:48:24.533Z","dependency_job_id":"0caa3774-cf99-4391-b656-28f7f7d850ba","html_url":"https://github.com/kleviss/klevs-portfolio-main","commit_stats":null,"previous_names":["kleviss/klevs-portfolio-main"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleviss%2Fklevs-portfolio-main","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleviss%2Fklevs-portfolio-main/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleviss%2Fklevs-portfolio-main/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleviss%2Fklevs-portfolio-main/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kleviss","download_url":"https://codeload.github.com/kleviss/klevs-portfolio-main/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239708963,"owners_count":19684168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["expo","monorepo","pnpm","portofolio-website"],"created_at":"2025-02-19T18:19:51.195Z","updated_at":"2026-05-03T07:48:00.561Z","avatar_url":"https://github.com/kleviss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e🚀 Klevis Portfolio\u003c/h1\u003e\n  \u003cp\u003e\u003cem\u003eA modern, interactive portfolio built with Next.js, MDX, and a powerful set of custom components\u003c/em\u003e\u003c/p\u003e\n  \n  [![Next.js](https://img.shields.io/badge/Next.js-13.1.1-black?style=for-the-badge\u0026logo=next.js)](https://nextjs.org/)\n  [![TypeScript](https://img.shields.io/badge/TypeScript-5.0.0-blue?style=for-the-badge\u0026logo=typescript)](https://www.typescriptlang.org/)\n  [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.2.4-38B2AC?style=for-the-badge\u0026logo=tailwind-css)](https://tailwindcss.com/)\n  [![MDX](https://img.shields.io/badge/MDX-2.2.1-1C1E24?style=for-the-badge\u0026logo=mdx)](https://mdxjs.com/)\n  \n  \u003cp\u003e\n    \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n    \u003ca href=\"#tech-stack\"\u003eTech Stack\u003c/a\u003e •\n    \u003ca href=\"#mdx-components-library\"\u003eComponents\u003c/a\u003e •\n    \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e •\n    \u003ca href=\"#customization\"\u003eCustomization\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## ✨ Features\n\n- 🎨 **Dynamic Theme System** - Multiple accent colors with real-time switching\n- 📝 **Rich MDX Components** - Enhanced content creation with custom React components\n- 🌙 **Dark/Light Mode** - Seamless theme switching with next-themes\n- 📱 **Responsive Design** - Mobile-first approach with Tailwind CSS\n- 🎯 **Interactive Elements** - Engaging user interface components\n- 🎯 **Graphics Projects Elements** - Engaging graphics for projects\n- 🔧 **Developer Experience** - TypeScript, ESLint, Prettier, and more\n\n---\n\n## 🛠️ Tech Stack\n\n| Technology        | Purpose                            |\n| ----------------- | ---------------------------------- |\n| **Next.js 13**    | React framework with app directory |\n| **MDX**           | Markdown with JSX for rich content |\n| **TypeScript**    | Type safety and better DX          |\n| **Tailwind CSS**  | Utility-first CSS framework        |\n| **Framer Motion** | Smooth animations                  |\n| **Prisma**        | Database ORM                       |\n| **Headless UI**   | Accessible UI components           |\n\n---\n\n## 📦 MDX Components Library\n\nThis portfolio features a comprehensive set of custom MDX components that make content creation a breeze:\n\n### 🎨 AccentDemo\n\nInteractive accent color switcher that dynamically changes the entire site's color scheme.\n\n```tsx\n\u003cAccentDemo /\u003e\n```\n\n**Available Colors:** Violet, Red, Blue, Orange, Green, Pink\n\n### 📢 Callout\n\nAttention-grabbing callout boxes for important information.\n\n```tsx\n\u003cCallout variant=\"info\"\u003e\n  This is an informational callout!\n\u003c/Callout\u003e\n\n\u003cCallout variant=\"warning\"\u003e\n  Pay attention to this warning!\n\u003c/Callout\u003e\n\n\u003cCallout variant=\"danger\"\u003e\n  This is critical information!\n\u003c/Callout\u003e\n```\n\n**Variants:** `neutral`, `info`, `warning`, `danger`\n\n### 💻 CodeGroup\n\nTabbed code blocks for showing multiple files or different approaches.\n\n```tsx\n\u003cCodeGroup variant='files'\u003e\n  \u003cPre data-title='package.json' data-language='json'\u003e\n    {`{\n      \"name\": \"my-project\",\n      \"version\": \"1.0.0\"\n    }`}\n  \u003c/Pre\u003e\n  \u003cPre data-title='README.md' data-language='markdown'\u003e\n    {`# My Project\n    \n    This is awesome!`}\n  \u003c/Pre\u003e\n\u003c/CodeGroup\u003e\n```\n\n**Variants:** `tab`, `files`\n\n### 📚 TIL (Today I Learned)\n\nTimeline-style components perfect for learning logs and progress tracking.\n\n```tsx\n\u003cTIL.Items date='2024-01-15'\u003e\n  \u003cTIL.Item\u003e\n    \u003cTIL.ItemTags\u003e\n      \u003cTIL.ItemTag\u003ereact\u003c/TIL.ItemTag\u003e\n      \u003cTIL.ItemTag\u003etypescript\u003c/TIL.ItemTag\u003e\n    \u003c/TIL.ItemTags\u003e\n\n    \u003ch3\u003eLearned about custom hooks\u003c/h3\u003e\n    \u003cp\u003eCustom hooks are amazing for reusable logic!\u003c/p\u003e\n\n    \u003cTIL.DnD\u003e\n      \u003cTIL.Do\u003eUse custom hooks for reusable stateful logic\u003c/TIL.Do\u003e\n      \u003cTIL.Dont\u003eDon't overuse them for simple state\u003c/TIL.Dont\u003e\n    \u003c/TIL.DnD\u003e\n  \u003c/TIL.Item\u003e\n\u003c/TIL.Items\u003e\n```\n\n### 🏷️ Labels \u0026 Tags\n\nSemantic labels for categorizing content.\n\n```tsx\n\u003cLabels\u003e\n  \u003cLabel variant='primary'\u003eFeatured\u003c/Label\u003e\n  \u003cLabel variant='secondary'\u003eTutorial\u003c/Label\u003e\n\u003c/Labels\u003e\n```\n\n### 🖼️ Enhanced Images\n\nSmart image components with optimizations and sensitivity options.\n\n```tsx\n\u003cImage\n  src=\"/path/to/image.jpg\"\n  alt=\"Description\"\n  caption=\"Image caption\"\n/\u003e\n\n\u003cImageSensitive\n  src=\"/path/to/sensitive-image.jpg\"\n  alt=\"Click to reveal\"\n  blurDataURL=\"data:image/jpeg;base64,...\"\n/\u003e\n```\n\n### ✨ InlineHighlight\n\nHighlight important text inline.\n\n```tsx\n\u003cInlineHighlight\u003eThis text is highlighted!\u003c/InlineHighlight\u003e\n```\n\n### 📚 Stack\n\nVertical layout component for organizing content.\n\n```tsx\n\u003cStack\u003e\n  \u003cdiv\u003eItem 1\u003c/div\u003e\n  \u003cdiv\u003eItem 2\u003c/div\u003e\n  \u003cdiv\u003eItem 3\u003c/div\u003e\n\u003c/Stack\u003e\n```\n\n### 🔗 Enhanced Links\n\nSmart links with external link detection and styling.\n\n```tsx\n\u003cLink href=\"https://example.com\"\u003eExternal Link\u003c/Link\u003e\n\u003cLink href=\"/internal-page\"\u003eInternal Link\u003c/Link\u003e\n```\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18.0.0 or higher\n- npm or yarn\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/klevis/klevis-x-portfolio.git\n   cd klevis-x-portfolio\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Set up the database**\n\n   ```bash\n   npm run db:generate\n   ```\n\n4. **Start the development server**\n\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser**\n   Visit [http://localhost:3000](http://localhost:3000)\n\n---\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/\n│   ├── mdx/                    # MDX components library\n│   │   ├── AccentDemo.tsx      # Dynamic accent color switcher\n│   │   ├── Callout.tsx         # Info/warning/danger callouts\n│   │   ├── CodeGroup.tsx       # Tabbed code blocks\n│   │   ├── TIL.tsx            # Today I Learned timeline\n│   │   ├── Labels.tsx          # Content labeling system\n│   │   ├── Image.tsx           # Enhanced image component\n│   │   ├── ImageSensitive.tsx  # Blurred sensitive images\n│   │   ├── InlineHighlight.tsx # Inline text highlighting\n│   │   ├── Stack.tsx           # Vertical layout component\n│   │   ├── Link.tsx            # Smart link component\n│   │   └── custom-components/  # Base MDX overrides\n│   └── ...\n├── pages/                      # Next.js pages\n├── styles/                     # Global styles\n└── lib/                        # Utility functions\n```\n\n---\n\n## 🎨 Customization\n\n### Accent Colors\n\nThe portfolio supports 6 different accent colors that can be switched dynamically:\n\n- **Violet** (Default) - Professional and modern\n- **Red** - Bold and energetic\n- **Blue** - Trustworthy and calm\n- **Orange** - Creative and warm\n- **Green** - Natural and growth-focused\n- **Pink** - Playful and creative\n\n### Adding New MDX Components\n\n1. Create your component in `src/components/mdx/`\n2. Export it from the appropriate index file\n3. Use it in your MDX content\n\nExample:\n\n```tsx\n// src/components/mdx/MyComponent.tsx\nfunction MyComponent({ children }) {\n  return \u003cdiv className='my-custom-component'\u003e{children}\u003c/div\u003e;\n}\n\nexport default MyComponent;\n```\n\n---\n\n## 📜 Available Scripts\n\n| Script                | 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:all`    | Run all linters (ESLint, TypeScript, Prettier) |\n| `npm run lint:types`  | Check TypeScript types                         |\n| `npm run lint:style`  | Check code formatting                          |\n| `npm run db:generate` | Generate Prisma client                         |\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n---\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/) - The React framework for production\n- [MDX](https://mdxjs.com/) - Markdown for the component era\n- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework\n- [Headless UI](https://headlessui.com/) - Unstyled, accessible UI components\n- [Framer Motion](https://www.framer.com/motion/) - A production-ready motion library for React\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eMade with ❤️ by \u003ca href=\"https://github.com/klevis\"\u003eKlevis\u003c/a\u003e\u003c/p\u003e\n  \u003cp\u003e⭐ Star this repo if you find it helpful!\u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkleviss%2Fklevs-portfolio-main","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkleviss%2Fklevs-portfolio-main","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkleviss%2Fklevs-portfolio-main/lists"}