feat: components svg container, helpfull, blog entry, many improvemen…

…ts in micro components to improve UX/UI
ruizdiazever · Jun 21, 2024 · 9f8ea29 · 9f8ea29
1 parent b16f640
commit 9f8ea29
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 66 deletions.
diff --git a/public/images/picu_arch.png b/public/images/picu_arch.png
diff --git a/public/images/picu_arch.svg b/public/images/picu_arch.svg
diff --git a/public/images/picu_roadmap.png b/public/images/picu_roadmap.png
diff --git a/src/components/common/helpful.rs b/src/components/common/helpful.rs
@@ -0,0 +1,32 @@
+use icondata as i;
+use leptos::*;
+use leptos_icons::*;
+
+#[component]
+pub fn Helpful() -> impl IntoView {
+    view! {
+        <div class="flex items-center mx-auto justify-center
+            p-2 w-[22rem] text-sm mt-10 gap-x-4
+            shadow-sm rounded-full border border-gray-200 ">
+          <p class="text-muted-foreground">Was this helpful?</p>
+          <div class="flex items-center">
+                <button class="flex h-10 w-10 items-center justify-center transition duration-500 ease-in-out
+                rounded-full hover:bg-[#35c758] hover:text-white">
+                    <Icon class="h-5 w-5" icon=i::BsEmojiHeartEyes />
+                </button>
+                <button class="flex h-10 w-10 items-center justify-center transition duration-500 ease-in-out
+                rounded-full hover:bg-[#32ade6] hover:text-white">
+                    <Icon class="h-5 w-5" icon=i::FaFaceGrinRegular />
+                </button>
+                <button class="flex h-10 w-10 items-center justify-center transition duration-500 ease-in-out
+                rounded-full hover:bg-[#ffcc01] hover:text-white">
+                    <Icon class="h-5 w-5" icon=i::FaFaceMehRegular />
+                </button>
+                <button class="flex h-10 w-10 items-center justify-center transition duration-500 ease-in-out
+                rounded-full hover:bg-[#ff3c2f] hover:text-white">
+                    <Icon class="h-5 w-5" icon=i::FaFaceSadCryRegular />
+                </button>
+          </div>
+        </div>
+    }
+}
diff --git a/src/components/common/link.rs b/src/components/common/link.rs
@@ -21,7 +21,8 @@ pub fn Link(title: String, link: String, blank: bool) -> impl IntoView {
             href={link}
             rel="noopener"
             target={linked}
-            class="text-gray-600 duration-200 hover:text-[#68b5fc] group flex items-center gap-1 hover:underline hover:decoration-dashed hover:underline-offset-8 hover:decoration-[#68b5fc]"
+            class="text-gray-700 duration-200 hover:text-[#68b5fc] group flex items-center gap-1
+            hover:underline hover:decoration-dashed hover:underline-offset-8 hover:decoration-[#68b5fc]"
         >
             <p class="text-md md:text-lg lg:text-xl font-medium">{title}</p>
             {icon}
@@ -39,9 +40,11 @@ pub fn LinkSimple(title: String, link: String, blank: bool) -> impl IntoView {
                 href={link}
                 rel="noopener"
                 target={linked}
-                class="group inline-flex items-center hover:text-[#68b5fc] text-[#0074de] duration-200 hover:underline underline-offset-4 decoration-dashed decoration-[#57b1fc]">
+                class="group inline-flex items-center hover:text-[#68b5fc] text-[#0074de] duration-200
+                hover:underline underline-offset-4 decoration-dashed decoration-[#57b1fc]">
                     {title}
-                    <Icon width="0.7em" height="0.7em" class="hover:text-[#68b5fc] text-[#0074de] duration-200 group-hover:translate-x-[1.5px]" icon=i::ChArrowUpRight />
+                    <Icon width="0.7em" height="0.7em" class="hover:text-[#68b5fc] text-[#0074de]
+                        duration-200 group-hover:translate-x-[1.5px]" icon=i::ChArrowUpRight />
             </a>
         }
     } else {

diff --git a/src/components/common/values.rs b/src/components/common/values.rs
@@ -123,6 +123,7 @@ pub enum Link {
     Apple,
     Leptos,
     Guille,
+    Nio
 }
 
 impl Link {
@@ -205,6 +206,12 @@ impl Link {
                     link="https://developer.apple.com/design/human-interface-guidelines/".to_string()
                     blank=true
                 />
+            },
+            Link::Nio => view! {
+                <LinkSimple title="Nio".to_string()
+                    link="https://www.nio.com/ep9".to_string()
+                    blank=true
+                />
             }
         }
     }

diff --git a/src/components/common/working.rs b/src/components/common/working.rs
@@ -13,6 +13,7 @@ pub fn Working() -> impl IntoView {
     let link_apple = Link::Apple.to_view();
     let link_spacex = Link::SpaceX.to_view();
     let link_guille = Link::Guille.to_view();
+    let link_nio = Link::Nio.to_view();
 
     view! {
         // Very soon
@@ -26,7 +27,7 @@ pub fn Working() -> impl IntoView {
             This portfolio is more than just a collection of projects; it reflects my commitment to excellence and innovation in the tech industry.
         </p>
         <p class="text-gray-700">
-            Inspired by the achievements of {link_spacex}, {link_apple}, {link_nothing}, and {link_vercel}, with {link_guille} as a role model for Latinos in software development, I strive for top-tier standards.
+            Inspired by the achievements of {link_vercel}, {link_nio}, {link_spacex}, {link_apple}, and {link_nothing}, with {link_guille} as a role model for Latinos in software development, I strive for top-tier standards.
         </p>
         <p class="text-gray-700">
             Explore sections currently under development, exemplifying quality and precision.

diff --git a/src/components/home/entry.rs b/src/components/home/entry.rs
@@ -10,37 +10,38 @@ pub fn Entry(
     uri: String,
     time: u8,
     date: String,
-    categories: Vec<String>
+    tags: Vec<String>
 ) -> impl IntoView {
     view! {
-        <div class="flex flex-row items-center h-auto md:h-36 lg:h-32  p-4 border border-gray-300
-            hover:border-gray-400 transition duration-200 ease-out
-            hover:ease-in rounded-md bg-white shadow-sm hover:shadow-md
-            transition-shadow relative">
+        <div class="relative flex flex-wrap flex-row items-center h-auto md:h-36 lg:h-32  p-4 border border-gray-300
+            hover:border-gray-400 transition duration-200 hover:ease-in
+            rounded-md bg-white shadow-sm hover:shadow-md
+            transition-shadow">
 
             <div class="flex-1 flex flex-col gap-2">
                 <div class="flex justify-between items-center">
                     <Link title={title} link={uri} blank={false}/>
-                    <div class="flex items-center gap-2">
-                        <Icon width="1em" height="1em" icon=i::AiClockCircleOutlined />
-                        <span class="flex md:gap-1 text-sm text-muted-foreground">{time} min <span class="hidden md:block">read</span></span>
+                    <div class="flex items-center gap-2 text-gray-600">
+                        <Icon width="1em" height="1em" icon=i::RiTimerSystemLine />
+                        <span class="flex md:gap-1 text-sm font-medium text-muted-foreground">{time} min <span class="hidden md:block">read</span></span>
                     </div>
                 </div>
                 <p class="text-sm text-muted-foreground">
                     {description}
                 </p>
-                <div class="flex justify-between items-center mt-2">
-                    <section class="flex gap-2 flex-wrap">
-                        {categories.iter().map(|category| {
-                            view! {
-                                <span class="flex items-center justify-center whitespace-nowrap
-                                rounded-lg bg-gray-100 border border-gray-300 h-6 px-2.5 py-1 text-sm text-gray-700">
-                                    {category}
-                                </span>
-                            }
-                        }).collect::<Vec<_>>()}
+                <div class="flex justify-left items-center mt-2 text-sm text-gray-600 space-x-4">
+                    <section class="flex items-center justify-center gap-1 flex-wrap font-medium">
+                        <Icon icon=i::OcEyeSm />
+                        157.k views
+                    </section>
+                    <section class="flex items-center justify-center gap-1 flex-wrap font-medium">
+                        <Icon icon=i::BsTag />
+                        {tags.len()} Tags
+                    </section>
+                    <section class="flex items-center justify-center gap-1 flex-wrap font-medium">
+                        <Icon icon=i::AiClockCircleOutlined />
+                        {date}
                     </section>
-                    <span class="text-sm text-muted-foreground">{date}</span>
                 </div>
             </div>
         </div>

diff --git a/src/components/home/project_card.rs b/src/components/home/project_card.rs
@@ -15,7 +15,11 @@ pub fn Project(
 ) -> impl IntoView {
     view! {
         <div class="group relative block h-32 w-full">
-            <div class="relative p-2 flex h-full transform items-start border border-gray-300 hover:border-gray-400 transition duration-200 ease-out hover:ease-in rounded-md bg-white">
+            <div class="relative p-2 flex h-full
+                transform items-start border border-gray-300 hover:border-gray-400
+                transition duration-200 ease-out hover:ease-in rounded-md bg-white
+                shadow-sm hover:shadow-mdtransition-shadow
+                ">
                 <div class="flex flex-col px-2 my-2 gap-2 !pt-0">
                     <div class="flex justify-between">
                         <Link title=title link=url blank=blank/>

diff --git a/src/components/project.rs b/src/components/project.rs
@@ -1,6 +1,7 @@
 use icondata as i;
 use leptos::*;
 use leptos_icons::*;
+use crate::components::common::helpful::Helpful;
 
 #[component]
 pub fn Project(
@@ -41,6 +42,8 @@ pub fn Project(
                 </div>
                 <hr/>
                 <div class="mt-6 space-y-4">{children()}</div>
+
+                <Helpful/>
             </div>
     }
 }
diff --git a/src/layouts/components/header.rs b/src/layouts/components/header.rs
@@ -5,29 +5,51 @@ use leptos_icons::*;
 #[component]
 pub fn Header() -> impl IntoView {
     view! {
-        <header class="mt-6 sticky top-0 backdrop-blur-lg z-50">
-          <div class="mx-auto max-w-screen-md px-6 sm:px-6 lg:px-8 mb-6 antialiased">
-            <div class="flex h-16 items-center justify-between">
-                <div class="md:flex md:items-center md:gap-12">
-                    <a href="/" class="flex items-center justify-center text-gray-900 hover:text-gray-950 duration-200">
-                        <div class="block items-center justify-center">
-                            <p class="text-2xl font-semibold">Ever Ruiz Diaz</p>
-                            <p class="text-lg">Rust Developer</p>
-                        </div>
-                    </a>
-                </div>
-                <div class="flex gap-2 h-100">
-                    <a rel="noopener" href="https://x.com/EverToujours" target="_blank" class="block text-gray-600 rounded-md p-2 text-sm font-medium text-black transition hover:bg-gray-100">
-                        <Icon width="1.3em" height="1.3em" icon=i::BsTwitterX />
-                    </a>
-                    <a rel="noopener" href="https://github.com/ruizdiazever" target="_blank" class="block text-gray-600 rounded-md p-2 text-sm font-medium text-black transition hover:bg-gray-100">
-                        <Icon width="1.3em" height="1.3em" icon=i::FaGithubBrands />
-                    </a>
-                    <a rel="noopener" href="https://www.linkedin.com/" target="_blank" class="block text-gray-600 rounded-md p-2 text-sm font-medium text-black transition hover:bg-gray-100">
-                        <Icon width="1.3em" height="1.3em" icon=i::BsLinkedin />
-                    </a>
-                </div>
-            </div>
+        <header class="flex items-center justify-between max-w-screen-md mx-auto
+        mt-6 sticky top-0 backdrop-blur-lg z-50 antialiased
+        px-6 sm:px-6 lg:px-8">
+          <div class="flex flex-col items-start gap-1">
+            <div class="text-2xl font-semibold">Ever Ruiz Diaz</div>
+            <div class="text-muted-foreground text-md text-gray-600">Rust Developer</div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button
+                class="text-gray-700 hover:text-[#68b5fc]
+                rounded-md transition duration-200
+                bg-muted focus:outline-none focus:ring-1 focus:ring-ring"
+                size="icon"
+            >
+              <Icon class="h-5 w-5" icon=i::AiSearchOutlined />
+              <span class="sr-only">Search</span>
+            </button>
+            <Icon class="h-5 w-5 transform rotate-90 text-gray-500" icon=i::AiMinusOutlined />
+            <a
+                href="https://www.linkedin.com/" rel="noopener" target="_blank"
+                class="inline-flex items-center justify-center text-gray-700 hover:text-[#68b5fc]
+                w-8 h-8 rounded-md text-sm font-medium transition hover:bg-gray-100
+                bg-muted focus:outline-none focus:ring-1 focus:ring-ring duration-200"
+            >
+              <Icon class="h-5 w-5" icon=i::BsLinkedin />
+              <span class="sr-only">LinkedIn</span>
+            </a>
+            <a
+                href="https://www.linkedin.com/" rel="noopener" target="_blank"
+                class="inline-flex items-center justify-center text-gray-700 hover:text-[#68b5fc]
+                w-8 h-8 rounded-md text-sm font-medium transition hover:bg-gray-100
+                bg-muted focus:outline-none focus:ring-1 focus:ring-ring duration-200"
+            >
+              <Icon class="h-5 w-5" icon=i::FaGithubBrands />
+              <span class="sr-only">GitHub</span>
+            </a>
+            <a
+                href="https://www.linkedin.com/" rel="noopener"  target="_blank"
+                class="inline-flex items-center justify-center text-gray-700 hover:text-[#68b5fc]
+                w-8 h-8 rounded-md text-sm font-medium transition hover:bg-gray-100
+                bg-muted focus:outline-none focus:ring-1 focus:ring-ring duration-200"
+            >
+              <Icon class="h-5 w-5" icon=i::BsTwitterX />
+              <span class="sr-only">Twitter</span>
+            </a>
           </div>
         </header>
     }

diff --git a/src/lib.rs b/src/lib.rs
@@ -45,5 +45,6 @@ pub mod components {
         pub mod link;
         pub mod values;
         pub mod working;
+        pub mod helpful;
     }
 }
diff --git a/src/pages/home.rs b/src/pages/home.rs
@@ -46,16 +46,29 @@ pub fn Home() -> impl IntoView {
         Icon::Docker.to_view(),
     ];
 
-    let categories_portfolio = vec![
-        "Project".to_string(),
-        "Rust".to_string(),
-        "Astro".to_string(),
+    let tags_post_portfolio = vec![
+        "graphql".to_string(),
+        "rust".to_string(),
+        "leptos".to_string(),
+        "wasm".to_string(),
+        "web".to_string(),
+        "webassembly".to_string(),
+        "axum".to_string(),
+        "tailwindcss".to_string(),
     ];
 
-    let categories_cookies = vec![
-        "GraphQL".to_string(),
-        "Rust".to_string(),
-        "Axum".to_string()
+    let tags_post_cookies = vec![
+        "graphql".to_string(),
+        "rust".to_string(),
+        "axum".to_string(),
+        "cookies".to_string(),
+        "security".to_string(),
+        "auth".to_string(),
+        "credentials".to_string(),
+        "async-graphql".to_string(),
+        "async-graphql".to_string(),
+        "backend".to_string(),
+        "api".to_string(),
     ];
 
     view! {
@@ -108,15 +121,15 @@ pub fn Home() -> impl IntoView {
                 uri="/blog/portfolio".to_string()
                 time=5
                 date="Jun 20, 2024".to_string()
-                categories=categories_portfolio
+                tags=tags_post_portfolio
             />
             <Entry
                 title="Cookies with GraphQL in Rust".to_string()
                 description="Learn best practices and enhance the security of your GraphQL interface in Rust".to_string()
                 uri="/blog/portfolio".to_string()
                 time=5
                 date="Jun 20, 2024".to_string()
-                categories=categories_cookies
+                tags=tags_post_cookies
             />
 
             <h1 class="text-2xl font-medium mt-6">Experience</h1>

diff --git a/src/pages/projects/picu.rs b/src/pages/projects/picu.rs
@@ -77,17 +77,21 @@ pub fn Picu() -> impl IntoView {
                     <a href="#architecture">Architecture</a>
                 </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.png"
-                    alt="Picu basic architecture diagram"
-                    width="64"
-                    height="64"
-                    href="/"
-                />
+
+                <div class="inset-0 -z-10 w-full bg-slate-50
+                border border-gray-300 rounded rounded-lg mx-auto shadow
+                bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)]
+                bg-[size:6rem_4rem]">
+                        <img
+                            class="w-full bg-transparent"
+                            src="/images/picu_arch.svg"
+                            alt="Picu basic architecture diagram"
+                            href="/"
+                        />
+                </div>
 
                 // Very soon
-                <h1 class="text-3xl text-gray-800 text-center">Very soon</h1>
+                <h1 class="text-3xl text-gray-800 text-center mt-3">Very soon</h1>
 
                 // Store
                 <h1 id="store" class="text-2xl text-gray-800">