-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
369 additions
and
238 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,5 @@ | ||
| import Image from "next/image"; | ||
| import { LinkTree } from "@/components/link-tree" | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> | ||
| <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"> | ||
| <Image | ||
| className="dark:invert" | ||
| src="https://nextjs.org/icons/next.svg" | ||
| alt="Next.js logo" | ||
| width={180} | ||
| height={38} | ||
| priority | ||
| /> | ||
| <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> | ||
| <li className="mb-2"> | ||
| Get started by editing{" "} | ||
| <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold"> | ||
| app/page.tsx | ||
| </code> | ||
| . | ||
| </li> | ||
| <li>Save and see your changes instantly.</li> | ||
| </ol> | ||
|
|
||
| <div className="flex gap-4 items-center flex-col sm:flex-row"> | ||
| <a | ||
| className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5" | ||
| href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| className="dark:invert" | ||
| src="https://nextjs.org/icons/vercel.svg" | ||
| alt="Vercel logomark" | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| Deploy now | ||
| </a> | ||
| <a | ||
| className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44" | ||
| href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Read our docs | ||
| </a> | ||
| </div> | ||
| </main> | ||
| <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center"> | ||
| <a | ||
| className="flex items-center gap-2 hover:underline hover:underline-offset-4" | ||
| href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| aria-hidden | ||
| src="https://nextjs.org/icons/file.svg" | ||
| alt="File icon" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| Learn | ||
| </a> | ||
| <a | ||
| className="flex items-center gap-2 hover:underline hover:underline-offset-4" | ||
| href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| aria-hidden | ||
| src="https://nextjs.org/icons/window.svg" | ||
| alt="Window icon" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| Examples | ||
| </a> | ||
| <a | ||
| className="flex items-center gap-2 hover:underline hover:underline-offset-4" | ||
| href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| aria-hidden | ||
| src="https://nextjs.org/icons/globe.svg" | ||
| alt="Globe icon" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| Go to nextjs.org → | ||
| </a> | ||
| </footer> | ||
| </div> | ||
| ); | ||
| } | ||
| export default function Page() { | ||
| return <LinkTree /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "new-york", | ||
| "rsc": true, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.ts", | ||
| "css": "app/globals.css", | ||
| "baseColor": "neutral", | ||
| "cssVariables": true, | ||
| "prefix": "" | ||
| }, | ||
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils", | ||
| "ui": "@/components/ui", | ||
| "lib": "@/lib", | ||
| "hooks": "@/hooks" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| 'use client' | ||
|
|
||
| import React from 'react' | ||
| import { Linkedin, Twitter, Instagram, Mail, Music, Gamepad, Youtube } from 'lucide-react' | ||
|
|
||
| interface LinkItem { | ||
| type: 'category' | 'link' | 'youtube' | ||
| title: string | ||
| url?: string | ||
| youtubeId?: string | ||
| } | ||
|
|
||
| const profileImage = "/placeholder.svg?height=200&width=200" | ||
| const name = "@anthonysistilli" | ||
| const description = "Tech founder & senior software engineer" | ||
|
|
||
| const socialLinks = [ | ||
| { platform: 'LinkedIn', url: 'https://linkedin.com/in/example' }, | ||
| { platform: 'Twitter', url: 'https://twitter.com/example' }, | ||
| { platform: 'Mail', url: 'mailto:[email protected]' }, | ||
| { platform: 'Music', url: 'https://music.example.com' }, | ||
| { platform: 'Youtube', url: 'https://youtube.com/@example' }, | ||
| { platform: 'Gamepad', url: 'https://game.example.com' }, | ||
| { platform: 'Instagram', url: 'https://instagram.com/example' }, | ||
| ] | ||
|
|
||
| const items: LinkItem[] = [ | ||
| { type: 'youtube', title: 'Latest Youtube Video', youtubeId: 'dQw4w9WgXcQ' }, | ||
| { type: 'link', title: "Join Hyrd's waitlist - My company", url: 'https://hyrd.dev' }, | ||
| { type: 'link', title: 'Hyrd.dev - Find a tech job in minutes, not months', url: 'https://hyrd.dev' }, | ||
| { type: 'category', title: 'Resources' }, | ||
| { type: 'link', title: 'Buy me a coffee :)', url: 'https://buymeacoffee.com/example' }, | ||
| { type: 'link', title: 'Startup notes & coding resources (mind map)', url: 'https://example.com/mindmap' }, | ||
| { type: 'link', title: 'My saas landing page boilerplate on Github', url: 'https://github.com/example/repo' }, | ||
| ] | ||
|
|
||
| export function LinkTree() { | ||
| return ( | ||
| <div className="min-h-screen bg-red-50 py-8 px-4 relative overflow-hidden"> | ||
| {/* Cloud background pattern */} | ||
| <div className="absolute inset-0 z-0 opacity-20"> | ||
| <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" preserveAspectRatio="none"> | ||
| <path d="M0,200 Q200,100 400,200 T800,200 T1200,200 T1600,200 V1000 H0 Z" fill="#FFCCCB" /> | ||
| <path d="M0,400 Q200,300 400,400 T800,400 T1200,400 T1600,400 V1000 H0 Z" fill="#FFCCCB" /> | ||
| <path d="M0,600 Q200,500 400,600 T800,600 T1200,600 T1600,600 V1000 H0 Z" fill="#FFCCCB" /> | ||
| <path d="M0,800 Q200,700 400,800 T800,800 T1200,800 T1600,800 V1000 H0 Z" fill="#FFCCCB" /> | ||
| </svg> | ||
| </div> | ||
|
|
||
| <div className="max-w-md mx-auto space-y-6 relative z-10"> | ||
| <div className="text-center"> | ||
| <img | ||
| src={profileImage} | ||
| alt={name} | ||
| className="w-24 h-24 rounded-full mx-auto mb-4 border-2 border-red-200 shadow-sm" | ||
| /> | ||
| <h1 className="text-2xl font-bold text-gray-800">{name}</h1> | ||
| <p className="text-gray-600">{description}</p> | ||
| </div> | ||
|
|
||
| <div className="flex justify-center space-x-4"> | ||
| {socialLinks.map((link, index) => ( | ||
| <a | ||
| key={index} | ||
| href={link.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="text-red-500 hover:text-red-600 transition-colors" | ||
| > | ||
| <span className="sr-only">{link.platform}</span> | ||
| {getSocialIcon(link.platform)} | ||
| </a> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="space-y-4"> | ||
| {items.map((item, index) => ( | ||
| <div key={index}> | ||
| {item.type === 'category' && ( | ||
| <h2 className="text-lg font-semibold text-red-500 mb-2">{item.title}</h2> | ||
| )} | ||
| {item.type === 'link' && ( | ||
| <a | ||
| href={item.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="block bg-white rounded-full shadow hover:shadow-md transition-shadow p-4 border border-red-400 hover:border-red-500 text-center" | ||
| style={{ | ||
| boxShadow: '0 0 5px rgba(255, 0, 0, 0.2)', | ||
| }} | ||
| > | ||
| <span className="text-gray-800 font-medium">{item.title}</span> | ||
| </a> | ||
| )} | ||
| {item.type === 'youtube' && ( | ||
| <div> | ||
| <h2 className="text-lg font-semibold text-red-500 mb-2">{item.title}</h2> | ||
| <div className="aspect-video"> | ||
| <iframe | ||
| width="100%" | ||
| height="100%" | ||
| src={`https://www.youtube.com/embed/${item.youtubeId}`} | ||
| title={item.title} | ||
| frameBorder="0" | ||
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
| allowFullScreen | ||
| ></iframe> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function getSocialIcon(platform: string) { | ||
| switch (platform.toLowerCase()) { | ||
| case 'twitter': | ||
| return <Twitter className="w-6 h-6" /> | ||
| case 'linkedin': | ||
| return <Linkedin className="w-6 h-6" /> | ||
| case 'youtube': | ||
| return <Youtube className="w-6 h-6" /> | ||
| case 'instagram': | ||
| return <Instagram className="w-6 h-6" /> | ||
| case 'mail': | ||
| return <Mail className="w-6 h-6" /> | ||
| case 'music': | ||
| return <Music className="w-6 h-6" /> | ||
| case 'gamepad': | ||
| return <Gamepad className="w-6 h-6" /> | ||
| default: | ||
| return null | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { clsx, type ClassValue } from "clsx" | ||
| import { twMerge } from "tailwind-merge" | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)) | ||
| } |
Oops, something went wrong.