From 5389291e14cb183df7056ac300a10ff0daab51d1 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Sun, 15 Oct 2023 02:52:12 +0200
Subject: [PATCH] Portfolio rework!

---
 src/routes/portfolio.rs  | 47 +++++-----------------
 static/css/langages.css  | 71 +++++++++++++++++++++++++++++++++
 static/css/portfolio.css | 84 ++++++++++++++++++++++++++++++++++++++++
 templates/portfolio.html | 72 +++++++++++++++-------------------
 4 files changed, 196 insertions(+), 78 deletions(-)
 create mode 100644 static/css/langages.css
 create mode 100644 static/css/portfolio.css

diff --git a/src/routes/portfolio.rs b/src/routes/portfolio.rs
index b27416b..ce17d3a 100644
--- a/src/routes/portfolio.rs
+++ b/src/routes/portfolio.rs
@@ -23,12 +23,8 @@ async fn page(req: HttpRequest, config: web::Data<Config>) -> impl Responder {
 #[derive(Content, Debug)]
 struct PortfolioTemplate<'a> {
     navbar: NavBar,
-    bots_app: Option<Vec<File>>,
-    bots_loc: Option<String>,
-    persos_app: Option<Vec<File>>,
-    persos_loc: Option<String>,
-    univ_content: Option<String>,
-    univ_loc: Option<String>,
+    location_apps: Option<&'a str>,
+    apps: Option<Vec<File>>,
     err_msg: &'a str,
 }
 
@@ -37,37 +33,16 @@ fn build_page(config: Config, url: String) -> String {
     let projects_dir = "data/projects";
     let ext = ".md";
 
-    // Get bots apps
-    let bots_apps_loc = format!("{projects_dir}/bots");
-    let bots_apps = glob(&format!("{bots_apps_loc}/*{ext}"))
+    // Get apps
+    let apps = glob(&format!("{projects_dir}/*{ext}"))
         .unwrap()
         .map(|e| read_file(&e.unwrap().to_string_lossy()).unwrap())
         .collect::<Vec<File>>();
 
-    // Get perso apps
-    let perso_apps_loc = format!("{projects_dir}/perso");
-    let perso_apps = glob(&format!("{perso_apps_loc}/*{ext}"))
-        .unwrap()
-        .map(|e| read_file(&e.unwrap().to_string_lossy()).unwrap())
-        .collect::<Vec<File>>();
-
-    let univ_loc = format!("{projects_dir}/univ{ext}");
-
-    let (bots_app, bots_loc) = if bots_apps.is_empty() {
-        (None, Some(bots_apps_loc))
+    let bots_app = if apps.is_empty() {
+        (None, Some(projects_dir))
     } else {
-        (Some(bots_apps), None)
-    };
-
-    let (persos_app, persos_loc) = if perso_apps.is_empty() {
-        (None, Some(perso_apps_loc))
-    } else {
-        (Some(perso_apps), None)
-    };
-
-    let (univ_content, univ_loc) = match read_file(&univ_loc) {
-        Some(data) => (Some(data.content), None),
-        _ => (None, Some(univ_loc)),
+        (Some(apps), None)
     };
 
     config.tmpl.render(
@@ -77,12 +52,8 @@ fn build_page(config: Config, url: String) -> String {
                 portfolio: true,
                 ..NavBar::default()
             },
-            bots_app,
-            bots_loc,
-            persos_app,
-            persos_loc,
-            univ_content,
-            univ_loc,
+            apps: bots_app.0,
+            location_apps: bots_app.1,
             err_msg: "is empty",
         },
         Infos {
diff --git a/static/css/langages.css b/static/css/langages.css
new file mode 100644
index 0000000..4b32a05
--- /dev/null
+++ b/static/css/langages.css
@@ -0,0 +1,71 @@
+:root {
+  --lang-size-dot: 0.8em;
+  --lang-margin-text: 3px;
+  --lang-font-size: calc(var(--font-size) * 0.65);
+}
+
+/* Dot */
+p[data-lang]::before {
+  content: "";
+
+  height: var(--lang-size-dot);
+  width: var(--lang-size-dot);
+
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* Text */
+p[data-lang]::after {
+  margin-left: var(--lang-margin-text);
+  font-size: var(--lang-font-size);
+}
+
+/* Langages definition */
+p[data-lang="ts"]::before {
+  background-color: #3178c6;
+}
+
+p[data-lang="ts"]::after {
+  content: "TypeScript";
+}
+
+p[data-lang="rust"]::before {
+  background-color: #dea584;
+}
+
+p[data-lang="rust"]::after {
+  content: "Rust";
+}
+
+p[data-lang="py"]::before {
+  background-color: #3572a5;
+}
+
+p[data-lang="py"]::after {
+  content: "Python";
+}
+
+p[data-lang="ocaml"]::before {
+  background-color: #ef7a08;
+}
+
+p[data-lang="ocaml"]::after {
+  content: "OCaml";
+}
+
+p[data-lang="js"]::before {
+  background-color: #e3d357;
+}
+
+p[data-lang="js"]::after {
+  content: "JavaScript";
+}
+
+p[data-lang="c"]::before {
+  background-color: #555555;
+}
+
+p[data-lang="c"]::after {
+  content: "C";
+}
diff --git a/static/css/portfolio.css b/static/css/portfolio.css
new file mode 100644
index 0000000..7204b5a
--- /dev/null
+++ b/static/css/portfolio.css
@@ -0,0 +1,84 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --extreme: white;
+    --card-hover: #bbbbbb;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --extreme: black;
+    --card-hover: #0c1014;
+  }
+}
+
+:root {
+  --border-color: #6e6e6f;
+  --font-size-card: calc(var(--font-size) * 0.8);
+}
+
+/* List */
+main ul {
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* breakpoint */
+@media only screen and (max-width: 640px) {
+  main ul {
+    grid-template-columns: none;
+  }
+}
+
+/* Card */
+main li {
+  display: flex;
+  position: relative;
+
+  border-radius: 8px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
+  background: color-mix(in srgb, var(--background) 90%, var(--extreme));
+  border: 1px solid
+    color-mix(in srgb, var(--background) 50%, var(--border-color));
+  transition: all 0.3s;
+
+  padding: 10px;
+  margin-block: 10px;
+  margin-inline: 5px;
+}
+
+/* Hover Card */
+main li:hover {
+  background-color: color-mix(in srgb, var(--background) 40%, var(--extreme));
+  cursor: pointer;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
+}
+
+/* Element */
+div {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Element title */
+div h3 {
+  margin-block: 0;
+}
+
+/* Element description */
+span {
+  margin: auto;
+}
+
+/* Element text */
+div p,
+div a {
+  font-size: var(--font-size-card);
+}
+
+/* Element langage */
+p[data-lang] {
+  margin: 0;
+}
diff --git a/templates/portfolio.html b/templates/portfolio.html
index d2df116..62f6a52 100644
--- a/templates/portfolio.html
+++ b/templates/portfolio.html
@@ -2,52 +2,44 @@
 <html class="index" lang="fr">
   <head dir="ltr">
     {{>head.html}}
+    <link rel="stylesheet" href="/css/portfolio.css" />
+    <link rel="stylesheet" href="/css/langages.css" />
   </head>
   <body>
     <header>{{>navbar.html}}</header>
-    {{#data}}
     <main>
-      <h1 id="title">Projets qui me tiennent à coeur</h1>
-      <div id="content">
-        <h2 class="subtitle">Bots</h2>
-        <div class="subcontent">
-          {{#bots_app}} {{#metadata}} {{#info}}
-          <h3 class="subsubtitle">
-            <a target="_blank" href="{{link}} ">{{title}}</a>
-          </h3>
-          {{/info}} {{/metadata}}
-          <div class="subcontent">{{&content}}</div>
-          {{/bots_app}} {{^bots_app}}
-          <p>{{bots_loc}} {{err_msg}}</p>
-          {{/bots_app}}
-          <br />
-        </div>
-        <h2 class="subtitle">
-          <a target="_blank" href="https://git.mylloon.fr/Paris8"
-            >Projet de l'université</a
-          >
-        </h2>
-        <div class="subcontent">
-          {{&univ_content}} {{^univ_content}}
-          <p>{{univ_loc}} {{err_msg}}</p>
-          {{/univ_content}}
-        </div>
+      {{#data}}
+      <h1>Portfolio</h1>
+      <p>
+        Je programme depuis 2018 et j'ai appris une multitude de langages
+        depuis. Étant passionné de logiciels libres depuis ma licence
+        d'informatique à Paris 8, je publie tout sur des forges publiques.
+      </p>
 
-        <h2 class="subtitle">Projets perso</h2>
-        <div class="subcontent">
-          {{#persos_app}} {{#metadata}} {{#info}}
-          <h3 class="subsubtitle">
-            <a target="_blank" href="{{link}} ">{{title}}</a>
-          </h3>
+      {{#location_apps}}
+      <!-- Error message -->
+      <p>{{location_apps}} {{err_msg}}</p>
+      {{/location_apps}} {{^location_apps}}
+
+      <h2>Projets</h2>
+      <ul>
+        {{#apps}}
+        <li>
+          {{#metadata}} {{#info}}
+          <div
+            onclick="window.open('{{link}}', '_blank', 'noreferrer');"
+            title="{{title}} "
+          >
+            <h3>{{title}}</h3>
+            <span>{{&content}}</span> {{#language}}
+            <p data-lang="{{language}}"></p>
+            {{/language}}
+          </div>
           {{/info}} {{/metadata}}
-          <div class="subcontent">{{&content}}</div>
-          {{/persos_app}} {{^persos_app}}
-          <p>{{persos_loc}} {{err_msg}}</p>
-          {{/persos_app}}
-          <br />
-        </div>
-      </div>
+        </li>
+        {{/apps}}
+      </ul>
+      {{/location_apps}} {{/data}}
     </main>
-    {{/data}} {{>footer.html}}
   </body>
 </html>