🎨 Zolink Templates

Craft Stunning, Customizable Profile Pages for the Social Web

Build breathtaking profile pages with our open-source collection of React components. Designed for Zolink, the platform that redefines your online presence.

🌟 What is Zolink Templates?

Zolink Templates is an open-source library of responsive, customizable profile page components built with Next.js, TypeScript, and Tailwind CSS. Our templates empower developers and users to create visually stunning, accessible, and performant profile pages for the Zolink platform. Whether you're showcasing your portfolio, social links, or personal brand, Zolink Templates makes it effortless and elegant.

🌐 Live Demo: zolink.site/templates

🚀 Features

🎨 Beautiful Designs: Modern, trend-aware templates with customizable themes.
📱 Fully Responsive: Seamless experience across desktop, tablet, and mobile.
⚡ TypeScript-Powered: Type-safe code with IntelliSense support for developers.
🎯 Highly Customizable: Easily tweak colors, layouts, and functionality.
♿ WCAG-Compliant: Accessible designs with proper ARIA labels and keyboard navigation.
📦 Modular Architecture: Mix and match components or use complete templates.
🔄 Dynamic Data: Supports real-time data updates for profiles and social links.
⚡ Optimized Performance: Lazy loading, memoization, and image optimization.

📋 Data Model

Each template adheres to a standardized data structure for consistency and ease of integration:

interface User {
  uid: string;
  username: string;
  likes: number;
  views: number;
  profile: ProfileData;
  createdAt: number;
  updatedAt: number;
}

interface ProfileData {
  displayName: string;
  bio: string;
  avatar: string;
  theme: string;
  accentColor: string;
  images: string[];
  socialLinks: SocialLink[];
}

interface SocialLink {
  id: string;
  platform: string;
  url: string;
  title: string;
  icon: React.ReactNode; // Supports Lucide or Simple Icons
  color: string;
  visible: boolean;
}

🛠️ Getting Started

Prerequisites

Node.js: v18 or higher
Next.js: v14 or higher
TypeScript: v5 or higher
Tailwind CSS: v3 or higher
pnpm (recommended for package management)

🤝 Contributing

We welcome contributions from developers, designers, and enthusiasts of all skill levels! Whether you're fixing bugs, enhancing documentation, or creating new templates, your contributions help make Zolink Templates better for everyone.

Contribution Workflow

Fork the Repository: Click the "Fork" button on GitHub.

Create a Feature Branch:

git checkout -b feature/your-template-name

Develop Your Template:
- Follow the Template Guidelines below.
- Ensure responsiveness and accessibility.
- Test across devices and screen sizes.

Commit Changes:

git commit -m "Add YourTemplateName with responsive design and accessibility"

Submit a Pull Request:
- Provide a detailed description of your changes.
- Include screenshots or a live demo (if possible).
- Reference related issues (e.g., #123).

Template Guidelines

File Structure

Organize your template in the following structure:

templates/
├── YourTemplateName/
│   ├── index.tsx              # Main template component
│   ├── preview.png            # Screenshot/images for showcase
│   ├── README.md              # Optional: Template-specific documentation
│   ├── components/            # Optional: Reusable sub-components
│   └── styles/                # Optional: Custom CSS or Tailwind overrides

Code Standards

✅ Use TypeScript with proper types
✅ Follow the existing component interface
✅ Use Tailwind CSS for styling
✅ Ensure responsive design (mobile-first)
✅ Add proper accessibility attributes
✅ Include error handling for missing data

Component Props

interface YourTemplateProps {
  profile: User  // Use the standard User interface
}

export function YourTemplate({ profile }: YourTemplateProps) {
  // Your component logic
}

Required Features

📱 Mobile responsive design
🔗 Social links integration
💖 Like button functionality
📤 Share functionality
🖼️ Avatar/image display
📝 Bio/description support

Best Practices

Use meaningful component and variable names
Add comments for complex logic
Optimize for performance (lazy loading, memoization)
Handle edge cases (missing data, long text)
Test across different screen sizes
Validate accessibility with screen readers

📚 Documentation

Component API

Each template component accepts a profile prop with the standard User interface:

<YourTemplate profile={userData} />

Styling

Templates use Tailwind CSS with our custom design system:

Colors: Consistent color palette with theme support
Typography: Responsive text scales
Spacing: Consistent margin and padding
Components: Reusable UI components from shadcn/ui

🎨 Design Principles

Our templates follow these design principles:

Simplicity - Clean, uncluttered interfaces
Accessibility - Usable by everyone
Performance - Fast loading and smooth interactions
Consistency - Unified design language
Flexibility - Easy to customize and extend

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with Next.js, TypeScript, and Tailwind CSS.
UI components powered by shadcn/ui.
Icons from Lucide React and Simple Icons.
Special thanks to our amazing community of contributors!

🔗 Links

Website: zolink.site
Developer: github.com/ishikki-akabane
Issues: Report a bug or request a feature

📞 Support

Need help? Have questions?

💬 Discussions: GitHub Discussions
🐛 Bug Reports: GitHub Issues
📧 Email: Contact us

Crafted with ❤️ by the Zolink Community

⭐ Star us on GitHub | 🚀 Try Zolink

ishikki-akabane/ZoLink