Link in Bio - Modern Portfolio

This link-in-bio protfolio tempalate is featuring your social links with blog carousel powered by Blogverse API. It includes a verified badge, dark/light theme toggle, and glassmorphism effects for a sleek, modern look.

Pre-view

License and Usage

This project is licensed under a Custom License.

• ✅ Free to use, modify, and distribute
• ✅ Personal and non-commercial use allowed
• ❌ Commercial use or resale requires author’s permission
• ❌ Do not remove author credits from the source code
• ❌ Do not claim original authorship or misrepresent attribution

Full license terms are available in the LICENSE file.

Author

Nayan Das

• GitHub: @nayandas69
• YouTube: @dasnayan69
• Email: [email protected]

Features

Modern Design

• Glassmorphism UI with backdrop blur effects
• Dark/Light mode toggle with system preference detection
• Smooth animations powered by Framer Motion
• Responsive design optimized for all devices
• Gradient backgrounds with animated elements

Social Integration

• 6 Active social platforms in a single row layout
• 18+ Extended social icons available (Facebook, Instagram, X, LinkedIn, TikTok, WhatsApp, Telegram, Snapchat, Bluesky, Mastodon, Tumblr, Messenger)
• Custom SVG icons with platform-specific colors
• Verified Badge with tooltip for authenticity
• Easy activation - simply uncomment desired social platforms
• Hover tooltips with smooth animations
• Direct links to all your social profiles
• Accessibility support with proper ARIA labels

Blog Carousel

• Auto-playing carousel with manual navigation
• Live blog integration fetched from Blogverse API
• Touch gestures touch/swipe navigation for blog carousel on mobile devices
• Category and duration badges
• Smooth transitions between slides
• Dynamic thumbnails - displays real blog cover images when available

Analytics & Performance

• Vercel Analytics integration for visitor tracking
• Vercel Speed Insights for performance monitoring
• Real-time performance metrics
• Core Web Vitals tracking
• Zero configuration analytics setup

Environment Configuration

• Environment variables support with .env.local
• Google Search Console verification setup
• Secure configuration management
• Development/Production environment separation
• Example configuration file included

Performance

• Next.js 14 with App Router
• Image optimization with Next.js Image component
• Font optimization with Google Fonts
• SEO optimized with proper metadata
• TypeScript for type safety

Quick Start

Prerequisites

• Node.js 18.0 or higher
• npm 8.0 or higher

Installation

1. Clone the repository

   git clone https://github.com/nayandas69/linkinbio-nextjs.git
   cd linkinbio-nextjs

2. Install dependencies

   npm install

3. Set up environment variables

   # Copy the example environment file
   cp .env.example .env.local
   
   # Edit .env.local with your actual values
   # Add your Google Search Console verification code

4. Add your images Place your images in the public/images/ folder:

   • profile.jpg - Your profile picture
   • favicon.jpg - Website favicon
   • blog1.png, blog2.png, blog3.png - Blog thumbnails

5. Start development server

   npm run dev

6. Open your browser Navigate to http://localhost:3000

Blog Integration

Current Version (v0.2.1)

This version includes minor fixes and improvements over v0.2.0:

• Fixes & Enhancements:
  • Improved blog API handling, reading time format, and thumbnail URLs
  • Added metadataBase to ensure correct SEO and social image URLs
  • Allows proper rendering of blog thumbnails across all environments

Other features such as live API integration, automatic display of latest 5 posts, and setup remain the same as v0.2.0.

Previous Version (v0.2.0)

This version uses a live API to fetch blog posts dynamically from Blogverse:

• Blog API Endpoint: https://blogverse-five-omega.vercel.app/api/v1/posts/recent?limit=5
• Blogverse Repository: blogverse
• Features: Automatically displays your latest 5 blog posts with real-time updates
• Setup: No additional configuration needed - works out of the box!

Older Version (v0.1.0)

If you want to use hardcoded blog data instead of the API:

• Checkout the tag: git checkout v0.1.0
• Or view the release: https://github.com/nayandas69/linkinbio-nextjs/releases/tag/v0.1.0
• Update blogData: Modify the blogData array in app/page.tsx

---

Tech Stack

Technology	Version	Purpose
Next.js	16.0+	React framework with App Router
React	18.0+	UI library
TypeScript	5.0+	Type safety
Tailwind CSS	3.3+	Utility-first CSS framework
Framer Motion	10.16+	Animation library
Lucide React	0.294+	Icon library
Vercel Analytics	Latest	Visitor tracking
Vercel Speed Insights	Latest	Performance monitoring

Environment Variables

Create a .env.local file in your project root:

# Google Search Console Verification Code
# Get this from Google Search Console -> Settings -> Ownership verification
GOOGLE_VERIFICATION_CODE=your-google-verification-code-here

# Optional: Additional configuration
# NEXT_PUBLIC_SITE_URL=https://yourdomain.com
# NEXT_PUBLIC_AUTHOR_NAME=Your Name

Getting Google Verification Code:

1. Go to Google Search Console
2. Add your website property
3. Go to Settings → Ownership verification
4. Choose HTML tag method
5. Copy the content value from the meta tag
6. Add it to your .env.local file

Customization

Personal Information

Edit app/page.tsx to update:

• Name and bio text
• Social media links and URLs
• Blog post data and YouTube video IDs

Social Links

Update the socialLinks array in app/page.tsx:

const socialLinks = [
  {
    name: "GitHub",
    url: "https://github.com/yourusername",
    icon: GitHubIcon,
    bgColor: "bg-gray-800",
  },
  // Add more platforms...
]

Extended Social Icons

To activate additional social platforms:

1. Uncomment desired icons in components/social-icons.tsx:

   // Remove /* */ around the icons you want to use
   export const InstagramIcon: React.FC<IconProps> = ({ size = 24, className = "" }) => (
     // Icon SVG code
   )

2. Uncomment imports in app/page.tsx:

   import {
     InstagramIcon,
     FacebookIcon,
     // Add other icons you uncommented
   } from "@/components/social-icons"

3. Use extended social links array by replacing socialLinks with extendedSocialLinks

Available Extended Icons:

• Facebook, Instagram, X (Twitter), LinkedIn
• TikTok, WhatsApp, Telegram, Snapchat
• Bluesky, Mastodon, Tumblr, Messenger

Blog Posts

Note: This version uses the Blogverse API to fetch blog posts automatically.

If you want to use hardcoded blog data:

1. Checkout the v0.1.0 release
2. Update the blogData array in app/page.tsx:

const blogData = [
  {
    id: 1,
    title: "Your Blog Post Title",
    description: "Your blog post description...",
    videoId: "YouTube_VIDEO_ID",
    thumbnail: "/images/your-thumbnail.png",
    category: "Your Category",
    duration: "10:30",
  },
  // Add more posts...
]

Styling

• Colors: Modify tailwind.config.ts for custom color schemes
• Animations: Adjust Framer Motion settings in components
• Layout: Update responsive breakpoints and spacing

Responsive Design

The application is fully responsive with optimized layouts for:

• Desktop (1024px+): Full layout with all features
• Tablet (768px-1023px): Adapted spacing and sizing
• Mobile (320px-767px): Touch-optimized interface

Dark Mode

Automatic dark mode support with:

• System preference detection
• Manual toggle with persistent storage
• Smooth transitions between themes
• Optimized colors for both modes

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run type-check	Run TypeScript checks
npm run format:check	Run Prettier checks
npm run format	Format code with Prettier

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically with zero configuration
5. Analytics and Speed Insights are automatically enabled

Other Platforms

• Netlify: Build command: npm run build, Publish directory: .next
• Railway: Supports Next.js out of the box
• DigitalOcean: Use App Platform with Node.js

Performance

• Lighthouse Score: 95+ across all metrics
• Core Web Vitals: Optimized for excellent user experience
• Image Optimization: Automatic WebP/AVIF conversion
• Code Splitting: Automatic with Next.js App Router
• Real-time Monitoring: Vercel Speed Insights integration

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Acknowledgments

• Next.js Team for the amazing framework
• Vercel for hosting and deployment
• Tailwind CSS for the utility-first approach
• Framer Motion for smooth animations
• Lucide for beautiful icons

---

⭐ Star this repository if you found it helpful!

🐛 Found a bug/suggestion? Open an issue

---

💖 Support This Project

If you find this project helpful and want to support its ongoing development:

🛒 Buy the project or support me on Patreon to help keep it alive and maintained.

🎯 Patreon: https://www.patreon.com/nayandas69 📧 Or contact me directly: [email protected]

Your support means a lot! 🙏