andreyflat/flatspace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update upgrate + timeline

Browse source
This commit is contained in:
andreyflat 2025-11-29 15:28:16 +08:00
parent c678bdfd65
commit 1740631362
3 changed files with 288 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -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);

280
projects.json
View file

@ -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"
}
]
}

26
timeline.html
View file

@ -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;