feat: projects section

crates/proto/src/lib.rs

@@ -77,3 +77,13 @@ pub struct BookshelfBook {
     pub review: String,
     pub shopping: BookshelfBookShopping,
 }
+
+#[derive(Clone, Debug, Default, Serialize, Deserialize)]
+pub struct Project {
+    pub title: String,
+    pub repo_url: String,
+    pub extract: String,
+    pub website: Option<String>,
+    pub tags: Vec<String>,
+    pub langs: Vec<String>,
+}

crates/www/assets/db/bookshelf.json

@@ -1,12 +1,24 @@
 [
+  {
+    "title": "Computer Architecture",
+    "author": "Charles Fox",
+    "isbn_10": "1718502869",
+    "isbn_13": "978-1718502864",
+    "publisher": "No Starch Press",
+    "read_on": 2024,
+    "review": "Computer Architecture walks you through the evolution of Computer Systems, it starts by establishing \"What is a computer\" then explains how Humans went through different machinery before getting into programmable systems, then it explains how these programmable systems used for non-data production drived the evolution to machines like Babbage's Analytical Machine. At some point in the book the Sillicon joins the story and here is when Charles Fox goes from the most simple transistor to how the Sillicon performs changes on state and flow on electrons causing data to be stored in our CPU registers. Finally he walks you through machines of different magnitudes, data centers, storege hardware and how these systems are programmed. Theres also an actity to assamble the Manchester Baby using Logisim.",
+    "shopping": {
+      "amazon": "https://www.amazon.com/Computer-Architecture-Charles-Fox/dp/1718502869/"
+    }
+  },
   {
     "title": "Street Coder: The rules to break and how to break them",
     "author": "Sedat Kapanoglu",
     "isbn_10": "1617298379",
     "isbn_13": "978-1617298370",
     "publisher": "Manning",
     "read_on": 2023,
-    "review": "",
+    "review": "Either if you are a Self-Taught programmer or a CS degree backed programmer, this book is for you. It covers from daily life programmer experiences that most of us face through our career to more specific topics such as security, anti-patters, testing, refactoring and scalability. Is important to note that this book don't goes depth into these topics but instead it gives you a brief on them an Sedat will also share his POV on these topics.",
     "shopping": {
       "amazon": "https://www.amazon.com/Street-Coder-rules-break-them/dp/1617298379/"
     }
@@ -23,6 +35,18 @@
       "amazon": "https://www.amazon.com/Rust-Action-TS-McNamara/dp/1617294551"
     }
   },
+  {
+    "title": "Understanding the Machine. (Vol. 1 from Write Great Code Series)",
+    "author": "Randall Hyde",
+    "isbn_10": "171850036X",
+    "isbn_13": "978-1718500365",
+    "publisher": "No Starch Press",
+    "read_on": 2020,
+    "review": "Randall Hyde goes into the depth understanding on how computers work. This book is great for those who want to understand how the computer works from the ground up, Randall continuously explains how High-Level Code gets translated into Machine Code and how the CPU executes it. It is a great introduction if you are jumping into Systems Programming.",
+    "shopping": {
+      "amazon": "https://www.amazon.com/Write-Great-Code-2nd-Understanding/dp/171850036X"
+    }
+  },
   {
     "title": "The Rust Programming Language",
     "author": "Steve Klabnik & Carol Nichols",

crates/www/assets/db/projects.json

@@ -0,0 +1,82 @@
+[
+  {
+    "title": "Fluvio",
+    "repo_url": "https://github.com/infinyon/fluvio",
+    "extract": "Working at InfinyOn I have contributed to Fluvio, a data streaming platform written in Rust and WebAssembly.",
+    "website": "https://www.fluvio.io",
+    "tags": ["rust", "wasm", "streaming"],
+    "langs": ["Rust", "WebAssembly"]
+  },
+  {
+    "title": "Rust HTTP Server",
+    "repo_url": "https://github.com/http-server-rs/http-server",
+    "extract": "A easy to use and configurable command-line HTTP Server written in Rust.",
+    "website": "https://http-server-rs.github.io",
+    "tags": ["rust", "http-server", "cli", "axum", "clap"],
+    "langs": ["Rust"]
+  },
+  {
+    "title": "Network Interface",
+    "repo_url": "https://github.com/EstebanBorai/network-interface",
+    "extract": "Rust Crate to Interact with Network Interfaces using a unified API for different platforms.",
+    "website": null,
+    "tags": ["rust", "ffi", "multiplatform", "crate", "networking"],
+    "langs": ["Rust", "C"]
+  },
+  {
+    "title": "Local IP Address",
+    "repo_url": "https://github.com/EstebanBorai/local-ip-address",
+    "extract": "Rust Crate to Retrieve system's local IP address and Network Interfaces/Adapters on FreeBSD, Linux, macOS and Windows.",
+    "website": null,
+    "tags": ["rust", "ffi", "multiplatform", "crate", "networking"],
+    "langs": ["Rust"]
+  },
+  {
+    "title": "Wait-On",
+    "repo_url": "https://github.com/EstebanBorai/wait-on",
+    "extract": "Command-Line Utility to wait on the availability of resources such as Files, HTTP Servers, Ports & Sockets",
+    "website": null,
+    "tags": ["rust", "crate", "cli", "devops"],
+    "langs": ["Rust"]
+  },
+  {
+    "title": "Git2Txt",
+    "repo_url": "https://github.com/EstebanBorai/git2txt",
+    "extract": "Command-Line Utility to retrieve every Git repository file into a single TXT",
+    "website": null,
+    "tags": ["rust", "crate", "cli", "git", "llm"],
+    "langs": ["Rust"]
+  },
+  {
+    "title": "rutcl",
+    "repo_url": "https://github.com/EstebanBorai/rutcl",
+    "extract": "Chilean National ID (RUT) Parser",
+    "website": null,
+    "tags": ["rust", "crate", "cli", "rut", "chile"],
+    "langs": ["Rust"]
+  },
+  {
+    "title": "Svelte Forms",
+    "repo_url": "https://github.com/whizzes/svelte-forms",
+    "extract": "Form Utilities for Svelte",
+    "website": "https://www.npmjs.com/package/@whizzes/svelte-forms",
+    "tags": ["svelte", "forms"],
+    "langs": ["TypeScript"]
+  },
+  {
+    "title": "Pxid",
+    "repo_url": "https://github.com/whizzes/pxid",
+    "extract": "An extended version of XID (Globally Unique Identifiers) which supports prefixes and is stored in 16 bytes",
+    "website": "https://estebanborai.com/notes/pxid-developer-friendy-ids",
+    "tags": ["rust", "xid", "id"],
+    "langs": ["Rust"]
+  },
+  {
+    "title": "Imagekit",
+    "repo_url": "https://github.com/whizzes/imagekit",
+    "extract": "Rust API Client for ImageKit.io a file storage and image processing service",
+    "website": "https://imagekit.io/",
+    "tags": ["rust", "api", "imagekit", "client"],
+    "langs": ["Rust"]
+  }
+]

crates/www/assets/notes/pxid-developer-friendy-ids.md

@@ -1,6 +1,6 @@
 ---
 title: "Pxid: Developer Friendly IDs"
-description: "When it comes to work with taxonomy rich APIs, having descriptive IDs that prevides context about the resource in question is crucial"
+description: "When it comes to work with taxonomy rich APIs, having descriptive IDs that provides context about the resource in question is crucial"
 categories: [id, api, graphql, design, software, rust]
 icon: rust
 date: 2023-07-22

crates/www/assets/notes_index.json

@@ -126,7 +126,7 @@
   {
     "meta": {
       "title": "Pxid: Developer Friendly IDs",
-      "description": "When it comes to work with taxonomy rich APIs, having descriptive IDs that prevides context about the resource in question is crucial",
+      "description": "When it comes to work with taxonomy rich APIs, having descriptive IDs that provides context about the resource in question is crucial",
       "icon": "rust",
       "date": "2023-07-22",
       "preview_image_url": "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2272&q=1",
@@ -293,4 +293,4 @@
     },
     "slug": "installing-the-rust-programming-language-on-windows"
   }
-]
+]

crates/www/public/styles.css

@@ -2,81 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
-
-/* ibm-plex-mono-regular - latin */
+/* inter-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'IBM Plex Mono';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: url('/assets/fonts/ibm-plex-mono-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* ibm-plex-mono-italic - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'IBM Plex Mono';
-  font-style: italic;
-  font-weight: 400;
-  src: url('/assets/fonts/ibm-plex-mono-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/assets/fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
-/* ibm-plex-mono-600 - latin */
+/* inter-600 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'IBM Plex Mono';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
-  src: url('/assets/fonts/ibm-plex-mono-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* ibm-plex-mono-600italic - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'IBM Plex Mono';
-  font-style: italic;
-  font-weight: 600;
-  src: url('/assets/fonts/ibm-plex-mono-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/assets/fonts/inter-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
-/* literata-200 - latin */
+/* fira-code-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Literata';
-  font-style: normal;
-  font-weight: 200;
-  src: url('/assets/fonts/literata-v35-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* literata-regular - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Literata';
+  font-family: 'Fira Code';
   font-style: normal;
   font-weight: 400;
-  src: url('/assets/fonts/literata-v35-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-/* literata-600 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Literata';
-  font-style: normal;
-  font-weight: 600;
-  src: url('/assets/fonts/literata-v35-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url('/assets/fonts/fira-code-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
-/* literata-800 - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Literata';
-  font-style: normal;
-  font-weight: 800;
-  src: url('/assets/fonts/literata-v35-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-body {
-  @apply font-body;
+body * {
+  @apply font-mono;
 }
 
 code * {
@@ -89,16 +43,32 @@ h3 code {
   @apply font-mono font-normal;
 }
 
+h1,
+h2,
+h3 {
+  @apply font-body font-semibold;
+}
+
+#note-content h1,
+#note-content h2,
+#note-content h3 {
+    @apply font-semibold py-2;
+}
+
 #note-content h1 {
-    @apply text-4xl font-semibold;
+    @apply text-4xl;
 }
 
 #note-content h2 {
-    @apply text-3xl font-semibold;
+    @apply text-3xl;
 }
 
 #note-content h3 {
-    @apply text-2xl font-semibold;
+    @apply text-2xl;
+}
+
+#note-content p {
+    @apply font-body;
 }
 
 #note-content .hljs {
@@ -109,3 +79,23 @@ h3 code {
 a[aria-current="page"] {
     @apply underline;
 }
+
+.lang-c {
+    background-color: #555555;
+    color: white;
+}
+
+.lang-rust {
+    background-color: #DEA584;
+    color: white;
+}
+
+.lang-typescript {
+    background-color: #4476C0;
+    color: white;
+}
+
+.lang-webassembly {
+    background-color: #5B3BE8;
+    color: white;
+}

crates/www/src/components/atoms/icons/briefcase.rs

@@ -0,0 +1,10 @@
+use leptos::{component, view, IntoView, TextProp};
+
+#[component]
+pub fn Briefcase(#[prop(into, optional)] class: TextProp) -> impl IntoView {
+    view! {
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class={class} fill="currentColor">
+          <path d="M216 56h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V72a16 16 0 0 0-16-16ZM96 48a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm120 24v41.61A184 184 0 0 1 128 136a184.07 184.07 0 0 1-88-22.38V72Zm0 128H40v-68.36A200.19 200.19 0 0 0 128 152a200.25 200.25 0 0 0 88-20.37V200Zm-112-88a8 8 0 0 1 8-8h32a8 8 0 0 1 0 16h-32a8 8 0 0 1-8-8Z"/>
+        </svg>
+    }
+}

crates/www/src/components/atoms/icons/github.rs

@@ -0,0 +1,10 @@
+use leptos::{component, view, IntoView, TextProp};
+
+#[component]
+pub fn GitHub(#[prop(into, optional)] class: TextProp) -> impl IntoView {
+    view! {
+        <svg xmlns="http://www.w3.org/2000/svg" class={class} viewBox="0 0 24 24">
+          <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+        </svg>
+    }
+}

crates/www/src/components/atoms/icons/globe.rs

@@ -0,0 +1,10 @@
+use leptos::{component, view, IntoView, TextProp};
+
+#[component]
+pub fn Globe(#[prop(into, optional)] class: TextProp) -> impl IntoView {
+    view! {
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class={class} fill="currentColor">
+          <path d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24Zm88 104a87.61 87.61 0 0 1-3.33 24h-38.51a157.44 157.44 0 0 0 0-48h38.51a87.61 87.61 0 0 1 3.33 24Zm-114 40h52a115.11 115.11 0 0 1-26 45 115.27 115.27 0 0 1-26-45Zm-3.9-16a140.84 140.84 0 0 1 0-48h59.88a140.84 140.84 0 0 1 0 48ZM40 128a87.61 87.61 0 0 1 3.33-24h38.51a157.44 157.44 0 0 0 0 48H43.33A87.61 87.61 0 0 1 40 128Zm114-40h-52a115.11 115.11 0 0 1 26-45 115.27 115.27 0 0 1 26 45Zm52.33 0h-35.62a135.28 135.28 0 0 0-22.3-45.6A88.29 88.29 0 0 1 206.37 88Zm-98.74-45.6A135.28 135.28 0 0 0 85.29 88H49.63a88.29 88.29 0 0 1 57.96-45.6ZM49.63 168h35.66a135.28 135.28 0 0 0 22.3 45.6A88.29 88.29 0 0 1 49.63 168Zm98.78 45.6a135.28 135.28 0 0 0 22.3-45.6h35.66a88.29 88.29 0 0 1-57.96 45.6Z"/>
+        </svg>
+    }
+}

crates/www/src/components/atoms/icons/mod.rs

@@ -0,0 +1,6 @@
+mod briefcase;
+mod github;
+mod globe;
+
+pub use github::GitHub;
+pub use globe::Globe;

crates/www/src/components/atoms/mod.rs

@@ -0,0 +1,2 @@
+pub mod icons;
+pub mod section;

crates/www/src/components/atoms/section.rs

@@ -0,0 +1,14 @@
+use leptos::{component, view, IntoView, TextProp};
+
+#[component]
+pub fn Section(
+    #[prop(into, optional)] title: TextProp,
+    #[prop(into, optional)] description: TextProp,
+) -> impl IntoView {
+    view! {
+        <div id="section-title pb-4">
+            <h2 class="text-lg pb-1">{title}</h2>
+            <p class="text-sm text-gray-600">{description}</p>
+        </div>
+    }
+}

crates/www/src/components/mod.rs

@@ -0,0 +1 @@
+pub mod atoms;