LinksCollection

A beautiful, modern Linktree-like website built with Next.js and Tailwind CSS. Perfect for showcasing your social media links, portfolio, and contact information.

✨ Features

• 🎨 Modern Design: Beautiful gradient background with glass morphism effects
• 📱 Responsive: Works perfectly on all devices (mobile, tablet, desktop)
• 🔗 Easy Configuration: Manage all links through environment variables
• 🚀 Vercel Ready: Optimized for easy deployment on Vercel
• 🛡️ Open Source Safe: No sensitive data in the codebase
• ⚡ Fast Loading: Built with Next.js for optimal performance
• 🎯 SEO Optimized: Proper meta tags and Open Graph support
• 🔒 Anti-Scraping Contact Info: SVG-based contact details for privacy protection
• 📄 Legal Pages: Built-in imprint and privacy policy pages
• 🖼️ Auto-Asset Download: Automatically downloads external assets during build
• 📝 Auto-Generated CV: Automatically generates PDF CV from YAML during build
• 🎭 Customizable: Fully configurable through environment variables

🚀 Quick Start

1. Install Dependencies

npm install

2. Configure Your Profile

Copy the example environment file and customize it:

cp env.example .env.local

Edit .env.local with your information:

# Profile Configuration
NEXT_PUBLIC_PROFILE_NAME="Your Name"
NEXT_PUBLIC_PROFILE_BIO="Your bio or description"
NEXT_PUBLIC_PROFILE_IMAGE="https://example.com/your-image.jpg"

# Contact Information (SVG URLs for anti-scraping)
NEXT_PUBLIC_CONTACT_NAME_SVG="https://example.com/contact-name.svg"
NEXT_PUBLIC_CONTACT_STREET_SVG="https://example.com/contact-street.svg"
NEXT_PUBLIC_CONTACT_CITY_SVG="https://example.com/contact-city.svg"
NEXT_PUBLIC_CONTACT_COUNTRY_SVG="https://example.com/contact-country.svg"

# Additional Contact Information
NEXT_PUBLIC_CONTACT_EMAIL="your@email.com"
NEXT_PUBLIC_WEBSITE_URL="https://yourwebsite.com"

# Links Configuration (JSON format)
NEXT_PUBLIC_LINKS='[
  {
    "title": "GitHub",
    "url": "https://github.com/yourusername",
    "icon": "💻"
  },
  {
    "title": "Twitter", 
    "url": "https://twitter.com/yourusername",
    "icon": "🐦"
  },
  {
    "title": "LinkedIn",
    "url": "https://linkedin.com/in/yourusername", 
    "icon": "💼"
  }
]'

3. Run Development Server

npm run dev

Open http://localhost:3000 to see your site!

🎨 Customization

Auto-Generated CV/Resume (Optional)

This project includes a powerful CV auto-generation feature that creates a professional PDF from a YAML file.

🎯 OPTIONAL FEATURE: The site works perfectly without CV functionality!

• If you don't provide CV data, the site will deploy successfully without the CV download button
• The CV feature is completely optional and won't cause build failures

⚠️ IMPORTANT: No external CV URLs supported - only auto-generated from YAML!

How it works:

1. Optional: Provide your CV data either via master_cv.yaml file OR MASTER_CV_YAML environment variable
2. Optional: Set CV-related environment variables (name, email, etc.)
3. Run npm run dev or npm run build - CV is auto-generated as public/cv.pdf (if data provided)
4. If no CV data is provided, the site builds normally and simply doesn't show the CV download button

Benefits:

• 🔄 Always up-to-date: Edit YAML, rebuild, done!
• 📝 Version control: Track CV changes in Git (when using file approach)
• 🤖 ATS-friendly: Optimized for Applicant Tracking Systems
• 🎨 Consistent formatting: Professional layout every time
• 🔒 Hidden AI messages: Include invisible text for AI scanning systems
• ☁️ Cloud-ready: Deploy to Vercel without committing personal data

Setup (Option 1 - Local File - Recommended for Development):

# OPTIONAL - Only if you want CV functionality

# 1. Copy the example template and edit with your information
cp example_master_cv.yaml master_cv.yaml

# 2. Set environment variables in .env.local:
CV_NAME="Your Name"
CV_EMAIL="your@email.com"
CV_PHONE="+1234567890"  # Optional
CV_LOCATION="City, Country"  # Optional
CV_LINKEDIN="linkedin.com/in/yourprofile"  # Optional
CV_WEBSITE="yourwebsite.com"  # Optional
CV_GITHUB="github.com/yourusername"  # Optional

# 3. Generate CV manually (or it auto-generates on build/dev)
npm run generate-cv

Setup (Option 2 - Environment Variable - Recommended for Vercel/Production):

# OPTIONAL - Only if you want CV functionality

# 1. In Vercel dashboard or .env.local, set MASTER_CV_YAML with your CV content:
# Copy the entire content of your master_cv.yaml and paste as the value
# Example in .env.local:
MASTER_CV_YAML='
summary: |
  Your professional summary here...
experience:
  - company: "Company Name"
    role: "Your Role"
    ...
'

# 2. Set CV-related environment variables as shown in Option 1

# This approach keeps your CV data private while allowing cloud deployment

Setup (Option 3 - No CV - Simplest for Quick Start):

# Don't create master_cv.yaml
# Don't set MASTER_CV_YAML environment variable
# The site will work perfectly without CV functionality!
# The CV download button simply won't appear on your page

master_cv.yaml structure:

• summary: Professional summary
• experience: Work history with achievements
• education: Academic background
• skills: Organized by categories
• projects: Key projects with technologies
• languages: Language proficiencies
• cv_config: PDF settings and secret messages for AI

See example_master_cv.yaml for a complete template with placeholder data.

Profile Image

• Use a square image (recommended: 400x400px or larger)
• Supports any image format (JPG, PNG, WebP, etc.)
• Can be hosted anywhere (GitHub, Imgur, your own server)
• Auto-download: External images are automatically downloaded during build

Contact Information (Anti-Scraping)

• Create SVG files with your contact details
• Host them on GitHub or any web server
• SVGs are automatically downloaded during build
• Contact info is displayed as non-downloadable, inverted images

Links Configuration

Each link supports:

• title: Display name for the link
• url: The destination URL
• icon: Optional emoji or icon (supports any emoji)

Legal Pages

• Imprint: /imprint - Legal notice with contact information
• Privacy Policy: /privacy - GDPR-compliant privacy policy
• Both pages use SVG-based contact information

Styling

The site uses Tailwind CSS for styling. You can customize:

• Colors in tailwind.config.js
• Animations in app/globals.css
• Layout in app/page.tsx

🚀 Deployment on Vercel

Option 1: Deploy from GitHub

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Option 2: Deploy with Vercel CLI

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Set environment variables
vercel env add NEXT_PUBLIC_PROFILE_NAME
vercel env add NEXT_PUBLIC_PROFILE_BIO
vercel env add NEXT_PUBLIC_PROFILE_IMAGE
vercel env add NEXT_PUBLIC_LINKS

Environment Variables in Vercel

In your Vercel dashboard, add these environment variables:

Profile Configuration:

• NEXT_PUBLIC_PROFILE_NAME: Your name
• NEXT_PUBLIC_PROFILE_BIO: Your bio
• NEXT_PUBLIC_PROFILE_IMAGE: URL to your profile image

Contact Information (SVG URLs):

• NEXT_PUBLIC_CONTACT_NAME_SVG: URL to name SVG
• NEXT_PUBLIC_CONTACT_STREET_SVG: URL to street SVG
• NEXT_PUBLIC_CONTACT_CITY_SVG: URL to city SVG
• NEXT_PUBLIC_CONTACT_COUNTRY_SVG: URL to country SVG

Additional Contact:

• NEXT_PUBLIC_CONTACT_EMAIL: Your email address
• NEXT_PUBLIC_WEBSITE_URL: Your website URL

Links:

• NEXT_PUBLIC_LINKS: JSON string of your links

📁 Project Structure

LinksCollection/
├── app/
│   ├── components/
│   │   └── ContactInfo.tsx  # SVG-based contact component
│   ├── imprint/
│   │   ├── page.tsx         # Legal notice page
│   │   └── layout.tsx       # Imprint metadata
│   ├── privacy/
│   │   ├── page.tsx         # Privacy policy page
│   │   └── layout.tsx       # Privacy metadata
│   ├── globals.css          # Global styles and Tailwind CSS
│   ├── layout.tsx          # Root layout with metadata
│   └── page.tsx            # Main page component
├── scripts/
│   ├── generate-cv.js       # Auto-generate CV from YAML
│   └── download-assets.js   # Auto-download external assets
├── public/
│   ├── cv.pdf               # Auto-generated CV (gitignored)
│   └── assets/              # Auto-downloaded assets (gitignored)
├── master_cv.yaml          # Your CV data (gitignored, create from example)
├── example_master_cv.yaml  # CV template with placeholder data
├── env.example             # Environment variables template
├── next.config.js          # Next.js configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── vercel.json             # Vercel deployment configuration
└── package.json            # Dependencies and scripts

🛠️ Development

Available Scripts

• npm run dev - Start development server (auto-generates CV first)
• npm run build - Build for production (auto-generates CV and downloads assets)
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run generate-cv - Manually generate CV from master_cv.yaml
• npm run download-assets - Manually download external assets

Adding New Features

The codebase is structured for easy extension:

1. New Link Types: Add them to the LinkData interface
2. Custom Styling: Modify app/globals.css or tailwind.config.js
3. Analytics: Add tracking in the handleLinkClick function
4. New Pages: Add them to the app/ directory
5. Contact Fields: Add new SVG URLs to environment variables
6. Asset Downloads: Modify scripts/download-assets.js for new asset types

Asset Management

Development Mode:

• Uses external URLs directly from environment variables
• No asset downloading required
• Faster development iteration

Production Build:

• Automatically downloads all external assets
• Creates self-contained static site
• No external dependencies at runtime

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Deployed on Vercel
• Inspired by Linktree

---

Happy linking! 🔗