Hi, I'm
Victor Westerlund
@@ -137,4 +137,4 @@RFC 3339
digital archiving
- \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css deleted file mode 100644 index d77462d..0000000 --- a/public/assets/css/shell.css +++ /dev/null @@ -1,532 +0,0 @@ -:root { - --primer-color-accent: 255, 255, 0; - --color-accent: yellow; - --hue-accent: 0deg; - - --padding: 20px; - --running-size: 80px; - --header-search-size: var(--running-size); -} - -/* # Cornerstones */ - -* { - margin: 0; - fill: inherit; - box-sizing: border-box; - font-family: "Roboto Mono", sans-serif; - color: inherit; - font-size: inherit; -} - -::-webkit-scrollbar { - display: none; -} - -body { - display: grid; - justify-items: center; - grid-template-rows: var(--running-size) 1fr; - overscroll-behavior: none; - background-color: black; - color: white; - overflow-x: hidden; - min-height: 100svh; - font-size: 15px; -} - -body::before { - transition: 1s opacity; - content: ""; - position: absolute; - top: -5%; - right: 0; - width: 20%; - height: 5%; - border-radius: 100%; - z-index: 1000; - box-shadow: - 0 0 30svh 10svh rgba(var(--primer-color-accent), .2), - 0 0 30svh 60svh rgba(var(--primer-color-accent), .1), - 0 0 30svh 150svh rgba(var(--primer-color-accent), .02) - ; - opacity: 0; -} - -/* "enable" the corner glow effect on initial load when a page has been fully loaded */ -body[vv-top-page]::before { - opacity: 1; -} - -a { - display: contents; - color: inherit; - text-decoration: none; -} - -/* # Components */ - -:is(h1, h2, h3, p, li) > a { - --underline-tickness: 3px; - - display: initial; - text-decoration: underline; - text-decoration-thickness: var(--underline-tickness); - text-underline-offset: var(--underline-tickness); - text-decoration-color: var(--color-accent); -} - -h1 { - font-size: 30px; - color: var(--color-accent); -} - -h2 { - font-size: 30px; -} - -h3 { - font-size: 25px; -} - -/* ## Page transition */ - -[vv-loading] * { - transition: 200ms opacity; -} - -[vv-loading="true"] * { - opacity: 0; - pointer-events: none; -} - -[vv-loading="true"]::after { - content: ""; - position: fixed; - top: 50%; - left: 50%; - width: 45px; - height: 49px; - background-size: contain; - image-rendering: pixelated; - transform: translate(-50%, -50%); - background-image: url("/assets/media/spinner.gif"); - -webkit-filter: hue-rotate(var(--hue-accent)); - filter: hue-rotate(var(--hue-accent)); -} - -/* ## Buttons */ - -button { - border: none; - background-color: transparent; - color: inherit; - fill: inherit; - cursor: pointer; -} - -/* ### Inline */ - -button.inline { - gap: 10px; - display: flex; - border-radius: 7px; - align-items: center; - fill: var(--color-accent); - padding: calc(var(--padding) / 1.5); - background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(var(--primer-color-accent), .1) 100%); -} - -button.inline:not(.solid) { - box-shadow: - 0 0 0 2px rgba(var(--primer-color-accent), .1), - 10px 7px 40px 3px rgba(var(--primer-color-accent), .06) - ; -} - -button.inline svg { - flex: none; - height: 1em; -} - -button.inline svg:last-child { - width: 1.5em; - margin-left: auto; -} - -button.inline svg.chevron:last-child { - transform: rotate(-90deg); -} - -button.inline.solid { - fill: black; - color: black; - border: solid 2px rgba(var(--primer-color-accent), 1); - border-color: var(--color-accent); - background-color: var(--color-accent); -} - -/* ## Header */ - -header { - --border-style: solid 1px rgba(255, 255, 255, .2); - - position: sticky; - top: 0; - width: 100%; - height: var(--running-size); - border-bottom: var(--border-style); - display: grid; - align-items: stretch; - grid-template-columns: 1fr var(--header-search-size) var(--running-size); - grid-template-rows: var(--running-size); - background-color: rgba(0, 0, 0, .8); - z-index: 100; - perspective: 3000px; - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - overflow: hidden; -} - -header > * { - --anim-3d-depth: 5px; - --anim-3d-peek: 25deg; - - transition: 300ms background-color; - transform: rotateX(0deg); - backface-visibility: hidden; - box-shadow: 0 var(--anim-3d-depth) 0 0 rgba(255, 255, 255, .2); -} - -/* enable 3d flip animation */ -@media not (prefers-reduced-motion: reduce) { - header > * { - --transform-duration: 600ms; - - transition: var(--transform-duration) transform, 300ms background-color; - } -} - -header nav { - gap: calc(var(--padding) * 2); - display: flex; - align-items: center; - padding: var(--padding); -} - -header nav > p { - white-space: nowrap; -} - -header .buttons { - display: none; -} - -header .logo { - fill: none; -} - -header .logo path.stroke { - fill: var(--color-accent); -} - -header header .search { - display: none; -} - -/* ### Buttons */ - -header button { - --icon-size: 25px; - - display: grid; - width: 100%; - border-left: var(--border-style); - grid-template-columns: 1fr; - align-items: center; - justify-items: center; - padding: var(--padding); - gap: var(--padding); - fill: var(--color-accent); - font-size: 13px; - color: rgba(255, 255, 255, .5); - cursor: pointer; -} - -header button:not(.logo) svg { - width: var(--icon-size); -} - -header button.search p { - display: none; -} - -/* ### Searchbox */ - -header searchbox { - position: absolute; - right: 0; - width: 100%; - height: var(--running-size); - background-color: var(--color-accent); - display: grid; - align-items: stretch; - grid-template-columns: 1fr var(--running-size); - grid-template-rows: var(--running-size); - box-shadow: none; - transform: rotateX(180deg); -} - -header searchbox > * { - box-shadow: 0 calc(var(--anim-3d-depth) * -1) 0 0 rgba(var(--primer-color-accent), .8); -} - -header searchbox button { - transition: 300ms background-color, 300ms border-color; - border-color: rgba(0, 0, 0, .1); - fill: black; -} - -header searchbox input { - padding: 0 var(--padding); - background-color: transparent; - outline: none; - color: black; - border: none; -} - -header searchbox input::placeholder { - color: rgba(0, 0, 0, .5); -} - -/* #### Active */ - -header.searchboxActive > * { - transform: rotateX(-180deg); -} - -header.searchboxActive searchbox { - transform: rotateX(0); -} - -/* ## vv-shell */ - -vv-shell { - position: relative; - padding: calc(var(--padding) * 1.5); - width: 100%; - max-width: 1000px; -} - -/* ## Search results */ - -search-results { - transition: 500ms opacity, 300ms transform; - position: fixed; - display: flex; - flex-direction: column; - gap: var(--padding); - top: var(--running-size); - right: 0; - width: 100%; - padding: var(--padding); - height: calc(100svh - var(--running-size)); - background-color: black; - pointer-events: none; - opacity: 0; - transform: scale(.99); - transform-origin: 100% 0; - overflow-y: scroll; - z-index: 50; -} - -header.searchboxActive ~ search-results { - opacity: 1; - pointer-events: all; - transform: scale(1); -} - -search-results section.search { - display: none; -} - -/* ### "Start typing" prompt */ - -search-results .info { - display: flex; - align-items: center; - flex-direction: column; - margin: auto; - gap: var(--padding); -} - -search-results .info :is(svg, img) { - width: 60px; - fill: var(--color-accent); -} - -/* # Feature queries */ - -@media (hover: hover) { - :is(h1, h2, h3, p, li) > a:hover { - text-underline-offset: 1px; - text-decoration-thickness: calc(var(--underline-tickness) * 2); - color: var(--color-accent); - } - - /* # Components */ - - button.inline { - transition-duration: 300ms; - transition-property: background-color, border-color, box-shadow, color, fill; - } - - button:hover { - border-color: rgba(255, 255, 255, .2); - background-color: rgba(255, 255, 255, .1); - } - - button.inline:hover { - fill: var(--color-accent); - color: var(--color-accent); - } - - button.inline:not(.solid):hover { - box-shadow: - 0 0 0 2px rgba(var(--primer-color-accent), 1), - 10px 7px 30px 3px rgba(var(--primer-color-accent), .07) - ; - } - - button.solid:hover { - border-color: rgba(var(--primer-color-accent), .2); - background-color: rgba(var(--primer-color-accent), .2); - box-shadow: 0 -10px 20px 10px rgba(var(--primer-color-accent), .05); - } - - /* ## Header */ - - header .logo:hover path.solid { - fill: var(--color-accent); - } - - header searchbox button:hover { - background-color: rgba(0, 0, 0, .08); - } - - /* ### Search */ - - @media not (prefers-reduced-motion: reduce) { - header:not(.searchboxActive) button.search:hover, - header:not(.searchboxActive) button.search:hover + button.logo { - transform: rotateX(calc(var(--anim-3d-peek) * -1)); - } - - header:not(.searchboxActive) button.search:hover ~ searchbox { - transform: rotateX(calc(180deg - var(--anim-3d-peek))); - } - } -} - -/* # Size queries */ - -@media (min-width: 700px) { - :root { - --header-search-size: 250px; - } - - /* # Cornerstones */ - - body::before { - right: unset; - left: 0; - box-shadow: - 0 0 30svh 10svh rgba(var(--primer-color-accent), .1), - 0 0 30svh 60svh rgba(var(--primer-color-accent), .05), - 0 0 30svh 150svh rgba(var(--primer-color-accent), .02) - ; - } - - /* ## Header */ - - header nav { - margin: 0 calc(var(--padding) / 2); - } - - header > button.search { - grid-template-columns: var(--icon-size) 1fr; - } - - header > button.search p { - display: initial; - } - - header.searchboxActive > nav { - transform: rotateX(0deg); - pointer-events: all; - } - - /* ### Searchbox */ - - header searchbox { - width: calc(var(--header-search-size) + var(--running-size)); - } - - /* ### Menu */ - - /* Move the search box to the header */ - header > button.search { - display: grid; - justify-items: baseline; - } - - @media (min-height: 600px) { - search-results { - top: calc(var(--running-size) + var(--padding)); - width: 50%; - height: calc(100svh - 100px); - background-color: rgba(0, 0, 0, .8); - box-shadow: - inset 0 0 100px 200px rgba(0, 0, 0, 1), - 0 0 100px 200px rgba(0, 0, 0, 1) - ; - --webkit-backdrop-filter: blur(15px); - backdrop-filter: blur(15px); - } - } -} - -@media (min-width: 900px) { - header { - .buttons { - gap: 10px; - width: 100%; - display: grid; - white-space: nowrap; - align-items: center; - grid-template-columns: repeat(3, 100px); - - button { - transition: 100ms border; - border: dashed 1px rgba(255, 255, 255, .3); - padding: 13px var(--padding); - border-radius: 6px; - - &:hover { - border-color: var(--color-accent); - background-color: transparent; - } - - :is( - [vv-page="/work"] a[href="/work"], - [vv-page="/about"] a[href="/about"], - [vv-page="/contact"] a[href="/contact"] - ) & { - color: var(--color-accent); - border-style: solid; - border-color: var(--color-accent); - } - } - } - } -} diff --git a/public/contact.php b/public/contact.php index 7a559b4..862efca 100644 --- a/public/contact.php +++ b/public/contact.php @@ -2,7 +2,7 @@ use VLW\Database\Models\Messages\Message; use VLW\Database\Tables\Messages\Messages; - + require_once VV::root("src/Database/Models/Messages/Message.php"); require_once VV::root("src/Database/Tables/Messages/Messages.php"); @@ -37,7 +37,7 @@ } ?> - +Let's chat!
The best way to get in touch is definitely by email, or through the form on this page. The time in Sweden is format("h:i a") ?> right now, I am currently is_available() ? "available" : "not available" ?> and will hopefully reply in about get_estimated_reply_hours() ?> hours.
@@ -112,4 +112,4 @@404
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/search.php b/public/search.php
index fddd9ca..86fa8b9 100644
--- a/public/search.php
+++ b/public/search.php
@@ -14,7 +14,7 @@
$search = new class extends Search {
public readonly string $query;
public readonly array $results;
-
+
public function __construct() {
$this->query = $_GET[GET_KEY_QUERY] ?? "";
$this->results = strlen($this->query) >= MIN_QUERY_LENGTH ? parent::query($this->query, limit: LIMIT_RESULTS) : [];
@@ -22,7 +22,7 @@
}
?>
-
+
results) ?> result(s)
@@ -96,7 +96,7 @@ - + @@ -105,4 +105,4 @@Start typing to search
@@ -74,6 +74,6 @@
-
+