chore: blog updated

Dockerfile

@@ -28,8 +28,6 @@ COPY --from=builder /work/target/release/portfolio /app/
 COPY --from=builder /work/target/site /app/site
 COPY --from=builder /work/Cargo.toml /app/
 
-
-
 EXPOSE 3000
 ENV LEPTOS_SITE_ROOT=./site
 

site/pkg/portfolio.css

@@ -663,6 +663,18 @@ img, video {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
+.decoration-gray-400 {
+  text-decoration-color: #9ca3af;
+}
+
+.decoration-dashed {
+  text-decoration-style: dashed;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -744,6 +756,11 @@ body {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));

site/pkg/portfolio.js

@@ -1178,16 +1178,16 @@ imports.wbg.__wbindgen_memory = function() {
 const ret = wasm.memory;
 return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper7352 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 618, __wbg_adapter_44);
+imports.wbg.__wbindgen_closure_wrapper7373 = function(arg0, arg1, arg2) {
+const ret = makeMutClosure(arg0, arg1, 621, __wbg_adapter_44);
 return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper8610 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 717, __wbg_adapter_47);
+imports.wbg.__wbindgen_closure_wrapper8631 = function(arg0, arg1, arg2) {
+const ret = makeMutClosure(arg0, arg1, 720, __wbg_adapter_47);
 return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper9450 = function(arg0, arg1, arg2) {
-const ret = makeMutClosure(arg0, arg1, 769, __wbg_adapter_50);
+imports.wbg.__wbindgen_closure_wrapper9471 = function(arg0, arg1, arg2) {
+const ret = makeMutClosure(arg0, arg1, 772, __wbg_adapter_50);
 return addHeapObject(ret);
 };
 

src/pages/projects/berli.rs

@@ -1,13 +1,15 @@
 use crate::components::common::card::TechList;
 use crate::components::project::Project;
 use crate::layouts::layout::Layout;
+use icondata as i;
 use leptos::*;
+use leptos_icons::*;
 
 #[component]
 pub fn Berli() -> impl IntoView {
     // Project
     let title = "BERLi System Project".to_string();
-    let subtitle = "A cutting-edge IoT platform".to_string();
+    let subtitle = "A cutting-edge IoT platform powered by Rust".to_string();
     let category = "Project".to_string();
     let date = "Jun 18, 2024".to_string();
 
@@ -18,24 +20,73 @@ pub fn Berli() -> impl IntoView {
     view! {
         <Layout>
             <Project title=title subtitle=subtitle category=category date=date>
-                <h1 class="text-2xl text-gray-800">The reasons</h1>
+                <h1 class="text-2xl text-gray-800">Motivation</h1>
                 <article class="text-gray-800 space-y-3 ">
                     <p>{intro_1}</p>
                     <p>{intro_2}</p>
                 </article>
 
+                // Stack
+                <h1 class="text-2xl text-gray-800">Stack</h1>
+                <p class="text-gray-800">The <strong>backend</strong> side at the beginning was in doubt between
+                <a href="https://actix.rs/" target="_blank" class="hover:text-blue-800 underline derline-offset-1 decoration-dashed decoration-gray-400">Actix</a>
+                 and
+                <a href="https://github.com/tokio-rs/axum" target="_blank" class="hover:text-blue-800 underline derline-offset-1 decoration-dashed decoration-gray-400">Axum</a> and although the first
+                    one showed better performance, the community supported Axum more.</p>
+                <p class="text-gray-800">Also the fact that it came from the people of
+                    <a href="https://tokio.rs/" target="_blank" class="hover:text-blue-800 underline derline-offset-1 decoration-dashed decoration-gray-400">Tokio</a>
+                    was a guarantee in terms of support and evolution.
+                </p>
+                <p class="text-gray-800">
+                    On the database side I chose PostgreSQL, it was an easy decision and as a crate to
+                    use it in Rust I chose
+                    <a href="https://tokio.rs/" target="_blank" class="hover:text-blue-800 underline derline-offset-1 decoration-dashed decoration-gray-400">SQLx</a>
+                    because it was fast in terms of performance and above
+                    all because it was not an ORM
+                </p>
+                <p class="text-gray-800">
+                    For the API interface I used REST for those that are critical in terms of security and more
+                    primitive like account creation and login, but for the other services I
+                    used GraphQL using the crate
+                    <a href="https://crates.io/crates/async-graphql" target="_blank" class="hover:text-blue-800 underline derline-offset-1 decoration-dashed decoration-gray-400">async-graphql</a>
+                    , fantastic crate!
+                </p>
+                <p class="text-gray-800">
+                    There are many other technologies such as
+                    <a href="https://crates.io/crates/argon2" target="_blank" class="hover:text-blue-800 underline derline-offset-1 decoration-dashed decoration-gray-400">Argon2</a>
+                    or the sending of JWT through credentials
+                    (HttpOnly and Secure) that I have used and that I would like to talk about but
+                    I will leave it in another post so as not to extend this one too much.
+                </p>
+                // Architecture
                 <h1 class="text-2xl text-gray-800">Architecture</h1>
+                <p class="text-gray-800">A simple schematic of the main API and some of the components around it</p>
                 <img
                     class="w-auto rounded-lg mx-auto"
-                    src="/images/picu_arch.webp"
+                    src="/images/picu_arch.png"
                     alt="Architecture"
                     width="64"
                     height="64"
                     href="/"
                 />
 
-                <h1 class="text-2xl text-gray-800">Stack</h1>
+                // Links
+                <h1 class="text-2xl text-gray-800">Links</h1>
                 <TechList/>
+
+                <h1 class="text-3xl text-gray-800 text-center">Very soon</h1>
+
+                // Links
+                <h1 class="text-2xl text-gray-800">Store</h1>
+                <p class="text-gray-600 flex items-center gap-2">Work in progress <Icon width="1em" height="1em" icon=i::AiClockCircleOutlined /></p>
+
+                // Mobile
+                <h1 class="text-2xl text-gray-800">Mobile</h1>
+                <p class="text-gray-600 flex items-center gap-2">Work in progress <Icon width="1em" height="1em" icon=i::AiClockCircleOutlined /></p>
+
+                // Guarantee availability and reliability
+                <h1 class="text-2xl text-gray-800">Guarantee availability and reliability</h1>
+                <p class="text-gray-600 flex items-center gap-2">Work in progress <Icon width="1em" height="1em" icon=i::AiClockCircleOutlined /></p>
             </Project>
         </Layout>
     }

style/output.css

@@ -910,6 +910,18 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
+.decoration-gray-400 {
+  text-decoration-color: #9ca3af;
+}
+
+.decoration-dashed {
+  text-decoration-style: dashed;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -991,6 +1003,11 @@ body {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));