https://vraikonen.github.io/index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Nikola Vračević - Portfolio</title>
7    <meta name="description" content="Explore projects by Nikola Vracevic or Vračević, student of Copernicus Master in Digital Earht, at the University of Salzburg - specializing in Geoinformatics, and University of South Brittany, Vannes, France - specializing in geodata science. Experienced in data science, data engineering, geospatial technologies, GIS, remote sensing.">
8    <link rel="icon" href="images/icon.ico" type="image/x-icon">
9
10    <link rel="stylesheet" href="styles.css">
11
12<style>
13  /* Style the nav toggler button */
14  
15.nav-toggler {
16  display: block;
17  width: 30px;
18  height: 30px;
19  cursor: pointer;
20  position: absolute;
21  top: 20px;
22  right: 20px;
23}
24
25.nav-toggler span {
26  display: block;
27  width: 100%;
28  height: 2px;
29  background-color: #333;
30  margin-bottom: 5px;
31}
32.aside-inner {
33  transition: transform 0.3s ease;
34}
35
36.aside-inner.active {
37  display: block;
38  transform: translateX(0);
39}
40
41.image-container {
42  max-width: 100%; /* Ensure the image container doesn't exceed its parent's width */
43  overflow: hidden; /* Hide any overflowing content (like large images) */
44}
45
46/* Apply styles directly to the image */
47.image-rectangle {
48  width: 1080px;
49  height: 178px;
50  display: block;
51  border-radius: 0;
52  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
53}
54/* Style for the image */
55.img-end {
56    max-width: auto !important; /* Ensure the image doesn't exceed its container */
57    height: auto !important; /* Maintain aspect ratio */
58    display: block !important; /*Make it a block-level element */
59    margin: 0 auto !important; /* Center horizontally */
60    border-radius: 0 !important;
61}
62
63.img-container {
64            max-width: auto; /* Ensure the image doesn't exceed its container */
65            height: auto; /* Maintain aspect ratio */
66            display: block; /* Make it a block-level element */
67            margin: 0 auto; /* Center horizontally */
68            border-radius: 0 !important; /* Remove border radius (optional) */
69        }
70</style>
71</head>
72
73
74
75
76<body>
77
78    <div class="main-container">
79      
80        <!-- Aside -->
81        <div class="aside">
82          <!-- Nav Toggler Btn -->
83          <div class="nav-toggler" onclick="toggleNav()">
84            <span></span>
85          </div>
86          <div class="aside-inner">
87            <!-- Logo -->
88            <div class="logo">
89              <a href="index.html">#home</a>
90            </div>
91            <!-- Nav -->
92            <ul class="nav">
93              <li><a href="index.html"> Home</a></li>
94              <li><a href="education.html"> Education</a></li>
95              <li><a href="skills.html"> Skills</a></li>
96              <li><a href="projects.html"> Projects</a></li>
97              <li><a href="experience.html"> Experience</a></li>
98            </ul>
99            <div style="text-align: center;">
100                <p>let's connect!</p>
101                <a href="https://github.com/vraikonen" target="_blank" style="display: inline-block; margin: 0 10px;"><i class="fa fa-github"></i></a>
102                <a href="https://www.linkedin.com/in/nikola-vracevic-923537155/" target="_blank" style="display: inline-block; margin: 0 10px;"><i class="fa fa-linkedin"></i></a>
103              </div>
104
105          </div>
106        </div>
107
108
109        <div class="main-content">
110
111            <section class="home section active" id="home">
112              <div class="container">
113                <div class="intro">
114                  <img src="images/profile.jpg" alt="profile" class="profile-picture">
115                  <h3>Hello, I'm</h3>
116                  <h1>Nikola Vračević</h1>
117                  <span class="iTyped"></span>
118                  <p style="max-width: 900px; margin: 0 auto;">A geodata science graduate with extensive expertise across 
119                    diverse (geospatial) domains and a broad technical skill set, complemented by hands-on experience in data engineering - 
120                    a field I particularly enjoyed. In general, I am fond of getting to know the world through the lens of (geospatial) data. 
121                    If data or AI is not on the table, I prefer spending time in biergartens and immersing myself in the local cultures around the World.</p>
122
123                    <h3 style="margin-top: 20px; margin-bottom: 20px;">Checkout my <a href="https://github.com/vraikonen" target="_blank" style="color: rgb(183, 137, 52);">GitHub!</a> 
124                      or my <a href="portfolio-cv.pdf" target="_blank" style="color: rgb(183, 137, 52);"> CV!</a>
125                      </h3>
126                      <!-- <div class="image-wrapper">
127                        <img src="images/logos2.png" alt="Your Image" class="img-rectangle">
128                      </div>                                  </div> -->
129              </div>
130              
131            </section>
132        </div>
133
134
135
136        

136<script>
137const navTogglerBtn = document.querySelector('.nav-toggler'),
138    aside = document.querySelector('.aside');
139
140navTogglerBtn.addEventListener('click', asideSectionTogglerBtn);
141
142function asideSectionTogglerBtn() 
143{
144    aside.classList.toggle('open');
145    navTogglerBtn.classList.toggle('open');
146    for (let i = 0; i < totalSection; i++) {
147        allSection[i].classList.toggle('open');
148    }
149}
150      </script>

150
151</body>
152
153</html>