-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
220 lines (204 loc) · 15.1 KB
/
index.html
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="dott - Developer passionate about technology, manga. Explore my portfolio of creative coding projects (and a little bit of web).">
<meta name="keywords" content="dott, developer, web development, programming, technology, portfolio">
<meta name="author" content="dott">
<meta name="robots" content="index, follow">
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://dottisa.dev">
<meta property="og:title" content="dott - Developer Portfolio">
<meta property="og:description" content="Developer passionate about technology, manga. Explore my portfolio of creative coding projects (and a little bit of web).">
<meta property="og:image" content="https://www.gravatar.com/avatar/cc9205eeaa3c7d7b4d3b59b4383eea3f3816d6c0f8108c3d51d17b8e39f7487e?size=256">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dottisa.dev">
<meta name="twitter:title" content="dott - Developer Portfolio">
<meta name="twitter:description" content="Developer passionate about technology, manga. Explore my portfolio of creative coding projects (and a little bit of web).">
<meta name="twitter:image" content="https://www.gravatar.com/avatar/cc9205eeaa3c7d7b4d3b59b4383eea3f3816d6c0f8108c3d51d17b8e39f7487e?size=256">
<title>dott - Developer Portfolio</title>
<title>dott</title>
<link rel="stylesheet" href="dist.css">
<link rel="stylesheet" href="css/langSwitcher.css">
<link rel="preload" href="https://api.statusbadges.me/presence/578276833624195125" as="fetch" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.bundle.min.js"></script>
<script src="js/translations.js"></script>
<script src="js/activity.js"></script>
<script src="js/langSwitcher.js"></script>
<script src="js/particles.js"></script>
<script src="js/email-protection.js"></script>
<!-- Schema.org markup -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "dott",
"url": "https://dottisa.dev",
"sameAs": [
"https://github.com/dott-rus",
"https://t.me/dott",
"https://discord.com/users/dott",
"https://www.last.fm/ru/user/someDott"
],
"jobTitle": "Developer",
"description": "Developer passionate about technology, manga. Explore my portfolio of creative coding projects (and a little bit of web)."
}
</script>
</head>
<body class="min-h-screen flex flex-col justify-center items-center bg-[#0a0a13] text-white m-0 font-sans">
<noscript>
<div class="noscript-warning">
<p><strong>Oops! JavaScript seems to be disabled</strong></p>
<p>Some features might not work as expected</p>
<p class="joke">Why did the JavaScript developer wear glasses? Because they couldn't C# 😎</p>
</div>
</noscript>
<div class="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r origin-left z-50" style="background-image: linear-gradient(to right, rgb(168, 85, 247), rgb(59, 130, 246));" data-id="2"></div>
<div id="tsparticles" class="fixed w-full h-full -z-10 pointer-events-none"></div>
<!-- Language Switcher -->
<div class="lang-switcher">
<button id="langToggle" class="current-lang bg-[#0d0d16] text-white px-4 py-2 rounded-lg border border-[#6c5ce7]/20 hover:border-[#6c5ce7] transition-all duration-300 flex items-center gap-2" aria-label="Language selector">
<span class="text-sm font-medium" id="currentLang">English</span>
<svg class="w-4 h-4 transition-transform duration-300" id="langArrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="lang-options bg-[#0d0d16] rounded-lg border border-[#6c5ce7]/20 shadow-lg py-1" role="menu">
<button class="lang-option w-full px-3 py-2 text-left text-sm hover:bg-[#6c5ce7]/10 transition-colors flex items-center gap-2" data-lang="en" data-flag="GB" role="menuitem">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABG0lEQVQ4EWNgGBLAwaFAwMqqwAAfXq9qaoAPwz1qY5PjYGOdd97GOu8/Przd0PEDIbxexcSBwcY6d39r61KwYZUVs/8nJnTC2SALQGIg+t27d8Tg9wwwV+XmTPrv4V4ONjAkpAHMnjRxHdzVm5RN/hODwQbCNIJcBzIUZCDMZSCLQJa+ff36MTEY7kKQASCDQIbCDIa5GmTgkYSc88RgsIEwA0A0zFCYt2EufHLyzGFiMNhAkGaQK0DehWGYGIy+OnP+AWIwQ1Zm/wFiMDGGgdQwvLh6/QQ1McOBgNgb1MQM796+/UBNzEBMYiVFDcO7d+/uE5mtiMt6B2JSbHc5+D2mFO9xDLh6NK88Al7qgEoKirCCgQDcsEHNAACwfwy7CxhuYQAAAABJRU5ErkJggg=="
alt="English flag" class="w-5 h-4 rounded object-cover">
English
</button>
<button class="lang-option w-full px-3 py-2 text-left text-sm hover:bg-[#6c5ce7]/10 transition-colors flex items-center gap-2" data-lang="ru" data-flag="RU" role="menuitem">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAiklEQVQ4EWNgGBLg/fv3Au/fvzegBMM9+vr1a4d3796df/fu3X8K8f03b94EMLx7924/hQYhO+Q+yEBkAYrZ1DcwrnjVFWpiBiWHnv/UxCPRQG279ovUxAznFDT+UxPTxMD71HOh+nmG0woaDucU1N9Tbqj6+7MKGgnwUgdkMCX4vIKCANywQc0AACNMBdjYed4iAAAAAElFTkSuQmCC"
alt="Russian flag" class="w-5 h-4 rounded object-cover">
Русский
</button>
</div>
</div>
<main class="text-center z-10 p-8 !mt-[19rem] max-w-5xl animate-fade-in">
<img src="https://www.gravatar.com/avatar/cc9205eeaa3c7d7b4d3b59b4383eea3f3816d6c0f8108c3d51d17b8e39f7487e?size=256"
alt="dott's profile picture"
class="w-[200px] h-[200px] rounded-full mb-6 mx-auto border-[3px] border-[#6c5ce7] shadow-[0_0_20px_rgba(108,92,231,0.3)]"
width="200"
height="200">
<h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-[#6c5ce7] to-[#a29bfe] text-transparent bg-clip-text" data-translate="greeting">
Hello, I'm dott
</h1>
<p class="text-[#a0a0a0] mb-8 leading-relaxed" data-translate="aboutText">
I am a developer with an interest in technology, manga, and creating cool projects. Always looking for new ways to improve my skills and make the world a little more interesting.
</p>
<nav class="flex justify-center gap-6 mb-8" aria-label="Social links">
<a href="https://t.me/dott" target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center bg-[#6c5ce7]/10 rounded-full transition-all duration-300 hover:bg-[#6c5ce7]/30 hover:-translate-y-0.5"
aria-label="Telegram">
<i class="fas fa-paper-plane" aria-hidden="true"></i>
</a>
<a href="https://github.com/dott-rus" target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center bg-[#6c5ce7]/10 rounded-full transition-all duration-300 hover:bg-[#6c5ce7]/30 hover:-translate-y-0.5"
aria-label="GitHub">
<i class="fab fa-github" aria-hidden="true"></i>
</a>
<a href="mailto:" id="email-link"
class="w-10 h-10 flex items-center justify-center bg-[#6c5ce7]/10 rounded-full transition-all duration-300 hover:bg-[#6c5ce7]/30 hover:-translate-y-0.5"
aria-label="Email">
<i class="fas fa-envelope" aria-hidden="true"></i>
</a>
<a href="https://discord.com/users/dott" target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center bg-[#6c5ce7]/10 rounded-full transition-all duration-300 hover:bg-[#6c5ce7]/30 hover:-translate-y-0.5"
aria-label="Discord">
<i class="fab fa-discord" aria-hidden="true"></i>
</a>
<a href="https://www.last.fm/ru/user/someDott" target="_blank" rel="noopener noreferrer"
class="w-10 h-10 flex items-center justify-center bg-[#6c5ce7]/10 rounded-full transition-all duration-300 hover:bg-[#6c5ce7]/30 hover:-translate-y-0.5"
aria-label="Last.fm">
<i class="fab fa-lastfm" aria-hidden="true"></i>
</a>
</nav>
<div class="flex flex-wrap justify-center gap-4 mb-16">
<div id="status"
class="px-4 py-1.5 rounded-full text-sm bg-[#6c5ce7]/10 text-[#a0a0a0]" style="opacity: 1;" role="status">
Status: offline
</div>
<div id="listening"
class="px-4 py-1.5 rounded-full text-sm bg-[#6c5ce7]/10 text-[#a0a0a0]" style="opacity: 1;" role="status">
Listening: nothing
</div>
<div id="playing"
class="px-4 py-1.5 rounded-full text-sm bg-[#6c5ce7]/10 text-[#a0a0a0]" style="opacity: 1;" role="status">
Playing: nothing
</div>
</div>
<section class="mt-16">
<h2 class="text-3xl font-bold mb-8 bg-gradient-to-r from-[#6c5ce7] to-[#a29bfe] text-transparent bg-clip-text" data-translate="projectsTitle">
My Projects
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Project Card 1 -->
<article class="bg-[#0d0d16] rounded-lg p-6 border border-[#6c5ce7]/20 hover:border-[#6c5ce7] transition-all duration-300 flex flex-col min-h-[320px]">
<div class="w-12 h-12 bg-[#6c5ce7]/10 rounded-lg flex items-center justify-center mb-4">
<img src="https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f3b5.svg" alt="Music project icon" class="w-8 h-8">
</div>
<h3 class="text-xl font-semibold mb-2 text-white" data-translate="project1.title"></h3>
<p class="text-[#a0a0a0] mb-auto" data-translate="project1.description"></p>
<div class="mt-4">
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 text-sm bg-[#6c5ce7]/10 text-[#a0a0a0] rounded-full hover:bg-[#6c5ce7]/20 transition-colors cursor-pointer" data-translate="project1.tags.0"></span>
<span class="px-3 py-1 text-sm bg-[#6c5ce7]/10 text-[#a0a0a0] rounded-full hover:bg-[#6c5ce7]/20 transition-colors cursor-pointer" data-translate="project1.tags.1"></span>
</div>
<a href="https://github.com/Dott-rus/MusicPlayerPythonEdition" class="inline-flex items-center text-[#6c5ce7] hover:text-[#a29bfe] transition-colors group">
<span data-translate="project1.learnMore">Learn More</span>
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
</div>
</article>
<!-- Project Card 2 -->
<article class="bg-[#0d0d16] rounded-lg p-6 border border-[#6c5ce7]/20 hover:border-[#6c5ce7] transition-all duration-300 flex flex-col min-h-[320px]">
<div class="w-12 h-12 bg-[#6c5ce7]/10 rounded-lg flex items-center justify-center mb-4">
<img src="https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f3ae.svg" alt="Game project icon" class="w-8 h-8">
</div>
<h3 class="text-xl font-semibold mb-2 text-white" data-translate="project2.title"></h3>
<p class="text-[#a0a0a0] mb-auto" data-translate="project2.description"></p>
<div class="mt-4">
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 text-sm bg-[#6c5ce7]/10 text-[#a0a0a0] rounded-full hover:bg-[#6c5ce7]/20 transition-colors cursor-pointer" data-translate="project2.tags.0"></span>
<span class="px-3 py-1 text-sm bg-[#6c5ce7]/10 text-[#a0a0a0] rounded-full hover:bg-[#6c5ce7]/20 transition-colors cursor-pointer" data-translate="project2.tags.1"></span>
</div>
<a href="https://github.com/Dott-rus/TicTacToePythonEdition" class="inline-flex items-center text-[#6c5ce7] hover:text-[#a29bfe] transition-colors group">
<span data-translate="project2.learnMore">Learn More</span>
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
</div>
</article>
<!-- Project Card 3 -->
<article class="bg-[#0d0d16] rounded-lg p-6 border border-[#6c5ce7]/20 hover:border-[#6c5ce7] transition-all duration-300 flex flex-col min-h-[320px]">
<div class="w-12 h-12 bg-[#6c5ce7]/10 rounded-lg flex items-center justify-center mb-4">
<img src="https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/2753.svg" alt="Future project icon" class="w-8 h-8">
</div>
<h3 class="text-xl font-semibold mb-2 text-white" data-translate="project3.title"></h3>
<p class="text-[#a0a0a0] mb-auto" data-translate="project3.description"></p>
<div class="mt-4">
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 text-sm bg-[#6c5ce7]/10 text-[#a0a0a0] rounded-full hover:bg-[#6c5ce7]/20 transition-colors cursor-pointer" data-translate="project3.tags.0"></span>
</div>
<a href="#" class="inline-flex items-center text-[#6c5ce7] hover:text-[#a29bfe] transition-colors group">
<span data-translate="project3.learnMore">Learn More</span>
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
</div>
</article>
</div>
</section>
</main>
</body>
</html>