Skip to content

Commit da8f178

Browse files
ALEVOLDONALEVOLDON
committed
Refactor pipeline overview: convert static code block to animated macOS-style terminal UI
1 parent 6adda64 commit da8f178

3 files changed

Lines changed: 126 additions & 22 deletions

File tree

‎site/src/layouts/BaseLayout.astro‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -814,6 +814,100 @@ const repoUrl = "https://github.com/ALEVOLDON/Modular-Genesis";
814814
word-wrap: break-word;
815815
}
816816

817+
.terminal-window {
818+
margin-top: 18px;
819+
border-radius: 12px;
820+
background: rgba(4, 9, 14, 0.95);
821+
border: 1px solid rgba(102, 247, 255, 0.15);
822+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
823+
overflow: hidden;
824+
font-family: Consolas, "Courier New", monospace;
825+
font-size: 0.85rem;
826+
line-height: 1.5;
827+
backdrop-filter: blur(8px);
828+
}
829+
830+
.terminal-header {
831+
display: flex;
832+
align-items: center;
833+
gap: 6px;
834+
padding: 12px 14px;
835+
background: rgba(255, 255, 255, 0.03);
836+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
837+
}
838+
839+
.terminal-dot {
840+
width: 10px;
841+
height: 10px;
842+
border-radius: 50%;
843+
}
844+
845+
.terminal-dot.red { background: #ff5f56; }
846+
.terminal-dot.yellow { background: #ffbd2e; }
847+
.terminal-dot.green { background: #27c93f; }
848+
849+
.terminal-title {
850+
margin-left: 8px;
851+
color: rgba(255, 255, 255, 0.4);
852+
font-size: 0.75rem;
853+
letter-spacing: 0.05em;
854+
user-select: none;
855+
}
856+
857+
.terminal-body {
858+
padding: 16px;
859+
color: #d7f7ff;
860+
}
861+
862+
.terminal-line {
863+
display: flex;
864+
gap: 8px;
865+
margin-bottom: 6px;
866+
opacity: 0;
867+
animation: fadeUpLine 0.4s ease forwards;
868+
white-space: pre;
869+
}
870+
871+
.terminal-line:nth-child(1) { animation-delay: 0.2s; }
872+
.terminal-line:nth-child(2) { animation-delay: 0.9s; }
873+
.terminal-line:nth-child(3) { animation-delay: 1.6s; }
874+
.terminal-line:nth-child(4) { animation-delay: 2.3s; }
875+
.terminal-line:nth-child(5) { animation-delay: 2.7s; }
876+
.terminal-line:nth-child(6) { animation-delay: 3.4s; }
877+
878+
.terminal-prompt {
879+
color: var(--accent);
880+
user-select: none;
881+
}
882+
883+
.terminal-command {
884+
color: #fff;
885+
}
886+
887+
.terminal-output {
888+
color: #8892b0;
889+
}
890+
891+
.terminal-cursor {
892+
display: inline-block;
893+
width: 8px;
894+
height: 15px;
895+
background: var(--accent);
896+
animation: blinkCursor 1s step-end infinite;
897+
vertical-align: middle;
898+
margin-left: 6px;
899+
}
900+
901+
@keyframes fadeUpLine {
902+
from { opacity: 0; transform: translateY(4px); }
903+
to { opacity: 1; transform: translateY(0); }
904+
}
905+
906+
@keyframes blinkCursor {
907+
0%, 100% { opacity: 1; }
908+
50% { opacity: 0; }
909+
}
910+
817911
.site-footer {
818912
padding: 40px 0;
819913
border-top: 1px solid var(--line);

‎site/src/pages/index.astro‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -105,17 +105,22 @@ const toolCards = [
105105
The site, lessons, notes, and patch entries already orbit one production backbone:
106106
controller input, modular generation, audio capture, and future visual synthesis.
107107
</p>
108-
<div class="code-block">Ableton / MIDI
109-
->
110-
VCV Rack
111-
->
112-
Generative Patch
113-
->
114-
Audio Engine
115-
->
116-
Visual Engine
117-
->
118-
Performance</div>
108+
<div class="terminal-window">
109+
<div class="terminal-header">
110+
<span class="terminal-dot red"></span>
111+
<span class="terminal-dot yellow"></span>
112+
<span class="terminal-dot green"></span>
113+
<span class="terminal-title">~/pipeline/run.sh</span>
114+
</div>
115+
<div class="terminal-body">
116+
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-command">connect Ableton / MIDI</span></div>
117+
<div class="terminal-line"><span class="terminal-output"> ↳ sending clock to VCV Rack... [OK]</span></div>
118+
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-command">compile Generative Patch</span></div>
119+
<div class="terminal-line"><span class="terminal-output"> ↳ running Audio Engine... [OK]</span></div>
120+
<div class="terminal-line"><span class="terminal-output"> ↳ rendering Visual Engine... [OK]</span></div>
121+
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-command">start Performance</span><span class="terminal-cursor"></span></div>
122+
</div>
123+
</div>
119124
</article>
120125

121126
<div class="hero-dashboard-grid">

‎site/src/pages/ru/index.astro‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,22 @@ const toolCards = [
101101
Сайт, lessons, notes и patch entries уже строятся вокруг одного backbone:
102102
controller input, modular generation, audio capture и будущего visual synthesis.
103103
</p>
104-
<div class="code-block">Ableton / MIDI
105-
->
106-
VCV Rack
107-
->
108-
Generative Patch
109-
->
110-
Audio Engine
111-
->
112-
Visual Engine
113-
->
114-
Performance</div>
104+
<div class="terminal-window">
105+
<div class="terminal-header">
106+
<span class="terminal-dot red"></span>
107+
<span class="terminal-dot yellow"></span>
108+
<span class="terminal-dot green"></span>
109+
<span class="terminal-title">~/pipeline/run.sh</span>
110+
</div>
111+
<div class="terminal-body">
112+
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-command">connect Ableton / MIDI</span></div>
113+
<div class="terminal-line"><span class="terminal-output"> ↳ sending clock to VCV Rack... [OK]</span></div>
114+
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-command">compile Generative Patch</span></div>
115+
<div class="terminal-line"><span class="terminal-output"> ↳ running Audio Engine... [OK]</span></div>
116+
<div class="terminal-line"><span class="terminal-output"> ↳ rendering Visual Engine... [OK]</span></div>
117+
<div class="terminal-line"><span class="terminal-prompt">></span> <span class="terminal-command">start Performance</span><span class="terminal-cursor"></span></div>
118+
</div>
119+
</div>
115120
</article>
116121

117122
<div class="hero-dashboard-grid">

0 commit comments

Comments
 (0)