Un Linktree futurista, minimalista y altamente personalizable. / A futuristic, minimalist, and highly customizable Linktree alternative.
Hyperlink HUD is a modern take on the classic Linktree, focused on smooth user experience and high-end animations. Designed with a "Head-Up Display" (HUD) aesthetic, it’s perfect for developers, designers, and gamers looking to centralize their online presence with style.
Roadmap: I am planning to implement custom themes in the future, allowing users to choose different designs so it's not always the same look.
- Framework: React with TypeScript.
- Styling: Tailwind CSS (easy to customize).
- Animations: Motion & GSAP for that premium, high-tech feel.
- Icons: Lucide React.
git clone https://github.com/Hazuru00/hyperlink-hud.git
cd hyperlink-hudnpm install
# or if you use pnpm
pnpm installnpm run devYou don't need to touch the core code to update your links. Everything is managed through the src/config.ts file.
Just edit the config object:
export const config = {
user: {
name: "Your Name",
bio: "Your professional bio or a cool quote.",
avatar: "YOUR_IMAGE_URL",
status: "Available for Projects",
},
theme: {
primary: "#F5275B", // Main Neon Color
background: "#050505",
// ... more style settings
},
links: [
{
label: "My Portfolio",
url: "https://yoursite.com",
icon: Globe,
color: "#00f2ff",
animationType: "spring",
},
// Add as many as you want here
]
};This project is primarily tested and optimized for Vercel.
- Fork this repo.
- Connect it to Vercel.
That's it! It deploys automatically with every push.
Hyperlink HUD es una alternativa moderna al clásico Linktree, enfocada en la experiencia de usuario y animaciones fluidas. Está diseñado con una estética de "Head-Up Display" (HUD) ideal para desarrolladores, diseñadores y gamers que buscan centralizar su presencia online con estilo "a futuro quiero meter temas custom que se puedan elegir para que no sea siempre el mismo diseño".
- Framework: React con TypeScript.
- Estilos: Tailwind CSS (fácil de tunear).
- Animaciones: Framer Motion(o Motion a secas) & GSAP para esa sensación premium y tech.
- Iconos: Lucide React.
git clone [https://github.com/Hazuru00/hyperlink-hud.git](https://github.com/Hazuru00/hyperlink-hud.git)
cd hyperlink-hudnpm install
# o si usas pnpm
pnpm installnpm run devNo necesitás tocar el core del código para cambiar tus links. Todo se maneja desde el archivo src/config.ts.
Solo tenés que editar el objeto config:
export const config = {
user: {
name: "Tu Nombre",
bio: "Tu descripción profesional o frase épica.",
avatar: "URL_DE_TU_IMAGEN",
status: "Available for Projects",
},
theme: {
primary: "#F5275B", // Color principal (Neon)
background: "#050505",
// ... más ajustes de estilo
},
links: [
{
label: "Mi Portfolio",
url: "[https://tusitio.com](https://tusitio.com)",
icon: Globe,
color: "#00f2ff",
animationType: "spring",
},
// Agregá todos los que quieras acá
]
};Este proyecto está desplegado y probado principalmente con Vercel.
-
Hacé un fork de este repo.
-
Conectalo a Vercel.
¡Listo! Se despliega al toque con cada push.
¡Las PRs son bienvenidas! Si querés agregar nuevos tipos de animaciones o componentes para el HUD, sentite libre de colaborar se acepta el uso de IA todo y mientras el codigo sea limpio y reutilizable sean responsables con el uso de IA.
Diseñado con ❤️ por Hazuru.
PRs are more than welcome! If you want to add new animation types or HUD components, feel free to collaborate.
AI Usage: The use of AI is accepted as long as the code remains clean, reusable, and follows best practices. Please be responsible with AI-generated code.
Designed with ❤️ by Hazuru