feat(about): improve the content of about.md

maiste · Dec 6, 2024 · b674125 · b674125
1 parent 5ad4f25
commit b674125
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 45 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -302,6 +302,22 @@ footer p {
   padding: 0 0 4px 0;
 }
 
+.profile {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+}
+
+.profile img {
+  width: 260px;
+  height: 260px;
+  border: 1px solid;
+  border-radius: 100%;
+}
+
 /* --- Media query --- */
 
 @media all and (max-width: 1024px) {
@@ -316,4 +332,8 @@ footer p {
   header nav {
     flex-direction: column;
   }
+
+  .profile {
+    flex-direction: column;
+  }
 }
diff --git a/static/images/about/profile.jpg b/static/images/about/profile.jpg
diff --git a/static/pages/about.md b/static/pages/about.md
@@ -2,16 +2,40 @@
 page_title: "About"
 ---
 
-## Me
+## Who Am I?
 
-French computer scientist curious about everything, I've started this blog to
-centralise my knowledge and share some pieces of my mind with others if it can
-help. Everything written in this website is my opinion. It doesn't reflect the
-ideas of my employers, my family or anyone else.
+<!-- HACK: HTML is needed to give a finner control on the look. -->
+<div class="profile">
+    <img alt="Profile" src="/static/images/about/profile.jpg" />
+    <div>
+        <p>
+            French computer scientist curious about everything, I've started this blog to
+            centralise my knowledge and share some pieces of my mind with others if it can
+            help. Everything written in this website is my opinion. It doesn't reflect the
+            ideas of my employers, my family or anyone else.
+        </p>
+        <p>
+            As I like both languages, there might be some French and some English in this
+            blog. Even if I'm not as comfortable in English as in French, I will do my best
+            to improve my writing style!
+        </p>
+    </div>
+</div>
 
-As I like both languages, there might be some French and some English in this
-blog. Even if I'm not as comfortable in English as in French, I will do my best
-to improve my writing style!
+## Companies I work or have been working at
+
+- [Tarides](https://tarides.com/): Currently working here, I'm mostly working
+  on the OCaml build system, [dune](https://github.com/ocaml/dune).
+- [Takima](https://www.takima.fr/): Consulting firm where I have been working
+  on a project under NDA after following the internal courses for 3 months.
+- [Nomadic Labs](https://www.nomadic-labs.com/): I did my internship in the
+  company. It was about quantifying the energetic consumption of the blockchain
+  to ensure it was a linear and not an exponential growth.
+
+If you are more interesting in the Open Source projects I have been working on,
+I suggest you to have a look at the [Projects](/projects) page.
+
+<!-- TODO: Add more details about the company and my work there -->
 
 ## Contact
 
@@ -21,7 +45,7 @@ that could interest you:
 - **Mail**: dev[at]maiste.fr
 - **Github**: [maiste](https://github.com/maiste)
 - **Rss**: flux (without a link as I haven't already written the code to have
-it, sorry!)
+  it, sorry!)
 
 If you would like me to make a change or improve something, you can ask on
 GitHub [issues](https://github.com/maiste/maiste.fr/issues) :)
diff --git a/static/pages/index.md b/static/pages/index.md
@@ -27,9 +27,11 @@ I plan to:
 - [✔️] Port the Blog using the _tree.ml_ module,
 - [✔️] Move the `index.ml` to pages
 - [✔️] Add a [logging](/logging) page
-- [ ] Improve the content of the [about](/about) page,
+- [✔️] Improve the content of the [about](/about) page,
 - [ ] Set up the RSS feed back,
 - [ ] Find a decent design for the website:
+    - Follow [xvw](https://xvw.lol) suggestion and rely on
+      [Penpot](https://penpot.app/) to create a design first
     - Blog post page
     - Colors
     - Change the principal font as Overpass feels to tight...

diff --git a/static/pages/logging.md b/static/pages/logging.md
@@ -9,6 +9,12 @@ care about it.
 
 ## 2024
 
+## 2024-12-06
+
+Bring back the profile picture in the [about](/about) page. Improve the content
+of the page by adding more information about employers. Add a disclaimer on all
+the pages about opinions.
+
 ### 2024-11-24
 
 Add this logging section. It is still hidden for the public as I do not know

diff --git a/static/templates/base.html b/static/templates/base.html
@@ -1,9 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Maiste.fr</title>
 
     <!-- Main CSS -->
@@ -16,46 +15,57 @@
     <!-- Code Highlighting -->
     <link href="/static/css/code.css" rel="stylesheet" type="text/css" />
     <script src="/static/script/highlight.min.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <!-- Umami -->
-    <script defer src="https://analytics.maiste.fr/script.js"
-        data-website-id="b1e6219d-8044-47d9-9e91-44db862e2732"></script>
+    <script
+      defer
+      src="https://analytics.maiste.fr/script.js"
+      data-website-id="b1e6219d-8044-47d9-9e91-44db862e2732"
+    ></script>
     <!-- End Umami Code -->
 
     <header class="container">
-        <nav>
+      <nav>
         <h2><a href="/">Maiste 🦉</a></h2>
-            <ul>
-                <li><a href="/about">About</a></li>
-                <li><a href="/blog">Blog</a></li>
-                <li><a href="/projects">Projects</a></li>
-                <li><a href="/wiki">Wiki</a></li>
-            </ul>
-        </nav>
-        <hr />
+        <ul>
+          <li><a href="/about">About</a></li>
+          <li><a href="/blog">Blog</a></li>
+          <li><a href="/projects">Projects</a></li>
+          <li><a href="/wiki">Wiki</a></li>
+        </ul>
+      </nav>
+      <hr />
     </header>
     <main class="container">
-        {%- autoescape false -%}
-        {{ yocaml_body }}
-        {%- endautoescape -%}
+      {%- autoescape false -%} {{ yocaml_body }} {%- endautoescape -%}
     </main>
 
     <footer class="container">
-        <hr />
-        <p> Website written proudly with <a href="https://gitlab.com/funkywork/yocaml">Yocaml</a> ♡ This site is part of
-            the
-            <a href="https://ring.muhokama.fun">Muhokama ring</a>
-            (<a href="https://ring.muhokama.fun/u/maiste/pred">Previous</a> - <a
-                href="https://ring.muhokama.fun/u/maiste/succ">Next</a>)
-        </p>
-        <p><a href="https://maiste.fr">Content under this website</a> is written by Etienne "Maiste" Marais and is
-            licensed
-            under <a href="https://creativecommons.org/licenses/by-nc/4.0/?ref=chooser-v1">CC BY-NC 4.0</a></p>
+      <hr />
+      <p>
+        All opinions expressed here are <strong>my own</strong> and do not
+        express the views or opinions of my employer or anyone else but me.
+      </p>
+      <p>
+        <a href="https://maiste.fr">Content under this website</a> is written by
+        Etienne "Maiste" Marais and is licensed under
+        <a href="https://creativecommons.org/licenses/by-nc/4.0/?ref=chooser-v1"
+          >CC BY-NC 4.0</a
+        >
+      </p>
+      <p>
+        Website written proudly with
+        <a href="https://gitlab.com/funkywork/yocaml">Yocaml</a> ♡ This site is
+        part of the
+        <a href="https://ring.muhokama.fun">Muhokama ring</a>
+        (<a href="https://ring.muhokama.fun/u/maiste/pred">Previous</a> -
+        <a href="https://ring.muhokama.fun/u/maiste/succ">Next</a>)
+      </p>
     </footer>
-
-    <script>hljs.highlightAll();</script>
-</body>
-
+    <script>
+      hljs.highlightAll();
+    </script>
+  </body>
 </html>