diff --git a/development/resources/public/index.html b/development/resources/public/index.html index 4461db0..a8718e5 100644 --- a/development/resources/public/index.html +++ b/development/resources/public/index.html @@ -24,6 +24,7 @@
- + + diff --git a/development/src/design.cljs b/development/src/design.cljs index fc9360d..b37a521 100644 --- a/development/src/design.cljs +++ b/development/src/design.cljs @@ -1,183 +1,25 @@ (ns design (:require [portfolio.ui :as ui] [portfolio.dumdom :as d] - [portfolio.dom :as r])) - -(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.p-8 - [:div.p-4.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/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/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/missing.jpg?p=medium" - :description "API to upload image's and handle scaling to different sizes"})]]] - - [: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/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 "theplantscape" - :href "https://theplantscape.com" - :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium" - :description "Site for designing and planning gardens"})]]]] - - [:div.flex.flex-col - (tile {:title "Compare & Recycle" - :direction "right" - :href "https://www.compareandrecycle.co.uk/" - :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium" - :description "Single page site, which display's data relayed via mqtt from a physical device."}) - (tile {:title "Wolsely - Stock management system" - :direction "right" - :href "https://www.wolseley.co.uk/" - :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium" - :description "Single page site, which display's data relayed via mqtt from a physical device."}) - (tile {:title "Taylor & Francis - Stock Management system" - :direction "right" - :href "https://taylorandfrancis.com/" - :image "https://img.theplantscape.com/api/image/missing.jpg?p=medium" - :description "Single page site, which display's data relayed via mqtt from a physical device."})]]) + [portfolio.dom :as r] + [com.oly.static-sites.portfolio.core :as c])) (d/defscene circle - dual-column-circle) - -(defn footer-blocks [blocks] - (into [:div.md:m-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:text-white title] - (into [:ul.text-gray-500.dark:text-gray-400.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:m-8.flex.flex-row - [:img.rounded-full.w-24.h-24 {:src "https://img.theplantscape.com/api/image/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"}]}])]) + c/dual-column-circle) (d/defscene header - page-header) + c/page-header) (d/defscene footer - page-footer) + c/page-footer) (d/defscene page [:div.bg-slate-200.w-full [:div.w-full.m-auto.pl-4.pr-4 {:class "md:w-4/5"} - (page-header) - (dual-column-circle) - (split-bar) - (page-footer)]]) + (c/page-header) + (c/dual-column-circle) + (c/split-bar) + (c/page-footer)]]) (defn launch [] (ui/start! diff --git a/shadow-cljs.edn b/shadow-cljs.edn index 9d43655..299cdc2 100644 --- a/shadow-cljs.edn +++ b/shadow-cljs.edn @@ -12,7 +12,9 @@ :asset-path "cljs-out" :target :browser :compiler-options {:infer-externs :auto :output-feature-set :es6} - :modules {:base {:entries [#_design]} + :modules {:base {:entries []} + :app {:init-fn design/launch + :depends-on #{:base}} :portfolio {:init-fn design/launch :depends-on #{:base}} }