---

📋 Table of Contents

#	Section
1	✨ Project Overview
2	🖥️ Live Preview
3	🎯 Key Features
4	🆕 What's New
5	🛠️ Tech Stack
6	📁 Project Structure
7	⚙️ Installation & Usage
8	🎨 Customization Guide
9	🔍 SEO Setup
10	🔗 All Platform Links
11	📝 Articles & Write-ups
12	📊 GitHub Stats
13	📫 Contact
14	🤝 Contributing
15	⭐ Support

---

✨ Project Overview

   

Futuristic Links Dashboard is a sleek, fully JavaScript-powered single-page application that acts as a personal link hub — showcasing all social, professional, and developer profiles in one beautifully animated interface.

The entire UI is dynamically generated from a single DATA object in main.js — no frameworks, no build tools, no backend required. Just open index.html and it runs.

📌 No React  ·  No Vue  ·  No Angular  ·  No Build Step  ·  Just Vanilla JS + GSAP

---

🖥️ Live Preview

🌙 Dark Mode	☀️ Light Mode
Default theme on load	Press T or click toggle
Cyan neon glow effects	Clean minimal UI
Full particle canvas	Subtle particle canvas
Deep black background	Soft #f0f4f8 background

---

🎯 Key Features

       

🤖 AI Particle Background

• Canvas-based floating particle system with 110 animated nodes
• Connecting lines rendered between nearby particles
• Mouse repulsion — particles push away from your cursor
• Multi-colored particles: cyan, magenta, green
• Fully responsive — resizes with the browser window

🃏 Interactive Link Cards

• Glassmorphism design with backdrop-filter: blur(18px)
• GSAP-powered hover animations (lift, scale, glow)
• Shimmer sweep effect on hover
• Bottom rainbow glow line reveal on hover
• Rotating rainbow border ring on avatar
• Touch-friendly animations for mobile

📋 Copy Link Button (New)

• Every card has a hidden copy button — appears on hover
• One click copies the URL to clipboard
• Toast notification confirms the copy
• Turns green with a checkmark on success

📊 Stats Counter (New)

• 4 animated stat cards: Platforms, Profiles, Projects, Connect
• Numbers count up with animation on page load
• Hover effect with cyan glow

⏳ Loading Screen (New)

• Three spinning rings (cyan, magenta, green)
• Animated dots and glowing text
• Auto-hides after page load (min 1.8s for feel)

🌓 Dark / Light Theme Toggle

• Always opens in Dark Mode by default
• Smooth CSS variable transitions
• Keyboard shortcut: press T to toggle
• Updates theme-color meta for mobile browser chrome
• Icon spins on toggle (GSAP)

📱 Fully Responsive

Screen	Grid	Card Layout
Desktop >960px	3 columns	Vertical icon + label
Tablet 600–960px	2 columns	Vertical icon + label
Mobile 380–600px	2 columns	Compact
Small Mobile <380px	1 column	Horizontal

♿ Accessibility

• Semantic HTML5 with proper ARIA labels
• prefers-reduced-motion support
• Keyboard navigable with focus-visible ring
• Screen reader friendly

---

🆕 What's New

 

Feature	Status
Loading screen with tri-ring animation	✅ Added
Copy link button on every card	✅ Added
Stats counter with count-up animation	✅ Added
Toast notification system	✅ Added
Rainbow rotating border on avatar	✅ Added
GSAP timeline entry animations	✅ Improved
Full SEO meta tags + Schema.org 5-types	✅ Added
robots.txt + sitemap.xml	✅ Added
site.webmanifest (PWA ready)	✅ Added
Font Awesome integrity hash	✅ Added
defer on all scripts	✅ Added

---

🛠️ Tech Stack

Layer	Technology	Purpose
Markup	HTML5	Minimal shell — UI generated by JS
Styling	CSS3	CSS variables, glassmorphism, keyframes
Logic	Vanilla JavaScript	DOM rendering, theme, scroll, canvas
Animation	GSAP 3.12	Hover, entry, stagger, timeline
Icons	Font Awesome 6	Platform icons with brand colors
Canvas	Native Browser API	AI particle background
Fonts	Google Fonts	Orbitron · Rajdhani · Inter
Hosting	GitHub Pages	Free static site hosting

---

📁 Project Structure

futuristic-links-dashboard/
│
├── 📄 index.html              ← Full SEO shell + Schema.org + OG tags
│
├── 📄 robots.txt              ← SEO crawl rules + AI bot blocking
├── 📄 sitemap.xml             ← 28 URLs with image sitemap
├── 📄 site.webmanifest        ← PWA manifest (install on home screen)
│
├── 📁 assets/
│   ├── 📁 css/
│   │   └── 🎨 style.css      ← Loading screen, toast, CSS variables
│   └── 📁 js/
│       └── ⚡ main.js         ← DATA object, all UI, canvas, GSAP
│
└── 📁 icon/
    ├── 🖼️ icon.jpeg           ← Favicon / PWA icon
    └── 🖼️ image (4).png       ← Profile avatar

---

⚙️ Installation & Usage

Option 1 — Run Locally

# 1. Clone the repository
git clone https://github.com/YasirAwan4831/futuristic-links-dashboard.git

# 2. Navigate into the folder
cd futuristic-links-dashboard

# 3. Open in browser
open index.html          # macOS
start index.html         # Windows
xdg-open index.html      # Linux

No npm. No build step. No server needed. Just open the HTML file.

Option 2 — Live Server (VS Code)

1. Install the Live Server extension
2. Right-click index.html → Open with Live Server
3. Auto-reloads on save ✨

Option 3 — Deploy on GitHub Pages

# 1. Fork this repo on GitHub
# 2. Settings → Pages → Deploy from branch → main → / (root)
# 3. Live at: https://YOUR-USERNAME.github.io/futuristic-links-dashboard/

---

🎨 Customization Guide

Everything is controlled from the DATA object in assets/js/main.js:

Edit Your Profile

profile: {
  name:    "Your Name",
  title:   "Your Job Title",
  tagline: "Your tagline here",
  avatar:  "icon/your-photo.jpg",
  badges:  ["Badge 1", "Badge 2", "Badge 3", "Badge 4"]
}

Edit Stats Counter

stats: [
  { label: "Platforms", value: 26,  icon: "fa-solid fa-link" },
  { label: "Profiles",  value: 10,  icon: "fa-solid fa-user-circle" },
  { label: "Projects",  value: 3,   icon: "fa-solid fa-globe" },
  { label: "Connect",   value: "∞", icon: "fa-solid fa-infinity", noCount: true }
]

Add / Edit Links

links: [
  {
    name:     "LinkedIn",
    url:      "https://linkedin.com/in/yourname",
    icon:     "fa-brands fa-linkedin-in",
    color:    "#0A66C2",
    category: "Professional"
  }
]

Available Categories

Category	Used For
Professional	LinkedIn, GitHub, Portfolio, ORCID
Dev	LeetCode, Kaggle, HackerRank, Stack Overflow
Writing	Medium, Dev.to, Hashnode, Substack
Social	YouTube, X, Instagram, TikTok
Contact	Gmail, Outlook

👉 Find icon classes at fontawesome.com/icons

---

🔍 SEO Setup

This project includes a complete SEO package:

File	Purpose
index.html	Full meta tags, OG, Twitter Card, Schema.org
robots.txt	Crawler rules, AI bot blocking
sitemap.xml	28 URLs + image sitemap
site.webmanifest	PWA install, shortcuts, screenshots
schema.jsonld	5 Schema.org types (Person, WebSite, WebPage, ProfilePage, ItemList)

After Deploying — Submit to Search Engines

Google Search Console → Add Property → Submit Sitemap:
https://yasirawan4831.github.io/futuristic-links-dashboard/sitemap.xml

Bing Webmaster Tools → Submit URL:
https://yasirawan4831.github.io/futuristic-links-dashboard/

---

🔗 All Platform Links

💼 Professional

💻 Developer / Coding

✍️ Blogging / Writing

📱 Social / Video

📧 Contact

---

📝 Articles & Write-ups

Detailed articles about this project covering design decisions, JavaScript architecture, and animation techniques.

Platform	Topic	Link
	Project architecture, UI decisions & implementation	Read →
	JS logic, GSAP animations & dev flow	Read →
	Full overview: inspiration, stack & features	Read →

---

📊 GitHub Stats

  

---

📫 Contact

     

---

🤝 Contributing

Contributions are what make open source amazing! Any contributions are greatly appreciated.

# 1. Fork the project
# 2. Create your feature branch
git checkout -b feature/AmazingFeature

# 3. Commit your changes
git commit -m "Add: AmazingFeature description"

# 4. Push to the branch
git push origin feature/AmazingFeature

# 5. Open a Pull Request

Ideas for contributions:

• 🎨 New color themes
• 🃏 New card hover effects
• 📊 Analytics integration
• 🌐 i18n / multi-language support
• 🖼️ New background animation styles
• 🔍 Search / filter links feature

---

⭐ Support

If this project helped you, please consider:

   

 

---

_{© 2026 Muhammad Yasir  ·  MIT License  ·  Portfolio  ·  Live Demo}