Improve portfolio project descriptions

Fix typos and links. Improve CSS. Fix home page navbar not opening on browser back button.

resources/public/css/style.css

@@ -170,12 +170,12 @@ a {
 ul {
     list-style-type: disc;
     list-style-position: inside;
-    padding: 0.5rem 0;
+    padding-bottom: 1rem;
 }
 
 ol {
     list-style-position: inside;
-    padding: 0.5rem 0;
+    padding-bottom: 1rem;
 }
 
 li {
@@ -378,7 +378,7 @@ header .hidden {
 }
 
 header img:hover,
-svg:hover,
+header svg:hover,
 a:hover {
     animation: var(--pulse-animation);
 }
@@ -929,10 +929,6 @@ section .post-body .info {
     }
 }
 
-.post-body:hover img {
-    animation: var(--pulse-animation);
-}
-
 section button {
     margin: 0.5rem;
 }

src/loicb/client/core/db/event.cljs

@@ -58,7 +58,7 @@
    (update db :nav.main/open? not)))
 
 (rf/reg-event-db
- :evt.nav/close-navbar
- (fn [db _]
-   (assoc db :nav.main/open? false)))
+ :evt.nav/set-navbar
+ (fn [db [_ open?]]
+   (assoc db :nav.main/open? open?)))
 

src/loicb/client/core/dom/common/link.cljs

@@ -9,7 +9,7 @@
             :or [with-reitit? true]}]
   [:a {:class                    (if mobile? "mobile-only" "browser-only")
        :href                     (rfe/href page-name {:post-id post-id})
-       :on-click                 #(rf/dispatch [:evt.nav/close-navbar])
+       :on-click                 #(rf/dispatch [:evt.nav/set-navbar false])
        :key                      (str (when mobile? "phone-") (or post-id page-name))
        :data-reitit-handle-click with-reitit?}
    content])

src/loicb/client/core/dom/header.cljs

@@ -119,6 +119,7 @@
                                                                                       :fragment ?fragment}}])]
                      (and (= :home (get view-info '?name))
                           (not (get view-info '?fragment))))]
+    (when home-page? (rf/dispatch [:evt.nav/set-navbar true])) ;; open navbar if home page
     [:header.container
      (when nav-open? {:class "full-screen"})
      [top-browser nav-open? home-page?]

src/loicb/server/content/about/aboutme.md

@@ -61,11 +61,11 @@
 ### ICTS             
 - **Back-End**: Clojure, Python, Java, PHP, Node.js, C, C++, C#
 - **HTTP**: Clojure Ring, Clojure Aleph
-- **Front-End**: ClojureScript, HTML, CSS, JS, C#, Re-frame/Reagent (React), figwheel-main
+- **Front-End**: ClojureScript, HTML, CSS, JS, C#, Reagent (React), Re-frame, figwheel-main
 - **Database**: MySQL, PostgreSQL, Datomic, Datalevin, Cassandra
-- **Mobile**: React Native, figwheel-main
+- **Mobile**: Reagent React Native, figwheel-main
 - **Cloud**: AWS, Vercel, Netlify
-- **Containers**: Docker, k8s, EKS
+- **Containers**: Docker, k8s, AWS EKS
 - **Event Streaming**: Kafka
 - **Proj Management**: GitHub, Gitlab, Bitbucket, Trello, Jira, Slack, Jenkins
 

src/loicb/server/content/portfolio/blog-django.md

@@ -10,17 +10,23 @@
                       :src-dark "/assets/loic-blog-logo.png"
                       :alt "Logo referencing Aperture Science"}}
 +++
-I developed a tech blog in python using the Django framework. Thus, it is Server-Side Rendered.
+I developed a tech blog in **python** using the `Django` framework. Thus, it is Server-Side Rendered.
 
-The blog is deployed on AWS Beanstalk, the static files are served from an AWS S3 bucket, and the production data is stored in an AWS RDS Postgres database.
+The blog was deployed on AWS `Beanstalk`, the static files were served from an AWS `S3` bucket, and the production data was stored in an AWS `RDS Postgres` database.
 
-It uses HTMX for the search bar.
+It used `HTMX` for the search bar.
+
+After the AWS free tier expired, I moved the tech blog to the ClojureScript SPA.
 +++
-## Stack
+## Rational
+
+I developed a tech blog in **python** using the `Django` framework. Thus, it is Server-Side Rendered.
 
-The blog is written in `python` and uses the web framework `Django`.
+The blog was deployed on AWS `Beanstalk`, the static files were served from an AWS `S3` bucket, and the production data was stored in an AWS `RDS Postgres` database.
 
-It is deployed in AWS Elastic Beanstalk, the production data is stored in an AWS RDS PostgreSQL database and the static files are served from an AWS S3 bucket.
+It used `HTMX` for the search bar.
+
+After the AWS free tier expired, I moved the tech blog to the ClojureScript SPA.
 
 ## Features
 
@@ -31,7 +37,7 @@ The different features of the blog are the following:
 - There is syntax highlighting for the code blocks
 - The UI supports light/dark mode toggle
 - Posts can be sorted in different categories (such as `clojure`, `python` for instance)
-- Users can search a post using the search bar.
+- Users can search a post using the search bar that display the matching posts as they type in the search bar.
 
 ## CI/CD
 
@@ -75,4 +81,6 @@ However I moved the blog content to my clojure SPA instead because after my AWS
 
 ## Learn more
 
+I wrote an article on how I deployed the Django app in AWS (link at the top of the page).
+
 Have a look at the repo [README](https://github.com/skydread1/blog/blob/master/README.md) for more information.

src/loicb/server/content/portfolio/flybot-card-games.md

@@ -11,19 +11,19 @@
                       :src-dark "https://www.flybot.sg/assets/flybot-logo.png"
                       :alt "Flybot Logo"}}
 +++
-At Flybot, I had the opportunity to create popular Asian Card Games APIs in `Clojure`.
+At Flybot, I had the opportunity to create popular Asian Card Games APIs in **Clojure**.
 
-I developed the backend of games such as Pǎo Dé Kuài (跑得快) and Big two (锄大地) which are climbing card games.
+I developed the backend of games such as *Pǎo Dé Kuài* (跑得快) and *Big two* (锄大地) which are climbing card games.
 
-I also worked on a Library we called MetaGame that allows us to compose several `Pǎo Dé Kuài` or `Big two` games (or a mix of both) in tournaments for instance.
+I also worked on a Library we called **MetaGame** that allows us to compose several `Pǎo Dé Kuài` or `Big two` games (or a mix of both). By composing games, I mean to play a few rounds of them up to a certain score for instance. This composition is generic enough to even allow us to make tournaments out of the underlying games.
 +++
 ## Rational
 
-At Flybot, I had the opportunity to create popular Asian Card Games APIs in `Clojure`.
+At Flybot, I had the opportunity to create popular Asian Card Games APIs in **Clojure**.
 
-I developed the backend of games such as Pǎo Dé Kuài (跑得快) and Big two (锄大地) which are climbing card games.
+I developed the backend of games such as *Pǎo Dé Kuài* (跑得快) and *Big two* (锄大地) which are climbing card games.
 
-I also worked on a Library we called MetaGame that allows us to compose several `Pǎo Dé Kuài` or `Big two` games (or a mix of both) in tournaments for instance.
+I also worked on a Library we called **MetaGame** that allows us to compose several `Pǎo Dé Kuài` or `Big two` games (or a mix of both) in tournaments for instance.
 
 The repositories are closed-source because private to Flybot Pte. Ltd.
 
@@ -33,9 +33,9 @@ Since we use Clojure, the game state can be represented as pure edn data leverag
 
 There is no need for any atoms, agent or vars as the new state is just another Clojure pure data structure.
 
-This allows us to represent the game setup and rules as clojure pure data as well so the game is easy to customize.
+This allows us to represent the game setup and rules as pure Clojure data as well so the game is easy to customize.
 
-For non-clojure developers, you can imagine that you could represent your entire game state using a simple JSON file. In clojure, we use the EDN format (which has a similar syntax to JSON).
+For non-clojure developers, you can imagine that you could represent your entire game state using a simple JSON file. In clojure, we use the [Extensible Data Notation](https://github.com/edn-format/edn)(EDN) format (which has a similar syntax to JSON).
 
 ## Data validation and Generation
 
@@ -49,8 +49,7 @@ Using the libraries above, I design an integration test suite that can run hundr
 
 It is more common to see interop with JavaScript for ClojureScript. However, in our case, we want our Clojure codebase to be run in the game engin Unity, so a dotnet environment.
 
-Is is now possible to compile a Clojure project to dotnet assemblies and make it work in Unity using the [nasser/magic](https://github.com/nasser/magic) compiler.
-([clojure-clr](https://github.com/clojure/clojure-clr), which is the default clojure compiler to dotnet cannot work in Unity because it relies on the DLR.)
+Is is now possible to compile a Clojure project to dotnet assemblies and make it work in Unity using the [nasser/magic](https://github.com/nasser/magic) compiler. [clojure-clr](https://github.com/clojure/clojure-clr), which is the default clojure compiler to dotnet, cannot work in Unity because it relies on the DLR.
 
 We use the reader conditionals in `.cljc` files to handle JVM/CLR interop in our project so we can run and test our Clojure project in both environments.
 

src/loicb/server/content/portfolio/flybot-mobile-app.md

@@ -12,15 +12,15 @@
                       :src-dark "https://www.flybot.sg/assets/flybot-logo.png"
                       :alt "Flybot Logo"}}
 +++
-At Flybot, I developed a mobile app using `ClojureScript` with `React Native` using `Figwheel` and `Reagent React Native` (to interact with reagent in ClojureScript).
+At Flybot, I developed a mobile app using **ClojureScript** with `React Native` using `Figwheel` and `Reagent React Native` (to interact with reagent in ClojureScript).
 
 The code for the mobile app resides in the same repo as the server and the web client of the [flybot.sg](https://www.flybot.sg/) website.
 
-The goal of the mobile app was to allow employees to write blog posts using an app instead of the web UI and also to evaluate if our ClojureScript frontend stack could reuse most of the `re-frame` logic in both the mobile and web UIs (which it does).
+The goal of the mobile app was to allow employees to write blog posts using an app instead of the web UI and also to evaluate if our ClojureScript frontend stack could reuse most of the `re-frame` logic in both the mobile and web UIs.
 +++
 ## Rational
 
-The goal is to have a mobile app targeting both iOS and Android, written in ClojureScript, which can reuse most of our web frontend logic.
+The goal is to have a mobile app targeting both iOS and Android, written in **ClojureScript**, which can reuse most of our web frontend logic.
 
 To do so, I used React Native for the following reasons:
 
@@ -41,7 +41,7 @@ So the mobile app frontend resides in the same repo as the web frontend and the
 
 The mono-repo structure is as followed:
 
-```clojure
+```
 ├── client
 │   ├── common
 │   │   ├── src
@@ -97,4 +97,6 @@ The app has not been deployed on any Store yet.
 
 ## Learn more
 
-Feel free to visit [flybot.sg](https://www.flybot.sg/) and especially the [blog](https://www.flybot.sg/blog).
+You can learn more about how the mobile app was setup in the article linked at the top of the page.
+
+Also, feel free to visit [flybot.sg](https://www.flybot.sg/) and especially the [blog](https://www.flybot.sg/blog).

src/loicb/server/content/portfolio/flybot-website.md

@@ -5,7 +5,7 @@
        :repos [["Flybot" "https://github.com/skydread1/flybot.sg"]]
        :articles [["Deploy full stack Clojure website to AWS" "../blog/deploy-clj-app-to-aws"]
                   ["Lasagna-pull applied to flybot.sg" "../blog/lasagna-pull-applied-to-flybot"]
-                  ["Lasagna Pull: Precisely select from deep nested data" "../blog/lasagna-pull"]
+                  ["Fun-Map applied to flybot.sg" "../blog/fun-map-applied-to-flybot"]
                   ["Clojure Mono Repo example : server + 2 clients" "../blog/clojure-mono-repo"]]
        :title "Flybot Website"
        :tags ["Clojure" "ClojureScript" "Figwheel" "Re-Frame" "Malli" "Lasagna-pull" "Fun-map" "Datalevin" "Reitit"]
@@ -14,13 +14,13 @@
                       :src-dark "https://www.flybot.sg/assets/flybot-logo.png"
                       :alt "Flybot Logo"}}
 +++
-[flybot.sg](https://www.flybot.sg/) is an open-source full-stack Clojure web-app that allows company’s employees to write posts to showcase their open-source libraries, their contributions and all technical knowledge that could interest the functional programming community. HRs can also post job offers. Admins can edit any piece of content in any pages as the whole content can be written in Markdown.
+[flybot.sg](https://www.flybot.sg/) is an open-source full-stack **Clojure** web-app that allows company’s employees to write posts to showcase their open-source libraries, their contributions and all technical knowledge that could interest the functional programming community. HRs can also post job offers. Admins can edit any piece of content in any pages as the whole content can be written in Markdown.
 
 The purpose of this project was to demonstrate how the `lasagna stack` ([flybot-sg/lasagna-pull](https://github.com/flybot-sg/lasagna-pull) and [robertluo/fun-map](https://github.com/robertluo/fun-map)) could ease the web development experience for any Clojure developers.
 +++
 ## Rational
 
-[flybot.sg](https://www.flybot.sg/) is an open-source full-stack Clojure web-app that allows company’s employees to write posts to showcase their open-source libraries, their contributions and all technical knowledge that could interest the functional programming community. HRs can also post job offers. Admins can edit any piece of content in any pages as the whole content can be written in Markdown.
+[flybot.sg](https://www.flybot.sg/) is an open-source full-stack **Clojure** web-app that allows company’s employees to write posts to showcase their open-source libraries, their contributions and all technical knowledge that could interest the functional programming community. HRs can also post job offers. Admins can edit any piece of content in any pages as the whole content can be written in Markdown.
 
 The purpose of this project was to demonstrate how the "lasagna stack" ([flybot-sg/lasagna-pull](https://github.com/flybot-sg/lasagna-pull) and [robertluo/fun-map](https://github.com/robertluo/fun-map)) could ease the web development experience for any Clojure developers.
 
@@ -61,7 +61,7 @@ So the web app frontend resides in the same repo as the mobile frontend and the
 
 The mono-repo structure is as followed:
 
-```clojure
+```
 ├── client
 │   ├── common
 │   │   ├── src
@@ -90,7 +90,7 @@ The mono-repo structure is as followed:
 │       └── flybot.server
 ```
 
-You can read more about it in my article: [Clojure Mono Repo example : server + 2 clients](../blog/clojure-mono-repo).
+You can read more about it in my article: [Clojure Mono Repo example : server + 2 clients](https://www.loicblanchard.me/blog/clojure-mono-repo).
 
 ## Features
 
@@ -124,9 +124,9 @@ Furthermore, [lasagna-pull](https://github.com/flybot-sg/lasagna-pull) can accep
 - [fun-map](https://github.com/robertluo/fun-map) allows us to define a system and perform associative dependency injections.
 - [lasagna-pull](https://github.com/flybot-sg/lasagna-pull) makes selecting data in nested structure more intuitive via a pattern that describes the data to be pulled following the shape of the data.
 
-I wrote articles about how these 2 libraries benefit web development and design in my tech blog:
-- [Lasagna-pull Pattern applied to flybot.sg backend](../blog/lasagna-pull-applied-to-flybot)
-- [Pull Pattern: Query in deep nested data structure](../blog/lasagna-pull)
+Learn more about how these 2 libraries enhanced the design of the flybot' website in the following articles:
+- [Lasagna-pull applied to flybot.sg](../blog/lasagna-pull-applied-to-flybot)
+- [Fun-Map applied to flybot.sg](../blog/fun-map-applied-to-flybot)
 
 ## CI/CD
 
@@ -150,7 +150,7 @@ You can read more about how I deployed the app to AWS in this article: [How to d
 
 ## Hot reloading
 
-[figwheel-main](https://github.com/bhauman/figwheel-main) allows us to do hot reloading when a file is saved and provide clj/cljs REPL to print at anytime the re-frame DB for instant feedback. It also allow us to generate an optimized js bundle from the cljs files. The configuration parameters are very well thought and the library makes the development experience a bliss. Figwheel also allows us to run our own ring server by providing a ring-handler in the config. This feature works very well with our fun-map system.
+[figwheel-main](https://github.com/bhauman/figwheel-main) allows us to do hot reloading when a file is saved and provide clj/cljs REPL to print at anytime the re-frame DB for instant feedback. It also allow us to generate an optimized js bundle from the cljs files. The configuration parameters are very well thought and the library makes the development experience a bliss. Figwheel also allows us to run our own ring server by providing a ring-handler in the config. This feature works very well with our `fun-map` system.
 
 ## Learn more