oly
/
static-sites
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split into mani app and portfolio rendering.
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Oliver Marks 2023-11-08 21:24:09 +00:00
parent d23bc99e8c
commit d71966e1ab
11 changed files with 238 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bases/portfolio/deps.edn Normal file
View File

@ -0,0 +1,4 @@
{:paths ["src" "resources"]
:deps {cjohansen/dumdom {:mvn/version "2023.11.06"}}
:aliases {:test {:extra-paths ["test"]
:extra-deps {}}}}

1
bases/portfolio/resources/portfolio/.keep Normal file
View File

@ -0,0 +1 @@

16
bases/portfolio/src/com/oly/static_sites/portfolio/core.cljs Normal file
View File

@ -0,0 +1,16 @@
(ns com.oly.static-sites.portfolio.core
(:require [dumdom.core :as dumdom]
[com.oly.static-sites.portfolio.page :as c]))
(defn launch
"Site entry point"
[]
(dumdom/render
[:div.bg-slate-200.w-full
[:div.w-full.m-auto.pl-4.pr-4 {:class "md:w-4/5"}
(c/page-header)
(c/dual-column-circle)
(c/split-bar)
(c/page-footer)]]
(js/document.getElementById "app")))

163
bases/portfolio/src/com/oly/static_sites/portfolio/page.cljs Normal file
View File

@ -0,0 +1,163 @@
(ns com.oly.static-sites.portfolio.page)
(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
[: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 "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/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]]])
(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/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."})]]]
[: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."})]]]]
[: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."})
(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."})]])
(defn footer-blocks [blocks]
(into [:div.md:mt-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 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))])
blocks)))
(defn page-footer []
[:section.md:p-8.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"}
{:link "https://fo.llow.social/u/olymk2@mastodon.social" :title "Masterdon"}]}])])

6
bases/portfolio/test/com/oly/static_sites/portfolio/core_test.clj Normal file
View File

@ -0,0 +1,6 @@
(ns com.oly.static-sites.portfolio.core-test
(:require [clojure.test :as test :refer :all]
[com.oly.static-sites.portfolio.core :as core]))
(deftest dummy-test
(is (= 1 1)))

9
deps.edn
View File

@ -1,6 +1,7 @@
{:paths ["development/src"]
:deps {no.cjohansen/portfolio {:mvn/version "2023.07.15"}}
:aliases {:dev {:extra-paths ["development/src" ]
{:paths ["development/src" "bases/portfolio/src"]
:deps {cjohansen/dumdom {:mvn/version "2023.11.06"}
no.cjohansen/portfolio {:mvn/version "2023.07.15"}}
:aliases {:dev {:extra-paths ["development/src" "bases/portfolio/src" ]
:extra-deps {org.clojure/clojure {:mvn/version "1.10.3"}
org.clojure/tools.deps.alpha {:mvn/version "0.12.1003"}
@ -9,7 +10,7 @@
;; dev libraries
thheller/shadow-cljs {:mvn/version "2.25.2"}
refactor-nrepl/refactor-nrepl {:mvn/version "3.9.0"}
cider/cider-nrepl {:mvn/version "0.41.0"}
cider/cider-nrepl {:mvn/version "0.43.1"}
no.cjohansen/portfolio {:mvn/version "2023.07.15"}
djblue/portal {:mvn/version "0.48.0"}}}

2
development/resources/public/index.html
View File

@ -25,6 +25,6 @@
<body>
<div id="app"></div>
<script src="/cljs-out/base.js" type="application/javascript"></script>
<script src="/cljs-out/main.js" type="application/javascript"></script>
<script src="/cljs-out/app.js" type="application/javascript"></script>
</body>
</html>

30
development/resources/public/portfolio.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Personal portfolio for olymk2</title>
<meta charset="utf-8" />
<meta content="#da532c" name="msapplication-TileColor" />
<meta content="#ffffff" name="theme-color" />
<link
href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="./css/styles.css" type="text/css" />
<meta content="Personal portfolio" property="og:title" />
<meta
content="Portfolio of projects worked on past to present"
property="og:description"
/>
</head>
<body>
<div id="app"></div>
<script src="/cljs-out/base.js" type="application/javascript"></script>
<script src="/cljs-out/portfolio.js" type="application/javascript"></script>
</body>
</html>

4
development/src/design.cljs
View File

@ -2,9 +2,9 @@
(:require [portfolio.ui :as ui]
[portfolio.dumdom :as d]
[portfolio.dom :as r]
[com.oly.static-sites.portfolio.core :as c]))
[com.oly.static-sites.portfolio.page :as c]))
(d/defscene circle
(d/defscene circle-flow
c/dual-column-circle)
(d/defscene header

3
package.json
View File

@ -26,6 +26,7 @@
"@sentry/tracing": "^6.19.7",
"axe-core": "4.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"snabbdom": "3.5.1"
}
}

16
shadow-cljs.edn
View File

@ -2,19 +2,19 @@
:dev-http {8080 ["development/resources/public/" "classpath:public"]}
;:nrepl {:middleware [refactor-nrepl.middleware/wrap-refactor]}
:nrepl {:middleware [refactor-nrepl.middleware/wrap-refactor]}
:source ["devlopment/src"] ;;"src"
;; "../../components/web-ui/src"
;; "../../components/web-api/src"
;; "../../components/polyculture/src"
;; "../../components/svg-generation/src"
;; "../../components/local-store/src"]
:source ["devlopment/src" "bases/portfolio/src"] ;;"src"
;; "../../components/web-ui/src"
;; "../../components/web-api/src"
;; "../../components/polyculture/src"
;; "../../components/svg-generation/src"
;; "../../components/local-store/src"]
:builds {:app {:output-dir "development/resources/public/cljs-out"
:asset-path "cljs-out"
:target :browser
:compiler-options {:infer-externs :auto :output-feature-set :es6}
:modules {:base {:entries []}
:app {:init-fn design/launch
:depends-on #{:base}}
:app {:init-fn com.oly.static-sites.portfolio.core/launch
:depends-on #{:base}}
:portfolio {:init-fn design/launch
:depends-on #{:base}}
}