update upgrate + timeline

index.html

@@ -286,8 +286,8 @@
     },
     {
       src: "videos/project_13.mp4",
-      title: "BLOCKS (2023)",
+      title: "cohærens (2024)",
-      description: "Proceduralism Religion",
+      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);

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",
+      "title": "Third Render",
-      "description": "Bla 3D test",
+      "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",
+      "title": "SPARTAK",
-      "description": "Procedural game prototype",
+      "description": "Pre-match show (2025)",
-      "side": "right",
+      "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"
     }
   ]
 }

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;
+      height: 1px;
-      background-color: #404040;
+      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;
+      width: 8px;
-      height: 16px;
+      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;