https://github.com/kleviss/klevs-portfolio-main
Gjej Makine Albania - Inovative App for finding cars in Albania
https://github.com/kleviss/klevs-portfolio-main
expo monorepo pnpm portofolio-website
Last synced: 2 months ago
JSON representation
Gjej Makine Albania - Inovative App for finding cars in Albania
- Host: GitHub
- URL: https://github.com/kleviss/klevs-portfolio-main
- Owner: kleviss
- Created: 2024-12-09T13:56:03.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-12T16:23:20.000Z (over 1 year ago)
- Last Synced: 2025-01-12T16:33:46.787Z (over 1 year ago)
- Topics: expo, monorepo, pnpm, portofolio-website
- Language: TypeScript
- Homepage:
- Size: 2.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
🚀 Klevis Portfolio
A modern, interactive portfolio built with Next.js, MDX, and a powerful set of custom components
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://mdxjs.com/)
Features •
Tech Stack •
Components •
Getting Started •
Customization
---
## ✨ Features
- 🎨 **Dynamic Theme System** - Multiple accent colors with real-time switching
- 📝 **Rich MDX Components** - Enhanced content creation with custom React components
- 🌙 **Dark/Light Mode** - Seamless theme switching with next-themes
- 📱 **Responsive Design** - Mobile-first approach with Tailwind CSS
- 🎯 **Interactive Elements** - Engaging user interface components
- 🎯 **Graphics Projects Elements** - Engaging graphics for projects
- 🔧 **Developer Experience** - TypeScript, ESLint, Prettier, and more
---
## 🛠️ Tech Stack
| Technology | Purpose |
| ----------------- | ---------------------------------- |
| **Next.js 13** | React framework with app directory |
| **MDX** | Markdown with JSX for rich content |
| **TypeScript** | Type safety and better DX |
| **Tailwind CSS** | Utility-first CSS framework |
| **Framer Motion** | Smooth animations |
| **Prisma** | Database ORM |
| **Headless UI** | Accessible UI components |
---
## 📦 MDX Components Library
This portfolio features a comprehensive set of custom MDX components that make content creation a breeze:
### 🎨 AccentDemo
Interactive accent color switcher that dynamically changes the entire site's color scheme.
```tsx
```
**Available Colors:** Violet, Red, Blue, Orange, Green, Pink
### 📢 Callout
Attention-grabbing callout boxes for important information.
```tsx
This is an informational callout!
Pay attention to this warning!
This is critical information!
```
**Variants:** `neutral`, `info`, `warning`, `danger`
### 💻 CodeGroup
Tabbed code blocks for showing multiple files or different approaches.
```tsx
{`{
"name": "my-project",
"version": "1.0.0"
}`}
{`# My Project
This is awesome!`}
```
**Variants:** `tab`, `files`
### 📚 TIL (Today I Learned)
Timeline-style components perfect for learning logs and progress tracking.
```tsx
react
typescript
Learned about custom hooks
Custom hooks are amazing for reusable logic!
Use custom hooks for reusable stateful logic
Don't overuse them for simple state
```
### 🏷️ Labels & Tags
Semantic labels for categorizing content.
```tsx
Featured
Tutorial
```
### 🖼️ Enhanced Images
Smart image components with optimizations and sensitivity options.
```tsx
```
### ✨ InlineHighlight
Highlight important text inline.
```tsx
This text is highlighted!
```
### 📚 Stack
Vertical layout component for organizing content.
```tsx
Item 1
Item 2
Item 3
```
### 🔗 Enhanced Links
Smart links with external link detection and styling.
```tsx
External Link
Internal Link
```
---
## 🚀 Getting Started
### Prerequisites
- Node.js 18.0.0 or higher
- npm or yarn
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/klevis/klevis-x-portfolio.git
cd klevis-x-portfolio
```
2. **Install dependencies**
```bash
npm install
```
3. **Set up the database**
```bash
npm run db:generate
```
4. **Start the development server**
```bash
npm run dev
```
5. **Open your browser**
Visit [http://localhost:3000](http://localhost:3000)
---
## 📁 Project Structure
```
src/
├── components/
│ ├── mdx/ # MDX components library
│ │ ├── AccentDemo.tsx # Dynamic accent color switcher
│ │ ├── Callout.tsx # Info/warning/danger callouts
│ │ ├── CodeGroup.tsx # Tabbed code blocks
│ │ ├── TIL.tsx # Today I Learned timeline
│ │ ├── Labels.tsx # Content labeling system
│ │ ├── Image.tsx # Enhanced image component
│ │ ├── ImageSensitive.tsx # Blurred sensitive images
│ │ ├── InlineHighlight.tsx # Inline text highlighting
│ │ ├── Stack.tsx # Vertical layout component
│ │ ├── Link.tsx # Smart link component
│ │ └── custom-components/ # Base MDX overrides
│ └── ...
├── pages/ # Next.js pages
├── styles/ # Global styles
└── lib/ # Utility functions
```
---
## 🎨 Customization
### Accent Colors
The portfolio supports 6 different accent colors that can be switched dynamically:
- **Violet** (Default) - Professional and modern
- **Red** - Bold and energetic
- **Blue** - Trustworthy and calm
- **Orange** - Creative and warm
- **Green** - Natural and growth-focused
- **Pink** - Playful and creative
### Adding New MDX Components
1. Create your component in `src/components/mdx/`
2. Export it from the appropriate index file
3. Use it in your MDX content
Example:
```tsx
// src/components/mdx/MyComponent.tsx
function MyComponent({ children }) {
return
{children};
}
export default MyComponent;
```
---
## 📜 Available Scripts
| Script | Description |
| --------------------- | ---------------------------------------------- |
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run start` | Start production server |
| `npm run lint` | Run ESLint |
| `npm run lint:all` | Run all linters (ESLint, TypeScript, Prettier) |
| `npm run lint:types` | Check TypeScript types |
| `npm run lint:style` | Check code formatting |
| `npm run db:generate` | Generate Prisma client |
---
## 🤝 Contributing
Contributions 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.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---
## 🙏 Acknowledgments
- [Next.js](https://nextjs.org/) - The React framework for production
- [MDX](https://mdxjs.com/) - Markdown for the component era
- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework
- [Headless UI](https://headlessui.com/) - Unstyled, accessible UI components
- [Framer Motion](https://www.framer.com/motion/) - A production-ready motion library for React
---