Update

Cargo.toml

@@ -23,6 +23,7 @@ leptos_icons = { version = "0.1.0", features = [
     "FaGithubBrands",
     "FaLinkedinBrands",
     "FaEnvelopeSolid",
+    "FaCaretDownSolid"
 ]}
 
 # dependecies for client (enable when csr or hydrate set)

src/app/components/link.rs

@@ -4,8 +4,8 @@ use leptos_icons::*;
 
 #[component]
 pub fn Link(
-    #[prop[optional]]
-    url: String,
+    #[prop(optional)]
+    url: Option<String>,
     children: Children
 ) -> impl IntoView {
     view! {

src/app/components/mod.rs

@@ -11,4 +11,7 @@ mod top_component;
 pub use top_component::TopComponent;
 
 mod project;
-pub use project::{ProjectContainer, Project};
+pub use project::{ProjectContainer, Project};
+
+mod timeline;
+pub use timeline::{Timeline};

src/app/components/project.rs

@@ -14,17 +14,15 @@ pub fn ProjectContainer(
 #[component]
 pub fn Project(
     children: Children,
-    image_src: String,
-    url: String
+    #[prop(optional)]
+    image_src: Option<String>,
+    #[prop(optional)]
+    url: Option<String>
 ) -> impl IntoView {
     view! {
         <a href=url target="_blank" class="rounded-lg p-5 flex flex-col items-center gap-2 bg-primary/10 dark:bg-dark_primary/10 shadow-md shadow-primary/5 dark:shadow-dark_primary/5 hover:bg-primary/20 hover:dark:bg-dark_primary/20 hover:shadow-md hover:shadow-primary/10 hover:dark:shadow-dark_primary/10">
-            { if !image_src.is_empty() {
-                Some(view! { <img src=image_src class="h-1/2"/> })
-            } else {
-                None
-            }}
-            <div class="flex flex-col justify-center h-full"><p>{children()}</p></div>
+            { image_src.map(|src| view! { <img src=src class="h-1/2"/> }) }
+            <div class="flex flex-col justify-center h-full"><p>{ children() }</p></div>
         </a>
     }
 }

src/app/components/social_link.rs

@@ -15,7 +15,8 @@ pub fn SocialLinkContainer(
 #[component]
 pub fn SocialLink(
     children: Children,
-    url: String,
+    #[prop(optional)]
+    url: Option<String>,
     icon: Icon,
 ) -> impl IntoView {
     view! {

src/app/components/timeline.rs

@@ -1,4 +1,6 @@
 use leptos::*;
+use leptos_icons::FaIcon::FaCaretDownSolid;
+use leptos_icons::*;
 
 #[component]
 pub fn Timeline(
@@ -6,9 +8,29 @@ pub fn Timeline(
 ) -> impl IntoView {
     view! {
         <div class="w-full px-5">
-            <ul class="list-none py-5 px-0 relative w-full max-w-5xl mx-auto before:top-0 before:bottom-0 before:left-0 before:md:left-1/2 before:absolute before:content-[""] before:w-2 before:bg-primary/10 before:dark:bg-dark_primary/10 before:shadow-md before:shadow-primary/5 before:dark:shadow-dark_primary/5">
+            <ul class="list-none py-5 px-0 relative w-full max-w-5xl mx-auto before:top-0 before:bottom-0 before:left-0 before:md:left-1/2 before:absolute before:content-[\"\"] before:w-2 before:bg-primary/10 before:dark:bg-dark_primary/10 before:shadow-md before:shadow-primary/5 before:dark:shadow-dark_primary/5">
                 { children() }
             </ul>
         </div>
     }
+}
+
+#[component]
+pub fn TimelineCard<F, IV>(
+    titles: F,
+    children: Children,
+) -> impl IntoView
+    where
+        F: Fn() -> IV,
+        IV: IntoView,
+{
+    view! {
+        <details>
+            <summary>
+                { titles() }
+                <i><Icon icon=Icon::from(FaCaretDownSolid) /></i>
+            </summary>
+            <div>{ children() }</div>
+        </details>
+    }
 }