Changed up the theme a lot added another simulation

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

content/projects/hello-world.md

@@ -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*

content/projects/hello-world2.md

@@ -1,7 +0,0 @@
----
-title: "Hello World!"
-date: 2023-10-15 20:25:14.038 +0100
----
-
-# Hello World!
-Eyy *Finger Guns*

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;
+}
 }

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));
 }

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());
 }
 

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)

themes/warwick_portfolio/layouts/_default/summary.html

@@ -12,9 +12,9 @@
     </div>
       {{ if .Params.thumbnail }}
       {{- $image := resources.Get .Params.thumbnail -}}
-    <div style="align-self: center">
+    <div class="summary__img_container" style="align-self: center">
       <a style="display: block" href="{{ .Permalink }}">
-        <img style="margin: 0 1em" src="{{ ($image.Fill "200x200 q100 Center").RelPermalink }}">
+        <img class="summary__img" src="{{ ($image.Fill "300x250 q100 Center").RelPermalink }}">
       </a>
     </div>
       {{ end }}

themes/warwick_portfolio/layouts/index.html

@@ -1,8 +1,14 @@
 {{ define "main" }}
 {{ partial "greeter.html" .}}
 <header id="homepage-header" class="homepage-header">
-  <div class="container">
-    <h1>{{.Title}}</h1> 
+  <div class="flex-wrap-container" style="align-items:center">
+    {{ $logo := (resources.Get "/img/logo.png").Resize "100x100" }}
+    <a href="/">
+      <img style="padding-right: 1%" src="{{ $logo.RelPermalink }}" alt="logo">
+    </a>
+    <a style="text-decoration: none" href="/">
+      <h1 style="display:inline; color:var(--primary)">{{.Title}}</h1> 
+    </a>
   </div>
 </header>
 

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"}}
 <link rel="stylesheet" type="" href="{{$greeter_style.RelPermalink}}">
 <div id="greeter">
-  <div id="greeter-content">
-    {{ .Content }} 
-    <div>
+    <div id="greeter-sim"></div>
+    <div id="greeter-content">
+      {{ .Content }} 
     </div>
-  </div>
-  <div style="text-align:center; width:100%"> </div>
-  <div>
-
-    <a style="text-align:center" onClick="document.getElementById('homepage-header').scrollIntoView({block: 'start', behavior: 'smooth'});" >
-      Scroll Down
-    </a>
-      <div class="scroll-down-dude" onClick="document.getElementById('homepage-header').scrollIntoView({block: 'start', behavior: 'smooth'});"></div>
+  <div style="text-align:center; width:100%">
+</div>
+<div>
+  <a style="text-align:center" onClick="document.getElementById('homepage-header').scrollIntoView({block: 'start', behavior: 'smooth'});" >
+    Scroll Down
+  </a>
+  <div class="scroll-down-dude" onClick="document.getElementById('homepage-header').scrollIntoView({block: 'start', behavior: 'smooth'});"></div>
   </div>
 </div>
+<script src="{{$greeter_sim.RelPermalink}}"></script>
 {{ end }}