♻️📝 app: Refactor image rendering and update homepage content

- Changed `CommandLine` component placeholder to "mascully.com $".
- Updated `HireMe` component text to include full-time employment availability.
- Added image capabilities to first `ProjectSummary` for "HiveMQ Data Hub" project.
- Refactored `ProjectSummary` image rendering with JXL/WebP formats and responsive `srcset`.
- Updated project descriptions and links, including Carplexity status update and link removal.
- Cleaned up commented code in Endolingual project section.

crates/app/src/command_line.rs

@@ -2,5 +2,5 @@ use leptos::prelude::*;
 
 #[component]
 pub fn CommandLine() -> impl IntoView {
-    view! { <input class="terminal-input" type="text" placeholder="$ " /> }
+    view! { <input class="terminal-input" type="text" placeholder="mascully.com $" /> }
 }

crates/app/src/lib.rs

@@ -150,7 +150,7 @@ fn HomePage() -> impl IntoView {
 #[component]
 fn HireMe() -> impl IntoView {
     view! {
-        <p>"I am available for freelancing work (remote, European time zone)."</p>
+        <p>"I am available for freelancing work or full-time employment (remote, European time zone)."</p>
         <p>"I can work comfortably with most tech stacks in most domains."</p>
         <p>"Email me at "<a href="mailto:contact@mascully.com">"contact@mascully.com"</a>.</p>
     }

crates/app/src/projects.rs

@@ -10,7 +10,7 @@ pub fn Projects() -> impl IntoView {
     view! {
         <h1>"Project Portfolio"</h1>
         <section class="projects-list">
-            <ProjectSummary>
+            <ProjectSummary image="data_hub_1".into()>
                 <ProjectSummaryTitle slot>"HiveMQ Data Hub Scripting"</ProjectSummaryTitle>
                 <ProjectSummaryMain slot>
                     <p>
@@ -18,11 +18,15 @@ pub fn Projects() -> impl IntoView {
                     </p>
                 </ProjectSummaryMain>
                 <ProjectSummaryLinks slot>
-                    <A href="https://docs.hivemq.com/hivemq/latest/data-hub/transformations.html">"Documentation"</A>
+                    <A href="https://docs.hivemq.com/hivemq/latest/data-hub/transformations.html">
+                        "Documentation"
+                    </A>
                 </ProjectSummaryLinks>
             </ProjectSummary>
-            <ProjectSummary image="/parva_1.png".into()>
+            <ProjectSummary image="parva_1".into()>
-                <ProjectSummaryTitle slot>"LittleBigPlanet Computer (personal)"</ProjectSummaryTitle>
+                <ProjectSummaryTitle slot>
+                    "LittleBigPlanet Computer (personal)"
+                </ProjectSummaryTitle>
                 <ProjectSummaryMain slot>
                     <p>
                         "A 120Hz 24-bit computer built using logic gates inside the game "
@@ -53,38 +57,22 @@ pub fn Projects() -> impl IntoView {
                     </a>
                 </ProjectSummaryLinks>
             </ProjectSummary>
-            <ProjectSummary image="/carplexity_1.png".into()>
+            <ProjectSummary image="carplexity_1".into()>
                 <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."
+                        "Still early in development. A physics car game built using Bevy meant to be similar to Rocket League."
-                    </p>
-                    <p>
-                        "360 ticks per second instead of 120, so less input lag, which is basically the only thing that matters."
                     </p>
                 </ProjectSummaryMain>
                 <ProjectSummaryLinks slot>
-                    <A href="https://carplexity.com">"Website"</A>
+                    // <A href="https://carplexity.com">"Website"</A>
+                    ""
                 </ProjectSummaryLinks>
             </ProjectSummary>
             <ProjectSummary>
                 <ProjectSummaryTitle slot>"Endolingual (personal)"</ProjectSummaryTitle>
                 <ProjectSummaryMain slot>
                     <p>"Compile-time string localization for Rust."</p>
-                // <pre>
-                // {
-                // indoc! {
-                // r#"
-                // let current_language = get_current_language();
-                // let my_string = translate!("Enter your password: ");
-                // println!("{}", my_string[current_language]);
-                // "#
-                // }
-                // }
-                // </pre>
-                // <p>
-                // "You can try this out by clicking the translate button at the top right of this website. All of the translation"
-                // </p>
                 </ProjectSummaryMain>
                 <ProjectSummaryLinks slot>
                     <A href="https://github.com/mascully/endolingual">"Repo"</A>
@@ -108,9 +96,16 @@ pub fn ProjectSummary(
                 Some(image) => {
                     view! {
                         <picture class="project-image">
+                            <source
+                                type="image/jxl"
+                                srcset=format!("jxl/{image}_low.jxl 300w, jxl/{image}.jxl")
+                            />
+                            <source
+                                type="image/webp"
+                                srcset=format!("webp/{image}_low.webp 300w, webp/{image}.webp")
+                            />
                             <img
-                                src=image
+                                src=format!("webp/{image}_low.webp")
-                                // srcset={img.concat(" x1")}
                                 loading="lazy"
                             />
                         </picture>