mascully/mascully_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

✨💄 app, frontend: Improve projects page layout and content

Browse source 
- Commented out the "Posts" link in the navigation menu.
- Changed projects page title to "Project Portfolio" and increased list gap to 3rem.
- Added new project summary for "HiveMQ Data Hub Scripting".
- Appended "(personal)" to personal project titles for clarity.
- Made `image` prop optional in `ProjectSummary` component and added conditional rendering.
- Removed image from "Endolingual" project summary.
- Lightened `--border-color` CSS variable to `oklch(40% 0 0)`.
- Added border styling to project images.
- Added padding to project description paragraphs.
This commit is contained in:
Markus Scully 2025-08-02 10:45:06 +03:00
parent 09243a8351
commit d2affdf265
Signed by: mascully
GPG key ID: 93CA5814B698101C
3 changed files with 42 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

6
crates/app/src/lib.rs
View file

@ -81,9 +81,9 @@ pub fn App() -> impl IntoView {
<li>
<A href="/">"Home"</A>
</li>
<li>
<A href="/posts">"Posts"</A>
</li>
// <li>
// <A href="/posts">"Posts"</A>
// </li>
<li>
<A href="/projects">"Projects"</A>
</li>

45
crates/app/src/projects.rs
View file

@ -8,10 +8,21 @@ use leptos_router::components::A;
#[component]
pub fn Projects() -> impl IntoView {
view! {
<h1>"Personal projects"</h1>
<h1>"Project Portfolio"</h1>
<section class="projects-list">
<ProjectSummary>
<ProjectSummaryTitle slot>"HiveMQ Data Hub Scripting"</ProjectSummaryTitle>
<ProjectSummaryMain slot>
<p>
"Scriptable message transformations using an embedded JavaScript engine for the HiveMQ MQTT broker."
</p>
</ProjectSummaryMain>
<ProjectSummaryLinks slot>
<A href="https://docs.hivemq.com/hivemq/latest/data-hub/transformations.html">"Documentation"</A>
</ProjectSummaryLinks>
</ProjectSummary>
<ProjectSummary image="/parva_1.png".into()>
<ProjectSummaryTitle slot>"LittleBigPlanet Computer"</ProjectSummaryTitle>
<ProjectSummaryTitle slot>"LittleBigPlanet Computer (personal)"</ProjectSummaryTitle>
<ProjectSummaryMain slot>
<p>
"A 120Hz 24-bit computer built using logic gates inside the game "
@ -43,7 +54,7 @@ pub fn Projects() -> impl IntoView {
</ProjectSummaryLinks>
</ProjectSummary>
<ProjectSummary image="/carplexity_1.png".into()>
<ProjectSummaryTitle slot>"Carplexity"</ProjectSummaryTitle>
<ProjectSummaryTitle slot>"Carplexity (personal)"</ProjectSummaryTitle>
<ProjectSummaryMain slot>
<p>
"Very early in development. A physics car game built using Bevy meant to be similar to Rocket League."
@ -56,8 +67,8 @@ pub fn Projects() -> impl IntoView {
<A href="https://carplexity.com">"Website"</A>
</ProjectSummaryLinks>
</ProjectSummary>
<ProjectSummary image="/endolingual_1.png".into()>
<ProjectSummaryTitle slot>"Endolingual"</ProjectSummaryTitle>
<ProjectSummary>
<ProjectSummaryTitle slot>"Endolingual (personal)"</ProjectSummaryTitle>
<ProjectSummaryMain slot>
<p>"Compile-time string localization for Rust."</p>
// <pre>
@ -88,18 +99,26 @@ pub fn ProjectSummary(
project_summary_title: ProjectSummaryTitle,
project_summary_main: ProjectSummaryMain,
project_summary_links: ProjectSummaryLinks,
image: String,
#[prop(optional)] image: Option<String>,
) -> impl IntoView {
view! {
<div class="project-grid">
<h2 class="project-title">{(project_summary_title.children)()}</h2>
<picture class="project-image">
<img
src=image
// srcset={image.concat(" x1")}
loading="lazy"
/>
</picture>
{move || match image.clone() {
Some(image) => {
view! {
<picture class="project-image">
<img
src=image
// srcset={img.concat(" x1")}
loading="lazy"
/>
</picture>
}
.into_any()
}
None => view! {}.into_any(),
}}
<div class="project-text">{(project_summary_main.children)()}</div>
<div class="project-links">{(project_summary_links.children)()}</div>
</div>