Styling improvements.

bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs

@@ -1,10 +1,9 @@
 (ns com.oly.static-sites.portfolio.page)
 
-
 (defn left-bar []
-  [:div.m-4.text-2xl
+  [:div.m-4.text-4xl
    [:h1.mt-8 [:i.fa-solid.fa-gear.mr-2] "Oliver Marks - Software Engineer"]
-   [:p.mt-8 "Example projects"]])
+   #_[:p.mt-8 "Example projects"]])
 
 (defn right-bar []
   [:div
@@ -22,45 +21,51 @@
     (left-bar)
     ;[:div.grow]
     ]
-   [:p.mt-8 "Software engineer with over 20 years of experience in various languages technology's see below for technologies and projects developed personally and Professionally"]])
+   [:p.mt-8.text-xl
+    {:class "lg:text-2xl"}
+    "Software engineer with over 20 years of experience in various languages technology's see below for technologies and projects developed personally and Professionally"]
+   [:p.mt-8.text-xl
+    {:class "lg:text-2xl"}
+    "Open to new opportunities, full time, part time and contract anything I can work around family life."]])
 
 (defn tile [{:keys [title href direction image description]}]
-  [:div.rounded-lg.mt-8.mb-8.w-full
+  [:div.rounded-lg.mt-4.mb-8.w-full.min-h-32
-   [:a {:href href}
+   [:a {:href href :target "_blank"}
     [:img.rounded-lg.h-24.w-24.md:ml-2.md:mr-2
      {:src "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
       :class (if (= direction "right") "ml-4" "mr-4")
       :align (if (= direction "right") "right" "left")}]
-    [:h3.text-xl:md:text-base title]
+    [:h3.mb-2.text-2xl title]
-    [:p.text-sm description]]])
+    [:p.font-sans.leading-normal.text-2xl {:class "md:text-lg"} description]]])
 
 (defn skills-list [title skills]
   [:div.mb-8.align-top
-   [:h3.m-4.text-2xl title]
+   [:h3.m-4.text-4xl title]
    (into [:ul]
          (mapv (fn skill-item [{:keys [direction icon skill]}]
                  (if (= direction "right")
-                   [:li.m-2.text-xl {:class "md:text-lg"}
+                   [:li.m-2.text-lg {:class "md:text-lg"}
                     [:span [:i.mr-4 {:class (str "devicon-" icon "-plain")}] skill]]
-                   [:li.m-2.text-xl {:class "md:text-base"}
+                   [:li.m-2.text-lg {:class "md:text-lg"}
                     [:span skill [:i.ml-4 {:class (str "devicon-" icon "-plain")}]]]))
                skills))])
 
 (defn shaped-circle
   ([direction w h] (shaped-circle direction w h 0))
-  ([direction w h offset]
+  ([direction w h offset] (shaped-circle direction w h offset "0"))
+  ([direction w h offset top]
    (if (= direction "right")
-     [:div.hidden.right {:class "md:block"}
+     [:div.right #_hidden {:class "md:block"}
-      [:div.ml-8.opacity-50
+      [:div.ml-8.opacity-15.relative
-       {:style {:float "right" :right "0px"
+       {:style {:float "right" :right "0px" :top (str top "px")
                 :width (str w "px") :height (str h "px")
                 :background-color "#666666"
                 :border-radius (str w "px 0px 0px " w "px")
                 :shape-margin "20px";
                 :shape-outside (str "circle(" w "px at " (+ w offset) "px " w "px)")}}]]
-     [:div.hidden.left {:class "md:block"}
+     [:div.left #_hidden {:class "md:block"}
-      [:div.mr-8.opacity-50
+      [:div.mr-8.opacity-15.relative
-       {:style {:float "left"
+       {:style {:float "left" :top (str top "px")
                 :width (str w "px") :height (str h  "px")
                 :background-color "#666666"
                 :border-radius (str "0px " w "px " w "px 0px")
@@ -70,93 +75,112 @@
 (defn dual-column-circle []
   [:section.w-full
    {:class "md:bg-hero-developer"
-    :style {;;:background-image "url(/img/dev-02.png)"
+    :style {:background-image "url(/img/dev-02.png)"
             :background-repeat "no-repeat"
             :background-position "center top"
-            :background-size "800px 800px"}}
+            :background-size "680px 680px"}}
-   [:div.flex.w-full ;.flex-col
+   [:div.flex.w-full
     [:div.relative {:class "w-1/2" :style {:width "50%"}}
      [:div.align-middle.text-right.w-full.h-64
+      
       (shaped-circle "right" 120 240 20)
+      (shaped-circle "right" 230 420 20 "-20")
       (skills-list "Operations"
                    [{:icon "googlecloud" :skill "Google Cloud"}
                     {:icon "digitalocean" :skill "Digitalocean"}
                     {:icon "docker" :skill "Docker"}
-                    {:icon "kubernetes" :skill "Kubernetes"}])]]
+                    {:icon "kubernetes" :skill "Kubernetes"}
+                    {:icon "circleci" :skill "CI"}])]]
     [:div.relative {:class "w-1/2" :style {:width "50%"}}
      [:div.align-middle.relative.text-left.w-full.h-64
-      (shaped-circle "left" 120 240)
+      (shaped-circle "left" 120 240 0)
+      (shaped-circle "left" 230 420 0 "-20")
       (skills-list
        "Development"
        [{:direction "right" :icon "clojure" :skill "Clojure"}
         {:direction "right" :icon "javascript" :skill "Javascript"}
         {:direction "right" :icon "python" :skill "Python"}
         {:direction "right" :icon "c" :skill "C / Arduino"}
-        #_{:direction "right" :icon "sql" :skill "SQL / Datalog"}])]]]
+        {:direction "right" :icon "sqldeveloper" :skill "SQL / Datalog"}])]]]
 
-   [:div.flex.w-full.flex-col.md:flex-row;.mt-48 
+   #_[:div.flex.w-full.flex-col.md:flex-row
     [:div {:class "w-full"}
      [:div.align-middle.relative.text-right.w-full
-      {:style {:top "-60px"}}
+      ;{:style {:top "-60px"}}
-      [:div.invisible {:class "md:visible"}
+      [:div;.invisible {:class "md:visible"}
-       (shaped-circle "right" 225 450)]
+       (shaped-circle "right" 205 430)]]]
-      [:div.flex.flex-col.w-half.md:w-full
-       (tile {:title "GASP Air quality sensor"
-              :direction "right"
-              :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
-              :href "https://gasp.digitaloctave.com"
-              :description "Single page site, which display's data relayed via mqtt from a physical device."})
-       (tile {:title "Image scaling & resizing"
-              :direction "right"
-              :href "https://images.digitaloctave.com/"
-              :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
-              :description "API to upload image's and handle scaling to different sizes, build in clojure."})]]]
 
     [:div {:class "w-full"}
      [:div.align-middle.relative.text-left.w-full
-      {:style {:top "-60px"}}
+      ;{:style {:top "-60px"}}
-      [:div.invisible {:class "md:visible"}
+      [:div;.invisible {:class "md:visible"}
-       (shaped-circle "left" 225 450)]
+       (shaped-circle "left" 205 430)]]]]
-      [:div.flex.flex-col.w-half.md:w-full
-       (tile {:title "GASP Air quality sensor"
-              :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
-              :href "https://gasp.digitaloctave.com"
-              :description "Single page site written in clojurescript, which display's data relayed via mqtt from a physical device built on an esp32."})
-       (tile {:title "theplantscape"
-              :href "https://theplantscape.com"
-              :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
-              :description "Site for designing and planning gardens, uses datalog via xtdb and datascript with front end written in clojurescript and the backend in clojure."})]]]]
 
+
+   [:h2.text-3xl "Personal work"]
+   [:div.grid.grid-cols-1.gap-4
+    {:class "md:grid-cols-2"}
+    [:div.align-middle.relative.text-left.w-full
+     (tile {:title "theplantscape"
+            :href "https://theplantscape.com"
+            :direction "right"
+            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
+            :description "Site for designing and planning gardens, uses datalog via xtdb and datascript with front end written in clojurescript and the backend in clojure."})]
+
+    [:div.align-middle.relative.text-left.w-full
+     (tile {:title "do-img image scaling & sizing API"
+            :direction "left"
+            :href "https://img.digitaloctave.com/api/"
+            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
+            :description "API to upload image's and handle scaling to different sizes, build in clojure."})]
+
+    [:div.align-middle.relative.text-left.w-full
+     (tile {:title "Clojure Demo's"
+            :direction "right"
+            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
+            :href "https://clojure-demos.digitaloctave.com"
+            :description "Site used to teach the language and Eco system and various DSL's to colleagues"})]
+
+    [:div.align-middle.relative.text-left.w-full
+     (tile {:title "GASP Air quality sensor"
+            :direction "left"
+            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
+            :href "https://gasp.digitaloctave.com"
+            :description "Single page site, which display's data relayed via mqtt from a physical device."})]
+
+    ]
+
+
+   [:h2.text-3xl "Professional work"]
    [:div.flex.flex-col
     (tile {:title "Compare & Recycle"
            :direction "right"
            :href "https://www.compareandrecycle.co.uk/"
            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
            :description "Software for comparing and offering prices on your old tech, user facing and merchant facing applications with a mix of Python Django Clojure & ClojureScript backed by postgres, with some datalog for the merchant applciation."})
+
     (tile {:title "Wolsely - Stock management system"
            :direction "right"
            :href "https://www.wolseley.co.uk/"
            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
-           :description "Python django application for reporting & managing stock written in python using the django framework backed by a postgres database."})
+           :description "Python application for reporting & managing stock using the Django framework backed by a postgres database."})
     (tile {:title "Taylor & Francis - Stock Management system"
            :direction "right"
            :href "https://taylorandfrancis.com/"
            :image "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"
-           :description "PHP Application for managing book stock backed by oracle with a lot of psql queries."})]])
+           :description "PHP Application for managing book stock backed by oracle a oracle database with a lot of psql queries."})]])
-
-
 
 (defn footer-blocks [blocks]
-  (into [:div.md:mt-8.w-full]
+  (into [:div.w-full]
         (mapv (fn footer-block [{:keys [title children]}]
-                [:div.ml-8.w-full [:h2.mb-6.text-sm.font-semibold.text-gray-900.uppercase.dark title]
+                [:div.ml-8.w-full [:h2.mb-4.text-sm.font-semibold.text-gray-900.uppercase.dark title]
                  (into      [:ul.text-gray-500.dark:text-gray-800.font-medium]
                             (mapv (fn footer-link [{:keys [title link]}]
-                                    [:li.mb-4 [:a.hover:underline {:href link} title]]) children))])
+                                    [:li.mb-2 [:a.hover:underline {:href link} title]]) children))])
               blocks)))
 
 (defn page-footer []
-  [:section.md:p-8.flex.flex-row
+  [:section.mt-4.flex.flex-row
    [:img.rounded-full.w-24.h-24 {:src "https://img.theplantscape.com/api/image/p/missing.jpg?p=medium"}]
    (footer-blocks [{:title "Social / Contact Me"
                     :children [{:link "https://matrix.to/#/#theplantscape.com:matrix.org" :title "Chat"}

development/resources/public/css/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
+1. Use the user's configured `mono` font-family by default.
-2. Correct the odd `em` font sizing in all browsers.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -614,12 +624,12 @@ video {
   margin-bottom: 3rem;
 }
 
-.mb-4 {
+.mb-2 {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
-.mb-6 {
+.mb-4 {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .mb-8 {
@@ -646,6 +656,10 @@ video {
   margin-right: 2rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }
@@ -690,6 +704,10 @@ video {
   height: 16rem;
 }
 
+.min-h-32 {
+  min-height: 8rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -727,6 +745,10 @@ video {
   resize: both;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -735,6 +757,10 @@ video {
   flex-direction: column;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -772,14 +798,6 @@ video {
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
-.p-8 {
-  padding: 2rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -804,11 +822,25 @@ video {
   vertical-align: middle;
 }
 
+.font-sans {
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -819,6 +851,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -840,6 +877,10 @@ video {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -854,8 +895,8 @@ video {
   text-decoration-line: underline;
 }
 
-.opacity-50 {
+.opacity-15 {
-  opacity: 0.5;
+  opacity: 0.15;
 }
 
 .shadow {
@@ -899,43 +940,19 @@ video {
   text-decoration-line: underline;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-}
-
 @media (min-width: 768px) {
   .md\:visible {
     visibility: visible;
   }
 
-  .md\:m-8 {
-    margin: 2rem;
-  }
-
   .md\:ml-2 {
     margin-left: 0.5rem;
   }
 
-  .md\:ml-8 {
-    margin-left: 2rem;
-  }
-
   .md\:mr-2 {
     margin-right: 0.5rem;
   }
 
-  .md\:mr-8 {
-    margin-right: 2rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -944,8 +961,8 @@ video {
     width: 80%;
   }
 
-  .md\:w-full {
+  .md\:grid-cols-2 {
-    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .md\:flex-row {
@@ -956,13 +973,27 @@ video {
     background-image: url('/img/dev-02.png');
   }
 
-  .md\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .md\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:text-gray-800 {
+    --tw-text-opacity: 1;
+    color: rgb(31 41 55 / var(--tw-text-opacity));
+  }
 }

development/resources/public/index.html

@@ -4,9 +4,10 @@
     <title>Personal portfolio for olymk2</title>
     <meta charset="utf-8" />
     <meta content="#da532c" name="msapplication-TileColor" />
+    <meta name="viewport" content="width=device-width, initial-scale=0.5">
     <meta content="#ffffff" name="theme-color" />
     <link
-      href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
+      href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/devicon.min.css"
       rel="stylesheet"
       type="text/css"
     />
@@ -23,7 +24,7 @@
     />
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" style="text-size-adjust: none;"></div>
     <script src="/cljs-out/base.js" type="application/javascript"></script>
     <script src="/cljs-out/app.js" type="application/javascript"></script>
   </body>

projects/.keep

@@ -1 +1 @@
-
+

readme.org

@@ -1,5 +1,6 @@
+clj -Mshadow-cljs-run watch app
+
 npx shadow-cljs server
 
 npx tailwindcss -i ./development/resources/public/css/tailwind-styles.css -o ./development/resources/public/css/styles.css --watch
 
-clj -Mshadow-cljs watch app

shadow-cljs.edn

@@ -9,7 +9,7 @@
  ;; "../../components/svg-generation/src"
  ;; "../../components/local-store/src"]
  :builds {:app {:output-dir "development/resources/public/cljs-out"
-                :asset-path "cljs-out"
+                ;:asset-path "."
                 :target :browser
                 :compiler-options {:infer-externs :auto :output-feature-set :es6}
                 :modules {:base {:entries []}