Skip to content

Commit 64fe1b7

Browse files
leecalcoteleecalcote
authored
Merge pull request #579 from layer5io/leecalcote/recognition-program
add recognition program
2 parents 9174bdc + b3c1546 commit 64fe1b7

File tree

3 files changed

+165
-55
lines changed

3 files changed

+165
-55
lines changed

‎assets/scss/_landing_project.scss

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,26 @@
5858
min-height: 300px;
5959
&:hover {
6060
border: 2px solid $secondary;
61-
61+
.landing-card-title {
62+
color: $secondary;
63+
}
64+
p {
65+
color: $white;
66+
}
67+
}
68+
p {
69+
font-weight: 400;
70+
color: $casper;
71+
margin-top: 0.5rem;
6272
}
63-
6473
}
6574
.landing-card-title {
6675
font-size: 1.5rem;
6776
font-weight: 700;
68-
color: $primary;
77+
color: $light;
6978
text-transform: uppercase;
7079
gap: 20px;
71-
white-space: nowrap;
80+
white-space: wrap;
7281
}
7382
.playground-section {
7483
&.playground-logo {
@@ -98,7 +107,10 @@
98107
&.learning-path-logo{
99108
background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/learning-path.svg");
100109
}
101-
&.catalog-logo, &.learning-path-logo {
110+
&.recognition-program-logo{
111+
background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/recognition-program.png");
112+
}
113+
&.catalog-logo, &.learning-path-logo , &.recognition-program-logo {
102114
background-repeat: no-repeat;
103115
background-position: center;
104116
background-size: 50%;

‎content/en/_index.md

Lines changed: 148 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -41,68 +41,91 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
4141
</div>
4242

4343
<h1 style="margin:6.5rem auto 1.5rem auto">Discover your way forward</h1>
44+
4445
<div class= "product-section">
45-
<div class="gap-20px flex-col">
46-
<div class="flex-row gap-20px">
47-
<div class="playground-card grow-1">
48-
<a href="https://kanvas.new">
49-
<div class="landing-card">
50-
<div class= "playground-section playground-logo">
51-
<span class="landing-card-title">Kanvas</span>
52-
<p>Use Kanvas to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
53-
</div>
54-
</div>
55-
</a></div>
56-
57-
<div class="catalog-card">
58-
<a href="https://cloud.layer5.io/catalog">
59-
<div class="landing-card">
60-
<div class= "catalog-section catalog-logo">
61-
<span class="landing-card-title">Cloud Catalog</span>
62-
<p>Discover top-quality cloud native services for your infrastructure with the Cloud Native Catalog. Discover best practices and upgrade your Kubernetes management practices.</p>
63-
</div>
64-
</div>
65-
</a></div>
66-
</div>
46+
<div class="gap-20px flex-col">
47+
<div class="flex-row gap-20px">
6748

68-
<div class="flex-row gap-20px">
69-
<div class="playground-card grow-1">
70-
<a href="/videos">
71-
<div class="landing-card">
72-
<div class= "playground-section video-play-logo">
73-
<span class="landing-card-title">Video Library</span>
74-
<p>Give your brain a break from YAML. Watch Layer5 tools like Kanvas and cloud native infrastructure management in action through hands-on demonstrations and tutorials.</p>
75-
</div>
49+
<!-- Video Library -->
50+
<div class="playground-card grow-1">
51+
<a href="/videos">
52+
<!-- Wave Visualizer Background
53+
<canvas id="visualizer" style="position:absolute; top:0; left:0; margin:auto; width:300px; height:300px;"></canvas> -->
54+
<div class="landing-card">
55+
<div class= "playground-section video-play-logo">
56+
<span class="landing-card-title">Video Library</span>
57+
<p>Give your brain a break from YAML. See Layer5 tools in-action.</p>
58+
</div>
59+
</div>
60+
</a>
7661
</div>
77-
</a></div>
78-
79-
<div class="catalog-card">
80-
<a href="https://cloud.layer5.io/academy/learning-paths">
81-
<div class="landing-card">
82-
<div class= "catalog-section learning-path-logo">
83-
<span class="landing-card-title">Learning Paths</span>
84-
<p>Learning Paths offer a structured approach to learning, combining theoretical cloud native knowledge with hands-on, practical experience.</p>
85-
</div>
62+
63+
<!-- <div class="playground-card grow-1">
64+
<a href="https://kanvas.new">
65+
<div class="landing-card">
66+
<div class= "playground-section playground-logo">
67+
<span class="landing-card-title">Kanvas</span>
68+
<p>Use Kanvas to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.</p>
69+
</div>
70+
</div>
71+
</a>
72+
</div> -->
73+
74+
<!-- Cloud Catalog -->
75+
<div class="catalog-card">
76+
<a href="https://cloud.layer5.io/catalog">
77+
<div class="landing-card">
78+
<div class= "catalog-section catalog-logo">
79+
<span class="landing-card-title" style="text-decoration:wrap">Patterns and Templates Catalog</span>
80+
<p>Discover best practices and uplevel your Kubernetes and Cloud configurations.</p>
81+
</div>
82+
</div>
83+
</a>
8684
</div>
87-
</a></div>
88-
</div>
8985

9086
</div>
87+
<div class="flex-row gap-20px">
9188

92-
<div class="forum-card">
93-
<a href="https://discuss.layer5.io">
94-
<div class="forum-section landing-card">
95-
<div class="landing-card-text">
96-
<span class="landing-card-title">Discussion forum</span>
97-
<p>Cloud Native Management of developer-defined infrastructure. Join the open source-first community of cloud native engineers.</p>
89+
<!-- Learning Paths -->
90+
<div class="playground-card grow-1">
91+
<a href="https://cloud.layer5.io/academy/learning-paths">
92+
<div class="landing-card">
93+
<div class="catalog-section learning-path-logo">
94+
<span class="landing-card-title">Learning Paths</span>
95+
<p>Structured learning of Kubernetes, AWS, Azure, GCP, Meshery, and Kanvas with theoretical knowledge and hands-on, practical experience.</p>
9896
</div>
99-
<div class="forum-image">
100-
<img src="images/landing/discuss.png" alt="Discussion Forum Image" />
97+
</div>
98+
</a>
99+
</div>
100+
101+
<!-- Badges -->
102+
<div class="catalog-card">
103+
<a href="https://badges.layer5.io">
104+
<div class="landing-card">
105+
<div class= "catalog-section recognition-program-logo">
106+
<span class="landing-card-title">Be Recognized</span>
107+
<p>Earn badges for your skills and knowledge in cloud native technologies.</p>
101108
</div>
102109
</div>
103-
</a>
110+
</a>
111+
</div>
112+
104113
</div>
105114

115+
</div>
116+
<div class="forum-card">
117+
<a href="https://discuss.layer5.io">
118+
<div class="forum-section landing-card">
119+
<div class="landing-card-text">
120+
<span class="landing-card-title">Discussion forum</span>
121+
<p>Get help. Find your answer on the forum. Share your knowledge with others.</p>
122+
</div>
123+
<div class="forum-image">
124+
<img src="images/landing/discuss.png" alt="Discussion Forum Image" />
125+
</div>
126+
</div>
127+
</a>
128+
</div>
106129
</div>
107130
<!-- Wrapper close -->
108131

@@ -113,6 +136,7 @@ onmouseover="changeImage('meshery', 'images/logos/meshery-light.svg')" onmouseou
113136

114137
{{< /blocks/cover >}}
115138

139+
<!-- Wave Visualizer Script -->
116140
<script>
117141
function changeImage(imgId, newSrc) {
118142
var img = document.getElementById(imgId);
@@ -124,3 +148,77 @@ function restoreImage(imgId, originalSrc) {
124148
img.src = originalSrc;
125149
}
126150
</script>
151+
152+
<!-- Wave Visualizer Script -->
153+
<script>
154+
const canvas = document.getElementById('visualizer');
155+
const ctx = canvas.getContext('2d');
156+
let time = 0;
157+
let waveData = Array(8).fill(0).map(() => ({
158+
value: Math.random() * 0.5 + 0.1,
159+
targetValue: Math.random() * 0.15 + 0.1,
160+
speed: Math.random() * .02 + 0.01
161+
}));
162+
163+
function resizeCanvas() {
164+
canvas.width = window.innerWidth;
165+
canvas.height = window.innerHeight;
166+
}
167+
168+
function updateWaveData() {
169+
waveData.forEach(data => {
170+
if (Math.random() < 0.01) {
171+
data.targetValue = Math.random() * 0.7 + 0.1;
172+
}
173+
const diff = data.targetValue - data.value;
174+
data.value += diff * data.speed;
175+
});
176+
}
177+
178+
function draw() {
179+
ctx.fillStyle = 'black';
180+
ctx.fillRect(0, 0, canvas.width, canvas.height);
181+
182+
for (let i = 0; i < 8; i++) {
183+
const freq = waveData[i].value * 7.0;
184+
ctx.beginPath();
185+
186+
for (let x = 0; x < canvas.width; x += 1) {
187+
const normalizedX = (x / canvas.width) * 2 - 1;
188+
let px = normalizedX + i * 0.04 + freq * 0.03;
189+
let py = Math.sin(px * 10 + time) * Math.cos(px * 2) * freq * 0.1 * ((i + 1) / 8);
190+
const canvasY = (py + 1) * canvas.height / 2;
191+
192+
if (x === 0) {
193+
ctx.moveTo(x, canvasY);
194+
} else {
195+
ctx.lineTo(x, canvasY);
196+
}
197+
}
198+
199+
const intensity = Math.min(1, freq * 0.3);
200+
const r = 255 + intensity * 100;
201+
const g = 243 + intensity * 130;
202+
const b = 197;
203+
204+
ctx.lineWidth = .1 + (i * 0.3);
205+
ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.6)`;
206+
ctx.shadowColor = `rgba(${r}, ${g}, ${b}, 0.5)`;
207+
ctx.shadowBlur = 5;
208+
ctx.stroke();
209+
ctx.shadowBlur = 0;
210+
}
211+
}
212+
213+
function animate() {
214+
time += 0.02;
215+
updateWaveData();
216+
draw();
217+
requestAnimationFrame(animate);
218+
}
219+
220+
window.addEventListener('resize', resizeCanvas);
221+
resizeCanvas();
222+
animate();
223+
</script>
224+
<!-- Wave Visualizer Script -->

‎static/images/logos/recognition-program.png

143 KB
Loading

0 commit comments

Comments
 (0)