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..9f5ccda 100644 --- a/bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs +++ b/bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs @@ -2,9 +2,9 @@ (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,27 +22,33 @@ (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-8.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.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-2xl {:class "md:text-2xl"} [:span [:i.mr-4 {:class (str "devicon-" icon "-plain")}] skill]] - [:li.m-2.text-xl {:class "md:text-base"} + [:li.m-2.text-2xl {:class "md:text-2xl"} [:span skill [:i.ml-4 {:class (str "devicon-" icon "-plain")}]]])) skills))]) @@ -51,7 +57,7 @@ ([direction w h offset] (if (= direction "right") [:div.hidden.right {:class "md:block"} - [:div.ml-8.opacity-50 + [:div.ml-8.opacity-15 {:style {:float "right" :right "0px" :width (str w "px") :height (str h "px") :background-color "#666666" @@ -59,7 +65,7 @@ :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 + [:div.mr-8.opacity-15 {:style {:float "left" :width (str w "px") :height (str h "px") :background-color "#666666" @@ -70,10 +76,10 @@ (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"}} + :background-size "680px 680px"}} [:div.flex.w-full ;.flex-col [:div.relative {:class "w-1/2" :style {:width "50%"}} [:div.align-middle.text-right.w-full.h-64 @@ -137,26 +143,26 @@ :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..29dddfe 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,6 +624,10 @@ video { margin-bottom: 3rem; } +.mb-2 { + margin-bottom: 0.5rem; +} + .mb-4 { margin-bottom: 1rem; } @@ -646,6 +660,10 @@ video { margin-right: 2rem; } +.mt-4 { + margin-top: 1rem; +} + .mt-8 { margin-top: 2rem; } @@ -690,6 +708,14 @@ video { height: 16rem; } +.min-h-40 { + min-height: 10rem; +} + +.min-h-32 { + min-height: 8rem; +} + .w-1\/2 { width: 50%; } @@ -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; } @@ -809,6 +827,11 @@ video { line-height: 2rem; } +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + .text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -858,6 +881,18 @@ video { opacity: 0.5; } +.opacity-80 { + opacity: 0.8; +} + +.opacity-25 { + opacity: 0.25; +} + +.opacity-85 { + opacity: 0.85; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -899,43 +934,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; } @@ -956,9 +967,14 @@ video { background-image: url('/img/dev-02.png'); } - .md\:text-base { - font-size: 1rem; - line-height: 1.5rem; + .md\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; } .md\:text-lg { @@ -966,3 +982,27 @@ video { line-height: 1.75rem; } } + +@media (min-width: 1024px) { + .lg\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .lg\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + + .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/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 []}