Use zola

22 files changed, 459 insertions, 0 deletions

diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..7eeb4e0
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,402 @@
+/* Font Faces */
+@font-face {
+  font-family: 'Libre Caslon';
+  src: url('/font/LibreCaslonCondensed[wdth,wght].woff2') format('woff2-variations');
+  font-weight: 400 700;
+  font-stretch: 75% 100%;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Libre Caslon';
+  src: url('/font/LibreCaslonCondensed-Italic[wght].woff2') format('woff2-variations');
+  font-weight: 400 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Theme */
+:root {
+  --primary-color: #0000f5;
+  --background: #fff;
+  --foreground: #000019;
+  --foreground-emphasis: #191919;
+  --selection-color: #ccc;
+  --font-display: 'Libre Caslon', 'Times New Roman', 'Georgia', serif;
+  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --root-font-size: 1rem;
+  --base-grid: 1.25rem;
+  --radius: 4px;
+  --border-width: 1px;
+  --outer-radius: calc(var(--radius) - var(--border-width));
+}
+
+::selection {
+  background-color: var(--selection-color);
+  -webkit-text-stroke: 0;
+  color: var(--primary-color);
+}
+
+/* CSS Reset */
+* {margin: 0; padding: 0; box-sizing: border-box}
+html { scroll-behavior: smooth }
+
+/* Base Elements */
+h1,h2,h3,h4 { font-weight: 300 }
+li,p {
+  hyphens: auto;
+  text-align: justify;
+  transform: translateY(4px);
+}
+strong {
+  color: var(--foreground-emphasis);
+  font-weight: 700;
+}
+p { margin-bottom: var(--base-grid); }
+a[role="button"],
+button {
+  border: var(--border-width) solid var(--foreground);
+  border-radius: var(--radius);
+  background-color: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 700;
+  display: inline-block;
+  text-decoration: none;
+  transition: 0.1s all linear;
+  padding: calc(0.5lh - var(--border-width)) 1lh;
+  margin-bottom: 1lh;
+
+  &:active {
+    background-color: var(--foreground);
+    color: var(--background);
+  }
+
+  label {
+    line-height: 1.25;
+    cursor: pointer;
+  }
+}
+
+.textured {
+  h2, p, ul {
+    -webkit-text-stroke: calc(4 * var(--border-width)) var(--background);
+    paint-order: stroke fill;
+  }
+}
+
+/* The Contents */
+body {
+  font-family: var(--font-body);
+  font-synthesis: none;
+  color: var(--foreground);
+  background: var(--primary-color);
+  font-size: var(--root-font-size);
+  line-height: 1.25;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100vh;
+  
+
+/* Header */
+
+  & > header {
+    color: #fff;
+    display: flex;
+    background: var(--primary-color);
+    font-family: var(--font-display);
+    padding: var(--base-grid);
+    position: relative;
+
+    h1 {
+      font-size: 2rem;
+      flex: 0 0 auto;
+      line-height: 1.25;
+
+      @media (max-width: 600px) {
+        font-size: 1rem;
+        line-height: 1.25;
+      }
+    }
+
+    p {
+      font-size: 4.5rem;
+      font-style: italic;
+      line-height: 5rem;
+      margin: 0.5lh auto 0.25lh;
+      transform: translateY(-5px);
+      white-space: pre;
+      width: min-content;
+
+      @media (max-width: 800px) {
+        font-size: 3rem;
+        line-height: 3.75rem;
+        margin: 1lh auto var(--base-grid);
+        transform: translateY(-7px)
+      }
+
+      @media (max-width: 600px) {
+        font-size: 2rem;
+        line-height: 1.25;
+        margin: 0.75lh auto 0.25lh;
+        transform: translateY(-1px)
+      }
+
+      @media (max-width: 360px) {
+        font-size: 1rem;
+        margin: 2lh auto 0;
+        transform: translateY(4px);
+      }
+    }
+
+    a {
+      color: #fff;
+      display: block;
+      margin-top: 9px;
+      text-decoration: none;
+      width: min-content;
+      word-spacing: 100vw;
+
+      @media (max-width: 600px) {
+        margin-top: 0;
+        transform: translateY(4px);
+      }
+    }
+
+    /* Animation */
+
+    canvas {
+      background: var(--primary-color);
+      display: block;
+      height: 60px;
+      width: 60px;
+
+      @media (max-width: 600px) {
+        height: 40px;
+        width: 40px;
+      }
+    }
+  }
+}
+/* The Main Body */
+
+main {
+  flex-grow: 1;
+  background-color: var(--background);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  h2 {
+    font-size: 1.5rem;
+    line-height: 1.6667;
+    font-family: var(--font-display);
+    font-weight: 500;
+    transform: translateY(-8px);
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    line-height: 1;
+    font-weight: 500;
+    transform: translateY(2px);
+    margin: 2lh 0 1lh;
+  }
+
+  h4 {
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.25;
+    transform: translateY(4px);
+    margin: 1lh 0;
+  }
+
+  ul {
+    list-style: none;
+    margin-left: 0;
+    margin-bottom: var(--base-grid);
+  }
+  li {
+    position: relative;
+    padding-left: var(--base-grid);
+    
+    &::before {
+      content: "✳";
+      width: var(--base-grid);
+      display: inline-block;
+      margin-left: calc(-1 * var(--base-grid));
+      text-align: left;
+    }
+  }
+}
+
+#introduction  {
+
+  padding: var(--base-grid);
+
+  .content {
+    column-gap: var(--base-grid);
+    width: 100%;
+    max-width: calc(35 * var(--base-grid));
+    background: var(--background);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+#services {
+  column-gap: calc(2 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  padding: calc(2 * var(--base-grid));
+  width: 100%;
+  max-width: calc(83 * var(--base-grid));
+  background: var(--background);
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  section {
+    flex: 1;
+    min-width: calc(17 * var(--base-grid));
+    max-width: calc(25 * var(--base-grid));
+
+    ul {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 360px) {
+      min-width: calc(100vw - 2 * var(--base-grid));
+    }
+  }
+
+}
+
+#skills {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="2" y="2" width="1" height="1" fill="black"/></svg>');
+  padding: calc(2 * var(--base-grid));
+  width: 100%;
+  display: flex;
+  column-gap: calc(4 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  flex-wrap: wrap;
+
+  @media (max-width: 360px) {
+    padding: calc(2 * var(--base-grid)) var(--base-grid);
+  }
+
+  section {
+    flex: 1;
+    min-width: calc(17 * var(--base-grid));
+
+    @media (max-width: 360px) {
+      min-width: calc(100vw - 3 * var(--base-grid));
+    }
+  }
+}
+
+#testimonials {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="3" y="3" width="1" height="1" fill="black"/></svg>');
+  padding: calc(2 * var(--base-grid));
+  width: 100%;
+  display: flex;
+  column-gap: calc(4 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  flex-wrap: wrap;
+
+  @media (max-width: 360px) {
+    padding: calc(2 * var(--base-grid)) var(--base-grid);
+  }
+
+  section {
+    flex: 1;
+    min-width: calc(17 * var(--base-grid));
+
+    @media (max-width: 360px) {
+      min-width: calc(100vw - 3 * var(--base-grid));
+    }
+  }
+}
+
+footer {
+
+  color: #fff;
+  padding: calc(2 * var(--base-grid));
+
+  ul {
+    list-style-position: inside;
+  }
+  li {
+    padding: 0 var(--base-grid);
+    list-style-position: inside;
+    float: left;
+  }
+
+  a {
+    color: #fff;
+  }
+}
+
+#text  {
+  max-width: calc(35 * var(--base-grid));
+  padding: var(--base-grid);
+}
+
+/* The Floating Window */
+.cutoff-corners {
+  background-color: #fff;
+  border: var(--border-width) solid #000;
+  border-radius: var(--radius);
+}
+
+.window {
+
+  .titlebar {
+    border-bottom: var(--border-width) solid #000;
+    padding: calc(3 * var(--border-width)) calc(8 * var(--border-width)) calc(4 * var(--border-width)) ;
+    line-height: calc(9 * var(--border-width));
+    text-align: center;
+    font-weight: 700;
+    background: repeating-linear-gradient(
+      0deg,
+      black,
+      black var(--border-width),
+      white var(--border-width),
+      white calc(var(--border-width) * 2)
+    );
+    background-clip: content-box;
+    background-origin: content-box;
+    list-style: none;
+
+    &::marker {
+      content: "";
+    }
+
+    .label {
+      background-color: #fff;
+      padding: var(--border-width) calc(5 * var(--border-width));
+      line-height: calc(12 * var(--border-width));
+      height: calc(12 * var(--border-width));
+      display: inline-block;
+    }
+  }
+
+  .content {
+    padding: calc(var(--base-grid) - 1px) var(--base-grid);
+  }
+
+  hr.divider {
+    margin-left: -6px;
+    margin-right: -6px;
+  }
+}
+
+aside {
+  background: var(--background)
+}
diff --git a/static/font/LibreCaslonCondensed-Bold.woff2 b/static/font/LibreCaslonCondensed-Bold.woff2
new file mode 100755
index 0000000..4a4a681
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-Bold.woff2
diff --git a/static/font/LibreCaslonCondensed-BoldItalic.woff2 b/static/font/LibreCaslonCondensed-BoldItalic.woff2
new file mode 100755
index 0000000..944988e
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-BoldItalic.woff2
diff --git a/static/font/LibreCaslonCondensed-Italic.woff2 b/static/font/LibreCaslonCondensed-Italic.woff2
new file mode 100755
index 0000000..6b37d8a
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-Italic.woff2
diff --git a/static/font/LibreCaslonCondensed-Italic[wght].woff2 b/static/font/LibreCaslonCondensed-Italic[wght].woff2
new file mode 100755
index 0000000..0431f04
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-Italic[wght].woff2
diff --git a/static/font/LibreCaslonCondensed-Medium.woff2 b/static/font/LibreCaslonCondensed-Medium.woff2
new file mode 100755
index 0000000..22bc644
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-Medium.woff2
diff --git a/static/font/LibreCaslonCondensed-MediumItalic.woff2 b/static/font/LibreCaslonCondensed-MediumItalic.woff2
new file mode 100755
index 0000000..dddc7ff
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-MediumItalic.woff2
diff --git a/static/font/LibreCaslonCondensed-Regular.woff2 b/static/font/LibreCaslonCondensed-Regular.woff2
new file mode 100755
index 0000000..da1778e
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-Regular.woff2
diff --git a/static/font/LibreCaslonCondensed-SemiBold.woff2 b/static/font/LibreCaslonCondensed-SemiBold.woff2
new file mode 100755
index 0000000..99396d6
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-SemiBold.woff2
diff --git a/static/font/LibreCaslonCondensed-SemiBoldItalic.woff2 b/static/font/LibreCaslonCondensed-SemiBoldItalic.woff2
new file mode 100755
index 0000000..9b8a820
--- /dev/null
+++ b/static/font/LibreCaslonCondensed-SemiBoldItalic.woff2
diff --git a/static/font/LibreCaslonCondensed[wdth,wght].woff2 b/static/font/LibreCaslonCondensed[wdth,wght].woff2
new file mode 100755
index 0000000..d280f8a
--- /dev/null
+++ b/static/font/LibreCaslonCondensed[wdth,wght].woff2
diff --git a/static/font/LibreCaslonCondensed[wght].woff2 b/static/font/LibreCaslonCondensed[wght].woff2
new file mode 100755
index 0000000..67fff68
--- /dev/null
+++ b/static/font/LibreCaslonCondensed[wght].woff2
diff --git a/static/font/Ronzino-Bold.woff2 b/static/font/Ronzino-Bold.woff2
new file mode 100644
index 0000000..440957c
--- /dev/null
+++ b/static/font/Ronzino-Bold.woff2
diff --git a/static/font/Ronzino-BoldOblique.woff2 b/static/font/Ronzino-BoldOblique.woff2
new file mode 100644
index 0000000..29038fa
--- /dev/null
+++ b/static/font/Ronzino-BoldOblique.woff2
diff --git a/static/font/Ronzino-Medium.woff2 b/static/font/Ronzino-Medium.woff2
new file mode 100644
index 0000000..6161f9c
--- /dev/null
+++ b/static/font/Ronzino-Medium.woff2
diff --git a/static/font/Ronzino-MediumOblique.woff2 b/static/font/Ronzino-MediumOblique.woff2
new file mode 100644
index 0000000..0879928
--- /dev/null
+++ b/static/font/Ronzino-MediumOblique.woff2
diff --git a/static/font/Ronzino-Oblique.woff2 b/static/font/Ronzino-Oblique.woff2
new file mode 100644
index 0000000..0b4e1ac
--- /dev/null
+++ b/static/font/Ronzino-Oblique.woff2
diff --git a/static/font/Ronzino-Regular.woff2 b/static/font/Ronzino-Regular.woff2
new file mode 100644
index 0000000..b8763ad
--- /dev/null
+++ b/static/font/Ronzino-Regular.woff2
diff --git a/static/humans.txt b/static/humans.txt
new file mode 100644
index 0000000..b2bdf36
--- /dev/null
+++ b/static/humans.txt
@@ -0,0 +1,8 @@
+/* TEAM */
+Maintainer: Rubén Beltrán del Río
+Site: contact@r.bdr.sh
+Mastodon: https://friendship.quest/@ruben
+From: Berlin, Germany
+
+/* SITE */
+Language: English
diff --git a/static/img/selfie-export.png b/static/img/selfie-export.png
new file mode 100644
index 0000000..d50ef8f
--- /dev/null
+++ b/static/img/selfie-export.png
diff --git a/static/img/selfie.png b/static/img/selfie.png
new file mode 100644
index 0000000..d50ef8f
--- /dev/null
+++ b/static/img/selfie.png
diff --git a/static/js/animation.js b/static/js/animation.js
new file mode 100644
index 0000000..d78ac8f
--- /dev/null
+++ b/static/js/animation.js
@@ -0,0 +1,49 @@
+var K=document.querySelector('canvas'),
+{random:z,PI,cos,sin}=Math,
+X=K.getContext('2d'),F=24,l=-1001,
+u=0,S=Array(~~(z()*2)+3).fill().map(()=>({
+ C:~~(z()*10)+4,
+ r:30-4*u++, T:z()*.1,
+ R:z()>.25?z()/5-.1:0,
+ S:z()>.25?z()*.5+.5:1,
+ n:30,t:0,d:1
+})),Z=matchMedia('(prefers-reduced-motion: reduce)').matches?0:1
+
+X.strokeStyle='#fff'
+X.lineWidth=1
+function pl(x,y,r,s,t) {
+ X.beginPath()
+ for (let i=0; i<=s; i++) {
+  var a=(i*2*PI/s)+t,
+px=x+r*cos(a), py=y+r*sin(a)
+  i==0?X.moveTo(px, py):X.lineTo(px, py)
+ }
+X.stroke()
+}
+function d(s) {
+ var cx=30,cy=30,{T,d,r,S,n}=s
+ s.n+=T*d
+ if (s.n>=r) {
+  s.n=r
+  s.d=-1
+ }
+ if (s.n<=r*S) {
+  s.n=r*S
+  s.d=1
+ }
+ s.t+=s.R
+ s.C<13?pl(cx,cy,n,s.C,s.t):(X.beginPath(),X.arc(cx,cy,n,0,2*PI),X.stroke())
+}
+function f(t) {
+  if(Z)requestAnimationFrame(f)
+  var dt=t-l
+  if (dt>1000/F) {
+    X.clearRect(0,0,60,60)
+    X.rect(0,0,60,60)
+    X.stroke()
+    S.map(d)
+    l=t
+  }
+}
+K.onclick=()=>((Z=!Z)&&f())
+f(0)