oly
/
static-sites
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
static-sites/bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs

199 lines
8.9 KiB
Clojure
Raw Blame History

(ns com.oly.static-sites.portfolio.page)
(defn left-bar []
[:div.m-4.text-4xl
[: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.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-4.mb-8.w-full.min-h-40
[:a {:href href :target "_blank"}
[:img.object-cover.rounded-lg.h-40.w-48.md:ml-2.md:mr-2
{:src (str image "?p=h-96")
:class (if (= direction "right") "ml-4" "mr-4")
:align (if (= direction "right") "right" "left")}]
[:h3.mb-2.text-2xl title]
[: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-4xl title]
(into [:ul]
(mapv (fn skill-item [{:keys [direction icon skill]}]
(if (= direction "right")
[:li.m-2.text-lg {:class "md:text-lg"}
[:span [:i.mr-4 {:class (str "devicon-" icon "-plain")}] skill]]
[: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] (shaped-circle direction w h offset "0"))
([direction w h offset top]
(if (= direction "right")
[:div.right #_hidden {:class "md:block"}
[:div.ml-8.opacity-15.relative
{: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.left #_hidden {:class "md:block"}
[:div.mr-8.opacity-15.relative
{: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")
: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 "right top"
:background-size "680px 680px"}}
[:div.flex.w-full
[:div.flex-1]
[:div.relative ;.flex-none ;{:class "w-1/2" :style {:width "50%"}}
{:class "md:bg-hero-developer"
:style {:background-image "url(/img/dev-02.png)"
:background-repeat "no-repeat"
:background-position "right -340px top"
:background-size "680px 680px"}}
[:div.align-middle.text-right.h-64.w-96
(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 "circleci" :skill "CI"}])]]
[:div.relative ;.flex-none ;{:class "w-1/2" :style {:width "50%"}}
{:class "md:bg-hero-developer"
:style {:background-image "url(/img/dev-02.png)"
:background-repeat "no-repeat"
:background-position "left -340px top"
:background-size "680px 680px"}}
[:div.align-middle.relative.text-left.h-64.w-96
(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 "sqldeveloper" :skill "SQL / Datalog"}])]]
[:div.flex-1]]
#_[:div.flex.w-full.flex-col.md:flex-row
[:div {:class "w-full"}
[:div.align-middle.relative.text-right.w-full
;{:style {:top "-60px"}}
[:div;.invisible {:class "md:visible"}
(shaped-circle "right" 205 430)]]]
[:div {:class "w-full"}
[:div.align-middle.relative.text-left.w-full
;{:style {:top "-60px"}}
[:div;.invisible {:class "md:visible"}
(shaped-circle "left" 205 430)]]]]
[: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/pf/plantscape.png"
: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/pf/missing.jpg"
: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/pf/clojure-demo.png"
: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/pf/gasp.png"
: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/pf/car.png"
:description "Software for comparing and offering prices on your old tech, user facing and merchant facing applications with a mix of Python Django JavaScript Clojure & ClojureScript backed by postgres, redis with some datalog for the merchant application."})
(tile {:title "Wolsely - Stock management system"
:direction "right"
:href "https://www.wolseley.co.uk/"
:image "https://img.theplantscape.com/api/image/pf/wolseley.png"
: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/pf/taylor.png"
:description "Internal PHP Application for managing book inventory, Adding & Editing books ordering new stock backed by a oracle database."})]])
(defn footer-blocks [blocks]
(into [:div.w-full]
(mapv (fn footer-block [{:keys [title children]}]
[: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-2 [:a.hover:underline {:href link} title]]) children))])
blocks)))
(defn page-footer []
[:section.mt-4.flex.flex-row
[:img.rounded-full.w-24.h-24
{:src "https://img.theplantscape.com/api/image/pf/profile.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"}]}])])
Reference in New Issue View Git Blame Copy Permalink