Skip to content

Commit 6621179

Browse files
ChristopherBiscardiChristopherBiscardi
committed
uh some stuff
1 parent 74b08f3 commit 6621179

File tree

3 files changed

+212
-41
lines changed

3 files changed

+212
-41
lines changed

‎crates/www/src/routes/garden.rs‎

Lines changed: 156 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
use std::ops::Deref;
2+
13
use crate::components::sidebar::Sidebar;
24
use leptos::prelude::*;
35
// use sens8::button::*;
@@ -7,7 +9,85 @@ pub fn GardenPage() -> impl IntoView {
79
view! {
810
<Sidebar>
911
<Hero/>
10-
<div class="grid grid-cols-3 gap-4 mx-auto max-w-7xl sm:px-6 lg:px-8 py-14">posts</div>
12+
<div class="pb-24 sm:pb-32">
13+
<div class="mx-auto max-w-7xl px-6 lg:px-8">
14+
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
15+
<Article
16+
title="Something about Rust".to_string()
17+
image_url="/test-images/01JKC777W14S7H92HS5KJVKAAS.avif".to_string()
18+
tags=vec![
19+
Tag {
20+
display_name: "Rust".to_string(),
21+
label: "rust".to_string(),
22+
}
23+
]
24+
/>
25+
<Article
26+
title="A Bevy application".to_string()
27+
image_url="/test-images/01JMVAV66K6AR15Q7F0EFM1H0N.avif".to_string()
28+
tags=vec![
29+
Tag{
30+
display_name: "Rust".to_string(),
31+
label: "rust".to_string(),
32+
},
33+
Tag{
34+
display_name: "Bevy".to_string(),
35+
label: "bevy".to_string(),
36+
}
37+
]/>
38+
<Article
39+
title="Communicating between JS and Rust/Wasm".to_string()
40+
image_url="/test-images/01JNDKF68NC1T06KD14Z503JAG.avif".to_string()
41+
tags=vec![Tag{
42+
display_name: "Rust".to_string(),
43+
label: "rust".to_string(),
44+
},
45+
Tag{
46+
display_name: "Wasm".to_string(),
47+
label: "wasm".to_string(),
48+
}]/>
49+
<Article
50+
title="Something about Rust".to_string()
51+
image_url="/test-images/01JKC777W14S7H92HS5KJVKAAS.avif".to_string()
52+
tags=vec![
53+
]
54+
/>
55+
<Article
56+
title="A Bevy application".to_string()
57+
image_url="/test-images/01JMVAV66K6AR15Q7F0EFM1H0N.avif".to_string()
58+
tags=vec![
59+
Tag{
60+
display_name: "Rust".to_string(),
61+
label: "rust".to_string(),
62+
},
63+
Tag{
64+
display_name: "Bevy".to_string(),
65+
label: "bevy".to_string(),
66+
},
67+
Tag{
68+
display_name: "Advent of Code".to_string(),
69+
label: "advent-of-code".to_string(),
70+
},
71+
Tag{
72+
display_name: "Parser Combinators".to_string(),
73+
label: "parser-combinators".to_string(),
74+
}
75+
]/>
76+
<Article
77+
title="Communicating between JS and Rust/Wasm".to_string()
78+
image_url="/test-images/01JNDKF68NC1T06KD14Z503JAG.avif".to_string()
79+
tags=vec![Tag{
80+
display_name: "Rust".to_string(),
81+
label: "rust".to_string(),
82+
},
83+
Tag{
84+
display_name: "Wasm".to_string(),
85+
label: "wasm".to_string(),
86+
}]/>
87+
</div>
88+
</div>
89+
</div>
90+
1191
</Sidebar>
1292
}
1393
}
@@ -29,8 +109,82 @@ pub fn Hero() -> impl IntoView {
29109
alt="party corgi rainbow animated"
30110
/>
31111
</h1>
32-
<p class="mt-6 text-xl text-indigo-100 max-w-3xl">This is all of my posts</p>
112+
<p class="mt-6 text-xl text-indigo-100 max-w-3xl">
113+
This is my digital garden, where I often build up new content. Some posts are sketches or in-progress while others are complete.
114+
</p>
33115
</div>
34116
</div>
35117
}
36118
}
119+
120+
#[component]
121+
fn Article(
122+
title: String,
123+
image_url: String,
124+
tags: Vec<Tag>,
125+
) -> impl IntoView {
126+
view! {
127+
<article class="flex flex-col items-start justify-start">
128+
<div class="relative w-full">
129+
<img src={image_url} alt="" class="aspect-video w-full rounded bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[16/9]"/>
130+
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
131+
</div>
132+
<div class="max-w-xl">
133+
<div class="mt-8 flex flex-wrap items-center gap-4 text-xs">
134+
// <time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
135+
{
136+
tags.iter().map(|tag| view!{
137+
<Tag tag=tag.clone() />
138+
}).collect_view()
139+
}
140+
</div>
141+
<div class="group relative">
142+
<h3 class="mt-3 text-lg/6 font-semibold text-indigo-100 group-hover:text-slate-100">
143+
<a href="#">
144+
<span class="absolute inset-0"></span>
145+
{title.clone()}
146+
</a>
147+
</h3>
148+
<p class="mt-5 line-clamp-3 text-sm/6 text-slate-100">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
149+
</div>
150+
</div>
151+
</article>
152+
}
153+
}
154+
155+
#[derive(Clone)]
156+
struct Tag {
157+
display_name: String,
158+
label: String,
159+
}
160+
161+
impl Tag {
162+
fn color_ring(&self) -> &str {
163+
match self.label.deref() {
164+
"rust" => "ring-red-400",
165+
"bevy" => "ring-sky-400",
166+
"wasm" => "ring-indigo-400",
167+
_ => "ring-gray-800",
168+
}
169+
}
170+
fn color_fill(&self) -> &str {
171+
match self.label.deref() {
172+
"rust" => "fill-red-400",
173+
"bevy" => "fill-sky-400",
174+
"wasm" => "fill-indigo-400",
175+
_ => "fill-gray-800",
176+
}
177+
}
178+
}
179+
180+
#[component]
181+
fn tag(tag: Tag) -> impl IntoView {
182+
view! {
183+
<span class=format!("inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-white ring-1 ring-inset {}", tag.color_ring())>
184+
<svg class=format!("size-1.5 {}", tag.color_fill()) viewBox="0 0 6 6" aria-hidden="true">
185+
<circle cx="3" cy="3" r="3" />
186+
</svg>
187+
{tag.display_name.clone()}
188+
</span>
189+
}
190+
}

‎crates/www/src/routes/index.rs‎

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ fn BentoBox<'a>(
3434
<div style=style class="bento-box h-full">
3535

3636
{if let Some(src) = image_header {
37-
Either::Left(view! { <img class="img-header" src=src/> })
37+
Either::Left(view! {
38+
<div
39+
class="h-full w-full absolute bg-center bg-cover img-header"
40+
style=format!("
41+
background-image: url({});
42+
", src)></div>
43+
})
3844
} else {
3945
Either::Right(view! { "" })
4046
}}
@@ -178,12 +184,12 @@ pub fn IndexPage() -> impl IntoView {
178184
animation_offset=0.1 * index as f64
179185
>
180186
<p class=format!(
181-
"text-2xl font-bold leading-7 text-ctp-text sm:truncate sm:text-3xl sm:tracking-tight {}",
187+
"text-2xl font-bold leading-7 text-indigo-100 sm:truncate sm:text-3xl sm:tracking-tight {}",
182188
if content.center_title { "text-center" } else { "" },
183189
)>{content.title}</p>
184190

185191
{if content.content == "svg-art" {
186-
view! { <span class="text-ctp-text">wgpu and wgsl</span> }
192+
view! { <span class="text-indigo-100">wgpu and wgsl</span> }
187193
.into_any()
188194
} else if content.content == "svg-hex" {
189195
view! {
@@ -318,42 +324,50 @@ pub fn Hero() -> impl IntoView {
318324
/>
319325
</h1>
320326
<p class="mt-6 text-xl text-indigo-100 max-w-3xl">
321-
I write about {" "} <a class="text-red-400" href="/rust">
322-
Rust
323-
</a> {", "} JavaScript, and occassionally other languages.
324-
This site is built with Leptos and Wasm.
325-
The content is written in
326-
<a class="text-blue-400" href="https://twitter.com/sectortools">
327-
Sector
328-
</a> .
327+
I am an independent Software Engineer specializing in
328+
<a class="text-red-400" href="/rust">Rust</a> and
329+
<span class="text-[#EAD54D]">JavaScript</span>, programming communicator, educator, and a
330+
<a href="https://www.youtube.com/@chrisbiscardi" class="text-[#ff0000]">YouTuber</a>.
329331
</p>
330-
// <li class="">
331-
// <Button href="https://twitter.com/chrisbiscardi"
332-
// color=ButtonColor::TWITTER
333-
// icon="twitter">
334-
// Twitter
335-
// </Button>
336-
// </li>
337-
<ul class="flex py-4 gap-x-2 mt-4">// <li class="">
338-
// <Button
339-
// href="https://www.youtube.com/channel/UCiSIL42pQRpc-8JNiYDFyzQ"
340-
// color=ButtonColor::YOUTUBE
341-
// icon="youtube"
342-
// >
343-
// YouTube
344-
// </Button>
345-
// </li>
346-
// <li class="">
347-
// <SocialButton
348-
// href="https://github.com/ChristopherBiscardi"
349-
// icon="github"
350-
// >
351-
// GitHub
352-
// </SocialButton>
353-
// </li>
354-
</ul>
332+
<p class="mt-6 text-large text-indigo-100 max-w-3xl">
333+
I maintain <a href="https://www.rustadventure.dev/" class="text-red-400">Rust Adventure</a>:
334+
a collection of workshops and practical projects you can use to learn Rust
335+
and <a href="https://thisweekinbevy.com/" class="text-sky-400">This Week in Bevy</a>,
336+
a curated roundup covering week-to-week activity in the Bevy ecosystem.
337+
</p>
338+
<p class="mt-6 text-large text-indigo-100 max-w-3xl">
339+
You can reach me for educational and software development services via email:<br/> <code>chris at christopherbiscardi.com</code>
340+
</p>
341+
<p class="mt-6 text-large text-indigo-100 max-w-3xl">
342+
This site is built with <a href="" class="text-[#F04948]">Leptos</a> and
343+
<a href="" class="text-[#a598f6]">Wasm</a>.
344+
</p>
345+
<ul class="flex py-4 gap-x-2 mt-4">
346+
<li>
347+
<a
348+
href="https://bsky.app/profile/chrisbiscardi.bsky.social"
349+
class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1.5 text-sm font-semibold text-indigo-100 shadow-sm ring-1 ring-inset ring-[#0085FF] hover:bg-[#0085ff24]">
350+
<svg
351+
xmlns="http://www.w3.org/2000/svg"
352+
width="10"
353+
viewBox="0 0 600 520"
354+
class="-ml-0.5 size-5"
355+
><path fill="#1185fe" d="M135.72 44.03C202.216 93.951 273.74 195.17 300 249.49c26.262-54.316 97.782-155.54 164.28-205.46C512.26 8.009 590-19.862 590 68.825c0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.38-3.69-10.832-3.708-7.896-.017-2.936-1.193.516-3.707 7.896-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.45-163.25-81.433C20.15 217.613 9.997 86.535 9.997 68.825c0-88.687 77.742-60.816 125.72-24.795z"/></svg>
356+
<span>Bluesky</span>
357+
</a>
358+
</li>
359+
<li>
360+
<a
361+
href="https://www.youtube.com/@chrisbiscardi"
362+
class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1.5 text-sm font-semibold text-indigo-100 shadow-sm ring-1 ring-inset ring-[#ff0000] hover:bg-[#ff000024]">
355363

356-
{}
364+
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="15px" viewBox="0 0 23 17"
365+
class="-ml-0.5 size-5"
366+
><path fill="#ff0000" d="M11.6907099,0.0578178602 C12.6060128,0.0605977646 16.7071801,0.0845049419 19.5514615,0.290106667 C20.0010348,0.343730208 20.981381,0.348267917 21.8559848,1.26434354 C22.5455679,1.96230729 22.770321,3.54726604 22.770321,3.54726604 C22.770321,3.54726604 23,5.4085075 23,7.26974417 L23,7.26974417 L23,9.01466312 C23,10.8758806 22.7703258,12.7371221 22.7703258,12.7371221 C22.7703258,12.7371221 22.5455727,14.3220856 21.8559896,15.0200494 C20.9813858,15.936125 20.0010348,15.9406531 19.5514663,15.9942862 C16.5574858,16.2107047 12.1665218,16.232102 11.5684023,16.2340342 L11.4899859,16.2341208 C11.2176094,16.2315455 5.47631882,16.1754125 3.68008625,16.00317 C3.16820688,15.9071594 2.01894,15.936125 1.14401521,15.0200494 C0.4544225,14.3220904 0.230019167,12.7371221 0.230019167,12.7371221 C0.230019167,12.7371221 0,10.8758806 0,9.01466312 L0.000994600165,7.05509197 C0.0160444711,5.41104868 0.197244917,3.82302118 0.226140669,3.57945865 L0.230014375,3.54726604 C0.230014375,3.54726604 0.454417708,1.96230729 1.14401042,1.26434354 C2.01893521,0.348267917 2.99893167,0.343730208 3.44853375,0.290106667 C6.29290408,0.0845049419 10.3940069,0.0605977646 11.3092935,0.0578178602 Z M9.12446896,4.66678625 L9.12552313,11.1291777 L15.3391744,7.90924 L9.12446896,4.66678625 Z"></path></svg>
367+
<span>YouTube</span>
368+
</a>
369+
</li>
370+
</ul>
357371
</div>
358372
</div>
359373
}

‎crates/www/style/input.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "tailwindcss";
2+
13
/* catppuccin variables */
24
.ctp-latte {
35
--ctp-rosewater: rgb(220, 138, 120);
@@ -281,10 +283,10 @@
281283
.bento-box:hover .visible-on-hover {
282284
visibility: visible;
283285
}
284-
.bento-box .img-header::after {
286+
/* .bento-box .img-header::after {
285287
background: #1fa9f4;
286288
content: "";
287-
}
289+
} */
288290

289291
.rainbow-borders {
290292
border-image-source: linear-gradient(
@@ -330,6 +332,7 @@
330332
height: 100%;
331333
background: url(/textures/cubes.png), var(--ctp-base);
332334
background-blend-mode: multiply;
335+
z-index: -1;
333336
}
334337

335338
@media (prefers-color-scheme: dark) {

0 commit comments

Comments
 (0)