me/socials.html at main · Markmix-Digital/me · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="en"> <!-- Changed to "en" (correct language code) -->
<head>
    <!-- Standard Favicons -->
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png'/>
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/web-app-manifest-192x192.png' rel='icon' sizes='192x192' type='image/png'/>
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/web-app-manifest-512x512.png' rel='icon' sizes='512x512' type='image/png'/>

    <!-- Apple Devices -->
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180'/>

    <!-- Windows Tiles -->
    <meta content='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon-144.png' name='msapplication-TileImage'/>
    <meta content='#ffffff' name='msapplication-TileColor'/>

    <!-- Fallback .ico -->
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon.ico' rel='icon' type='image/x-icon'/>

    <!-- Web Manifest for Progressive Web App Support -->
    <link href='https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/site.webmanifest' rel='manifest'/>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>𝑩𝒊𝒔𝒎𝒂𝒓𝒌 𝑺𝒐𝒄𝒊𝒂𝒍 𝑨𝒄𝒄𝒐𝒖𝒏𝒕𝒔</title>
    <meta name="author" content="♔𝑳𝒐𝒓𝒅 𝑩𝒊𝒔𝒎𝒂𝒓𝒌 🦅">
    <meta name="description" content="Web Dev. and Tech Enthusiast.">
    <meta property="og:image" content="https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons@refs/heads/main/mstudios-150×150.webp">
    <!-- Preconnect to Google Fonts for faster loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');

        :root {
            --primary-color: #ffffff;
            --hover-color: #00d4ff; /* Added a hover accent color */
            --transition-speed: 0.3s;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
            background: #000000;
            color: var(--primary-color);
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 1.6;
        }

        main {
            width: 100%;
            max-width: 600px;
            padding: 2rem;
            animation: fadeIn 0.5s ease-out; /* Smooth fade-in effect */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        h1 {
            margin: 0 0 1rem 0;
            font-size: clamp(2rem, 5vw, 3rem); /* Responsive font size */
            font-weight: 800;
        }

        h2 {
            margin: 0 0 2rem 0;
            font-size: 1.1rem;
            font-weight: 400;
            opacity: 0.8;
        }

        .links {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        a {
            color: var(--primary-color);
            text-decoration: none;
            transition:
                color var(--transition-speed),
                transform var(--transition-speed);
            display: inline-block;
        }

        a::after {
            content: ' ›';
            transition: transform var(--transition-speed);
        }

        a:hover {
            color: var(--hover-color);
            transform: translateX(5px);
        }

        a:hover::after {
            transform: translateX(3px);
        }

        /* Accessibility: Focus styles */
        a:focus-visible {
            outline: 2px solid var(--hover-color);
            outline-offset: 3px;
        }

        /* Dark mode preference (optional) */
        @media (prefers-color-scheme: light) {
            :root {
                --primary-color: #000000;
                --hover-color: #ff00aa;
                background: #ffffff;
            }
        }
    </style>
</head>

<body>
    <main>
        <h1>𝗕𝗶𝘀𝗺𝗮𝗿𝗸• Social Accounts</h1>

        <div class="links">
        <a href="https://x.com/onebismark_">TwitterX</a>
        <a href="https://instagram.com/onebismark">Instagram</a>
        <a href="https://facebook.com/onebismarq">Facebook</a>
        <a href="https://youtube.com/@onebismark">YouTube</a>
        <a href="https://tiktok.com/iambismark">TikTok</a>
        <a href="https://snapchat.com/@onebismark">Snapchat</a>
        <a href="https://uk.pinterest.com/onebismark/">Pinterest</a>
        <a href="https://bsky.app/profile/onebismark.bsky.social">BlueSky</a>
        <a href="https://mastodon.social/@onebismark">Mastodon</a>
        <a href="https://leetcode.com/u/onebismark/">LeetCode</a>
        <a href="https://app.daily.dev/onebismak">Daily.dev</a>
        <a href="https://dev.to/onebismark">Dev.to</a>
        <a href="https://stackoverflow.com/users/31050452/onebismark">StackOverflow</a>
        <a href="https://yhype.me/github/@onebismark">Y-Hype</a>
        <a href="https://github.com/onebismark">GitHub</a>
        <a href="https://markmixstudios.com">Website</a>
        <a href="https://msl.markmixstudios.com">Markmix Studios</a>
        <a href="https://me.markmixstudios.com/">♔ Developer BioLink 🦅</a>
        </div>
    </main>
</body>
</html>