-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (145 loc) · 8.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tim Tan's Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<nav class="sidebar">
<a href="#" data-page="home">Home</a>
<a href="#" data-page="about">About</a>
<a href="#" data-page="projects">Projects</a>
<a href="https://blog.tan-t.im">Blog</a>
<a href="#" data-page="composition">Compos</a>
</nav>
<main class="content">
<!--Home-->
<section id="home" class="page">
<h1>Tim Tan</h1>
<div class="gallery">
<div class="gallery-container">
<img src="properties/pic/2.jpg" class="gallery-item active" alt="Gallery Image 1">
<img src="properties/pic/3.jpg" class="gallery-item" alt="Gallery Image 2">
<img src="properties/pic/4.jpg" class="gallery-item" alt="Gallery Image 3">
<img src="properties/pic/5.jpg" class="gallery-item" alt="Gallery Image 4">
<img src="properties/pic/6.jpg" class="gallery-item" alt="Gallery Image 5">
<img src="properties/pic/7.jpg" class="gallery-item" alt="Gallery Image 6">
<img src="properties/pic/8.jpg" class="gallery-item" alt="Gallery Image 7">
</div>
</div>
<h1>About Me</h1>
<p>I'm Tim Tan. I'm an <a href="https://www.eng.cam.ac.uk/research/academic-divisions/information-engineering">Information Engineering</a> student studying at <a href="https://cam.ac.uk">the University of Cambridge</a>. I like programming/composing.</p>
</section>
<!--About-->
<section id="about" class="page">
<h1>About Me</h1>
<p>I'm Tim Tan. I'm an <a href="https://www.eng.cam.ac.uk/research/academic-divisions/information-engineering">Information Engineering</a> student studying at <a href="https://cam.ac.uk">the University of Cambridge</a>. I like programming/composing.</p>
<h2>Skills</h2>
<ul>
<li>Python</li>
<li>HTML/CSS</li>
<li>C++</li>
<li>Linux</li>
</ul>
</section>
<!--Projects-->
<section id="projects" class="page">
<h1>Projects</h1>
<div class="project">
<h3><a href="https://www.revista.cc">Revista.cc</a></h3>
<p>A visual flow of Creative-Common images sharing similar elements, suited for spiking inspiration.</p>
</div>
<div class="project">
<h3>Timeliner</h3>
<p>Generator for a history timeline of famous figure/objects, subject to your input.</p>
</div>
</section>
<!--Composition-->
<section id="compositions" class="page">
<p>Here is my recent music compositions. (2022-2024)</p>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1920935439&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/arteamusic" title="ArteA" target="_blank" style="color: #cccccc; text-decoration: none;">ArteA</a> · <a href="https://soundcloud.com/arteamusic/sets/unfinished-work" title="Unfinished Work." target="_blank" style="color: #cccccc; text-decoration: none;">Unfinished Work.</a></div>
<p>I am gonna be honest with you: The pieces of work I composed in Cambridge are so not finished. I don't really recommend checking it out. If I get more time to work on them when I finished dealing with my procrastination, I will invite you to take a second listen.</p>
</section>
</main>
<div class="right-column">
<section id="contact">
<h2>Contact</h2>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/timtan2003/">linkedin.com/in/timtan2003/</a></p>
<p>GitHub: <a href="https://www.github.com/Timoite">github.com/Timoite</a></p>
</section>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function initGallery() {
const images = document.querySelectorAll('.gallery-item');
let currentIndex = 0;
function switchImage() {
// Remove active class from all images
images.forEach(img => img.classList.remove('active'));
// Add active class to next image
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}
// Switch image every 3 seconds
return setInterval(switchImage, 3000);
}
// Keep track of gallery interval
let galleryInterval = null;
// Function to show page
function showPage(pageId) {
// Hide all pages
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
page.style.display = 'none';
});
// Show selected page
const pageToShow = document.getElementById(pageId);
if (pageToShow) {
pageToShow.style.display = 'block';
setTimeout(() => {
pageToShow.classList.add('active');
}, 10)
// Clear existing gallery interval if it exists
if (galleryInterval) {
clearInterval(galleryInterval);
}
// Initialize gallery if we're on home page
if (pageId === 'home') {
galleryInterval = initGallery();
}
}
// Update active state in sidebar
document.querySelectorAll('.sidebar a').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('data-page') === pageId) {
link.classList.add('active');
}
});
}
// Handle clicks on sidebar links
document.querySelectorAll('.sidebar a').forEach(link => {
link.addEventListener('click', (e) => {
const pageId = link.getAttribute('data-page');
if (pageId) { // Only handle links with data-page attribute
e.preventDefault();
showPage(pageId);
}
});
});
// Handle initial page load and hash changes
function handleHashChange() {
const hash = window.location.hash.slice(1) || 'home';
showPage(hash);
}
window.addEventListener('hashchange', handleHashChange);
// Show initial page and start gallery if on home page
handleHashChange();
});
</script>
</body>
</html>