-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (169 loc) · 9.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>mAa4a</title>
<link rel="icon" type="image/x-icon" href="./assets/header/logo.png">
<link rel="preload" href="./assets/pics/opener/opener_main.png" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="./resources/css/style.css" />
</head>
<body>
<div class="parallax-container">
<div class="background-image">
<div class="username">mAa4a</div>
</div>
<img class="overlay-image" src="./assets/pics/opener/opener_overlay.png" alt="Overlay Image - Liepāja North pier">
<!--<div class="overlay-image">test</div>-->
</div>
<!-- Navbar -->
<div class="navbar">
<a href="#Portfolio" class="button" aria-label="Go to portfolio section">Portfolio</a>
<div class="logo" aria-label="Go to About Me section"></div>
<a href="#Socials" class="button" aria-label="Go to socials section">Socials</a>
</div>
<!-- Text Section -->
<div class="text-section" id="about-me">
<div class="left-section">
<img src="./assets/pics/about_me/me.JPG" alt="Madars Vagalis - fotogrāfs" class="profile-image">
</div>
<div class="right-section">
<h1>About Me</h1>
<h3>My name is Madars Vagalis and I am photographer, videographer, camera operator and sometimes livestream producer or director. I usually go by the username <i>mAa4a</i>.<br>
I'm 21 years old and originally am from Bēne (Latvia), but for now I live and study in Liepāja.<br><br>
I would describe myself as a creative and goal-oriented person who likes to improve himself in a wide variety of industries.<br>
I am happy for every opportunity to learn something new.<br><br>
This website was created with the intention to introduce myself, but also to show my work experience.<br>
Also, this website is made ground up by me (with an assist of OpenAI), written in HTML, JavaScript and CSS and using only free available tools for hosting.
</h3>
</div>
</div>
<div class="parallax-container">
<div class="background-image" style="background-image: url('./assets/parallax/Piipa_1.JPG');">
<div class="color-filter"></div>
</div>
<!-- Content for the first parallax section if needed -->
</div>
<!-- Event Timeline Section -->
<div class="event-timeline-section" id="Portfolio">
<h1>Notable life events</h1>
<p>(Hower over the dots, and press on them to see more information)</p>
<div class="event-timeline" id="eventTimeline"></div>
</div>
<div class="gallery-view">
<div id="Photos"><h1>Some of my work</h1></div>
<div class="gallery">
<!--<a href="https://youtube.com/@mAa4a/" target="_blank">-->
<a href="./portfolio/Izgaismo_Liepaju" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Izgaismo_Liepaju.JPEG" alt="Izgaismo Liepāju" />
<div class="image__overlay image__overlay--blur">Izgaismo Liepāju</div>
</div>
</a>
<a href="./portfolio/Mad_Liepaja-2023" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Mad_Liepaja.JPG" alt="Mad Liepāja 2023" />
<div class="image__overlay image__overlay--blur">Mad Liepāja 2023</div>
</div>
</a>
<a href="./portfolio/Trends_and_transformation" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Trends_and_transformation.jpg" alt="Trends and transformation" />
<div class="image__overlay image__overlay--blur">Trends and transformation</div>
</div>
</a>
<a href="./portfolio/Liepajas.Vesels.Aktivs.Laimigs" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Liepaja.Vesels.Aktivs.Laimigs.jpg" alt="Liepāja.Vesels.Aktīvs.Laimīgs" />
<div class="image__overlay image__overlay--blur">Liepāja.Vesels.Aktīvs.Laimīgs</div>
</div>
</a>
<a href="./portfolio/Liepaja_2023-2024" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Liepaja_2023-2024.jpg" alt="Jaungada svinības Liepājā 2024" />
<div class="image__overlay image__overlay--blur">Liepāja 2023-2024</div>
</div>
</a>
<a href="./portfolio/Photos_for_Libau_Active" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Photos_for_Libau_Active.jpg" alt="Photos for Libau Active" />
<div class="image__overlay image__overlay--blur">Photos for Libau Active</div>
</div>
</a>
<a href="./portfolio/Juras_Svetki_Liepaja_2024" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Juras_Svetki_Liepaja_2024.JPG" alt="Jūras Svētki Liepājā 2024" />
<div class="image__overlay image__overlay--blur">Jūras Svētki Liepājā 2024</div>
</div>
</a>
<a href="./portfolio/Summer_Sound_2024" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Summer_Sound_2024.jpg" alt="Summer Sound 2024" />
<div class="image__overlay image__overlay--blur">Summer Sound 2024</div>
</div>
</a>
<a href="./portfolio/Mad_Liepaja-2024" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Mad_Liepaja-2024.JPG" alt="Mad Liepāja 2024" />
<div class="image__overlay image__overlay--blur">Mad Liepāja 2024</div>
</div>
</a>
<a href="./portfolio/Spogulit_spogulit" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Spogulit_spogulit.jpg" alt="Spogulīt, spogulīt..." />
<div class="image__overlay image__overlay--blur">Spogulīt, spogulīt...</div>
</div>
</a>
<a href="./portfolio/Liepaja_2024-2025" target="_self">
<div class="image">
<img class="image__img" src="./portfolio/Liepaja_2024-2025.jpg" alt="Liepāja 2024-2025" />
<div class="image__overlay image__overlay--blur">Liepāja 2024-2025</div>
</div>
</a>
</div>
</div>
<div class="parallax-container" style="height: 40vh;">
<div class="background-image" style="background-image: url('./assets/parallax/KF55108.JPG');">
<div class="color-filter"></div>
</div>
<!-- Content for the first parallax section if needed -->
</div>
<div class="quote">
<i><h1>"Creativity is seeing<br>what others see<br>and thinking<br>what no one else ever thought."</h1></i>
<p>- Albert Einstein</p>
</div>
<div id="Socials" class="socials">
<h1>Socials</h1>
<div class="links">
<a href="https://youtube.com/@mAa4a/" target="_blank" aria-label="Visit my YouTube channel" ><box-icon name='youtube' type='logo' ></box-icon></a>
<a href="https://twitch.tv/mAa4a/" target="_blank" aria-label="Visit my twitch channel" ><box-icon name='twitch' type='logo' ></box-icon></a>
<a href="https://instagram.com/mAa4a.v/" target="_blank" aria-label="Visit my Instagram profile" ><box-icon type='logo' name='instagram'></box-icon></a>
<a href="mailto:[email protected]" target="_blank" class="email-button" aria-label="Send me an e-mail" ><box-icon name='envelope' type='solid' ></box-icon></a>
<a href="https://www.linkedin.com/in/madars-vagalis-9a1336257/" target="_blank" aria-label="Visit my LinkedIn" ><box-icon name='linkedin-square' type='logo' ></box-icon></a>
<a href="https://www.facebook.com/people/Photos-by-MV/100094124795924/" target="_blank" aria-label="Visit my Facebook page" ><box-icon name='facebook-square' type='logo' ></box-icon></a>
<a href="https://github.com/mAa4a97/" target="_blank" aria-label="Check out my GitHub" ><box-icon name='github' type='logo' ></box-icon></a>
</div>
</div>
<div class="cc">
<input type="button" aria-label="Go back up" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });" value="©mAa4a, 2025" style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
</div>
<!-- Fix this later, because this shit is brokeh -->
<div id="eventOverlay" class="overlay">
<span id="overlayClose" class="close-btn" onclick="closeOverlay()">×</span>
<div id="overlayContent" class="overlay-content">
<img id="eventImage" class="event-image" src="" alt="Event Image">
<div id="eventDescription" class="event-description"></div>
<div id="eventDates" class="event-dates">
<span id="eventStartDateLabel" class="event-date-label">Date:</span>
<span id="eventStartDate" class="event-date"></span>
<span id="eventEndDateLabel" class="event-date-label" style="display: none;">End:</span>
<span id="eventEndDate" class="event-date" style="display: none;"></span>
</div>
</div>
</div>
<!-- ------------------------------------------- -->
<script defer src="./resources/js/script.js"></script>
<script async src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
</body>
</html>