diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 7b8f6b6..fa69e15 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -3,6 +3,29 @@ --shadow-colour: #3f0aff; } +@mixin shadowed { + box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour); + translate: calc(var(--shift) * -1) calc(var(--shift) * -1); + + @media (prefers-reduced-motion: no-preference) { + transition: box-shadow, translate; + transition-duration: var(--duration); + transition-timing-function: ease-in-out; + + &:hover { + box-shadow: 0px 0px 0px var(--shadow-colour); + translate: none; + } + } +} + +.shadowed { + --shift: 8px; + --duration: 0.2s; + + @include shadowed; +} + /////////////////////// // AVATAR @@ -18,14 +41,7 @@ border-width: 7px; border-color: black; - // filter: drop-shadow(var(--shift) 8px 1px var(--shadow-colour)); - // translate: calc(var(--shift) * -1) calc(var(--shift) * -1); - @media (prefers-reduced-motion: no-preference) { - // transition: filter, translate; - // transition-duration: 1s; - // transition-timing-function: ease-in-out; - animation: shift-avatar 3s ease-in-out infinite alternate backwards; @keyframes shift-avatar { @@ -67,10 +83,9 @@ position: relative; width: 100%; + height: 17rem; display: flex; justify-content: center; - margin-top: 20px; - margin-bottom: 20px; translate: calc(var(--shift) * -1) calc(var(--shift) * -1); @@ -131,27 +146,26 @@ } } - div { + .text-section { z-index: 0; - margin-top: 50px; - margin-bottom: 50px; - margin-right: 5%; - margin-left: 5%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; } p { color: white; - margin: auto; text-align: center !important; - text-shadow: 0px 2px black; + text-shadow: 3px 3px 5px black; + margin: 0; } - a { + .center-link-text { color: white; cursor: pointer; - text-align: center !important; text-underline-offset: 3px; - text-decoration-skip-ink: all; + text-decoration-skip-ink: auto; } } @@ -174,6 +188,7 @@ .art-grid { --shift: 5px; + --duration: 0.2s; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); @@ -181,19 +196,7 @@ & > figure > img { border: 5px solid black; - box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour); - translate: calc(var(--shift) * -1) calc(var(--shift) * -1); - - @media (prefers-reduced-motion: no-preference) { - transition: box-shadow, translate; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - - &:hover { - box-shadow: 0px 0px 0px var(--shadow-colour); - translate: none; - } - } + @include shadowed; } & > .art-col-2 { @@ -217,7 +220,20 @@ width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); - gap: 10px; + gap: 20px; +} + +.dev-grid { + display: grid; + gap: 20px; +} + +.dev-grid-col-2 { + grid-template-columns: repeat(2, 1fr); +} + +.dev-grid-col-3 { + grid-template-columns: repeat(3, 1fr); } @media only screen and (max-width: 768px) { @@ -228,4 +244,23 @@ .art-home-grid { grid-template-columns: repeat(2, 1fr); } + + .dev-grid { + grid-template-columns: repeat(1, 1fr); + } +} + +.youtube-embed { + iframe { + --shift: 8px; + --duration: .2s; + + width: 100%; + aspect-ratio: 16/9; + border-radius: 20px; + + border: 5px solid black; + + @include shadowed; + } } \ No newline at end of file diff --git a/content/dev-engineering/index.md b/content/dev-engineering/index.md index 373a327..d1caff5 100644 --- a/content/dev-engineering/index.md +++ b/content/dev-engineering/index.md @@ -12,9 +12,11 @@ aliases: [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://git.sarsoo.xyz/sarsoo/-/packages?q=&type=container) [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://git.sarsoo.xyz/sarsoo/-/packages?q=&type=helm) +
{{% image-box-link src="/posts/mixonomer/PlaylistExample.png" href="/posts/mixonomer" title="Mixonomer" caption="Python + React" %}} {{% image-box-link src="/posts/selector/dashboard.png" href="/posts/selector/" title="Selector" caption="C# + TypeScript + Vue.js" %}} +
# [Infrastructure]({{< relref "infra" >}}) @@ -26,11 +28,13 @@ Basically, Terraform creates and destroys infrastructure, Ansible manages the OS [Read More]({{< relref "infra" >}}) +
{{% image-box-link src="/posts/visual-search/mapSurfaceWithMax2.png" href="/posts/visual-search" title="Visual Search" caption="MATLAB" %}} -{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synthesiser" caption="MATLAB" %}} +{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synth" caption="MATLAB" %}} {{% image-box-link src="/posts/markov/StateTopology.png" href="/posts/markov" title="Hidden Markov Models" caption="Python + Numpy" %}} +
# [Holoportation](/holo) @@ -45,15 +49,17 @@ The holograms are captured in the form of a __point cloud__, a cluster of colour My undergraduate dissertation documented extending the [__LiveScan3D__](https://github.com/MarekKowalski/LiveScan3D) holoportation platform to allow multi-source streaming. The existing capabilities allowed a single scene to be captured in real-time and streamed elsewhere for viewing, multi-source allows multiple independent scenes to be received and composited at the same time (a many-to-one system). -{{< youtube NP0aVjuk5fU >}} +{{< youtube id=NP0aVjuk5fU autoplay=true controls=false loop=true class=youtube-embed >}} [Read More](/holo) +
{{% image-box-link src="/posts/dnstp/server.png" href="/posts/dnstp" title="dnstp" caption="Rust" %}} {{% image-box-link src="/posts/draught/checkers-board.png" href="/posts/draught" title="Draught" caption="Rust + Js" %}} {{% image-box-link src="/posts/game-of-life/gameoflife1.png" href="/posts/game-of-life" title="Game of Life" caption="Rust + Js" %}} +
# [Mixonomer](/mixonomer) diff --git a/content/posts/holo/index.md b/content/posts/holo/index.md index c075f55..71461a3 100644 --- a/content/posts/holo/index.md +++ b/content/posts/holo/index.md @@ -42,7 +42,7 @@ My undergraduate dissertation was tasked with extending the original software to The development works by including an ID to indicate what source a frame of footage represents. -{{< youtube NP0aVjuk5fU >}} +{{< youtube id=NP0aVjuk5fU autoplay=true controls=false loop=true class=youtube-embed >}} ###### A couple of recorded sources operating in the virtual space. A third live one is connected part way through diff --git a/layouts/shortcodes/image-box-link.html b/layouts/shortcodes/image-box-link.html index 6ab5977..3fbb565 100644 --- a/layouts/shortcodes/image-box-link.html +++ b/layouts/shortcodes/image-box-link.html @@ -2,12 +2,11 @@
-
+

- {{ .Get "title" }} + {{ .Get "title" }}

{{if isset .Params "caption" }} -

{{ .Get "caption" }}

{{end}} +

{{ .Get "caption" }}

{{end}}
\ No newline at end of file