Split into mani app and portfolio rendering.

bases/portfolio/deps.edn

@@ -0,0 +1,4 @@
+{:paths ["src" "resources"]
+ :deps {cjohansen/dumdom {:mvn/version "2023.11.06"}}
+ :aliases {:test {:extra-paths ["test"]
+                  :extra-deps {}}}}

bases/portfolio/resources/portfolio/.keep

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,16 @@
+(ns com.oly.static-sites.portfolio.core
+  (:require [dumdom.core :as dumdom]
+            [com.oly.static-sites.portfolio.page :as c]))
+
+(defn launch
+  "Site entry point"
+  []
+  (dumdom/render
+   [:div.bg-slate-200.w-full
+    [:div.w-full.m-auto.pl-4.pr-4 {:class "md:w-4/5"}
+     (c/page-header)
+     (c/dual-column-circle)
+     (c/split-bar)
+     (c/page-footer)]]
+   (js/document.getElementById "app")))
+

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

@@ -0,0 +1,163 @@
+(ns com.oly.static-sites.portfolio.page)
+
+
+(defn left-bar []
+  [:div.m-4.text-2xl
+   [:h1.mt-8 [:i.fa-solid.fa-gear.mr-2] "Oliver Marks - Software Engineer"]
+   [:p.mt-8 "Example projects"]])
+
+(defn right-bar []
+  [:div
+   [:div.skew-x-12.bg-slate-400.m-4
+    [:ul.flex [:li.m-2 "item 1"] [:li.m-2 "item 2"] [:li.m-2 "item 3"]]]])
+
+(defn split-bar []
+  [:div.w-full
+   [:div.border-t-4.border-slate-900.w-full]])
+
+(defn page-header []
+  [:header.mb-12
+   [:div.flex.flex-col
+    ;;(right-bar)
+    (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"]])
+
+(defn tile [{:keys [title href direction image description]}]
+  [:div.rounded-lg.mt-8.mb-8.w-full
+   [:a {:href href}
+    [: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]
+    [:p.text-sm description]]])
+
+(defn skills-list [title skills]
+  [:div.mb-8.align-top
+   [:h3.m-4.text-2xl title]
+   (into [:ul]
+         (mapv (fn skill-item [{:keys [direction icon skill]}]
+                 (if (= direction "right")
+                   [:li.m-2.text-xl {:class "md:text-lg"}
+                    [:span [:i.mr-4 {:class (str "devicon-" icon "-plain")}] skill]]
+                   [:li.m-2.text-xl {:class "md:text-base"}
+                    [: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]
+   (if (= direction "right")
+     [:div.hidden.right {:class "md:block"}
+      [:div.ml-8.opacity-50
+       {:style {:float "right" :right "0px"
+                :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.mr-8.opacity-50
+       {:style {:float "left"
+                :width (str w "px") :height (str h  "px")
+                :background-color "#666666"
+                :border-radius (str "0px " w "px " w "px 0px")
+                :shape-margin "20px";
+                :shape-outside (str "circle(" w "px at 0px " w "px)")}}]])))
+
+(defn dual-column-circle []
+  [:section.w-full
+   {:class "md:bg-hero-developer"
+    :style {;;:background-image "url(/img/dev-02.png)"
+            :background-repeat "no-repeat"
+            :background-position "center top"
+            :background-size "800px 800px"}}
+   [:div.flex.w-full ;.flex-col
+    [:div.relative {:class "w-1/2" :style {:width "50%"}}
+     [:div.align-middle.text-right.w-full.h-64
+      (shaped-circle "right" 120 240 20)
+      (skills-list "Operations"
+                   [{:icon "googlecloud" :skill "Google Cloud"}
+                    {:icon "digitalocean" :skill "Digitalocean"}
+                    {:icon "docker" :skill "Docker"}
+                    {:icon "kubernetes" :skill "Kubernetes"}])]]
+    [:div.relative {:class "w-1/2" :style {:width "50%"}}
+     [:div.align-middle.relative.text-left.w-full.h-64
+      (shaped-circle "left" 120 240)
+      (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"}])]]]
+
+   [:div.flex.w-full.flex-col.md:flex-row;.mt-48 
+    [:div {:class "w-full"}
+     [:div.align-middle.relative.text-right.w-full
+      {:style {:top "-60px"}}
+      [:div.invisible {:class "md:visible"}
+       (shaped-circle "right" 225 450)]
+      [: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"}}
+      [:div.invisible {:class "md:visible"}
+       (shaped-circle "left" 225 450)]
+      [: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."})]]]]
+
+   [: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."})
+    (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."})]])
+
+
+
+(defn footer-blocks [blocks]
+  (into [:div.md:mt-8.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]
+                 (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))])
+              blocks)))
+
+(defn page-footer []
+  [:section.md:p-8.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"}
+                               {:link "https://fo.llow.social/u/olymk2@mastodon.social" :title "Masterdon"}]}])])

bases/portfolio/test/com/oly/static_sites/portfolio/core_test.clj

@@ -0,0 +1,6 @@
+(ns com.oly.static-sites.portfolio.core-test
+  (:require [clojure.test :as test :refer :all]
+            [com.oly.static-sites.portfolio.core :as core]))
+
+(deftest dummy-test
+  (is (= 1 1)))

deps.edn

@@ -1,6 +1,7 @@
-{:paths ["development/src"]
+{:paths ["development/src" "bases/portfolio/src"]
- :deps {no.cjohansen/portfolio {:mvn/version "2023.07.15"}}
+ :deps {cjohansen/dumdom {:mvn/version "2023.11.06"}
- :aliases  {:dev {:extra-paths ["development/src" ]
+        no.cjohansen/portfolio {:mvn/version "2023.07.15"}}
+ :aliases  {:dev {:extra-paths ["development/src" "bases/portfolio/src" ]
                   :extra-deps {org.clojure/clojure {:mvn/version "1.10.3"}
                                org.clojure/tools.deps.alpha {:mvn/version "0.12.1003"}
 
@@ -9,7 +10,7 @@
                                ;; dev libraries
                                thheller/shadow-cljs {:mvn/version "2.25.2"}
                                refactor-nrepl/refactor-nrepl {:mvn/version "3.9.0"}
-                               cider/cider-nrepl {:mvn/version "0.41.0"}
+                               cider/cider-nrepl {:mvn/version "0.43.1"}
                                no.cjohansen/portfolio {:mvn/version "2023.07.15"}
                                djblue/portal {:mvn/version "0.48.0"}}}
 

development/resources/public/index.html

@@ -25,6 +25,6 @@
   <body>
     <div id="app"></div>
     <script src="/cljs-out/base.js" type="application/javascript"></script>
-    <script src="/cljs-out/main.js" type="application/javascript"></script>
+    <script src="/cljs-out/app.js" type="application/javascript"></script>
   </body>
 </html>

development/resources/public/portfolio.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Personal portfolio for olymk2</title>
+    <meta charset="utf-8" />
+    <meta content="#da532c" name="msapplication-TileColor" />
+    <meta content="#ffffff" name="theme-color" />
+    <link
+      href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="./css/styles.css" type="text/css" />
+    <meta content="Personal portfolio" property="og:title" />
+    <meta
+      content="Portfolio of projects worked on past to present"
+      property="og:description"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/cljs-out/base.js" type="application/javascript"></script>
+    <script src="/cljs-out/portfolio.js" type="application/javascript"></script>
+  </body>
+</html>

development/src/design.cljs

@@ -2,9 +2,9 @@
   (:require [portfolio.ui :as ui]
             [portfolio.dumdom :as d]
             [portfolio.dom :as r]
-            [com.oly.static-sites.portfolio.core :as c]))
+            [com.oly.static-sites.portfolio.page :as c]))
 
-(d/defscene circle
+(d/defscene circle-flow
   c/dual-column-circle)
 
 (d/defscene header

package.json

@@ -26,6 +26,7 @@
         "@sentry/tracing": "^6.19.7",
         "axe-core": "4.7.0",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "snabbdom": "3.5.1"
     }
 }

shadow-cljs.edn

@@ -2,19 +2,19 @@
  :dev-http {8080 ["development/resources/public/" "classpath:public"]}
  ;:nrepl {:middleware [refactor-nrepl.middleware/wrap-refactor]}
  :nrepl {:middleware [refactor-nrepl.middleware/wrap-refactor]}
- :source ["devlopment/src"] ;;"src"
+ :source ["devlopment/src" "bases/portfolio/src"] ;;"src"
- ;;          "../../components/web-ui/src"
+ ;; "../../components/web-ui/src"
- ;;          "../../components/web-api/src"
+ ;; "../../components/web-api/src"
- ;;          "../../components/polyculture/src"
+ ;; "../../components/polyculture/src"
- ;;          "../../components/svg-generation/src"
+ ;; "../../components/svg-generation/src"
- ;;          "../../components/local-store/src"]
+ ;; "../../components/local-store/src"]
  :builds {:app {:output-dir "development/resources/public/cljs-out"
                 :asset-path "cljs-out"
                 :target :browser
                 :compiler-options {:infer-externs :auto :output-feature-set :es6}
                 :modules {:base {:entries []}
-                          :app {:init-fn design/launch
+                          :app {:init-fn com.oly.static-sites.portfolio.core/launch
-                                      :depends-on #{:base}}
+                                :depends-on #{:base}}
                           :portfolio {:init-fn design/launch
                                       :depends-on #{:base}}
                           }