-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (219 loc) · 12.4 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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!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="Hasnocool's Developer Portfolio featuring innovative open-source software for gamers and developers.">
<meta name="keywords" content="Hasnocool, developer, portfolio, open-source, War Thunder, projects, machine learning, data science, web scraping">
<meta name="author" content="Hasnocool">
<title>Hasnocool's Developer Portfolio</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-563ZWSFF');</script>
<!-- End Google Tag Manager -->
<!-- TailwindCSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Background Image with Overlay for Transparency */
body {
background-image: url('./assets/optimized/background16.png');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
}
/* Reduce neon effect for improved readability */
.neon-text {
color: #FFF;
text-shadow: 0 0 5px rgba(255,255,255,0.6), 0 0 10px rgba(0,191,255,0.6); /* Softer glow */
}
.highlight-box {
border: 2px solid #4CAF50;
background-color: rgba(76, 175, 80, 0.1);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
}
.grid-container {
display: grid;
gap: 16px;
padding: 16px;
}
@media (min-width: 481px) {
.grid-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.grid-container img { width: 100%; height: auto; }
/* Subtle animations for project cards */
.project-card {
transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
}
/* Footer Enhancements */
footer {
background-color: rgba(0, 0, 0, 0.8);
padding: 1rem 0;
color: #CCC;
}
footer p, footer a {
font-size: 0.875rem;
}
footer a {
color: #FFF;
transition: color 0.3s;
}
footer a:hover {
color: #4CAF50;
}
/* Style for Support My Work section */
.support-section {
background-color: rgba(0, 0, 0, 0.85);
padding: 40px 20px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
margin-bottom: 40px;
}
.support-section h4 {
margin-bottom: 1rem;
color: #4CAF50;
}
.support-details {
margin-bottom: 2rem;
}
.donation-box {
border: 2px solid #4CAF50;
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.donation-box p {
color: #CCC;
margin-bottom: 15px;
}
.donation-box img {
margin: 20px auto;
max-width: 150px;
}
</style>
</head>
<body class="text-white">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-563ZWSFF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="overlay min-h-screen flex flex-col justify-between">
<!-- Header Section -->
<header class="bg-black bg-opacity-50 p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold neon-text">Hasnocool's Developer Portfolio</h1>
<nav class="flex space-x-4">
<a href="#projects" class="text-lg hover:text-blue-300">Projects</a>
<a href="#about" class="text-lg hover:text-blue-300">About</a>
<a href="#contact" class="text-lg hover:text-blue-300">Contact</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="flex-grow flex items-center">
<div class="container mx-auto text-center p-8">
<h2 class="text-6xl font-extrabold neon-text mb-6">Hasnocool's Projects</h2>
<p class="text-2xl text-gray-300 max-w-3xl mx-auto mb-8">Innovative open-source software for gamers and developers.</p>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="bg-black bg-opacity-75 py-16">
<div class="container mx-auto px-4">
<h3 class="text-3xl font-bold neon-text text-center mb-8">Featured Projects</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
<!-- War Thunder Camouflage Installer -->
<div class="bg-gray-800 p-6 rounded shadow-md project-card">
<h4 class="text-2xl font-bold mb-4">War Thunder Camouflage Installer</h4>
<p class="text-gray-400 mb-4">An open-source tool to easily install and manage War Thunder skins. Customize your vehicles with ease!</p>
<a href="https://github.com/hasnocool/war_thunder_camouflage_installer" class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105 mb-4">View on GitHub</a>
<a href="./war-thunder-camouflage-installer/index.html" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105">Visit Official Website</a>
<p class="mt-4">Join our community on <a href="https://discord.gg/d9dkA6bn" class="text-blue-400 underline">Discord</a>!</p>
</div>
<!-- War Thunder Screenshot Contest Automate -->
<div class="bg-gray-800 p-6 rounded shadow-md project-card">
<h4 class="text-2xl font-bold mb-4">War Thunder Screenshot Contest Automate</h4>
<p class="text-gray-400 mb-4">Automates screenshots in War Thunder and posts them to forums, making you eligible for prizes like Golden Eagles.</p>
<a href="https://github.com/hasnocool/war_thunder_screenshot_automate" class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105 mb-4">View on GitHub</a>
<a href="./comming-soon.html" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105">Visit Official Website</a>
</div>
<!-- War Thunder Data Scraper -->
<div class="bg-gray-800 p-6 rounded shadow-md project-card">
<h4 class="text-2xl font-bold mb-4">War Thunder Data Scraper</h4>
<p class="text-gray-400 mb-4">A powerful scraper tool to datamine player profiles, in-game data, forums, and more from War Thunder.</p>
<a href="https://github.com/hasnocool/war_thunder_data_scraper" class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105 mb-4">View on GitHub</a>
<a href="./comming-soon.html" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105">Visit Official Website</a>
</div>
<!-- War Thunder Mod Installer -->
<div class="bg-gray-800 p-6 rounded shadow-md project-card">
<h4 class="text-2xl font-bold mb-4">War Thunder Mod Installer</h4>
<p class="text-gray-400 mb-4">An open-source mod installer for War Thunder, making it easier to install and manage game mods.</p>
<a href="https://github.com/hasnocool/war_thunder_mod_installer" class="inline-block bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105 mb-4">View on GitHub</a>
<a href="./comming-soon.html" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg text-lg transition duration-300 ease-in-out transform hover:scale-105">Visit Official Website</a>
</div>
</div>
</div>
</section>
<!-- Support My Work Section -->
<section id="donation" class="py-16 support-section">
<div class="container mx-auto text-center px-4">
<h4 class="text-3xl font-bold neon-text mb-8">Support My Work</h4>
<div class="support-details text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
<p>If you like what you see here, or if you’ve used any of my apps and found them helpful, <strong>donations and contributions</strong> are very much welcomed. Supporting my work helps me continue creating and improving the tools and projects I’m passionate about.</p>
<p>Your support enables me to dedicate more time to developing projects like the <strong>War Thunder Camouflage Installer</strong> and other upcoming tools. Every bit helps, and I'm incredibly grateful for your generosity!</p>
</div>
<!-- Donation Box -->
<div class="donation-box">
<h4 class="text-2xl font-bold mb-4">Donate via Dogecoin</h4>
<p>Dogecoin Wallet Address:</p>
<p class="font-semibold text-white">DRChWu2oMAD4RbFWCkk77P17zcYoBrhinN</p>
<img src="./assets/optimized/dogecoin-qr.png" alt="Dogecoin QR Code" class="rounded shadow-lg">
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16">
<div class="container mx-auto text-center">
<h3 class="text-3xl font-bold neon-text mb-8">Connect with Me</h3>
<p class="text-xl mb-8">Feel free to reach out for collaboration or to check out my work.</p>
<!-- Social Media Icons -->
<div class="flex justify-center space-x-6 mb-8">
<a href="https://github.com/hasnocool" target="_blank" class="text-white hover:text-blue-400">
<i class="fab fa-github text-3xl"></i>
</a>
<a href="mailto:[email protected]" class="text-white hover:text-green-400">
<i class="fas fa-envelope text-3xl"></i>
</a>
<a href="https://www.twitch.tv/fleshwounded" target="_blank" class="text-white hover:text-purple-400">
<i class="fab fa-twitch text-3xl"></i>
</a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="bg-black bg-opacity-50 p-4 w-full">
<div class="flex justify-between items-center max-w-screen-xl mx-auto px-4">
<p class="text-sm text-gray-400">© 2024 hasnocool. All Rights Reserved.</p>
<div class="flex space-x-4">
<a href="#privacy-policy">Privacy Policy</a>
<a href="#terms-of-service">Terms of Service</a>
</div>
</div>
</footer>
</div>
</body>
</html>