Split html files
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
05bfb8aaf6
commit
d23bc99e8c
|
|
@ -24,6 +24,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./cljs-out/base.js" type="application/javascript"></script>
|
||||
<script src="/cljs-out/base.js" type="application/javascript"></script>
|
||||
<script src="/cljs-out/main.js" type="application/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue