-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (155 loc) · 6.14 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
<!DOCTYPE HTML>
<html>
<head>
<title>Volkan Ozcoban</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<style>
/* Add custom styles for the button list layout */
.button-list-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.button-list-item {
margin-bottom: 10px;
margin-left: 5px; /* Add left margin to create spacing between buttons */
}
/* Default font color for not selected buttons */
.button-list-item a {
color: rgb(202, 201, 201);
text-decoration: none;
font-size: 20px;
}
/* Define a transition for the color property */
.button-list-item a {
transition: color 0.3s ease;
}
/* Change the font color to white on hover */
.button-list-item a:hover {
color: rgb(255, 255, 255);
}
/* Add a new class to highlight the active button */
.active {
font-weight: bold;
color: rgb(126, 13, 13); /* Set the color for the active button */
}
/* Center the avatar and footer */
#header .inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center; /* Ensures text is aligned */
}
#footer .inner {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</style>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<div class="inner">
<a href="#" class="image avatar">
<img src="images/headshot.jpeg" alt="" style="width: 100px; height: 100px;"/>
</a>
<h2>
<strong> Volkan Ozcoban </strong>
</h2>
<h3>
PhD Candidate
</h3>
<h3>
<a href="https://biomedical.eng.unimelb.edu.au/cell-systems-mechanobiology" target="_blank" rel="noopener">
<span>Cell Systems and Mechanobiology Laboratory</span>
</a>
</h3>
<!-- Clickable Buttons -->
<div class="button-list-container">
<div class="button-list-item"><a href="#" class="load-content-button" data-link="about.html" style="border-bottom: none;">About Me</a></div>
<div class="button-list-item"><a href="pdfs/CV/20241121_CV.pdf" target="_blank" style="border-bottom: none;">Curriculum Vitae</a></div>
<div class="button-list-item"><a href="#" class="load-content-button" data-link="publications.html" style="border-bottom: none;">Publications</a></div>
<div class="button-list-item"><a href="#" class="load-content-button" data-link="other_docs.html" style="border-bottom: none;">Conferences, Posters, and Theses</a></div>
<!-- Add more buttons with the same class and different data-link attributes for each button -->
</div>
</div>
</header>
<!-- Main -->
<div id="main">
<!-- One -->
<section id="one">
<!-- Initial content is left empty for dynamic loading -->
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://linkedin.com/in/volkan-ozcoban-20238b167" class="icon brands fa-linkedin fa-2x"><span class="label">LinkedIn</span></a></li>
<li><a href="https://scholar.google.com.au/citations?hl=en&user=LJaEyt4AAAAJ&view_op=list_works" class="ai ai-google-scholar-square ai-3x" style="border-bottom: none;"></a></li>
<li><a href="https://orcid.org/0000-0003-3478-5670" class="icon brands fa-orcid fa-2x"><span class="label">ORCID</span></a></li>
<li><a href="https://github.com/VolkanOzcoban" class="icon brands fa-github fa-2x"><span class="label">Github</span></a></li>
<li><a href="mailto:[email protected]" class="icon solid fa-envelope fa-2x"><span class="label">Email</span></a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script>
// JavaScript to handle the link clicks
function loadContent(linkTarget) {
// Fetch and load the content from the target HTML file
fetch(linkTarget)
.then(response => response.text())
.then(content => {
const mainSection = document.getElementById('one');
mainSection.innerHTML = content;
});
}
// Function to load the content of the first page during the initial page load
document.addEventListener('DOMContentLoaded', () => {
loadContent('about.html');
});
// Event listener for the clickable buttons in the navigation
const buttons = document.querySelectorAll('.load-content-button');
buttons.forEach(button => {
button.addEventListener('click', event => {
event.preventDefault();
// If the button is already active, do nothing
if (button.classList.contains('active')) {
return;
}
// Remove the "active" class from all navigation buttons
buttons.forEach(btn => {
btn.classList.remove('active');
});
// Add the "active" class to the clicked navigation button
button.classList.add('active');
// Load the content of the target link
const linkTarget = button.getAttribute('data-link');
loadContent(linkTarget);
// Update the URL using pushState to maintain navigation functionality
history.pushState(null, '', linkTarget);
});
});
// Handle browser back/forward buttons to maintain navigation functionality
window.addEventListener('popstate', () => {
const activeButton = document.querySelector('.load-content-button.active');
if (activeButton) {
const linkTarget = activeButton.getAttribute('data-link');
loadContent(linkTarget);
}
});
</script>
</body>
</html>