From 5f99cef8db33f5da99cb324e086bbb41503e5537 Mon Sep 17 00:00:00 2001 From: Oliver Date: Thu, 15 Feb 2024 12:30:24 +0000 Subject: [PATCH] Styling improvements. --- .../com/oly/static_sites/portfolio/page.cljs | 142 ++++++++++-------- development/resources/public/css/styles.css | 133 +++++++++------- development/resources/public/index.html | 5 +- projects/.keep | 2 +- readme.org | 3 +- shadow-cljs.edn | 2 +- 6 files changed, 172 insertions(+), 115 deletions(-) diff --git a/bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs b/bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs index 4724d9e..2537542 100644 --- a/bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs +++ b/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 - [:a {:href href} + [:div.rounded-lg.mt-4.mb-8.w-full.min-h-32 + [: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] - [:p.text-sm description]]]) + [: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-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.ml-8.opacity-50 - {:style {:float "right" :right "0px" + [: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.hidden.left {:class "md:block"} - [:div.mr-8.opacity-50 - {:style {:float "left" + [: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") @@ -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"}} - [:div.flex.w-full ;.flex-col + :background-size "680px 680px"}} + [: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"}} - [: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."})]]] + ;{: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" 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."})]]]] + ;{: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/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"} diff --git a/development/resources/public/css/styles.css b/development/resources/public/css/styles.css index 303d82b..2b4aae0 100644 --- a/development/resources/public/css/styles.css +++ b/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. -2. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font-family by default. +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 { - margin-bottom: 1rem; +.mb-2 { + margin-bottom: 0.5rem; } -.mb-6 { - margin-bottom: 1.5rem; +.mb-4 { + 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: 0.5; +.opacity-15 { + 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 { - width: 100%; + .md\:grid-cols-2 { + 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)); + } } diff --git a/development/resources/public/index.html b/development/resources/public/index.html index ac3235c..faa72bd 100644 --- a/development/resources/public/index.html +++ b/development/resources/public/index.html @@ -4,9 +4,10 @@ Personal portfolio for olymk2 + @@ -23,7 +24,7 @@ /> -
+
diff --git a/projects/.keep b/projects/.keep index 8b13789..d3f5a12 100644 --- a/projects/.keep +++ b/projects/.keep @@ -1 +1 @@ - + diff --git a/readme.org b/readme.org index 3d24d42..5c887e7 100644 --- a/readme.org +++ b/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 diff --git a/shadow-cljs.edn b/shadow-cljs.edn index abfe1c3..f375761 100644 --- a/shadow-cljs.edn +++ b/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 []}