page/index.html at main · vuksavic/page · GitHub

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
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png?v=47rbYXp8Mq">
<link rel="icon" type="image/png" href="assets/favicon-32x32.png?v=47rbYXp8Mq" sizes="32x32">
<link rel="icon" type="image/png" href="assets/android-chrome-192x192.png?v=47rbYXp8Mq" sizes="192x192">
<link rel="icon" type="image/png" href="assets/favicon-16x16.png?v=47rbYXp8Mq" sizes="16x16">
<link rel="manifest" href="assets/manifest.json?v=47rbYXp8Mq">
<link rel="mask-icon" href="assets/safari-pinned-tab.svg?v=47rbYXp8Mq">
<link rel="shortcut icon" href="assets/favicon.ico?v=47rbYXp8Mq">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/mstile-144x144.png?v=47rbYXp8Mq">
<meta name="theme-color" content="#ffffff">

<title>vuk savić</title>

<body class="bright">
	<script type="importmap">
		{
			"imports": {
				"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/"
			}
		}
	</script>

	<script async>
		let options = {
			timeZone: 'Europe/Belgrade',
			timeStyle: 'long',
			hour12: false,
		},
		formatter = new Intl.DateTimeFormat([], options);

		setInterval(() => {
			document.querySelector("#time").innerText = formatter.format(new Date());
		}, 1000);
	</script>

	<h1>vuk savić's personal website</h1>
	<p><a href="cv.pdf" target="_blank">resume</a> <a href="/toybox.html">toybox</a></p>
	<p><a href="https://github.com/vuksavic/" target="_blank">programming</a> <a
			href="https://linkedin.com/in/savicvuk" target="_blank">linkedin</a> <a
			href="https://balkan.fedive.rs/@vuk" target="_blank">fediverse</a></p>
	<p><a href="https://instagram.com/vucejebote/" target="_blank">instagram</a> <a
			href="https://open.spotify.com/user/ham2ackis5u93u5gzuqq8cj3q?si=Q_pETEmISDSN4mo90h5fTg/" target="_blank">spotify</a> <a
			href="https://letterboxd.com/vuksavic/" target="_blank">letterboxd</a></p>

	<p><div class="mode-toggle" onclick="toggleMode()">
		<span class="default">[ ]</span>
		<span class="hover">[ dark mode ]</span>
	</div></p>
	<p><a href="mailto:vuk@posteo.net">vuk at posteo dot net</a></em></p>
	<p><a style="text-decoration: none;" href="https://en.wikipedia.org/wiki/Belgrade" target="_blank">belgrade</a>,<a style="text-decoration: none;" href="https://en.wikipedia.org/wiki/Serbia" target="_blank">serbia</a></p>
	<p><a style="text-decoration: none;" href="https://24timezones.com/Belgrade/time" target="_blank"><span id="time">00:00:00</span></a></p>

	<script>
		let material;
		let matColor = 0xffffff;

		function toggleMode() {
			const body = document.body;
			const hoverText = document.querySelector('.mode-toggle .hover');

			if (body.classList.contains('bright')) {
				body.classList.replace('bright', 'dark');
				matColor = 0x777777;
				hoverText.textContent = '[ bright mode ]';
			} else {
				body.classList.replace('dark', 'bright');
				matColor = 0xffffff;
				hoverText.textContent = '[ dark mode ]';
			}

			if (material) material.color.setHex(matColor);
		}
	</script>

	<script async type="module">
		import * as THREE from 'three';

		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);

		const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.setAnimationLoop(animate);

		document.body.appendChild(renderer.domElement);

		material = new THREE.MeshPhongMaterial({ color: matColor });
		const geometry = new THREE.BoxGeometry(1, 1, 1);
		const cube = new THREE.Mesh(geometry, material);

		const light = new THREE.DirectionalLight(0xffffff, 1);
		light.position.set(-1, 2, 8);

		scene.add(cube);
		scene.add(light);

		camera.position.z = 5;

		window.onresize = function () {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		};

		function animate() {
			cube.rotation.x += 0.002;
			cube.rotation.y += 0.002;
			renderer.render(scene, camera);
		}
	</script>
</body>

</html>