-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (180 loc) · 9.02 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
<!-- xduric06 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MĎ</title>
<link rel="stylesheet" href="./style/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/56e0bbdeed.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<!-- NAVBAR -->
<nav id="nav-container">
<div id="nav-heading">
<a href="https://mtsdurica.github.io/" class="nav-heading-item">
<h1>M</h1>
<h1>Ď</h1>
</a>
<button id="nav-toggle-button" class="nav-heading-item">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<ul id="nav-content">
<li class="nav-item">
<button id="about-href">
<span>About Me</span>
</button>
</li>
<li class="nav-item">
<button id="education-href">
<span>Education</span>
</button>
</li>
<li class="nav-item">
<button id="projects-href">
<span>Projects</span>
</button>
</li>
</ul>
</nav>
</header>
<!-- MAIN CONTENT CONTAINER -->
<main>
<div id="main-container">
<section id="about-section">
<div id="about-heading" class="section-heading">
<div>
<h1>About Me</h1>
</div>
</div>
<div class="section-content">
<div class="section-text">
<h2>Hello!</h2>
<span>
Lorem ipsum dolor sit amet, officia excepteur ex
fugiat reprehenderit enim labore culpa sint ad
nisi Lorem pariatur mollit ex esse exercitation
amet. Nisi anim cupidatat excepteur officia.
Reprehenderit nostrud nostrud ipsum Lorem est
aliquip amet voluptate voluptate dolor minim
nulla est proident.
</span>
</div>
<hr />
<div>
<h2>My Links</h2>
<div class="about-me-links">
<a href="https://github.com/mtsdurica">
<i class="fa-brands fa-square-github fa-3x"></i>
</a>
<a href="https://www.linkedin.com/in/mtsdurica/">
<i class="fa-brands fa-linkedin fa-3x"></i>
</a>
<a href="mailto:mtsdurica@gmail.com">
<i class="fa-solid fa-envelope fa-3x"></i>
</a>
</div>
</div>
</div>
</section>
<section id="education-section">
<div id="education-heading" class="section-heading">
<div>
<h1>Education</h1>
</div>
</div>
<div class="section-content">
<a href="https://spsjm.sk/" class="education-school">
<h2>Stredná priemyselná škola Jozefa Murgaša</h2>
<span>
Informačné a sieťové technológie
<i>(2017 - 2021)</i>
</span>
</a>
<a href="https://www.fit.vut.cz/" class="education-school">
<h2>Vysoké učení technické v Brně</h2>
<span>
Fakulta informačních technologií
<i>(2021 - present)</i>
</span>
</a>
</div>
</section>
<section id="projects-section">
<div id="projects-heading" class="section-heading">
<div>
<h1>Projects</h1>
</div>
</div>
<div class="section-content">
<div class="section-text">
<h2>Snaketype</h2>
<h3>
Simple typing speed test in terminal written in
Python
</h3>
<span>
Snaketype is a simple yet effective tool
designed to measure a user's typing speed
directly within the terminal environment.
Leveraging Python's versatility and ease of use,
this script provides an accessible means for
individuals to assess and improve their typing
proficiency. Main inspiration came from
<a href="https://monkeytype.com/">monkeytype</a>.
</span>
<img src="./img/snaketype.png" alt="" />
</div>
<div class="section-text">
<h2>NERRSID</h2>
<h3>2D roguelike game written in C++</h3>
<span>
At its core, our game utilizes procedural
generation algorithms to construct vast,
ever-changing worlds ripe for exploration. Each
playthrough presents players with a completely
unique landscape, ensuring that no two
adventures are ever alike. From sprawling
forests to labyrinthine caverns, the
possibilities are endless. Combat system draws
inspiration from beloved JRPGs, offering
strategic turn-based battles where every
decision counts. Players must carefully consider
their actions as they face off against
procedurally generated enemies, each with their
own distinct abilities and behaviors. The
dynamic nature of the AI ensures that encounters
remain fresh and unpredictable, challenging
players to adapt their tactics on the fly.
</span>
<img src="./img/nerrsid.png" alt="" />
</div>
</div>
</section>
</div>
</main>
<footer>
<div id="footer-container">
<span> Made by Matúš Ďurica </span>
<span> VUT v Brně </span>
</div>
</footer>
<script src="./src/main.js"></script>
</body>
</html>