LearnToVibeCode
$29 Buy Tutorial
Clone This App Tutorial

Build a Link-in-Bio Page

Create your own Linktree-style page from scratch using Claude Code. Perfect for Instagram, TikTok, or anywhere you need one link.

What You'll Build

Features

  • Profile photo and bio section
  • Customizable link buttons
  • Social media icons
  • Custom themes/colors
  • Mobile-responsive design
  • Animated hover effects

You'll Learn

  • HTML structure and semantics
  • CSS styling with Tailwind
  • Working with images
  • Creating reusable components
  • Deploying to the web

Prerequisites

  • Claude Code installed and working
  • A code editor (Cursor recommended)
  • Basic familiarity with your terminal
  • A profile photo (or placeholder)
1

Create Your Project

First, let's set up a new project folder and initialize it with Claude Code.

Open your terminal and run:

mkdir my-links
cd my-links
claude

Paste this prompt to Claude Code:

Create a link-in-bio page like Linktree. I want:
- A profile photo at the top (use a placeholder for now)
- My name and a short bio
- 5 clickable link buttons that go to different URLs
- Social media icons at the bottom (Instagram, Twitter, YouTube)
- A clean, modern design with a gradient background
- Mobile-friendly layout

Use HTML and Tailwind CSS via CDN. Create a single index.html file.
2

Customize Your Content

Now let's personalize the page with your actual information.

Paste this prompt:

Update the link-in-bio page with my information:

Name: [Your Name]
Bio: [Your short bio, e.g., "Designer, creator, coffee lover"]

Links:
1. My Website - https://yourwebsite.com
2. My Portfolio - https://portfolio.com
3. Book a Call - https://cal.com/you
4. My Newsletter - https://newsletter.com
5. Free Resources - https://resources.com

Social links:
- Instagram: https://instagram.com/yourusername
- Twitter: https://twitter.com/yourusername
- YouTube: https://youtube.com/@yourchannel
3

Add Your Photo

Replace the placeholder with your actual profile photo.

  1. 1. Save your profile photo as photo.jpg in your project folder
  2. 2. Make sure it's square (same width and height)

Paste this prompt:

Update the profile image to use photo.jpg from the same folder. Make sure it's displayed as a circle with a nice border.
4

Customize the Theme

Make it yours by changing colors and styling.

Try prompts like:

Change the background to a gradient from purple to pink.

Make the link buttons have rounded corners with a white background and dark text.

Add a subtle shadow to the link buttons.

Make the buttons have a nice hover effect - maybe scale up slightly and change color.
5

Add Animations

Make it feel polished with subtle animations.

Paste this prompt:

Add these animations to make the page feel more alive:
1. Fade in the profile photo and name when the page loads
2. Stagger the link buttons so they appear one after another
3. Add a subtle pulse animation to the social icons on hover
4. Make transitions smooth (0.3s ease)
6

Deploy It Live

Get your link-in-bio page online so you can share it!

Option A: Deploy to Netlify (Easiest)

  1. 1. Go to netlify.com and sign up
  2. 2. Drag and drop your project folder onto the page
  3. 3. Done! You'll get a free URL like yoursite.netlify.app

Option B: Deploy to Vercel

npm install -g vercel
vercel

Follow the prompts and you'll get a live URL.

Bonus Ideas

Once your basic page is working, try these enhancements:

  • Add a dark/light mode toggle
  • Add click analytics (count how many times each link is clicked)
  • Create multiple theme options users can switch between
  • Add a "Copy link" button
  • Embed a Spotify playlist or YouTube video

Get the Complete Tutorial

Includes finished code, additional customization prompts, and video walkthrough.

Buy Now — $29