diff --git a/index.html b/index.html index 777edf4..62c437b 100644 --- a/index.html +++ b/index.html @@ -286,8 +286,8 @@ }, { src: "videos/project_13.mp4", - title: "BLOCKS (2023)", - description: "Proceduralism Religion", + title: "cohærens (2024)", + description: "Personal project. Coherence is, in general, a state or situation in which all the parts or ideas fit together well so that they form a united whole.", link: "https:empty" }, { @@ -334,9 +334,9 @@ }, { src: "videos/project_21.mp4", - title: "Black Hole (2025)", + title: "Black Hole (2003)", description: "Do NOT Enter", - link: "https://andreyflat.space/blackhole" + link: "https://andreyflat.space/timeline" }, ]; videoSources.sort(() => Math.random() - 0.5); diff --git a/projects.json b/projects.json index c2be95a..00145d6 100644 --- a/projects.json +++ b/projects.json @@ -2,7 +2,7 @@ "2003": [ { "title": "First Render", - "description": "Early 3D tests with 3ds max and something else", + "description": "VirtualDub experience", "side": "left", "preview": { "type": "image", @@ -11,7 +11,7 @@ }, { "title": "Second Render", - "description": "Tw 3D test", + "description": "TBA", "side": "left", "preview": { "type": "image", @@ -19,8 +19,8 @@ } }, { - "title": "Tree Render", - "description": "Bla 3D test", + "title": "Third Render", + "description": "TBA", "side": "right", "preview": { "type": "image", @@ -28,7 +28,263 @@ } } ], - "2010": [ + "2014": [ + { + "title": "Finn Flare", + "description": "Motion", + "side": "left", + "preview": { + "type": "video", + "url": "/videos/project_20.mp4" + } + }, + { + "title": "GALS", + "description": "Motion", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "LightFest - AEVA", + "description": "3D Mapping", + "side": "right", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "LightFest - AUTORADIO", + "description": "", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "LightFest - Hondroxid", + "description": "", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Sergiy Radonejskii", + "description": "Motion Design for Stage", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Student Show", + "description": "Projection mapping for Plekhanovka", + "side": "right", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + } + ], + "2015": [ + { + "title": "AEROFLOT", + "description": "3D Mapping in SPB", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "AMOK", + "description": "Personal 3D Project", + "side": "right", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "BLACKSTAR", + "description": "Content for music clip, Supervisor, Projection Mapping", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Blood Stairs", + "description": "3D simulation for Dancing with Stars on TNT", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Burningman Decompression", + "description": "Touchdesigner Things", + "side": "right", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Cloth Sim", + "description": "VFX cloth simulation", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Dancing with Stars", + "description": "Projection Mapping", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Durex", + "description": "VFX", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Empire V", + "description": "Blood Splash for Teaser", + "side": "right", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "ERW70", + "description": "3D motion for Sportcar", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Intervals Fest", + "description": "VJ, Performance", + "side": "right", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Johnson&Johnson", + "description": "Motion Design", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "KHL", + "description": "Mapping", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "LightFest - Samsung", + "description": "3D mapping AD", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "MARS", + "description": "Projection Mapping on windows", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Moneta", + "description": "Motion Design about Hystory of Money", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "MosLift", + "description": "Motion Design for Projection Screens", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Sber Energo", + "description": "Motion Design", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Sobor", + "description": "3D mapping", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "SPACESHIP", + "description": "VJ loop for Sila Sveta", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + }, + { + "title": "Wedding", + "description": "Interactive VFX", + "side": "left", + "preview": { + "type": "image", + "url": "[https://placehold.co/300x200?text=First+Render](https://placehold.co/300x200?text=First+Render)" + } + } + ], + "2016": [ { "title": "Commercial VFX", "description": "First studio project", @@ -44,7 +300,7 @@ "side": "right" } ], - "2020": [ + "2017": [ { "title": "Realtime Sim", "description": "Procedural FX", @@ -62,18 +318,18 @@ ], "2025": [ { - "title": "Bevy Shooter", - "description": "Procedural game prototype", - "side": "right", + "title": "SPARTAK", + "description": "Pre-match show (2025)", + "side": "left", "preview": { "type": "video", - "url": "https://filesamples.com/samples/video/mp4/sample_960x400_ocean.mp4" + "url": "/videos/project_20.mp4" } }, { - "title": "Shader R&D", + "title": "to be continued", "description": "Raytraced lighting test", - "side": "left" + "side": "right" } ] } diff --git a/timeline.html b/timeline.html index 2e5ed73..42274b8 100644 --- a/timeline.html +++ b/timeline.html @@ -46,9 +46,9 @@ .timeline-container { position: relative; - max-width: 1000px; + max-width: 1920px; margin: 4em auto; - padding: 0 350px; + padding: 0 250px; } .timeline-line { @@ -56,13 +56,13 @@ left: 50%; top: 0; bottom: 0; - width: 2px; + width: 1px; background-color: #404040; transform: translateX(-50%); } .year-section { - margin-bottom: 6em; + margin-bottom: 3em; position: relative; } @@ -78,9 +78,15 @@ content: ''; position: absolute; top: 50%; + left: 0; width: 100%; - height: 2px; - background-color: #404040; + height: 1px; + background: linear-gradient( + to right, + transparent, + #404040, + transparent + ); } .year-header h2 { @@ -110,7 +116,7 @@ .project .card { background-color: #1a1a1a; - padding: 1.5em; + padding: 1.25em; border-radius: 0; transition: background-color 0.3s, transform 0.2s; max-width: 280px; @@ -149,8 +155,8 @@ position: absolute; left: 50%; transform: translateX(-50%); - width: 16px; - height: 16px; + width: 8px; + height: 8px; background: #fff; border: 4px solid #0a0a0a; border-radius: 50%; @@ -165,7 +171,7 @@ opacity: 0; transition: all 0.4s ease; border-radius: 0; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); + box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); pointer-events: none; background: #000; z-index: 99;