From 48f3c27a209820c39bfa74a16807e1af521f75b1 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Sat, 9 Dec 2023 19:08:27 +0100
Subject: [PATCH] Add experience page + Fix style

---
 src/app/components/top_component.rs |  4 ++++
 src/app/mod.rs                      |  1 +
 src/app/pages/experience.rs         | 11 +++++++++++
 src/app/pages/home.rs               |  3 +--
 src/app/pages/mod.rs                |  7 ++++++-
 style/portfolio.css                 |  2 +-
 style/post.css                      |  2 +-
 style/title.css                     |  2 +-
 style/top_component.css             | 10 +++++++++-
 9 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/app/pages/experience.rs

diff --git a/src/app/components/top_component.rs b/src/app/components/top_component.rs
index 5114cdf..45912f1 100644
--- a/src/app/components/top_component.rs
+++ b/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>
diff --git a/src/app/mod.rs b/src/app/mod.rs
index d82e425..1d304ce 100644
--- a/src/app/mod.rs
+++ b/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>
diff --git a/src/app/pages/experience.rs b/src/app/pages/experience.rs
new file mode 100644
index 0000000..a216fe7
--- /dev/null
+++ b/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>
+    }
+}
\ No newline at end of file
diff --git a/src/app/pages/home.rs b/src/app/pages/home.rs
index c9ab820..39c39cb 100644
--- a/src/app/pages/home.rs
+++ b/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>
     }
 }
\ No newline at end of file
diff --git a/src/app/pages/mod.rs b/src/app/pages/mod.rs
index 76b9381..57e56d2 100644
--- a/src/app/pages/mod.rs
+++ b/src/app/pages/mod.rs
@@ -2,4 +2,9 @@ mod home;
 pub use home::Home;
 
 mod posts;
-pub use posts::{PostList, PostElement};
\ No newline at end of file
+
+pub use posts::{PostList, PostElement};
+
+mod experience;
+
+pub use experience::Experience;
\ No newline at end of file
diff --git a/style/portfolio.css b/style/portfolio.css
index 93d166a..f2240c2 100644
--- a/style/portfolio.css
+++ b/style/portfolio.css
@@ -10,4 +10,4 @@
 @import './timeline.css';
 @import './title.css';
 @import './top_component.css';
-/*@import './mermaid.css';*/
+/*@import './mermaid.css';*/
\ No newline at end of file
diff --git a/style/post.css b/style/post.css
index 5af4dd9..29f9e26 100644
--- a/style/post.css
+++ b/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;
diff --git a/style/title.css b/style/title.css
index d62f9dc..245345d 100644
--- a/style/title.css
+++ b/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;
diff --git a/style/top_component.css b/style/top_component.css
index 4b64284..42d1fbd 100644
--- a/style/top_component.css
+++ b/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];
+                }
+            }
+        }
     }
 }