Skip to main content

​
Overview

The MilesONerd website features an extensive social media footer with links to 17+ platforms, showcasing a broad presence across development, design, and data science communities. Each platform uses SVG icons from SimpleIcons for consistent, scalable branding.
All social links are displayed in the website footer with hover effects and lazy loading for optimal performance.

​
Platform Coverage

The social links span multiple categories:

Code Repositories

GitHub, GitLab, Bitbucket, Gitea, Codeberg

Social Networks

Instagram, Threads, Mastodon

Developer Tools

CodePen, Stack Overflow, Postman, WakaTime

AI & Data Science

Kaggle, Hugging Face

Professional

Google Developer Profile, Open Profile, Gravatar

​
Complete Platform List

Here are all 17 social platforms with their respective URLs:

​
Code Repository Platforms

Platform: Bitbucket
URL: https://bitbucket.org/milesonerd
Purpose: Git repository hosting and collaboration
Icon: https://cdn.simpleicons.org/bitbucket/ffffff
Platform: Codeberg
URL: https://codeberg.org/MilesONerd
Purpose: Open-source, privacy-focused Git hosting
Icon: https://cdn.simpleicons.org/codeberg/ffffff
Platform: Gitea
URL: https://gitea.com/MilesONerd
Purpose: Self-hosted Git service
Icon: https://cdn.simpleicons.org/gitea/ffffff
Platform: GitHub
URL: https://github.com/MilesONerd
Purpose: Primary code repository and open-source contributions
Icon: https://cdn.simpleicons.org/github/ffffff
Platform: GitLab
URL: https://gitlab.com/MilesONerd
Purpose: DevOps platform with CI/CD capabilities
Icon: https://cdn.simpleicons.org/gitlab/ffffff

​
Development & Design

Platform: CodePen
URL: https://codepen.io/MilesONerd
Purpose: Front-end code playground and showcase
Icon: https://cdn.simpleicons.org/codepen/ffffff
Platform: Stack Overflow
URL: https://stackoverflow.com/users/26412577
Purpose: Technical Q&A and community support
Icon: https://cdn.simpleicons.org/stackoverflow/ffffff
Platform: Postman
URL: https://www.postman.com/milesonerd
Purpose: API development and testing workspace
Icon: https://cdn.simpleicons.org/postman/ffffff
Platform: WakaTime
URL: https://wakatime.com/@MilesONerd
Purpose: Coding activity tracking and metrics
Icon: https://cdn.simpleicons.org/wakatime/ffffff

​
Data Science & AI

Platform: Kaggle
URL: https://kaggle.com/milesonerd
Purpose: Data science competitions and datasets
Icon: https://cdn.simpleicons.org/kaggle/ffffff
Platform: Hugging Face
URL: https://huggingface.co/milesonerd
Purpose: Machine learning models and datasets
Icon: https://cdn.simpleicons.org/huggingface/ffffff

​
Social Media

Platform: Instagram
URL: https://instagram.com/milesonerd
Purpose: Visual content and personal updates
Icon: https://cdn.simpleicons.org/instagram/ffffff
Platform: Threads
URL: https://threads.net/milesonerd
Purpose: Text-based social networking
Icon: https://cdn.simpleicons.org/threads/ffffff
Platform: Mastodon (Fosstodon)
URL: https://fosstodon.org/@MilesONerd
Purpose: Decentralized social network for FOSS community
Icon: https://cdn.simpleicons.org/mastodon/ffffff

​
Professional Profiles

Platform: Google Developer Profile
URL: https://g.dev/MilesONerd
Purpose: Google developer ecosystem presence
Icon: https://cdn.simpleicons.org/google/ffffff
Platform: Open Profile (Linux Foundation)
URL: https://openprofile.dev/profile/milesonerd
Purpose: Open-source developer credentials
Icon: https://cdn.simpleicons.org/linuxfoundation/ffffff
Platform: Gravatar
URL: https://gravatar.com/milesonerd
Purpose: Globally recognized avatar service
Icon: https://cdn.simpleicons.org/gravatar/ffffff

​
Implementation

​
HTML Structure

The social links are implemented using a semantic HTML structure in the footer: 
<div class="social-icons-container">
    <a href="https://bitbucket.org/milesonerd" class="text-white hover:text-blue-400">
        <img src="https://cdn.simpleicons.org/bitbucket/ffffff" 
             alt="Bitbucket logo" 
             class="social-icon" 
             loading="lazy">
    </a>
    <a href="https://codeberg.org/MilesONerd" class="text-white hover:text-blue-400">
        <img src="https://cdn.simpleicons.org/codeberg/ffffff" 
             alt="Codeberg logo" 
             class="social-icon" 
             loading="lazy">
    </a>
    <!-- ... additional platforms -->
</div>
All icons use lazy loading (loading="lazy") to improve initial page load performance.

​
Icon System

The social links use SimpleIcons CDN for consistent, scalable vector graphics: 
https://cdn.simpleicons.org/{platform}/{color}
Pattern breakdown:
  • {platform} - Platform name in lowercase (e.g., github, gitlab)
  • {color} - Hex color code without the # (e.g., ffffff for white)
SimpleIcons provides official SVG icons for 2,900+ brands, ensuring consistent and recognizable branding.

​
Styling with Tailwind CSS

Each link uses Tailwind CSS classes for responsive hover effects: 
class="text-white hover:text-blue-400"
This creates:
  • Default white color for icons
  • Blue hover effect on mouse over
  • Smooth transition between states

​
Complete Code Example

Here’s the full social links section from the footer: 
<div class="col-span-2">
    <div class="flex items-center mb-4">
        <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl">
            <img src="https://milesonerd.github.io/assets/image/Logo/Phoenix.jpg" 
                 alt="Enzo Fuke" 
                 width="50" 
                 height="50" 
                 loading="lazy">
        </div>
        <span class="ml-3 text-xl font-bold text-white">Enzo Fuke</span>
    </div>
    <p class="text-gray-400 mb-4">If it hasn't worked out yet, it's because it's not over yet</p>
    <div class="social-icons-container">
        <a href="https://bitbucket.org/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/bitbucket/ffffff" alt="Bitbucket logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://codeberg.org/MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/codeberg/ffffff" alt="Codeberg logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://codepen.io/MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/codepen/ffffff" alt="CodePen logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://gitea.com/MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/gitea/ffffff" alt="Gitea logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://github.com/MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/github/ffffff" alt="GitHub logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://gitlab.com/MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/gitlab/ffffff" alt="GitLab logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://g.dev/MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/google/ffffff" alt="Google logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://gravatar.com/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/gravatar/ffffff" alt="Gravatar logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://huggingface.co/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/huggingface/ffffff" alt="Hugging Face" class="social-icon" loading="lazy" />
        </a>
        <a href="https://instagram.com/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/instagram/ffffff" alt="Instagram logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://kaggle.com/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/kaggle/ffffff" alt="Kaggle logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://openprofile.dev/profile/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/linuxfoundation/ffffff" alt="Linux Foundation logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://fosstodon.org/@MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/mastodon/ffffff" alt="Mastodon logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://www.postman.com/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/postman/ffffff" alt="Postman logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://stackoverflow.com/users/26412577" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/stackoverflow/ffffff" alt="Stack Overflow logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://threads.net/milesonerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/threads/ffffff" alt="Threads logo" class="social-icon" loading="lazy">
        </a>
        <a href="https://wakatime.com/@MilesONerd" class="text-white hover:text-blue-400">
            <img src="https://cdn.simpleicons.org/wakatime/ffffff" alt="WakaTime logo" class="social-icon" loading="lazy">
        </a>
    </div>
</div>

​
Design Principles

1

Semantic HTML

Uses proper <a> tags with descriptive alt text for accessibility
2

Performance Optimization

Lazy loading ensures icons only load when visible in viewport
3

Consistent Branding

All icons use official brand colors via SimpleIcons CDN
4

Responsive Design

Social icons adapt to different screen sizes with Tailwind CSS

​
Accessibility Features

Alt Text

Every icon includes descriptive alt text for screen readers

Semantic Links

Proper anchor tags with meaningful href attributes

Keyboard Navigation

All links are keyboard accessible via Tab navigation

Visual Feedback

Hover states provide clear visual indication of interactive elements

​
Platform Statistics

  • Total Platforms: 17
  • Code Repositories: 5 (GitHub, GitLab, Bitbucket, Gitea, Codeberg)
  • Developer Tools: 4 (CodePen, Stack Overflow, Postman, WakaTime)
  • Data Science: 2 (Kaggle, Hugging Face)
  • Social Networks: 3 (Instagram, Threads, Mastodon)
  • Professional: 3 (Google Dev, Open Profile, Gravatar)
The multi-platform presence demonstrates engagement across the entire developer ecosystem, from code hosting to community participation.

​
File Location

The social links implementation can be found in the footer section of: ~/workspace/source/index.html (lines 127-145)

​
Adding New Platforms

To add a new social platform:
1

Find Icon URL

Visit https://simpleicons.org/ and search for the platform
2

Construct CDN URL

Use pattern: https://cdn.simpleicons.org/{slug}/ffffff
3

Add HTML

Insert new <a> tag with proper href and icon src
4

Add Alt Text

Include descriptive alt text for accessibility
<a href="https://example.com/username" class="text-white hover:text-blue-400">
    <img src="https://cdn.simpleicons.org/platform/ffffff" 
         alt="Platform logo" 
         class="social-icon" 
         loading="lazy">
</a>
Ensure the platform slug matches exactly what SimpleIcons uses - check their website for the correct identifier.

Build docs developers (and LLMs) love

Get started for freeTalk to us