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

- 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.

crates/app/src/lib.rs

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

crates/app/src/projects.rs

@@ -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()>
+            <ProjectSummary>
-                <ProjectSummaryTitle slot>"Endolingual"</ProjectSummaryTitle>
+                <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>
+            {move || match image.clone() {
+                Some(image) => {
+                    view! {
                         <picture class="project-image">
                             <img
                                 src=image
-                    // srcset={image.concat(" x1")}
+                                // 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>

crates/frontend/assets/css/styles.css

@@ -35,7 +35,7 @@
     --text-color: oklch(80% 0 0);
     --link-color: oklch(70% 0.15 240);
     --link-hover-color: oklch(80% 0.15 240);
-    --border-color: oklch(25% 0 0);
+    --border-color: oklch(40% 0 0);
     --post-description-color: oklch(60% 0 0);
     --header-bg: oklch(0.24 0.008 285);
     --input-bg: oklch(25% 0 0);
@@ -344,7 +344,7 @@ h6 {
 /* Projects page styling */
 .projects-list {
     display: grid;
-    gap: 2rem;
+    gap: 3rem;
 }
 
 .project_listing {
@@ -373,6 +373,7 @@ h6 {
     width: 100%;
     height: auto;
     object-fit: cover;
+    border: 0.1rem solid var(--border-color);
 }
 
 .project-text {
@@ -387,6 +388,10 @@ h6 {
     gap: 1rem;
 }
 
+.project-text p {
+    padding: 0rem 0.5rem;
+}
+
 @media (max-width: 768px) {
     .main-content {
         grid-template-columns: 1fr;