Add experience page + Fix style

src/app/components/top_component.rs

@@ -23,6 +23,10 @@ pub fn TopComponent() -> impl IntoView {
                     inépuisable d'apprendre et ma curiosité sans bornes.
                     "#
                 </p>
+                <div class="top_component__actions">
+                    <a href="/experience".to_string()>Mon parcours</a>
+                    <a href="/posts".to_string()>Mon blog</a>
+                </div>
                 <SocialLinkContainer>
                     <SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</SocialLink>
                     <SocialLink icon=Icon::from(FaLinkedinBrands) url="https://www.linkedin.com/in/florian-richer-80960b129/".to_string()>Linkedin</SocialLink>

src/app/mod.rs

@@ -23,6 +23,7 @@ pub fn App() -> impl IntoView {
         <Router>
             <Routes>
                 <Route path="" view=pages::Home/>
+                <Route path="experience" view=pages::Experience/>
                 <Route path="posts" view=pages::PostList/>
                 <Route path="posts/:slug" view=pages::PostElement/>
             </Routes>

src/app/pages/experience.rs

@@ -0,0 +1,11 @@
+use leptos::*;
+use super::super::components::{Title, MonParcours};
+#[component]
+pub fn Experience() -> impl IntoView {
+    view! {
+        <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
+            <Title href="/".to_string() title="Mon parcours".to_string()/>
+            <MonParcours/>
+        </main>
+    }
+}

src/app/pages/home.rs

@@ -1,11 +1,10 @@
 use leptos::*;
-use super::super::components::{TopComponent, MonParcours};
+use super::super::components::{TopComponent};
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
         <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
             <TopComponent/>
-            <MonParcours/>
         </main>
     }
 }

src/app/pages/mod.rs

@@ -2,4 +2,9 @@ mod home;
 pub use home::Home;
 
 mod posts;
-pub use posts::{PostList, PostElement};
+
+pub use posts::{PostList, PostElement};
+
+mod experience;
+
+pub use experience::Experience;

style/portfolio.css

@@ -10,4 +10,4 @@
 @import './timeline.css';
 @import './title.css';
 @import './top_component.css';
-/*@import './mermaid.css';*/
+/*@import './mermaid.css';*/

style/post.css

@@ -1,7 +1,7 @@
 @layer components {
     .posts, .post {
         @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
-        @apply min-h-screen py-5;
+        @apply min-h-screen p-5;
 
         & h1 {
             @apply text-5xl;

style/title.css

@@ -1,6 +1,6 @@
 @layer components {
     header {
-        @apply flex flex-row items-center justify-between flex-wrap mx-5;
+        @apply flex flex-col md:flex-row items-center justify-between p-5;
 
         & h1 {
             @apply text-center text-6xl mb-5 flex-1;

style/top_component.css

@@ -28,7 +28,15 @@
             & > p {
                 @apply font-normal text-base;
             }
-        }
 
+            & .top_component__actions {
+                @apply flex flex-wrap my-3 gap-5;
+
+                & a {
+                    @apply flex-1 h-12 outline outline-2 rounded-md outline-on_surface dark:outline-dark_on_surface p-2 uppercase;
+                    @apply flex items-center justify-center min-w-[150px];
+                }
+            }
+        }
     }
 }