Skip to content

Commit 8be28eb

Browse files
committed
Major website UI, performance, accessibility and SEO changes
1 parent 405a0de commit 8be28eb

3 files changed

Lines changed: 158 additions & 52 deletions

File tree

index.html

Lines changed: 81 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
46
<meta name="description" content="Hello! My name is Panos, AKA HellenicDev. I'm passionate about programming and love exploring different languages and technologies. I've created several projects so far—and many more are on the way! You can find a few of them listed below. Enjoy!"/>
57
<meta name="keywords" content="HellenicDev, programming, HTML, CSS, JS, open-source, projects, web-developement, hellenic, dev, developer"/>
68
<meta name="author" content="HellenicDev"/>
@@ -11,10 +13,12 @@
1113
<meta property="og:url" content="https://hellenicdev.github.io">
1214
<meta property="og:type" content="website">
1315
<link rel="icon" type="image/png" href="/logo.webp">
14-
<link rel="preload" href="/style.css" as="style">
1516
<link rel="preconnect" href="https://www.googletagmanager.com">
1617
<link rel="preconnect" href="https://cdn.supportfast.ai">
1718
<link rel="preconnect" href="https://www.youtube.com">
19+
<link rel="dns-prefetch" href="//www.google.com">
20+
<link rel="dns-prefetch" href="//www.youtube.com">
21+
<link rel="dns-prefetch" href="//cdn.supportfast.ai">
1822

1923
<script type="application/ld+json">
2024
{
@@ -31,42 +35,55 @@
3135

3236
<script defer id="supportfast-script" src="https://cdn.supportfast.ai/chatbot.js" data-chatbot-id="bot-09dcew6lcq"></script>
3337
<script defer id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="06e4a97f-2c34-41ed-8ab6-d53b581ff080" type="text/javascript" async></script>
34-
<meta charset="UTF-8" />
35-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
3638

3739
<!-- <img src="logo.webp" alt="Logo" style="width: 200px; height: 200px; border-radius: 10px;"> -->
38-
3940
<title>HellenicDev</title>
4041

41-
<!-- <div class="new-year-banner">
42-
<h2>🎉 Happy Easter!</h2>
42+
<div class="new-year-banner">
43+
<h2>🐇 Happy Easter!</h2>
4344
<p>
4445
May your Easter be blessed with happy feelings and
4546
memories full of joy!
4647
</p>
47-
</div> -->
48+
</div>
4849

4950
<!-- THE LAST UPDATED SCRIPT WAS HERE -->
5051
<link rel="preload" href="style.css" as="style">
5152
<link rel="stylesheet" href="style.css" />
52-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
53+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" media="print" onload="this.media='all'">
5354

5455
<!-- reCAPTCHA -->
5556
<script defer src="https://www.google.com/recaptcha/api.js"></script>
5657

5758
</head>
5859
<body>
60+
61+
<div id="menuButton"></div>
62+
63+
<nav id="sideMenu">
64+
<a href="#about">About Me</a>
65+
<a href="#projects">Projects</a>
66+
<a href="#ai-agent">AI-powered agent</a>
67+
<a href="#coming-next">What’s Coming Next</a>
68+
<a href="#latest-upload">My Latest Upload</a>
69+
<a href="#help-form">Website Building Help Form</a>
70+
<a href="#contact">Contact Me</a>
71+
<a href="#newsletter">Newsletter</a>
72+
<a href="#updates">Updates</a>
73+
</nav>
74+
75+
5976
<!-- IMPORTANT!!! ANNIVERSARY VIDEO::
6077
<video width="640" height="360" controls>
6178
<source src="video.mp4" type="video/mp4" />
6279
Your browser does not support the video tag.
6380
</video> -->
64-
81+
<header>
82+
<div id="about">
6583
<img
6684
src="logo.webp"
6785
class="logo"
6886
onclick="showThankYou()"
69-
style="cursor: pointer; width: 200px; height: 200px; border-radius: 10px;"
7087
alt="HellenicDev logo - EASTER EGG: LUCKY5"
7188
fetchpriority="high"
7289
decoding="async"
@@ -79,18 +96,21 @@ <h2>🎉 Happy Easter!</h2>
7996

8097
<!--<script defer src="https://cdn.logwork.com/widget/countdown.js"></script>
8198
<a href="https://logwork.com/countdown-timer" class="countdown-timer" data-timezone="Europe/Athens" data-textcolor="#ffffff" data-date="2027-03-28 00:00" data-background="#19336e" data-digitscolor="#ffffff" data-unitscolor="#ffffff">Days until anniversary</a>--->
82-
99+
</header>
83100
<h1>HellenicDev</h1>
101+
<main>
84102
<h4>Hello! My name is Panos, AKA HellenicDev. I'm passionate about programming and love exploring different languages and technologies. I've created several projects so far—and many more are on the way! You can find a few of them listed below. Enjoy!</h4>
85103
<h4> Thank you for being part of HellenicDev.
86104
What started as a personal passion for programming has grown into something bigger thanks to everyone who visits, explores, and supports this journey.
87105
Here’s to learning, building, and innovating — together. 🚀</h4>
88-
<h2>My Projects:</h2>
106+
</div>
89107

90-
<div class="game-list">
108+
<h2 class="left-align">My Projects:</h2>
109+
110+
<div class="game-list" id="projects">
91111
<div class="game-card">
92112
<span class="new-tag">REDESIGNED!</span>
93-
<a href="https://hellenicdev.github.io/codriver/frontend?utm_source=hellenicdev">
113+
<a href="https://hellenicdev.github.io/codriver/frontend?utm_source=hellenicdev.github.io">
94114
<h3>⭐ Featured • Codriver</h3>
95115
<p>An AI-powered assistant. It has games, jokes, riddles, and more.</p>
96116
<p class="last-updated" data-meta="codriver/meta.json">
@@ -100,7 +120,7 @@ <h3>⭐ Featured • Codriver</h3>
100120
</div>
101121
<div class="game-card">
102122
<span class="new-tag">REDESIGNED!</span>
103-
<a href="https://hellenicdev.github.io/clicker-game?utm_source=hellenicdev">
123+
<a href="https://hellenicdev.github.io/clicker-game?utm_source=hellenicdev.github.io">
104124
<h3>Clicker Game</h3>
105125
<p>A simple incremental game where every click counts. Watch your score rise!</p>
106126
<p class="last-updated" data-meta="clicker-game/meta.json">
@@ -110,7 +130,7 @@ <h3>Clicker Game</h3>
110130
</div>
111131
<div class="game-card">
112132
<!--<span class="new-tag">UPDATED!</span>-->
113-
<a href="https://hellenicdev.github.io/budget-tracker?utm_source=hellenicdev">
133+
<a href="https://hellenicdev.github.io/budget-tracker?utm_source=hellenicdev.github.io">
114134
<h3>Budget Tracker</h3>
115135
<p>Track your income and expenses with ease. Great for personal finance planning (data saved in browser cookies).</p>
116136
<p class="last-updated" data-meta="budget-tracker/meta.json">
@@ -120,7 +140,7 @@ <h3>Budget Tracker</h3>
120140
</div>
121141
<div class="game-card">
122142
<!--<span class="new-tag">UPDATED!</span>-->
123-
<a href="https://hellenicdev.github.io/the-quiz?utm_source=hellenicdev">
143+
<a href="https://hellenicdev.github.io/the-quiz?utm_source=hellenicdev.github.io">
124144
<h3>The Quiz</h3>
125145
<p>Test your knowledge in various subjects. Fun and educational quiz app!</p>
126146
<p class="last-updated" data-meta="the-quiz/meta.json">
@@ -130,7 +150,7 @@ <h3>The Quiz</h3>
130150
</div>
131151
<div class="game-card">
132152
<!--<span class="new-tag">UPDATED!</span>-->
133-
<a href="https://hellenicdev.github.io/e-table?utm_source=hellenicdev">
153+
<a href="https://hellenicdev.github.io/e-table?utm_source=hellenicdev.github.io">
134154
<h3>E-table</h3>
135155
<p>A mock app. Supposed to be a platform where you can reserve a table at a restaurant.</p>
136156
<p class="last-updated" data-meta="e-table/meta.json">
@@ -140,7 +160,7 @@ <h3>E-table</h3>
140160
</div>
141161
<div class="game-card">
142162
<!--<span class="new-tag">UPDATED!</span>-->
143-
<a href="https://hellenicdev.github.io/dodge-and-survive?utm_source=hellenicdev">
163+
<a href="https://hellenicdev.github.io/dodge-and-survive?utm_source=hellenicdev.github.io">
144164
<h3>Dodge & Survive</h3>
145165
<p>A fast-paced arcade game where you dodge enemies and try to survive as long as possible.</p>
146166
<p class="last-updated" data-meta="dodge-and-survive/meta.json">
@@ -150,7 +170,7 @@ <h3>Dodge & Survive</h3>
150170
</div>
151171
<div class="game-card">
152172
<span class="new-tag">UPDATED!</span>
153-
<a href="https://hellenicdev.github.io/the-sound-quiz?utm_source=hellenicdev">
173+
<a href="https://hellenicdev.github.io/the-sound-quiz?utm_source=hellenicdev.github.io">
154174
<h3>The Sound Quiz</h3>
155175
<p>A simple quiz. You hear sounds and you have to guess them.</p>
156176
<p class="last-updated" data-meta="the-sound-quiz/meta.json">
@@ -160,7 +180,7 @@ <h3>The Sound Quiz</h3>
160180
</div>
161181
<div class="game-card">
162182
<span class="new-tag">UPDATED!</span>
163-
<a href="https://currency-converter-7fmk.onrender.com?utm_source=hellenicdev">
183+
<a href="https://currency-converter-7fmk.onrender.com?utm_source=hellenicdev.github.io">
164184
<h3>Currency Converter</h3>
165185
<p>A currency converter with all major currencies.</p>
166186
<p class="last-updated" data-meta="currency-converter/meta.json">
@@ -170,20 +190,23 @@ <h3>Currency Converter</h3>
170190
</div>
171191
<div class="game-card">
172192
<span class="new-tag">NEW!</span>
173-
<a href="https://hellenicdev.github.io/pi-radio/index.html?utm_source=hellenicdev">
193+
<a href="https://hellenicdev.github.io/pi-radio/index.html?utm_source=hellenicdev.github.io">
174194
<h3>Pi Radio</h3>
175195
<p>A 24/7 internet radio station hosted on a Raspberry Pi 5.</p>
176196
</a>
177197
</div>
198+
<div class="game-card">
199+
<h3> <em>More coming soon...</em></h3>
178200
</div>
179201
</div>
180-
<!-- "New" tag style-->
181202

182-
<h2> NEW! AI-powered agent </h2>
203+
<!-- "New" tag style-->
204+
<div id="ai-agent">
205+
<h2 class="left-align"> NEW! AI-powered agent </h2>
183206
<iframe loading="lazy" title="AI Agent" src="https://app.supportfast.ai/chatbot-iframe/bot-09dcew6lcq" width="100%" height="600px"></iframe>
184-
185-
<section class="coming-next">
186-
<h2>What’s Coming Next</h2>
207+
</div>
208+
<section class="coming-next" id="coming-next">
209+
<h2 class="left-align">What’s Coming Next</h2>
187210
<ul>
188211
<li>🚀 New interactive projects & experiments</li>
189212
<li>🎨 UI and performance improvements</li>
@@ -193,11 +216,12 @@ <h2>What’s Coming Next</h2>
193216
</section>
194217

195218
<!-- reCAPTCHA-Protected Google Form -->
196-
197-
<h2> My Latest Upload: </h2>
198-
<iframe width="560" height="315" src="https://www.youtube.com/embed/99FexhxsXx8?si=EECWLqH3sD-nJGhr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
199-
200-
<h2>Website Building Help Form</h2>
219+
<div id="latest-upload">
220+
<h2 class="left-align"> My Latest Upload: </h2>
221+
<iframe width="560" height="315" src="https://www.youtube.com/embed/99FexhxsXx8?si=EECWLqH3sD-nJGhr" title="YouTube video player" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
222+
</div>
223+
<div id="help-form">
224+
<h2 class="left-align">Website Building Help Form</h2>
201225

202226
<!-- Button protected by reCAPTCHA -->
203227
<div style="text-align:center; margin-bottom:20px;">
@@ -223,43 +247,47 @@ <h2>Website Building Help Form</h2>
223247
Loading…
224248
</iframe>
225249
</div>
226-
250+
</div>
251+
<div id="contact">
227252
<!-- Contact Icons -->
228-
<h2 style="text-align:center; margin-top:40px;">Contact Me</h2>
253+
<h2 class="left-align">Contact Me</h2>
229254
<div style="text-align:center; margin-bottom:40px;">
230255
<a href="mailto:ikonpanos@gmail.com" aria-label="Mail" target="_blank" style="margin:0 10px; color:#D44638; font-size:30px;">
231256
<i class="fa-solid fa-envelope"></i>
232257
</a>
233-
<a href="https://www.youtube.com/@hellenicdev?sub_confirmation=1" aria-label="YouTube" target="_blank" style="margin:0 10px; color:#FF0000; font-size:30px;">
258+
<a href="https://www.youtube.com/@hellenicdev?sub_confirmation=1" aria-label="YouTube" target="_blank" rel="noopener" style="margin:0 10px; color:#FF0000; font-size:30px;">
234259
<i class="fa-brands fa-youtube"></i>
235260
</a>
236-
<a href="https://github.com/hellenicdev" aria-label="Github" target="_blank" style="margin:0 10px; color:#333333; font-size:30px;">
261+
<a href="https://github.com/hellenicdev" aria-label="Github" target="_blank" rel="noopener" style="margin:0 10px; color:#333333; font-size:30px;">
237262
<i class="fa-brands fa-github"></i>
238263
</a>
239-
<a href="https://discord.gg/tHwtmrB9xw" aria-label="Discord" target="_blank" style="margin:0 10px; color:#5865F2; font-size:30px;">
264+
<a href="https://discord.gg/tHwtmrB9xw" aria-label="Discord" target="_blank" rel="noopener" style="margin:0 10px; color:#5865F2; font-size:30px;">
240265
<i class="fa-brands fa-discord"></i>
241266
</a>
242-
<a href="https://reddit.com/u/hellenicdev" aria-label="Reddit" target="_blank" style="margin:0 10px; color:#FF4500; font-size:30px;">
267+
<a href="https://reddit.com/u/hellenicdev" aria-label="Reddit" target="_blank" rel="noopener" style="margin:0 10px; color:#FF4500; font-size:30px;">
243268
<i class="fa-brands fa-reddit"></i>
244269
</a>
245-
<a href="https://invite.viber.com/?g2=AQAgg8gST0QlllYfwbe6OjAd1xzo4ezOXxCHX4yh03u0ZSgOXVJksWXm59E6Phz2" aria-label="Viber" target="_blank" style="margin:0 10px; color:#7360F2; font-size:30px;">
270+
<a href="https://invite.viber.com/?g2=AQAgg8gST0QlllYfwbe6OjAd1xzo4ezOXxCHX4yh03u0ZSgOXVJksWXm59E6Phz2" aria-label="Viber" target="_blank" rel="noopener" style="margin:0 10px; color:#7360F2; font-size:30px;">
246271
<i class="fa-brands fa-viber"></i>
247272
</a>
248273
<a href="https://hellenicdev.substack.com"
249274
aria-label="Substack"
250-
target="_blank"
251-
style="margin:0 10px; display:inline-block;">
275+
style="margin:0 10px; display:inline-block;"
276+
target="_blank" rel="noopener">
252277
</a>
253278
</div>
279+
</div>
254280

255281
<!-- Popup Ad -->
256282
<div id="popup-ad" style="display:none; position:fixed; bottom:20px; right:20px; width:300px; background:#fff; border:1px solid #000000; border-radius:8px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.2); font-family:sans-serif; color:black; z-index:9999;">
257283
<strong>Sponsored Offer - Accommodation in Corfu, Greece.</strong>
258284
<p>Nikoletta's Apartments. 9.6 Booking rating. Situated in Tzavros, Nikoleta's Corfu Apartment belongs to a block of houses which feature a large outdoor pool and a colorful garden full of flowers and trees. Set in a 8,000 m² area, the property offers fully equipped apartments with free WiFi access and shaded verandas overlooking the pool.</p>
259-
<a href="https://www.booking.com/Share-BN5noZ?utm_source=hellenicdev" target="_blank" style="color:#007bff;">Check it out →</a>
285+
<a href="https://www.booking.com/Share-BN5noZ?utm_source=hellenicdev" target="_blank" rel="noopener" style="color:#007bff;">Check it out →</a>
260286
<button onclick="document.getElementById('popup-ad').style.display='none'" style="position:absolute; top:5px; right:10px; border:none; background:none; font-size:18px; cursor:pointer;">&times;</button>
261287
</div>
262-
288+
289+
<div id="newsletter">
290+
<h2 class="left-align"> Newsletter </h2>
263291
<!-- START OF NEWSLETTER -->
264292
<style defer type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1762785");</style>
265293
<style defer type="text/css">
@@ -1110,27 +1138,33 @@ <h4>Thank you!</h4>
11101138

11111139
<script defer src="https://groot.mailerlite.com/js/w/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024" type="text/javascript"></script>
11121140
<!-- END OF NEWSLETTER -->
1113-
1114-
<h2> HellenicDev Updates: </h2>
1141+
</div>
1142+
<div id="updates">
1143+
<h2 class="left-align"> HellenicDev Updates: </h2>
11151144
<p class="announcement">
11161145
🚀 <strong>HellenicDev</strong> has launched a new project:
1117-
<a href="https://niobic-omari-boastingly.ngrok-free.dev/radio.mp3" target="_blank" class="link">Pi Radio</a>!
1146+
<a href="https://hellenicdev.github.io/pi-radio?utm_source=hellenicdev.github.io" target="_blank" class="link">Pi Radio</a>!
11181147
<br>
11191148
A 24/7 internet radio station powered by a Raspberry Pi 5.
11201149
<br>
1121-
🎧 Stay tuned — a fresh UI experience is currently in the works.
1150+
🎧 A fresh UI experience has been developed.
11221151
</p>
11231152

11241153
<p class="announcement">
11251154
🚀 <strong>HellenicDev</strong> now has uptime tracking! You can access it by clicking <a href="https://stats.uptimerobot.com/RrsSLtEzbk" target="_blank" class="link"> here</a>.
11261155
</p>
11271156

1157+
</div>
1158+
1159+
</main>
11281160
<!-- END OF UPDATES -->
1161+
<br><br><br><br><br><br>
11291162
<a href="privacy-policy.html" class="link">Privacy Policy</a>
11301163

11311164
<footer style="text-align:center; padding:20px; font-size:14px; color:gray;">
11321165
© 2026 HellenicDev — All projects and content belong to HellenicDev.
11331166
</footer>
1167+
11341168
<script src="script.js" defer></script>
11351169
</body>
11361170
</html>

script.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,15 @@ document.addEventListener("DOMContentLoaded", async () => {
118118
function showThankYou() {
119119
const msg = document.getElementById("hidden-thanks");
120120
msg.style.display = "block";
121-
}
121+
}
122+
// Navigation
123+
const menuButton = document.getElementById("menuButton");
124+
const sideMenu = document.getElementById("sideMenu");
125+
126+
menuButton.onclick = () => {
127+
if (sideMenu.style.left === "0px") {
128+
sideMenu.style.left = "-250px";
129+
} else {
130+
sideMenu.style.left = "0px";
131+
}
132+
};

0 commit comments

Comments
 (0)