A modern, customizable link hub for showcasing social media profiles, projects, and music playlists. Similar to Linktree but with enhanced features and customization options.
- 🎨 Multiple Theme Options: Choose from a variety of color themes to match your personal brand
- 🎵 Music Player Integration: Share your favorite playlists with an integrated music player
- 🌓 Dark/Light Mode: Automatic theme detection with manual override option
- 📱 Fully Responsive: Optimized for all devices from mobile to desktop
- ⚡ Fast Performance: Built with Next.js for optimal loading speeds
- 🔗 Categorized Links: Organize your links by categories for better navigation
- 💅 Sleek Animations: Smooth transitions and interactions using Framer Motion
- 🧩 Modular Components: Easy to extend and customize
- Node.js (v18 or newer)
- npm or yarn
-
Clone the repository:
git clone https://github.com/codemeapixel/pixellinks.git cd pixellinks -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to see the result.
pixellinks/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js app router pages
│ ├── components/ # Reusable UI components
│ │ ├── layouts/ # Layout components
│ │ │ └── links/ # Link hub specific components
│ │ └── ui/ # Basic UI components
│ ├── context/ # React context providers
│ ├── data/ # Data models and content
│ ├── styles/ # Global styles
│ └── types/ # TypeScript type definitions
└── ...config files
Edit the data in src/data/linksData.ts to update your profile information, links, and playlists.
The application includes multiple built-in themes that can be selected from the theme switcher interface. Users can click the color palette icon to change themes.
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React Framework
- Tailwind CSS - For styling
- Framer Motion - For animations