Skip to content

Added new theme similar to vercel website #137

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

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Added new theme similar to vercel website #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
28cb3ae
Initial plan
Copilot Oct 12, 2025
31cbb74
Initial plan
Copilot Oct 12, 2025
1d3c49a
Initial plan
Copilot Oct 12, 2025
820a6ca
Initial plan
Copilot Oct 12, 2025
dd0423c
Initial plan
Copilot Oct 12, 2025
3dec985
Add Material Design template with MD3 principles
Copilot Oct 12, 2025
1bf4d8d
Add Cubism theme with geometric design inspired by Cubism art movement
Copilot Oct 12, 2025
f8bd2a1
Add Origami theme with paper folding effects
Copilot Oct 12, 2025
4cd1043
Add Vercel-inspired theme to LinkFree templates
Copilot Oct 12, 2025
384e873
Add Liquid theme with Apple-inspired design
Copilot Oct 12, 2025
435fe34
Address code review feedback for Material Design template
Copilot Oct 12, 2025
7e72f65
Improve Cubism theme CSS with variables for better maintainability
Copilot Oct 12, 2025
313770c
Changes before error encountered
Copilot Oct 12, 2025
350c875
Merge pull request #3 from QTechDevelopment/copilot/add-themes-like-v…
QTechDevelopment Oct 12, 2025
2f4f39a
Merge pull request #4 from QTechDevelopment/copilot/add-origami-theme
QTechDevelopment Oct 12, 2025
00056e5
Merge pull request #1 from QTechDevelopment/copilot/add-liquid-design…
QTechDevelopment Oct 12, 2025
782e0d0
Merge pull request #5 from QTechDevelopment/copilot/add-cubism-theme
QTechDevelopment Oct 12, 2025
b1032b0
Merge pull request #2 from QTechDevelopment/copilot/add-material-desi…
QTechDevelopment 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
56 changes: 56 additions & 0 deletions Templates/Cubism/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Cubism Theme

A LinkFree theme inspired by the Cubism art movement, featuring geometric shapes, angular forms, and fragmented perspectives.

## Features

- **Geometric Design**: Angular shapes and polygons inspired by Cubist art
- **Animated Background**: Floating geometric shapes with rotation animations
- **Modern Layout**: Clean, centered design with bold typography
- **Responsive**: Fully responsive design that works on all devices
- **Customizable**: Easy to modify colors, links, and content

## Preview

The theme features:
- Diamond-shaped profile image frame with rotation effect
- Angular link buttons with shadow effects
- Animated geometric background shapes
- Smooth hover animations
- Custom clip-path designs for a fragmented aesthetic

## Customization

### Colors
Edit the CSS variables in `style.css` to customize the color scheme:
```css
:root {
--primary-color: #2c3e50;
--secondary-color: #e74c3c;
--accent-color: #f39c12;
--accent-blue: #3498db;
--accent-green: #2ecc71;
}
```

### Profile Information
Edit `index.html` to add your information:
- Profile image URL
- Your name
- Bio/tagline
- Social media links

### Links
Add or modify links in the `.links-section` of `index.html`. Each link follows this structure:
```html
<a href="your-url" target="_blank" class="link-item">
<div class="link-content">
<i class="fab fa-icon-name"></i>
<span>Link Text</span>
</div>
</a>
```

## Credits

Created for the LinkFree project. Inspired by the Cubism art movement pioneered by Pablo Picasso and Georges Braque.
68 changes: 68 additions & 0 deletions Templates/Cubism/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Cubism Theme</title>
</head>
<body>
<div class="container">
<div class="geometric-bg">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
<div class="shape shape3"></div>
<div class="shape shape4"></div>
<div class="shape shape5"></div>
</div>

<div class="profile-section">
<div class="profile-frame">
<img class="profile-img" src="https://avatars.githubusercontent.com/u/89015968?v=4" alt="Profile">
</div>
<h1 class="profile-name">Your Name</h1>
<p class="profile-bio">Artist • Designer • Creator</p>
</div>

<div class="links-section">
<a href="https://github.com" target="_blank" class="link-item">
<div class="link-content">
<i class="fab fa-github"></i>
<span>GitHub</span>
</div>
</a>

<a href="https://twitter.com" target="_blank" class="link-item">
<div class="link-content">
<i class="fab fa-twitter"></i>
<span>Twitter</span>
</div>
</a>

<a href="https://linkedin.com" target="_blank" class="link-item">
<div class="link-content">
<i class="fab fa-linkedin"></i>
<span>LinkedIn</span>
</div>
</a>

<a href="https://instagram.com" target="_blank" class="link-item">
<div class="link-content">
<i class="fab fa-instagram"></i>
<span>Instagram</span>
</div>
</a>

<a href="https://youtube.com" target="_blank" class="link-item">
<div class="link-content">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</div>
</a>
</div>
</div>

<script src="https://kit.fontawesome.com/3fd576ae50.js" crossorigin="anonymous"></script>
</body>
</html>
Loading