artemis/socials.html at main · SpyGdev/artemis · 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spy_G | Socials</title>
    <meta name="description" content="Connect with Spy_G.">
    <link rel="stylesheet" href="/dist/assets/main-DxMavco3.css">
</head>

<body class="selection:bg-accent selection:text-white">
    <main class="max-w-[1000px] mx-auto px-6 py-16 md:py-24 flex flex-col gap-20">

        <!-- Header -->
        <header class="flex flex-col gap-6">
            <nav>
                <a href="/"
                    class="text-sm font-mono text-secondary hover:text-accent transition-colors w-fit flex items-center gap-2 group">
                    <span class="group-hover:-translate-x-1 transition-transform">&larr;</span>
                    Back
                </a>
            </nav>
            <h1 class="text-3xl font-bold tracking-tight text-white w-fit">
                Contact me
            </h1>
            <p class="text-secondary max-w-xl text-lg leading-relaxed">
                Connect with me on the following platforms.
            </p>
        </header>

        <!-- Social Links Section -->
        <section class="flex flex-col gap-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                <!-- GitHub -->
                <a href="https://github.com/SpyGdev" target="_blank"
                    class="block p-6 border border-neutral-800 hover:border-accent/50 transition-colors group">
                    <div class="flex items-center justify-between">
                        <span
                            class="text-lg font-medium text-primary group-hover:text-accent transition-colors">GitHub</span>
                        <span
                            class="text-xs font-mono text-secondary border border-neutral-800 px-2 py-1 rounded">@SpyGdev</span>
                    </div>
                </a>


                <!-- Twitter / X -->
                <a href="https://twitter.com/Spy_g_" target="_blank"
                    class="block p-6 border border-neutral-800 hover:border-accent/50 transition-colors group">
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-medium text-primary group-hover:text-accent transition-colors">Twitter
                            / X</span>
                        <span
                            class="text-xs font-mono text-secondary border border-neutral-800 px-2 py-1 rounded">@SpyGdev</span>
                    </div>
                </a>

                <!-- Discord -->
                <button onclick="copyDiscord()" class="block w-full text-left p-6 border border-neutral-800 hover:border-accent/50 transition-colors group cursor-pointer">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <span class="text-lg font-medium text-primary group-hover:text-accent transition-colors">Discord</span>
                        </div>
                        <span class="text-xs font-mono text-secondary border border-neutral-800 px-2 py-1 rounded group-hover:border-accent/50 group-hover:text-accent transition-colors">spy_g_was_silenced</span>
                    </div>
                </button>


            </div>
        </section>

        <!-- Footer -->
        <footer class="pt-12 border-t border-neutral-800 flex flex-col gap-4">
            <p class="text-xs text-secondary font-mono">
                &copy; 2026 Spy_G. Built with semantic HTML & Tailwind.
            </p>
        </footer>
    </main>

    <!-- Advanced 3D Glass Copied Toast Container -->
    <div id="toast-wrapper" class="fixed bottom-12 left-1/2 -translate-x-1/2 z-50 pointer-events-none transition-all duration-[600ms] ease-[cubic-bezier(0.23,1,0.32,1)] opacity-0 translate-y-12 scale-90" style="perspective: 1200px;">
        <!-- Physical Glass Element -->
        <div id="toast-glass" class="relative overflow-hidden flex items-center justify-center gap-3 px-6 py-3.5 rounded-full text-white font-medium border border-white/20 bg-neutral-900/30 backdrop-blur-xl backdrop-saturate-150 backdrop-brightness-110 shadow-2xl will-change-transform"
            style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -1px 1px rgba(0,0,0,0.2), 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 24px rgba(139,92,246,0.15); transform-style: preserve-3d;">

            <!-- Reflections / Shimmer -->
            <div class="absolute inset-0 bg-gradient-to-tr from-white/10 via-transparent to-white/10 pointer-events-none" style="transform: translateZ(0);"></div>

            <!-- Depth Layer 1: Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="text-accent relative z-10" style="transform: translateZ(12px); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
            </svg>

            <!-- Depth Layer 2: Text -->
            <span class="relative z-10 tracking-wide text-[15px]" style="transform: translateZ(24px); text-shadow: 0 4px 12px rgba(0,0,0,0.4);">
                Copied username!
            </span>
        </div>
    </div>

    <script>
        let toastTimeout;
        let isToastVisible = false;
        const wrapper = document.getElementById("toast-wrapper");
        const glass = document.getElementById("toast-glass");

        function copyDiscord() {
            navigator.clipboard.writeText("spy_g_was_silenced").then(() => {
                // Entrance animation
                wrapper.classList.remove("opacity-0", "translate-y-12", "scale-90");
                isToastVisible = true;

                // Keep it on screen for 4 seconds
                clearTimeout(toastTimeout);
                toastTimeout = setTimeout(() => {
                    hideToast();
                }, 4000);
            }).catch(err => {
                console.error("Failed to copy string: ", err);
            });
        }

        function hideToast() {
            wrapper.classList.add("opacity-0", "translate-y-12", "scale-90");
            isToastVisible = false;

            // Re-center rotation smoothly
            setTimeout(() => {
                targetX = 0;
                targetY = 0;
                glass.style.transition = 'transform 0.5s ease-out';
                glass.style.transform = `rotateY(0deg) rotateX(0deg)`;
            }, 600);
        }

        // --- Realistic 3D Parallax Engine ---
        let currentX = 0, currentY = 0;
        let targetX = 0, targetY = 0;

        // Smooth physics-based animation loop
        function animateParallax() {
            if (isToastVisible) {
                // Lerp towards target
                currentX += (targetX - currentX) * 0.12;
                currentY += (targetY - currentY) * 0.12;

                glass.style.transition = 'none';
                glass.style.transform = `rotateY(${currentX}deg) rotateX(${currentY}deg)`;
            }
            requestAnimationFrame(animateParallax);
        }
        animateParallax();

        // Parallax via Mouse movement
        document.addEventListener('mousemove', (e) => {
            if (!isToastVisible) return;
            const xAxis = (window.innerWidth / 2 - e.clientX) / 25; // Tilt intensity multiplier
            const yAxis = (window.innerHeight / 2 - e.clientY) / 25;
            targetX = -xAxis; // Invert to face cursor
            targetY = yAxis;
        });

        // Parallax via Device orientation (Mobile gyro)
        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', (e) => {
                if (!isToastVisible || e.gamma === null) return;
                // e.gamma = left/right tilt, e.beta = front/back tilt
                targetX = e.gamma / 2.5;
                targetY = (e.beta - 45) / 2.5; // Offset assume phone is held 45deg upright
            });
        }

        // Subtle offset based on page scroll
        window.addEventListener('scroll', () => {
            if (!isToastVisible) return;
            targetY -= (window.scrollY * 0.05); // slightly push top back when scrolling
        });
    </script>

    <script type="module" src="/src/main.js"></script>
</body>

</html>