Simple Linktree

A minimalist, modern Linktree-style landing page built with pure HTML, CSS, and vanilla JavaScript. Features a beautiful Bento-style design with glassmorphism effects and smooth animations.

✨ Features

• Modern Bento Design - Clean, card-based layout
• Glassmorphism Effects - Beautiful backdrop blur and transparency
• Fully Responsive - Works perfectly on mobile, tablet, and desktop
• Smooth Animations - Elegant transitions and hover effects
• Google Maps Background - Customizable location showcase
• GitHub Contribution Graph - Display your GitHub activity
• Easy to Customize - Simple HTML/CSS structure
• Zero Dependencies - No frameworks, no build tools
• Lightning Fast - Static HTML loads instantly

🚀 Quick Start

1. Clone or Fork

git clone https://github.com/BecauseTimeCount/SimpleLinktree.git
cd SimpleLinktree

2. Customize

Open index.html and edit:

• Line 25: Replace profile photo (picture.png)
• Line 27: Update your name
• Line 28: Update your title/description
• Line 35-36: Change the quote and author
• Lines 39-125: Update social links and cards

3. Deploy

Option A: GitHub Pages

1. Push to your GitHub repo
2. Go to Settings > Pages
3. Select main branch
4. Your site will be live at https://yourusername.github.io/repo-name

Option B: Vercel (Recommended)

1. Push to GitHub
2. Go to vercel.com
3. Import your repository
4. Click Deploy
5. Done! Instant HTTPS and global CDN

Option C: Netlify

1. Drag and drop the folder on netlify.com/drop
2. Done!

🎨 Customization Guide

Change Colors

Edit the gradient colors in style.css:

/* LinkedIn card - lines 235-236 */
background: linear-gradient(135deg, rgba(0, 119, 181, 0.85) 0%, rgba(0, 160, 220, 0.85) 100%);

/* GitHub card - lines 245-246 */
background: linear-gradient(135deg, rgba(36, 41, 46, 0.85) 0%, rgba(26, 29, 34, 0.85) 100%);

/* Portfolio card - lines 315-316 */
background: linear-gradient(135deg, rgba(99, 102, 241, 0.85) 0%, rgba(139, 92, 246, 0.85) 100%);

/* Agency card - lines 337-338 */
background: linear-gradient(135deg, rgba(249, 115, 22, 0.85) 0%, rgba(251, 146, 60, 0.85) 100%);

Change Map Location

Replace the Google Maps embed URL in index.html (line 14):

1. Go to Google Maps
2. Search your location
3. Click "Share" > "Embed a map"
4. Copy the src URL from the iframe
5. Replace in index.html

Add/Remove Cards

Each card follows this structure:

<a href="YOUR_LINK" class="bento-card bento-link bento-YOURNAME" target="_blank">
    <i class="fab fa-ICON"></i>
    <span class="link-label">Title</span>
    <span class="link-subtitle">Subtitle</span>
</a>

Find icons at Font Awesome.

Change Profile Photo

Replace picture.png with your own photo (recommended size: 400x400px).

📱 Responsive Breakpoints

• Mobile: < 768px (single column)
• Tablet: 768px - 1023px (2 columns)
• Desktop: > 1024px (Bento grid with fixed header and quote)

🛠️ Tech Stack

• Pure HTML5
• Pure CSS3 (Flexbox, Grid, Animations)
• Vanilla JavaScript
• Font Awesome 6.4.2 (icons)

📦 Project Structure

/
├── index.html          # Main HTML file
├── style.css           # All styles and responsive design
├── picture.png         # Profile photo
├── README.md           # This file
└── .gitignore          # Git ignore rules

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

MIT License - feel free to use this for your own personal landing page!

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
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

💡 Inspiration

This project was inspired by:

• Bento.me
• Linktree
• Modern glassmorphism design trends

👤 Author

Julien Wanecque

• Website: julienwanecque.com
• LinkedIn: @julien-w-a8579329
• GitHub: @BecauseTimeCount

⭐ Show your support

Give a ⭐️ if you like this project!

---

Made with ❤️ and vanilla JavaScript