Link in Bio - Personal Portfolio Page

A modern, responsive "link in bio" page with glassmorphism design, dark mode support, and interactive blog carousel. Perfect for showcasing your social media presence and latest content.

Live Demo

• Primary Demo: https://socialportal.nayanchandradas.com
• GitHub Pages: https://nayandas69.github.io/link-in-bio

Features

Core Features

• Responsive glassmorphism design
• Dark/Light mode toggle with persistence
• Interactive blog carousel with autoplay
• Social media links with hover effects
• Modal popup for blog details
• Touch/swipe support for mobile
• Keyboard navigation support
• SEO optimized with meta tags
• Accessibility features (ARIA labels, focus states)
• Cross-browser compatibility

Design Features

• Modern glassmorphism UI
• Smooth animations and transitions
• Hover tooltips for social links
• Responsive design (mobile-first)
• Custom scrollbar styling
• Parallax background effect

Technical Features

• Vanilla JavaScript (no dependencies)
• CSS3 with advanced features
• LocalStorage for theme persistence
• Touch gesture support
• Performance optimized
• Clean, maintainable code

Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Icons: Font Awesome 6.6.0
• Fonts: Google Fonts (Poppins, Roboto Slab)
• Storage: LocalStorage for theme persistence
• Deployment: GitHub Pages / Netlify compatible

Quick Start

Installation

1. Clone the repository:

git clone https://github.com/nayandas69/link-in-bio.git
cd link-in-bio

2. Open index.html in your browser or serve with a local server:

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

3. Visit http://localhost:8000 to view the page

Customization Guide

Personal Information

Profile Section (index.html)

<!-- Update profile image and details -->
<img src="images/profile.jpg" alt="Your Name Profile Picture" class="profile-img">
<h1>Your Name</h1>
<p>Your tagline or description</p>

Social Links (index.html)

<!-- Replace with your social media links -->
<a href="https://github.com/yourusername" class="social-link github">
<a href="https://youtube.com/@yourchannel" class="social-link youtube">
<a href="mailto:your.email@domain.com" class="social-link email">

Blog Content

Update Blog Data (index.js)

// Replace with your blog posts/videos
const blogs = [
    {
        title: 'Your Blog Post Title',
        description: 'Your blog post description...',
        video: 'https://www.youtube.com/embed/YOUR_VIDEO_ID',
        thumbnail: 'images/your-thumbnail.jpg'
    },
    // Add more blog posts...
];

Color Customization

Social Link Colors (index.css)

/* Customize social platform colors */
.social-link.github {
    background: linear-gradient(135deg, #your-color1, #your-color2);
}

.social-link.custom-platform {
    background: linear-gradient(135deg, #custom-color1, #custom-color2);
}

Theme Colors (index.css)

/* Light mode container */
.container {
    background: rgba(255, 255, 255, 0.1); /* Adjust transparency */
}

/* Dark mode container */
body.dark-mode .container {
    background: rgba(0, 0, 0, 0.6); /* Adjust transparency */
}

Background Customization

Change Background Image (index.css)

body {
    background-image: url('images/your-background.jpg');
    background-size: cover;
    background-position: center;
}

Configuration Options

Carousel Settings (index.js)

// Adjust carousel autoplay timing
const autoplayInterval = 5000; // 5 seconds (change as needed)

// Modify swipe sensitivity
const swipeThreshold = 50; // pixels (adjust for touch sensitivity)

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile browsers (iOS Safari, Chrome Mobile)

Performance

• Optimized images and assets
• Minimal JavaScript bundle
• CSS animations with GPU acceleration
• Lazy loading for images
• Efficient DOM manipulation

Accessibility

• ARIA labels and roles
• Keyboard navigation support
• Screen reader compatibility
• High contrast mode support
• Reduced motion preferences
• Focus indicators

SEO Features

• Meta tags for search engines
• Open Graph tags for social sharing
• Semantic HTML structure
• Alt text for images
• Proper heading hierarchy

Deployment

GitHub Pages

1. Fork this repository
2. Go to Settings > Pages
3. Select source branch (main)
4. Your site will be available at https://yourusername.github.io/link-in-bio

Netlify

1. Connect your GitHub repository
2. Build command: (leave empty)
3. Publish directory: /
4. Deploy automatically on push

Custom Domain

Update the following files for custom domain:

• Add CNAME file with your domain
• Update meta tags in index.html
• Update README.md links

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

Troubleshooting

Common Issues

Dark Mode Not Persisting

• Check browser localStorage support
• Clear browser cache and cookies
• Ensure JavaScript is enabled

Carousel Not Working

• Verify image paths are correct
• Check browser console for errors
• Ensure all blog data is properly formatted

Social Links Not Opening

• Verify URLs are correct and include https://
• Check for typos in href attributes
• Test links individually

License and Usage

Important

This project is licensed under the MIT License. You are free to use, modify, and distribute this code for personal and commercial purposes.

Caution

Do not remove the author credit comments from the code files (HTML, CSS, JS). These credits should remain intact when using or modifying the project.

Usage Terms

• ✅ Free to use and modify
• ✅ Commercial use allowed
• ✅ Distribution allowed
• ❌ Do not remove author credits from code
• ❌ Do not claim original authorship

Author

Nayan Das

• GitHub: @nayandas69
• Email: nayanchandradas@hotmail.com
• YouTube: @dasnayan69

Support

If you find this project helpful, consider:

• Starring the repository
• Following on GitHub
• Subscribing to the YouTube channel
• Supporting on Patreon: @NayanDas69

Changelog

Version 2.0.0

• Initial release with core features
• Responsive design implementation
• Dark mode functionality
• Blog carousel with autoplay
• Social media integration

---

Made with dedication by Nayan Das | Licensed under MIT