diff --git a/content/greeter.md b/content/greeter.md index f58a002..3fb727b 100644 --- a/content/greeter.md +++ b/content/greeter.md @@ -2,8 +2,5 @@ title: "Greeter" date: 2023-10-15T21:48:35+01:00 --- -### Hi, I'm Warwick. And I: -- Make Games -- Make Websites -- Research Papers -- Teach Computing at Falmouth University +# Warwick +Graphics, Games, Web, Education diff --git a/content/projects/hello-world.md b/content/projects/hello-world.md deleted file mode 100644 index 66d1737..0000000 --- a/content/projects/hello-world.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Hello World!" -date: 2023-10-15 20:25:14.038 +0100 -thumbnail: /img/fof.png ---- - -# Hello World! -Eyy *Finger Guns* diff --git a/content/projects/hello-world2.md b/content/projects/hello-world2.md deleted file mode 100644 index 12ff884..0000000 --- a/content/projects/hello-world2.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: "Hello World!" -date: 2023-10-15 20:25:14.038 +0100 ---- - -# Hello World! -Eyy *Finger Guns* diff --git a/themes/warwick_portfolio/assets/css/greeter.css b/themes/warwick_portfolio/assets/css/greeter.css index 0441ca2..1579921 100644 --- a/themes/warwick_portfolio/assets/css/greeter.css +++ b/themes/warwick_portfolio/assets/css/greeter.css @@ -11,19 +11,32 @@ #greeter { display: flex; - justify-content: center; + justify-content: space-around; + align-content: space-around; flex-wrap: wrap; - align-items: center; + align-items: stretch; height: 100vh; width: 100%; position: relative; + animation: 1s ease-out 0s 1 slideInLeft; +} + +#greeter-sim { + flex-grow: 2; +} + +#greeter-sim * { + padding-left: 0; + padding-right: 0; + margin-left: auto; + margin-right: auto; + display: block; } #greeter-content { - padding: 5%; - margin: 5% 5% 5% 50%; - animation: 1s ease-out 0s 1 slideInLeft; - background: var(--paper); + padding: 2%; + margin: 0; + flex-grow: 2; } @media (max-width: 950px){ @@ -50,54 +63,54 @@ .scroll-down-dude:before { -webkit-animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; - animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; + animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; } .scroll-down-dude:after { -webkit-animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; - animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; + animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; } @-webkit-keyframes down-arrow-before { - 50% { - transform: rotate(45deg) translate(70%, 70%); - } - 100% { - transform: rotate(45deg) translate(70%, 70%); - } +50% { + transform: rotate(45deg) translate(70%, 70%); +} +100% { + transform: rotate(45deg) translate(70%, 70%); +} } @keyframes down-arrow-before { - 50% { - transform: rotate(45deg) translate(70%, 70%); - } - 100% { - transform: rotate(45deg) translate(70%, 70%); - } +50% { + transform: rotate(45deg) translate(70%, 70%); +} +100% { + transform: rotate(45deg) translate(70%, 70%); +} } @-webkit-keyframes down-arrow-after { - 50% { - transform: rotate(45deg) translate(110%, 110%); - opacity: 0; - } - 51% { - transform: rotate(45deg) translate(-130%, -130%); - } - 100% { - transform: rotate(45deg) translate(-70%, -70%); - opacity: 1; - } +50% { + transform: rotate(45deg) translate(110%, 110%); + opacity: 0; +} +51% { + transform: rotate(45deg) translate(-130%, -130%); +} +100% { + transform: rotate(45deg) translate(-70%, -70%); + opacity: 1; +} } @keyframes down-arrow-after { - 50% { - transform: rotate(45deg) translate(110%, 110%); - opacity: 0; - } - 51% { - transform: rotate(45deg) translate(-130%, -130%); - } - 100% { - transform: rotate(45deg) translate(-70%, -70%); - opacity: 1; - } +50% { + transform: rotate(45deg) translate(110%, 110%); + opacity: 0; +} +51% { + transform: rotate(45deg) translate(-130%, -130%); +} +100% { + transform: rotate(45deg) translate(-70%, -70%); + opacity: 1; +} } diff --git a/themes/warwick_portfolio/assets/css/main.css b/themes/warwick_portfolio/assets/css/main.css index 868eb02..e785b26 100644 --- a/themes/warwick_portfolio/assets/css/main.css +++ b/themes/warwick_portfolio/assets/css/main.css @@ -16,29 +16,19 @@ h4 {font-size: 1.777rem; /* 28.48px */} h5 {font-size: 1.333rem; /* 21.28px */} small {font-size: 0.750rem; /* 12px */} -/* Colour Scheme stuff -:root[data-theme="light"] { - --text: #070808; - --background: #f7f8f8; - --primary: #aeb4bc; - --secondary: #dcd5d5; - --accent: #7d7468; -} -:root[data-theme="dark"] { - --text: #f7f8f8; - --background: #070808; - --primary: #434951; - --secondary: #2a2323; - --accent: #978e82; -}*/ :root { - /*color-scheme: light dark;*/ - --text: #f7f8f8; - --background: #070808; - --primary: #434951; - --secondary: #2a2323; - --accent: #978e82; - --paper: #181b1b; + --text: #f5f3f0; + --background: #0a0803; + --primary: #ff930f; + --secondary: #6f613d; + --accent: #ad975f; + --paper: #050606; + + --text: #b4bfc0; + --background: #010202; + --primary: #e3eff2; + --secondary: #00bcd1; + --accent: #8c240d; } /* Custom CSS */ @@ -56,18 +46,25 @@ body { a:link, a:active{ color: var(--primary); } -a:hover { - color: var(--secondary); -} a:visited { color: var(--accent); } +a:hover { + color: var(--secondary); +} .homepage-header { background-color: var(--paper); padding: 2rem; } +.flex-wrap-container { + display: flex; + align-items: flex-start; + flex-direction: row; + flex-wrap: wrap; +} + .container { max-width: 1000px; min-width: 800px; @@ -80,9 +77,12 @@ a:visited { max-width: 800px; } -.flex-wrap-container { - display: flex; - align-items: flex-start; - flex-direction: row; - flex-wrap: wrap; +div.summary__img_container { + position:relative; top:0; left:0; width:300px; height:250px; +} + +img.summary__img { + position:absolute; top:0; right:0; width:300px; height:100%; + -webkit-mask-image:-webkit-gradient(linear, right top, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); + mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)); } diff --git a/themes/warwick_portfolio/assets/img/logo.png b/themes/warwick_portfolio/assets/img/logo.png new file mode 100644 index 0000000..c9539b4 Binary files /dev/null and b/themes/warwick_portfolio/assets/img/logo.png differ diff --git a/themes/warwick_portfolio/assets/js/background.js b/themes/warwick_portfolio/assets/js/background.js index bc63347..7307430 100755 --- a/themes/warwick_portfolio/assets/js/background.js +++ b/themes/warwick_portfolio/assets/js/background.js @@ -2,7 +2,7 @@ let canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.style.cssText = ` -background: var(--background); +background: #00000000; position:fixed; left:0; top:0; @@ -25,8 +25,8 @@ class Splash { this.time = 0; } draw() { - context.fillStyle = "#2a232300"; - context.strokeStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`; + context.fillStyle = "#00000000"; + context.strokeStyle = `rgba(140, 36, 13, ${this.distance + 0.1})`; let splashSize = this.distance * (this.time/100); @@ -51,8 +51,8 @@ class Drop { this.distance = Math.random(); } draw() { - context.fillStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`; - context.strokeStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`; + context.fillStyle = `rgba(140, 36, 13, ${this.distance + 0.1})`; + context.strokeStyle = `rgba(140, 36, 13, ${this.distance + 0.1})`; // draw point context.beginPath(); @@ -75,7 +75,7 @@ class Drop { } // populate element array -for (let i = 0; i < 100; i++) { +for (let i = 0; i < 50; i++) { drawableObjectList.push(new Drop()); } diff --git a/themes/warwick_portfolio/assets/js/greeter.js b/themes/warwick_portfolio/assets/js/greeter.js new file mode 100644 index 0000000..da485f3 --- /dev/null +++ b/themes/warwick_portfolio/assets/js/greeter.js @@ -0,0 +1,117 @@ +// thanks to https://stackoverflow.com/a/74129799 +const { cos, sin, sqrt, acos, atan, atan2, abs, PI } = Math +const clamp = (a, b, x) => x < a ? a : x > b ? b : x +const cvs = document.createElement('canvas') +cvs.style.cssText = ` background: #00000000; ` +const primaryCol = getComputedStyle(document.body).getPropertyValue('--secondary'); +const secondCol = getComputedStyle(document.body).getPropertyValue('--accent'); +const ctx = cvs.getContext('2d') + +const RADIUS = 150 +const NB_SECTIONS = 6 +const LINE_WIDTH = 3 + +const SCALE = devicePixelRatio +const width = RADIUS * 2 + 20 +const height = RADIUS * 2 + 20 +cvs.width = width * SCALE +cvs.height = height * SCALE +cvs.style.width = `${width}px` +cvs.style.height = `${height}px` + +document.getElementById("greeter-sim").appendChild(cvs) + +const vec = (x = 0, y = 0, z = 0) => ({ x, y, z }) + +vec.set = (o, x = 0, y = 0, z = 0) => { + o.x = x + o.y = y + o.z = z + return o +} + +const X = vec(1, 0, 0) +const Y = vec(0, 1, 0) +const Z = vec(0, 0, 1) + +// orientation of camera +let theta, phi + +// project v to the camera, output to o +function project(o, { x, y, z }) { + let ct = cos(theta), st = sin(theta) + let cp = cos(phi), sp = sin(phi) + let a = x * ct + y * st + return vec.set(o, y * ct - x * st, cp * z - sp * a, cp * a + sp * z) +} + +// draw camera-facing section of sphere with normal v and offset o (-1 < o < 1) +const _p = vec() +function draw_section(n, o = 0) { + let { x, y, z } = project(_p, n) // project normal on camera + let a = atan2(y, x) // angle of projected normal -> angle of ellipse + let ry = sqrt(1 - o * o) // radius of section -> y-radius of ellipse + let rx = ry * abs(z) // x-radius of ellipse + let W = sqrt(x * x + y * y) + let sa = acos(clamp(-1, 1, o * (1 / W - W) / rx)) // ellipse start angle + let sb = z > 0 ? 2 * PI - sa : - sa // ellipse end angle + + ctx.beginPath() + ctx.ellipse(x * o * RADIUS, y * o * RADIUS, rx * RADIUS, ry * RADIUS, a, sa, sb, z <= 0) + ctx.stroke() +} + +const _n = vec() +function draw_arcs() { + for (let i = NB_SECTIONS; i--;) { + let a = i / NB_SECTIONS * Math.PI + draw_section(vec.set(_n, cos(a), sin(a))) + } + + for (let i = NB_SECTIONS - 1; i--;) { + let a = (i + 1) / NB_SECTIONS * Math.PI + draw_section(Z, cos(a)) + //draw_section(X, cos(a)) + //draw_section(Y, cos(a)) + } +} + + +ctx.lineCap = 'round' +ctx.scale(SCALE, SCALE) + +function render() { + requestAnimationFrame(render) + + theta = performance.now() / 24000 * PI + phi = cos(performance.now() / 12000 * PI) + + // 1. change the basis of the canvas + ctx.save() + ctx.clearRect(0, 0, width, height) + ctx.translate(width >> 1, height >> 1) + ctx.scale(1, -1) + + // 2. draw back arcs + ctx.lineWidth = LINE_WIDTH / 2 + ctx.strokeStyle = secondCol + ctx.scale(-1, -1) // the trick is to flip the canvas + draw_arcs() + ctx.scale(-1, -1) + + // 3. draw sphere border + ctx.strokeStyle = primaryCol + ctx.lineWidth = LINE_WIDTH + 2 + ctx.beginPath() + ctx.arc(0, 0, RADIUS, 0, 2 * Math.PI) + ctx.stroke() + + // 4. draw front arcs + ctx.lineWidth = LINE_WIDTH + ctx.strokeStyle = primaryCol + draw_arcs() + + ctx.restore() +} + +requestAnimationFrame(render) diff --git a/themes/warwick_portfolio/layouts/_default/summary.html b/themes/warwick_portfolio/layouts/_default/summary.html index 73caa94..c930283 100644 --- a/themes/warwick_portfolio/layouts/_default/summary.html +++ b/themes/warwick_portfolio/layouts/_default/summary.html @@ -12,9 +12,9 @@ {{ if .Params.thumbnail }} {{- $image := resources.Get .Params.thumbnail -}} -
+
- +
{{ end }} diff --git a/themes/warwick_portfolio/layouts/index.html b/themes/warwick_portfolio/layouts/index.html index 1aa2bbc..0babbbe 100644 --- a/themes/warwick_portfolio/layouts/index.html +++ b/themes/warwick_portfolio/layouts/index.html @@ -1,8 +1,14 @@ {{ define "main" }} {{ partial "greeter.html" .}}
-
-

{{.Title}}

+
+ {{ $logo := (resources.Get "/img/logo.png").Resize "100x100" }} + + logo + + +

{{.Title}}

+
diff --git a/themes/warwick_portfolio/layouts/partials/greeter.html b/themes/warwick_portfolio/layouts/partials/greeter.html index a29fd9a..e13a1a0 100644 --- a/themes/warwick_portfolio/layouts/partials/greeter.html +++ b/themes/warwick_portfolio/layouts/partials/greeter.html @@ -1,19 +1,20 @@ {{ with .Site.GetPage "/greeter" }} {{$greeter_style := resources.Get "css/greeter.css"}} +{{$greeter_sim := resources.Get "js/greeter.js"}}
-
- {{ .Content }} -
+
+
+ {{ .Content }}
-
-
-
- - - Scroll Down - -
+
+
+
+ + Scroll Down + +
+ {{ end }}