Skip to content

Home

Jump to bottom
KaloudasDev edited this page Feb 19, 2026 · 8 revisions

KaloudasDev LinkHub Wiki

Welcome to the official wiki for the KaloudasDev LinkHub project - a modern, minimalist link hub website with discord integration. This documentation provides information about the project's architecture, features, and maintenance procedures.

Introduction

KaloudasDev LinkHub is a professional portfolio link hub designed to showcase developer profiles and social connections through a modern, responsive interface. Real-time Discord presence tracking with live activity and animated backgrounds.

Purpose

  • Centralized social media and portfolio link management
  • Real-time Discord status showcasing
  • Professional online presence establishment
  • Cross-platform compatibility assurance
  • Performance-optimized user experience

Features

Real-Time Discord Integration (v2.0+)

Feature Description
Live Status Tracking Online, Idle, DND, Offline with colored indicators
Spotify Integration Now playing display with album artwork
Game Activity Real-time game presence with custom art
Auto-Refresh Updates every 5 seconds via Lanyard API

Visual Design

Feature Description
Animated Gradient Orbs Three floating orbs (neon yellow, blurple, soft red) with 20s animations
Glass Morphism Backdrop blur (12px) on cards with semi-transparent backgrounds
Dark Theme Deep navy (#0a0f1e) with neon yellow accents (#dbf602)
Smooth Animations Hover effects, scale transforms, and transitions

Technical Features

  • Next.js 14 framework with static export
  • CSS Variables for easy theming
  • Font Awesome 6 icon library
  • Google Fonts (Inter, JetBrains Mono)
  • Service Worker ready architecture
  • Mobile-first responsive approach
  • Cross-browser compatibility

Architecture

Technology Stack

Frontend:
├── Next.js 14              # React framework
├── CSS3                     # Styling with CSS variables
├── JavaScript (ES6+)        # Client-side logic
└── Lanyard REST API         # Discord presence data

External Resources:
├── Font Awesome 6            # Icons
├── Google Fonts              # Typography
└── Vercel                    # Deployment (optional)

File Structure

kaloudasdev-links/
├── app/
│   ├── components/
│   │   ├── Footer.js        # Social links footer
│   │   └── Navbar.js         # Minimal navbar
│   ├── globals.css           # Global styles & theming
│   ├── layout.js             # Root layout with metadata
│   └── page.js               # Main page with Discord logic
├── .github/
│   └── workflows/
│       └── deploy.yml        # GitHub Pages deployment
├── public/
│   └── assets/               # Images and icons
├── next.config.mjs           # Next.js configuration
├── package.json              # Dependencies
├── README.md                 # Project overview
├── CHANGELOG.md              # Version history
├── LICENSE                   # AGPL-3.0 license
└── SECURITY.md               # Security policy

Setup Guide

Prerequisites

  • Node.js 18+ installed
  • Git installed
  • Discord User ID (for presence tracking)
  • GitHub account (for deployment)

Local Development

# Clone the repository
git clone https://github.com/KaloudasDev/kaloudasdev-links.git

# Navigate to project
cd kaloudasdev-links

# Install dependencies
npm install

# Start development server
npm run dev

The site will be available at http://localhost:3000

Production Build

# Create production build
npm run build

# The static files will be in the 'out' folder

Customization Guide

Discord User ID

// In app/page.js
const DISCORD_USER_ID = 'YOUR_DISCORD_USER_ID';  // Get from Discord

Color Scheme

/* In app/globals.css - CSS Variables */
:root {
    --primary-dark: #0a0f1e;      /* Main background */
    --accent-primary: #dbf602;     /* Accent color */
    --discord-online: #43b581;     /* Online status */
    --discord-idle: #faa61a;        /* Idle status */
    --discord-dnd: #f04747;         /* Do Not Disturb */
    --discord-offline: #747f8d;     /* Offline status */
}

Social Links

// In app/page.js - Update href attributes
<a href="YOUR_KOFI_URL" ...>Support My Work</a>
<a href="YOUR_DISCORD_URL" ...>Connect On Discord</a>
<a href="YOUR_GITHUB_URL" ...>View GitHub Projects</a>

Gradient Orbs

/* In app/globals.css - Customize orb colors */
.hub-orb-1 {
    background: radial-gradient(circle at 30% 30%, #YOUR_COLOR, transparent 70%);
}

Security Features

Implemented Protections

  • Content Security Policy headers
  • XSS protection mechanisms
  • Clickjacking prevention
  • No-opener, no-referrer external links
  • Secure cookie configuration
  • Input validation for API calls

Security Considerations

  • All external links open in new tabs with rel="noopener noreferrer"
  • Discord API calls are read-only (no sensitive data exposure)
  • Environment variables not required
  • Regular dependency updates
  • Security vulnerability reporting process

Responsive Design

Breakpoints

Device Screen Size Optimizations
Desktop 1200px+ Full layout, larger cards
Tablet 768px - 1199px Adjusted spacing
Mobile Large 480px - 767px Stacked layout
Mobile Small 320px - 479px Touch-friendly sizing

Mobile Optimizations

  • Touch targets minimum 44x44px
  • Optimized font sizes (16px minimum)
  • Simplified animations for performance
  • Single-column layout
  • Reduced backdrop blur on low-end devices

API Integration

Lanyard REST API

// Endpoint: https://api.lanyard.rest/v1/users/{DISCORD_USER_ID}
// Response includes:
- discord_status: "online" | "idle" | "dnd" | "offline"
- activities: Array of current activities
- spotify: Currently playing track (if any)

Data Flow

  1. Client fetches Discord status every 5 seconds
  2. API returns JSON with presence data
  3. Component updates UI based on status
  4. Activity images are processed and displayed
  5. Error handling with fallback states

Performance Optimization

Build Optimizations

  • Static HTML export via output: 'export'
  • Image optimization with next/image
  • Font loading optimization
  • Tree shaking for unused code

Runtime Performance

  • Minimal re-renders with React hooks
  • 5-second API refresh interval (balanced)
  • CSS animations using transform/opacity
  • Lazy loading for off-screen images

Troubleshooting

Common Issues

Issue Solution
Discord status not showing Verify USER_ID in page.js
Images not loading Check domains in next.config.mjs
Build fails Update Node.js to v18+
Mobile layout broken Test at different breakpoints
API rate limiting Increase refresh interval

Debugging Steps

  1. Open browser console (F12)
  2. Check for network errors (Discord API)
  3. Verify environment configuration
  4. Test in incognito mode
  5. Clear browser cache

Best Practices

Code Standards

  • Use semantic HTML5 elements
  • Follow CSS BEM naming convention
  • Implement React hooks correctly
  • Add error boundaries for API calls
  • Comment complex logic

Performance Guidelines

  • Optimize images before adding
  • Minimize API calls
  • Use CSS instead of JS animations
  • Lazy load non-critical resources
  • Monitor bundle size

Updates & Maintenance

Version Control

  • Semantic versioning (MAJOR.MINOR.PATCH)
  • Detailed CHANGELOG.md maintenance
  • Feature branches for development
  • Tagged releases with notes

Maintenance Schedule

Frequency Task
Monthly Dependency updates
Quarterly Security audits
Bi-annually Performance review
Annually Major feature updates

Monitoring

  • GitHub Actions status checks
  • Discord API availability
  • Build success rate
  • Page load times
  • User feedback

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Areas for Contribution

  • Accessibility improvements
  • Performance optimizations
  • New features
  • Documentation updates
  • Bug fixes

Clone this wiki locally