-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (128 loc) · 4.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fmard | Portfolio</title>
<link rel="stylesheet" href="styles/style.css" />
<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<script src="scripts/scroll-carousel.js"></script>
<script src="scripts/fetch-repos.js"></script>
<script src="scripts/header-footer.js" defer></script>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-T2MBS9R5MB"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-T2MBS9R5MB");
</script>
</head>
<body>
<div id="header-container"></div>
<!-- Header will be injected here -->
<!-- div "content" here, so that it takes at least 100% of page height (so that footer is at bottom) -->
<div id="content">
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<!-- Container for fetched repositories -->
<div id="repo-container">
<!-- JavaScript will inject repository details here -->
</div>
</section>
<!-- Other Activities Section -->
<section id="other-activities">
<h2>Other Activities</h2>
<div class="carousel-container">
<!-- Left Arrow Button -->
<button class="carousel-btn left" onclick="scrollCarousel(-1)">
❮
</button>
<!-- Container for hardcoded activities -->
<div id="activity-container">
<a href="activities/rubiks-cube.html" class="activity-link">
<div class="activity">
<img src="/images/rubiks/rubiks.jpg" alt="Rubiks img" />
<h3>Rubik's Cube</h3>
<p>
I've attended various Rubik's Cube competitions in Greece!
(finished in 5th place twice) Unofficial PB: 7.20 seconds
</p>
<p style="text-decoration: underline">Click to Read More</p>
</div>
</a>
<a href="activities/league.html" class="activity-link">
<div class="activity">
<img
src="/images/league/challenger_banner.png"
alt="League img"
/>
<h3>League of Legends</h3>
<p>
I've peaked top 0.01% (Challenger) in famous team-based video
game! (Season 11)
</p>
<p style="text-decoration: underline">Click to Read More</p>
</div>
</a>
<a href="activities/goodreads.html" class="activity-link">
<div class="activity">
<img
src="/images/goodreads/goodreads.jpg"
alt="Goodreads img"
/>
<h3>Goodreads</h3>
<p>I love reading Books in my spare time!</p>
<p style="text-decoration: underline">Click to Read More</p>
</div>
</a>
<a href="activities/imdb.html" class="activity-link">
<div class="activity">
<img src="/images/imdb/imdb.jpg" alt="Imdb img" />
<h3>IMDb</h3>
<p>
All the Movies/Series I've watched and my personal Ratings!
</p>
<p style="text-decoration: underline">Click to Read More</p>
</div>
</a>
<a href="activities/medium.html" class="activity-link">
<div class="activity">
<img src="/images/medium/medium.jpeg" alt="Medium img" />
<h3>Medium</h3>
<p>I've written some posts on Medium on various topics.</p>
<p style="text-decoration: underline">Click to Read More</p>
</div>
</a>
<a href="activities/typeracer.html" class="activity-link">
<div class="activity">
<img
src="/images/typeracer/typeracer.webp"
alt="Typeracer img"
/>
<h3>Typeracer</h3>
<p>Rank (WPM percentile): 96.1% in Typeracer!</p>
<p style="text-decoration: underline">Click to Read More</p>
</div>
</a>
</div>
<!-- Right Arrow Button -->
<button class="carousel-btn right" onclick="scrollCarousel(1)">
❯
</button>
</div>
</section>
</div>
<!-- Contact Section -->
<div id="footer-container"></div>
<!-- Footer will be injected here -->
<script src="scripts/dark-mode-toggle.js"></script>
<!-- New script for fetching repositories -->
</body>
</html>