Move links to header and add contact

Author: S4G4R

resources/public/index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" integrity="sha512-hasIneQUHlh06VNBe7f6ZcHmeRTLIaQWFd43YriJ0UND19bvYRauxthDg8E4eVNPm9bRUhr5JGeqH7FRFXQu5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/style.css"/>
     <title>Casa</title>
   </head>

src/com/sagar/casa/ui/blog.cljc

@@ -39,11 +39,11 @@
                                               %2])
                                  "img"
                                  (as-element
-                                   ;; Center images
-                                   ;; TODO: Fix div cannot be inside p
+                                  ;; Center images
+                                  ;; TODO: Fix div cannot be inside p
                                   [:div {:style {:text-align :center}}
                                    [:img {:src (.-src %1)}]])
-                                  ;; Other elements as they are
+                                 ;; Other elements as they are
                                  (as-element
                                   [(string/lower-case (.-tagName %1))
                                    %2]))

src/com/sagar/casa/ui/header.cljs

@@ -1,5 +1,5 @@
 (ns com.sagar.casa.ui.header
-  (:require ["react-bootstrap" :refer [Container Col Row Navbar Stack]]
+  (:require ["react-bootstrap" :refer [Container Col Row Navbar Stack Nav]]
             [com.sagar.casa.ui.routes :as routes]))
 
 
@@ -19,15 +19,24 @@
               :bg :dark
               :variant :dark}
    [:> Stack {:direction :horizontal :gap 3 :class-name "w-100"}
-    [:> Container {:fluid true}
+    [:> Container {:fluid true :class-name "align-items-center"}
      [:> Row
-      [:> Col
-       [:> (.-Brand Navbar) {:class-name "mx-2 display-6"
+      [:> Col {:class-name "mx-2"}
+       [:> (.-Brand Navbar) {:class-name "display-1"
                              :href routes/home}
-        [:big "Casa 🏠"]]]
+        "Casa 🏠"]
+       [:a {:href routes/blog
+            :style {:text-decoration :none}}
+        "[Blog]"]
+       [:a {:href routes/literature
+            :style {:text-decoration :none}}
+        "[Literature]"]]
       [:> Col {:xs "auto" :class-name "d-none d-sm-block"}
        [:> (.-Text Navbar)
         [:small (str "Made with " \u2665 " using ")]]
        (for [{:keys [index label url]} links]
-         [:a {:href url :target "_blank" :key index}
+         [:a {:href url
+              :target "_blank"
+              :style {:text-decoration :none}
+              :key index}
           [:small "[" label "]"]])]]]]])

src/com/sagar/casa/ui/home.cljs

@@ -5,24 +5,27 @@
 
 (defn Home []
   [:> Container {:data-theme :light
-                 :fluid true
-                 :style {:text-align :center}}
+                 :class-name "align-self-center"
+                 :fluid true}
    [:div {:class-name "pt-3 col-xs-12 col-md-4 mx-auto"}
     [:h1 {:class-name "display-4"} "Hi. I'm Sagar."]
-    [:p "I'm a Backend Developer @ "
+    [:p "I'm a Backend Engineer @ "
      [:a {:href "https://unifize.com" :target "_blank"} "Unifize"]
      " where I'm working on making processes collaborative."]
     [:p "I use this space to "
      [:a {:href "https://addyosmani.com/blog/write-learn/" :target "_blank"}
       "write about the interestings things I learn"] " during my"
      " relaxing evening reading sessions, or cold, dark and rainy night"
      " debugging sessions, and everything in between."]
-    [:> Stack {:class-name "pt-3" :gap 5}
-     [:> Button {:href routes/blog
-                 :variant :dark
-                 :class-name "contrast mx-auto"}
-      "Blog"]
-     [:> Button {:href routes/literature
-                 :variant :dark
-                 :class-name "contrast mx-auto"}
-      "Literature"]]]])
+    [:p "When I'm not writing code, I enjoy going on a walk, doing some"
+     " yoga, playing with my dog or swimming."]
+    [:p "You can reach out to me via the below links."
+     [:> Stack {:style {:font-size "36px"}
+                :direction :horizontal
+                :gap 2}
+      [:a {:href "https://github.com/S4G4R" :target "/_blank"}
+       [:i {:class-name "fa fa-github"}]]
+      [:a {:href "https://linkedin.com/in/sagar-vrajalal" :target "/_blank"}
+       [:i {:class-name "fa fa-linkedin"}]]
+      [:a {:href "mailto:[email protected]"}
+       [:i {:class-name "fa fa-envelope"}]]]]]])