https://forevka.dev/contacts/

1
2<!DOCTYPE html>
3<html lang="en" class="scroll-smooth">
4<head>
5    <!-- Google tag (gtag.js) -->

5
6    <script async src="https://www.googletagmanager.com/gtag/js?id=

6G-3YGYX48ND7

6"></script>
7    

7<script>
8            

8window.dataLayer = window.dataLayer || [];
9            function gtag(){dataLayer.push(arguments);}
10            gtag('js', new Date());
11
12            gtag('config', '

12G-3YGYX48ND7

12');
13        

13</script>

13
14
15        <meta content="" property="twitter:image">
16        <meta content="Writing code with a bit of philosophy" property="twitter:description">
17        <meta content="Forevka · Personal blog" property="twitter:title">
18        <meta content="" property="og:image">
19        <meta content="Writing code with a bit of philosophy" property="og:description">
20        <meta content="Forevka · Personal blog" property="og:title">
21        <meta content="Writing code with a bit of philosophy" name="description">
22
23    <meta content="summary_large_image" name="twitter:card">
24    <meta property="og:type" content="website">
25
26    <meta charset="utf-8" />
27    <meta name="viewport" content="width=device-width, initial-scale=1" />
28    <title>Contacts - Forevka</title>
29
30    <link rel="preconnect" href="https://fonts.googleapis.com">
31    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
32    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
33
34    <link rel="stylesheet" href="/css/app.css?v=qFN4VxEtqqGeuaz1g0JS893lHzvG2QrudVcNT1-Z8a8" />
35
36    
37</head>
38<body class="selection:bg-indigo-500/30 overflow-x-hidden">
39
40    <div class="reading-progress" id="progress-bar"></div>
41
42    <!-- Background Elements -->
43    <div class="blob top-[-10%] right-[-10%]"></div>
44    <div class="blob bottom-[-10%] left-[-10%] opacity-50"></div>
45
46    
47<nav id="site-nav" class="fixed top-0 w-full z-50 px-6 py-4 transition-opacity duration-300">
48    <div class="max-w-6xl mx-auto flex justify-between items-center glass rounded-full px-6 py-3">
49        <a href="/" aria-label="Logo" class="text-xl font-extrabold tracking-tighter flex items-center gap-2">
50            <div class="w-8 h-8 accent-gradient rounded-lg flex items-center justify-center">
51                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white" aria-hidden="true"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
52            </div>
53            <span>Forevka</span>
54        </a>
55        <div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-400">
56                <a href="/articles/" class="hover:text-white transition-colors ">Archive</a>
57            <a href="/about/" class="hover:text-white transition-colors ">About</a>
58            <a href="/contacts/" class="px-5 py-2 glass rounded-full hover:bg-white hover:text-black transition-all text-white">Contact</a>
59        </div>
60        <button id="nav-toggle" class="md:hidden" aria-label="menu" aria-expanded="false">
61            <span id="nav-icon-open"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" aria-hidden="true"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg></span>
62            <span id="nav-icon-close" class="hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span>
63        </button>
64    </div>
65    <div id="nav-mobile" class="hidden md:hidden max-w-6xl mx-auto mt-2 glass rounded-2xl p-6 flex-col gap-4 text-sm font-medium text-slate-300">
66            <a href="/articles/" class="py-2 hover:text-white transition-colors ">Archive</a>
67        <a href="/about/" class="py-2 hover:text-white transition-colors ">About</a>
68        <a href="/contacts/" class="py-2 hover:text-white transition-colors text-indigo-400">Contact</a>
69    </div>
70</nav>
71
72
73    <main class="pt-32 pb-20 px-6">
74        
75<!-- Hero / CTA -->
76<section class="max-w-4xl mx-auto text-center pt-8 mb-24">
77    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-bold mb-6 tracking-widest uppercase">
78        Open Channel
79    </div>
80    <h2 class="text-4xl md:text-6xl font-extrabold mb-8 tracking-tighter">

80Let's build something <span class="text-gradient">resilient.</span></h2>
81    <p class="text-slate-400 text-lg mb-12 max-w-xl mx-auto font-light">Ready to hear from you — questions, collaboration ideas, or just to say hi.</p>
82
83    <div class="flex flex-col md:flex-row items-center justify-center gap-6">
84        <a href="mailto:[email protected]" class="group relative px-10 py-4 bg-indigo-600 rounded-full font-bold overflow-hidden transition-all hover:scale-105">
85            <span class="relative z-10 flex items-center gap-2">Say Hello <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg></span>
86            <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity"></div>
87        </a>
88        <div class="flex items-center gap-4 py-4 px-8 glass rounded-full">
89            <span class="text-xs font-mono text-slate-500">[email protected]</span>
90        </div>
91    </div>
92</section>
93
94<!-- Social Cards -->
95<section class="max-w-4xl mx-auto mb-12">
96    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
97            <a href="https://x.com/" target="_blank" rel="noopener" class="glass p-6 rounded-3xl flex items-center justify-between group hover:border-indigo-500/40 transition-all">
98                <div class="flex items-center gap-4">
99                    <div class="p-3 bg-indigo-500/10 rounded-xl text-indigo-400">
100                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
101                    </div>
102                    <div>
103                        <div class="font-bold group-hover:text-indigo-400 transition-colors">X (Twitter)</div>
104                        <div class="text-[10px] font-mono text-slate-500 tracking-widest">@X.COM</div>
105                    </div>
106                </div>
107                <span class="p-2 glass rounded-full group-hover:bg-indigo-500 transition-colors">
108                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
109                </span>
110            </a>
111            <a href="https://www.instagram.com/" target="_blank" rel="noopener" class="glass p-6 rounded-3xl flex items-center justify-between group hover:border-indigo-500/40 transition-all">
112                <div class="flex items-center gap-4">
113                    <div class="p-3 bg-indigo-500/10 rounded-xl text-indigo-400">
114                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
115                    </div>
116                    <div>
117                        <div class="font-bold group-hover:text-indigo-400 transition-colors">Instagram</div>
118                        <div class="text-[10px] font-mono text-slate-500 tracking-widest">@INSTAGRAM</div>
119                    </div>
120                </div>
121                <span class="p-2 glass rounded-full group-hover:bg-indigo-500 transition-colors">
122                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
123                </span>
124            </a>
125            <a href="https://www.threads.net/" target="_blank" rel="noopener" class="glass p-6 rounded-3xl flex items-center justify-between group hover:border-indigo-500/40 transition-all">
126                <div class="flex items-center gap-4">
127                    <div class="p-3 bg-indigo-500/10 rounded-xl text-indigo-400">
128                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
129                    </div>
130                    <div>
131                        <div class="font-bold group-hover:text-indigo-400 transition-colors">Threads</div>
132                        <div class="text-[10px] font-mono text-slate-500 tracking-widest">@THREADS</div>
133                    </div>
134                </div>

135                <span class="p-2 glass rounded-full group-hover:bg-indigo-500 transition-colors">
136                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
137                </span>
138            </a>
139            <a href="https://bsky.app/" target="_blank" rel="noopener" class="glass p-6 rounded-3xl flex items-center justify-between group hover:border-indigo-500/40 transition-all">
140                <div class="flex items-center gap-4">
141                    <div class="p-3 bg-indigo-500/10 rounded-xl text-indigo-400">
142                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
143                    </div>
144                    <div>
145                        <div class="font-bold group-hover:text-indigo-400 transition-colors">Bluesky</div>
146                        <div class="text-[10px] font-mono text-slate-500 tracking-widest">@BLUESKY</div>
147                    </div>
148                </div>
149                <span class="p-2 glass rounded-full group-hover:bg-indigo-500 transition-colors">
150                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
151                </span>
152            </a>
153    </div>
154</section>
155
156
157        
158<section class="max-w-6xl mx-auto mb-32 mt-32">
159    <div class="relative overflow-hidden rounded-3xl p-1 shadow-2xl bg-gradient-to-r from-blue-600 to-yellow-500">
160        <div class="relative bg-black/90 p-8 md:p-12 rounded-[1.4rem] flex flex-col md:flex-row items-center gap-8">
161            <div class="flex-1 space-y-4">
162                <h2 class="text-2xl md:text-4xl font-extrabold flex items-center gap-3">
163                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500 fill-blue-500" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
164                    Stand with Ukraine
165                </h2>
166                <p class="text-slate-300 text-lg leading-relaxed font-light">
167                    Russia invaded Ukraine, displacing millions and threatening democracy. Join the global effort to defend freedom and human rights. Every contribution counts.
168                </p>
169            </div>
170            <div class="w-full md:w-auto">
171                <a href="https://u24.gov.ua/" target="_blank" rel="noopener" id="trackableLinkSupportUkraine" class="group relative inline-flex items-center gap-3 px-8 py-4 bg-[#FFD700] text-black font-extrabold rounded-full hover:scale-105 transition-transform overflow-hidden">
172                    <div class="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-500 skew-x-12"></div>
173                    HELP DEFEND FREEDOM
174                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
175                </a>
176            </div>
177        </div>
178    </div>
179</section>
180

181<script>
182    document.getElementById('trackableLinkSupportUkraine').addEventListener('click', function(event) {
183        window.dataLayer = window.dataLayer || [];
184        dataLayer.push({
185            'event': 'support_ukraine_click',
186            'link_url': this.href
187        });
188    });
189</script>

189
190
191
192        
193<section class="max-w-4xl mx-auto">
194    <div class="glass rounded-[3rem] p-12 md:p-20 text-center relative overflow-hidden border-indigo-500/20">
195        <div class="absolute -top-24 -left-24 w-64 h-64 bg-indigo-500/10 rounded-full blur-[80px]"></div>
196        <div class="absolute -bottom-24 -right-24 w-64 h-64 bg-purple-500/10 rounded-full blur-[80px]"></div>
197
198        <h2 class="text-4xl md:text-5xl font-black mb-4">Stay in the loop.</h2>
199        <p class="text-slate-400 mb-10 max-w-sm mx-auto font-light">Get high-fidelity technical write-ups and code goodies delivered directly to your editor.</p>
200
201        <form id="subscribeForm" method="post" class="relative max-w-lg mx-auto flex flex-col md:flex-row gap-2">
202            <input type="email" name="Email" maxlength="256" required placeholder="[email protected]" class="flex-grow bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white focus:outline-none focus:border-indigo-500 transition-colors">
203            <button type="submit" class="bg-[#ffab91] text-black font-bold px-8 py-4 rounded-2xl hover:bg-[#ff8a65] transition-all flex items-center justify-center gap-2">
204                Subscribe <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 fill-black" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
205            </button>
206        <input name="__RequestVerificationToken" type="hidden" value="CfDJ8OklhFEBCVdBguA0J1mpMZD48eDuYoxwa675fbW_q_IjJTBGTwvvLzAyCUdVbA9t7DN9fra73ACkIu0y4aD6zG8S7KXbv1YGU9S-vCzGYuFfgctjtgP7veNgYCgcxISNFWAEyGaxYWIvqAJsv9AIGKI" /></form>
207        <p class="mt-6 text-xs text-slate-600 font-mono italic">Pssst... want some goodies?</p>
208    </div>
209</section>
210
211    </main>
212
213    
214<footer class="border-t border-white/5 py-12 px-6">
215    <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8 text-center md:text-left">
216        <div class="space-y-2">
217            <a href="/" class="font-extrabold text-xl tracking-tighter">Forevka</a>
218            <p class="text-slate-500 text-xs font-mono">© BohdanL 2026 • Built with precision.</p>
219        </div>
220        <div class="flex gap-8 text-sm font-medium text-slate-400">
221            <a href="https://github.com/Forevka" target="_blank" rel="noopener" class="hover:text-white transition-colors underline decoration-indigo-500/50 underline-offset-4">GitHub</a>
222            <a href="/about" class="hover:text-white transition-colors underline decoration-purple-500/50 underline-offset-4">About</a>
223            <a href="/contacts" class="hover:text-white transition-colors underline decoration-pink-500/50 underline-offset-4">Contact</a>
224        </div>
225    </div>
226</footer>
227
228
229    
230<button id="scroll-top" aria-label="Back to top"
231        class="fixed bottom-6 right-6 z-40 p-3 glass rounded-full hover:bg-indigo-500 transition-all duration-300 opacity-0 pointer-events-none">
232    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
233</button>
234
235
236    

236<script src="/js/site.js?v=PrADvq4yIA3SYm1WjcOh5v9l2u2W-sDv2arVcmSd0UA" defer></script>

236
237
238    
239</body>
240</html>