Skip to content

[WIP] Add themes similar to Vercel's website #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 12, 2025
Merged

[WIP] Add themes similar to Vercel's website #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d3c49a
Initial plan
Copilot Oct 12, 2025
4cd1043
Add Vercel-inspired theme to LinkFree templates
Copilot Oct 12, 2025
313770c
Changes before error encountered
Copilot Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Templates/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
- [Standard](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
- [Standard Classic Theme](https://user-all-links.netlify.app/)
- [SunMoon](https://michaelbarney.github.io/LinkFree/Templates/SunMoon/)
- [Vercel Theme](https://michaelbarney.github.io/LinkFree/Templates/Vercel%20Theme/)
- [Windows95](https://michaelbarney.github.io/LinkFree/Templates/Windows95/)
- [blackCoffee](https://michaelbarney.github.io/LinkFree/Templates/blackCoffee/)
- [draculaTheme](https://michaelbarney.github.io/LinkFree/Templates/draculaTheme/)
Expand Down
55 changes: 55 additions & 0 deletions Templates/Vercel Theme/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Vercel Theme

A clean, modern theme inspired by Vercel's website design aesthetic.

## Features

- **Modern Design**: Clean and minimal interface with professional typography
- **Gradient Accents**: Subtle gradient effects inspired by Vercel's brand colors
- **Smooth Animations**: Elegant fade-in and hover animations for a polished experience
- **Responsive**: Fully responsive design that works on all device sizes
- **Dark Theme**: Beautiful dark color scheme with high contrast for readability
- **Interactive Cards**: Link cards with hover effects and smooth transitions

## Color Scheme

- Background: Pure black (#000000)
- Cards: Dark gray (#111111)
- Text: White (#ffffff) and gray (#888888)
- Accent: Blue to cyan gradient (#0070f3 to #00dfd8)

## Customization

To customize this theme for your needs:

1. **Profile Information**:
- Replace the image URL in `<img src="...">` with your profile photo
- Update the `<h1>` tag with your name
- Modify the `<p>` tag with your bio/description

2. **Links**:
- Update each `<a href="...">` with your actual URLs
- Modify the `<span class="link-title">` with your link names
- Add or remove link cards as needed

3. **Colors** (in style.css):
- Modify CSS variables in the `:root` selector to change the color scheme
- Adjust `--accent-gradient` for different brand colors

**Note**: The theme supports up to 10 links with staggered animations. If you need more links, you can add additional animation delays in the CSS or remove the animation delays for a simpler effect.

## Typography

This theme uses the Inter font family, which is also used by Vercel. It provides excellent readability and a modern appearance.

## Browser Support

Works on all modern browsers including:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers

---

Inspired by [Vercel](https://vercel.com) design principles.
63 changes: 63 additions & 0 deletions Templates/Vercel Theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Links</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="profile-section">
<div class="avatar">
<img src="https://i.imgur.com/t8ZX9um.jpg" alt="Profile Photo">
</div>
<h1 class="username">Your Name</h1>
<p class="bio">Developer, Designer & Creator</p>
</div>

<div class="links-section">
<a href="https://github.com/yourusername" class="link-card" target="_blank">
<div class="link-content">
<span class="link-title">GitHub</span>
<span class="link-arrow">→</span>
</div>
</a>

<a href="https://twitter.com/yourusername" class="link-card" target="_blank">
<div class="link-content">
<span class="link-title">Twitter</span>
<span class="link-arrow">→</span>
</div>
</a>

<a href="https://linkedin.com/in/yourusername" class="link-card" target="_blank">
<div class="link-content">
<span class="link-title">LinkedIn</span>
<span class="link-arrow">→</span>
</div>
</a>

<a href="https://yourwebsite.com" class="link-card" target="_blank">
<div class="link-content">
<span class="link-title">Website</span>
<span class="link-arrow">→</span>
</div>
</a>

<a href="mailto:your.email@example.com" class="link-card" target="_blank">
<div class="link-content">
<span class="link-title">Email</span>
<span class="link-arrow">→</span>
</div>
</a>
</div>

<footer class="footer">
<p>Built with <a href="https://github.com/QTechDevelopment/LinkFree" target="_blank">LinkFree</a></p>
</footer>
</div>

<div class="background-gradient"></div>
</body>
</html>
Loading