diff --git a/index.html b/index.html index 2de7986..c364864 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - background-color: rgba(17, 17, 17, 0.6); + background-color: rgba(10, 10, 10, 0.8); padding: 0.5em; text-align: center; position: sticky; @@ -28,19 +28,23 @@ header h1 { display: inline-block; - transition: letter-spacing 1s ease, transform 1s ease; + white-space: nowrap; + overflow: hidden; + text-align: center; + max-width: 100vw; + text-overflow: clip; + transition: letter-spacing 1s ease; } header h1:hover { - letter-spacing: 1.2em; - transform: scaleX(1.0); - transition: letter-spacing 5s ease, transform 5s ease; + letter-spacing: 10.0em; + transition: letter-spacing 5s ease; } main { max-width: 1280px; margin: 1em auto; - padding: 1 1em; + padding: 0 1em; } section { @@ -181,9 +185,9 @@ const videoSources = [ { src: "videos/project_01.mp4", - title: "Dry Season", - description: "Personal project. Vellum cloth simulation", - link: "https://www.behance.net/gallery/182794307/Showreel-2023" + title: "EUCARIOTE", + description: "Personal project. What happens to the consciousness of a living organism under the influence of external factors?", + link: "https://www.behance.net/gallery/100474835/Eucariote" }, { src: "videos/project_02.mp4", @@ -199,40 +203,58 @@ }, { src: "videos/project_04.mp4", - title: "Coming Soon", - description: "database preparation", - link: "https://link" + title: "Water Drop", + description: "Personal project. Unit-M5 Empire-V tribute.", + link: "https://www.instagram.com/p/Cye_mjiSt31/" }, { src: "videos/project_05.mp4", - title: "Coming Soon", - description: "database preparation", - link: "https://link" + title: "Experiment №80/26", + description: "Personal project. Iron Kettlebell in Mercury", + link: "https://www.behance.net/gallery/130228053/Experiment-8026" }, { src: "videos/project_06.mp4", - title: "Coming Soon", - description: "database preparation", - link: "https://link" + title: "Waterfall", + description: "For led screen at the exhibition.", + link: "https://www.behance.net/gallery/146506521/WATERFALL" }, { src: "videos/project_07.mp4", - title: "Coming Soon", - description: "database preparation", - link: "https://link" + title: "Dry Season", + description: "Personal project. Simulation and visualisation experiment.", + link: "https://www.instagram.com/p/Cy0Cg8OytWN/" }, { src: "videos/project_08.mp4", - title: "Coming Soon", - description: "database preparation", - link: "https://link" + title: "HiPhi Z Rollout Show", + description: "AR Electric car factory launch show.", + link: "https://www.behance.net/gallery/148168593/HiPhi-Z-Rollout-Show" }, { src: "videos/project_09.mp4", - title: "Coming Soon", - description: "database preparation", - link: "https://link" - } + title: "Infinix HOT 10 Play", + description: "Advertising video for phone.", + link: "https://www.behance.net/gallery/116302519/Infinix-Hot-X-Play" + }, + { + src: "videos/project_10.mp4", + title: "2000x2036", + description: "Personal project. Destructive behavior is a practical or verbal manifestation of an individual's internal activity aimed at destroying something.", + link: "https://www.behance.net/gallery/119929513/2000x2036" + }, + { + src: "videos/project_11.mp4", + title: "EX vs REX", + description: "Collaboration. What came first? Egg or Dinosaur?.", + link: "https://www.behance.net/gallery/104782579/EX-vs-REX" + }, + { + src: "videos/project_12.mp4", + title: "Bloemstilleven", + description: "Synergistic symbiosis of confrontation between humans and artificial intelligenc.", + link: "https://www.behance.net/gallery/198703355/Bloemstilleven" + }, ]; const videoGrid = document.getElementById('videoGrid'); @@ -314,6 +336,21 @@ const videoObserver = new IntersectionObserver((entries, observer) => { loadVideos(loadedCount, BATCH_SIZE); loadedCount += BATCH_SIZE; }); + + // Adapt letter-spacing based on screen width + const h1 = document.querySelector("header h1"); + h1.addEventListener("mouseenter", () => { + const maxSpacing = 12.0; // max 0.8em + const spacing = Math.min(window.innerWidth / 500, maxSpacing); + h1.style.letterSpacing = spacing + "em"; + h1.style.transition = "letter-spacing 5s ease"; + }); + + h1.addEventListener("mouseleave", () => { + h1.style.letterSpacing = ""; + h1.style.transition = "letter-spacing 1s ease"; + }); + diff --git a/videos/project_01.jpg b/videos/project_01.jpg index 09e2da9..1d1304a 100644 Binary files a/videos/project_01.jpg and b/videos/project_01.jpg differ diff --git a/videos/project_01.mp4 b/videos/project_01.mp4 index f04ecae..02d6c61 100644 Binary files a/videos/project_01.mp4 and b/videos/project_01.mp4 differ diff --git a/videos/project_02.mp4 b/videos/project_02.mp4 index 0f9229b..f433b3b 100644 Binary files a/videos/project_02.mp4 and b/videos/project_02.mp4 differ diff --git a/videos/project_03.mp4 b/videos/project_03.mp4 index 1cc3e63..9c540e6 100644 Binary files a/videos/project_03.mp4 and b/videos/project_03.mp4 differ diff --git a/videos/project_04.jpg b/videos/project_04.jpg new file mode 100644 index 0000000..825ae3c Binary files /dev/null and b/videos/project_04.jpg differ diff --git a/videos/project_04.mp4 b/videos/project_04.mp4 new file mode 100644 index 0000000..4306b19 Binary files /dev/null and b/videos/project_04.mp4 differ diff --git a/videos/project_05.jpg b/videos/project_05.jpg new file mode 100644 index 0000000..ed3f6af Binary files /dev/null and b/videos/project_05.jpg differ diff --git a/videos/project_05.mp4 b/videos/project_05.mp4 new file mode 100644 index 0000000..20b7294 Binary files /dev/null and b/videos/project_05.mp4 differ diff --git a/videos/project_06.jpg b/videos/project_06.jpg new file mode 100644 index 0000000..0aec6e8 Binary files /dev/null and b/videos/project_06.jpg differ diff --git a/videos/project_06.mp4 b/videos/project_06.mp4 new file mode 100644 index 0000000..3bd4aa8 Binary files /dev/null and b/videos/project_06.mp4 differ diff --git a/videos/project_07.jpg b/videos/project_07.jpg new file mode 100644 index 0000000..09e2da9 Binary files /dev/null and b/videos/project_07.jpg differ diff --git a/videos/project_07.mp4 b/videos/project_07.mp4 new file mode 100644 index 0000000..d957b00 Binary files /dev/null and b/videos/project_07.mp4 differ diff --git a/videos/project_08.jpg b/videos/project_08.jpg new file mode 100644 index 0000000..09bfc94 Binary files /dev/null and b/videos/project_08.jpg differ diff --git a/videos/project_08.mp4 b/videos/project_08.mp4 new file mode 100644 index 0000000..51fe409 Binary files /dev/null and b/videos/project_08.mp4 differ diff --git a/videos/project_09.jpg b/videos/project_09.jpg new file mode 100644 index 0000000..e65b2c6 Binary files /dev/null and b/videos/project_09.jpg differ diff --git a/videos/project_09.mp4 b/videos/project_09.mp4 new file mode 100644 index 0000000..6d960b5 Binary files /dev/null and b/videos/project_09.mp4 differ diff --git a/videos/project_10.jpg b/videos/project_10.jpg new file mode 100644 index 0000000..c6bbf88 Binary files /dev/null and b/videos/project_10.jpg differ diff --git a/videos/project_10.mp4 b/videos/project_10.mp4 new file mode 100644 index 0000000..962d1dd Binary files /dev/null and b/videos/project_10.mp4 differ diff --git a/videos/project_11.jpg b/videos/project_11.jpg new file mode 100644 index 0000000..09c3b3a Binary files /dev/null and b/videos/project_11.jpg differ diff --git a/videos/project_11.mp4 b/videos/project_11.mp4 new file mode 100644 index 0000000..df602ca Binary files /dev/null and b/videos/project_11.mp4 differ diff --git a/videos/project_12.jpg b/videos/project_12.jpg new file mode 100644 index 0000000..8198660 Binary files /dev/null and b/videos/project_12.jpg differ diff --git a/videos/project_12.mp4 b/videos/project_12.mp4 new file mode 100644 index 0000000..477d129 Binary files /dev/null and b/videos/project_12.mp4 differ