Skip to content

Commit 226de5b

Browse files
hellenicdevhellenicdev
committed
v01.3
1 parent d704ea3 commit 226de5b

2 files changed

Lines changed: 120 additions & 85 deletions

File tree

‎index.html‎

Lines changed: 46 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,58 @@
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">
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<title>HellenicDev</title>
7-
<style>
8-
body {
9-
font-family: sans-serif;
10-
background: #111;
11-
color: white;
12-
margin: 0;
13-
padding: 2rem;
14-
display: flex;
15-
flex-direction: column;
16-
align-items: center;
17-
}
18-
19-
.logo {
20-
width: 150px;
21-
height: auto;
22-
margin-bottom: 1.5rem;
23-
border-radius: 10px;
24-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
25-
}
26-
27-
h1 {
28-
font-size: 3rem;
29-
margin-bottom: 2rem;
30-
letter-spacing: 2px;
31-
text-align: center;
32-
}
33-
34-
.game-list {
35-
width: 100%;
36-
max-width: 900px;
37-
display: grid;
38-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
39-
gap: 1.5rem;
40-
margin-top: 2rem;
41-
}
42-
43-
.game-card {
44-
background: #222;
45-
padding: 1rem;
46-
border-radius: 10px;
47-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
48-
text-align: center;
49-
transition: transform 0.2s ease;
50-
}
51-
52-
.game-card:hover {
53-
transform: scale(1.05);
54-
}
55-
56-
.game-card a {
57-
text-decoration: none;
58-
color: #00aaff;
59-
font-weight: bold;
60-
font-size: 1.1rem;
61-
}
62-
</style>
7+
<link rel="stylesheet" href="style.css" />
638
</head>
649
<body>
65-
<!-- Make sure logo.png is in the same folder as this HTML file -->
66-
<img src="logo.png" alt="HellenicDev Logo" class="logo">
67-
10+
<!-- Make sure logo.png is in the same folder -->
11+
<img src="logo.png" alt="HellenicDev Logo" class="logo" />
12+
6813
<h1>HellenicDev</h1>
69-
<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>
70-
<h2>My Projects:</h2>
14+
<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>
7115

72-
<div class="game-list">
73-
<div class="game-card">
74-
<a href="./clicker-game/index.html">Clicker Game</a>
75-
</div>
76-
<div class="game-card">
77-
<a href="./codriver/index.html">Codriver</a>
78-
</div>
79-
<div class="game-card">
80-
<a href="./budget-tracker/index.html">Budget Tracker</a>
81-
</div>
82-
<div class="game-card">
83-
<a href="./the-quiz/index.html">The Quiz</a>
84-
</div>
85-
86-
<div class="game-card">
87-
<a href="./e-table/index.html">E-table</a>
88-
</div>
16+
<h2>My Projects:</h2>
17+
18+
<div class="game-list">
19+
<div class="game-card">
20+
<a href="clicker-game/index.html">
21+
<h3>Clicker Game</h3>
22+
<p>A simple incremental game where every click counts. Watch your score rise!</p>
23+
</a>
24+
</div>
25+
<div class="game-card">
26+
<a href="./codriver/index.html">
27+
<h3>Codriver</h3>
28+
<p>An AI-powered assistant. It has games, jokes, riddles and more.</p>
29+
</a>
30+
</div>
31+
<div class="game-card">
32+
<a href="./budget-tracker/index.html">
33+
<h3>Budget Tracker</h3>
34+
<p>Track your income and expenses with ease. Great for personal finance planning (saved locally).</p>
35+
</a>
8936
</div>
90-
</div>
91-
92-
<div class="game-card">
93-
<a href="./dodge-and-survive/index.html">Dodge & Survive</a>
94-
</div>
37+
<div class="game-card">
38+
<a href="./the-quiz/index.html">
39+
<h3>The Quiz</h3>
40+
<p>Test your knowledge in various subjects. Fun and educational quiz app!</p>
41+
</a>
9542
</div>
43+
<div class="game-card">
44+
<a href="./e-table/index.html">
45+
<h3>E-table</h3>
46+
<p>A mock-up. Supposed to be a platform where you can reserve a table at a restaurant.</p>
47+
</a>
48+
</div>
49+
<div class="game-card">
50+
<a href="./dodge-and-survive/index.html">
51+
<h3>Dodge & Survive</h3>
52+
<p>A fast-paced arcade game where you dodge enemies and try to survive as long as possible.</p>
53+
</a>
54+
</div>
55+
</div>
56+
9657
</body>
9758
</html>

‎style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
body {
2+
font-family: sans-serif;
3+
background: #111;
4+
color: white;
5+
margin: 0;
6+
padding: 2rem;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
}
11+
12+
.logo {
13+
width: 150px;
14+
height: auto;
15+
margin-bottom: 1.5rem;
16+
border-radius: 10px;
17+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
18+
}
19+
20+
h1 {
21+
font-size: 3rem;
22+
margin-bottom: 2rem;
23+
letter-spacing: 2px;
24+
text-align: center;
25+
}
26+
27+
h4 {
28+
text-align: center;
29+
max-width: 800px;
30+
font-weight: normal;
31+
color: #ccc;
32+
}
33+
34+
h2 {
35+
margin-top: 2rem;
36+
font-size: 2rem;
37+
border-bottom: 2px solid #00aaff;
38+
padding-bottom: 0.5rem;
39+
}
40+
41+
.game-list {
42+
width: 100%;
43+
max-width: 900px;
44+
display: grid;
45+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
46+
gap: 1.5rem;
47+
margin-top: 2rem;
48+
}
49+
50+
.game-card {
51+
background: #222;
52+
padding: 1rem;
53+
border-radius: 10px;
54+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
55+
text-align: center;
56+
transition: transform 0.2s ease;
57+
}
58+
59+
.game-card:hover {
60+
transform: scale(1.05);
61+
}
62+
63+
.game-card a {
64+
text-decoration: none;
65+
color: #00aaff;
66+
font-weight: bold;
67+
font-size: 1.1rem;
68+
}
69+
70+
.game-card p {
71+
margin-top: 0.5rem;
72+
font-size: 0.95rem;
73+
color: #ccc;
74+
}

0 commit comments

Comments
 (0)