From c5f0e4768cd3c7242a9717aa7c2e6ce379803d29 Mon Sep 17 00:00:00 2001 From: Ruben Beltran del Rio Date: Sun, 31 Aug 2025 21:55:23 +0200 Subject: Add initial repo --- .gitignore | 1 + css/style.css | 278 +++++++++++++++++++++++++ font/LibreCaslonCondensed-Bold.woff2 | Bin 0 -> 50324 bytes font/LibreCaslonCondensed-BoldItalic.woff2 | Bin 0 -> 55408 bytes font/LibreCaslonCondensed-Italic.woff2 | Bin 0 -> 54768 bytes font/LibreCaslonCondensed-Italic[wght].woff2 | Bin 0 -> 69292 bytes font/LibreCaslonCondensed-Medium.woff2 | Bin 0 -> 51460 bytes font/LibreCaslonCondensed-MediumItalic.woff2 | Bin 0 -> 57656 bytes font/LibreCaslonCondensed-Regular.woff2 | Bin 0 -> 50380 bytes font/LibreCaslonCondensed-SemiBold.woff2 | Bin 0 -> 51788 bytes font/LibreCaslonCondensed-SemiBoldItalic.woff2 | Bin 0 -> 57696 bytes font/LibreCaslonCondensed[wdth,wght].woff2 | Bin 0 -> 62484 bytes font/LibreCaslonCondensed[wght].woff2 | Bin 0 -> 62552 bytes font/Ronzino-Bold.woff2 | Bin 0 -> 36908 bytes font/Ronzino-BoldOblique.woff2 | Bin 0 -> 36260 bytes font/Ronzino-Medium.woff2 | Bin 0 -> 36748 bytes font/Ronzino-MediumOblique.woff2 | Bin 0 -> 36304 bytes font/Ronzino-Oblique.woff2 | Bin 0 -> 36260 bytes font/Ronzino-Regular.woff2 | Bin 0 -> 36316 bytes humans.txt | 8 + index.html | 73 +++++++ js/animation.js | 49 +++++ 22 files changed, 409 insertions(+) create mode 100644 .gitignore create mode 100644 css/style.css create mode 100755 font/LibreCaslonCondensed-Bold.woff2 create mode 100755 font/LibreCaslonCondensed-BoldItalic.woff2 create mode 100755 font/LibreCaslonCondensed-Italic.woff2 create mode 100755 font/LibreCaslonCondensed-Italic[wght].woff2 create mode 100755 font/LibreCaslonCondensed-Medium.woff2 create mode 100755 font/LibreCaslonCondensed-MediumItalic.woff2 create mode 100755 font/LibreCaslonCondensed-Regular.woff2 create mode 100755 font/LibreCaslonCondensed-SemiBold.woff2 create mode 100755 font/LibreCaslonCondensed-SemiBoldItalic.woff2 create mode 100755 font/LibreCaslonCondensed[wdth,wght].woff2 create mode 100755 font/LibreCaslonCondensed[wght].woff2 create mode 100644 font/Ronzino-Bold.woff2 create mode 100644 font/Ronzino-BoldOblique.woff2 create mode 100644 font/Ronzino-Medium.woff2 create mode 100644 font/Ronzino-MediumOblique.woff2 create mode 100644 font/Ronzino-Oblique.woff2 create mode 100644 font/Ronzino-Regular.woff2 create mode 100644 humans.txt create mode 100644 index.html create mode 100644 js/animation.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..92f6de0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,278 @@ +/* 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; +} + +@font-face { + font-family: 'Ronzino'; + src: url('/font/Ronzino-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +/* Theme */ +:root { + --primary-color: #0000f5; + --background: #fff; + --foreground: #191919; + --selection-color: #ccc; + --font-libre-caslon: 'Libre Caslon', 'Times New Roman', 'Georgia', serif; + --font-ronzino: 'Ronzino', 'Arial', 'Helvetica', 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); + color: var(--primary-color); +} + +/* CSS Reset */ +* {margin: 0; padding: 0; box-sizing: border-box} +html { scroll-behavior: smooth } + +/* Body and base elements */ +body { + font-family: var(--font-ronzino); + 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-libre-caslon); + 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: 4px + } + } + + /* Animation */ + + canvas { + background: var(--primary-color); + display: block; + height: 60px; + width: 60px; + + @media (max-width: 600px) { + height: 40px; + width: 40px; + } + } + } +} +h1,h2,h3,h4 { font-weight: 300 } +li,p { text-align: justify; } +/* 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-libre-caslon); + font-weight: 500; + transform: translateY(-8px); + } +} + +.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)); + + @media (max-width: 360px) { + min-width: calc(100vw - 2 * var(--base-grid)); + } + } + + ul { + list-style: none; + margin-left: 0; + } + li { + position: relative; + transform: translateY(5px); + padding-left: var(--base-grid); + + &::before { + content: "✷"; + width: var(--base-grid); + display: inline-block; + margin-left: calc(-1 * var(--base-grid)); + text-align: left; + } + } +} + +.skills { + background-image: url('data:image/svg+xml;utf8,'); + padding: var(--base-grid); + width: 100vw; +} + +/* 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(4 * var(--border-width)) calc(8 * var(--border-width)); + line-height: calc(9 * var(--border-width)); + text-align: center; + font-weight: 600; + image-rendering: crisp-edges; + 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; + } + } + + &.pinned { + width: calc(20 * var(--base-grid)); + position: absolute; + bottom: 0; + right: var(--base-grid); + } + + &.free { + + } + + .content { + height: 0.01em; + padding: 5px; + transition: height 1s; + } + + &[open] .content { + overflow: hidden; + height: 10lh; + } + + hr.divider { + margin-left: -6px; + margin-right: -6px; + } +} + +aside { + background: var(--background) +} diff --git a/font/LibreCaslonCondensed-Bold.woff2 b/font/LibreCaslonCondensed-Bold.woff2 new file mode 100755 index 0000000..4a4a681 Binary files /dev/null and b/font/LibreCaslonCondensed-Bold.woff2 differ diff --git a/font/LibreCaslonCondensed-BoldItalic.woff2 b/font/LibreCaslonCondensed-BoldItalic.woff2 new file mode 100755 index 0000000..944988e Binary files /dev/null and b/font/LibreCaslonCondensed-BoldItalic.woff2 differ diff --git a/font/LibreCaslonCondensed-Italic.woff2 b/font/LibreCaslonCondensed-Italic.woff2 new file mode 100755 index 0000000..6b37d8a Binary files /dev/null and b/font/LibreCaslonCondensed-Italic.woff2 differ diff --git a/font/LibreCaslonCondensed-Italic[wght].woff2 b/font/LibreCaslonCondensed-Italic[wght].woff2 new file mode 100755 index 0000000..0431f04 Binary files /dev/null and b/font/LibreCaslonCondensed-Italic[wght].woff2 differ diff --git a/font/LibreCaslonCondensed-Medium.woff2 b/font/LibreCaslonCondensed-Medium.woff2 new file mode 100755 index 0000000..22bc644 Binary files /dev/null and b/font/LibreCaslonCondensed-Medium.woff2 differ diff --git a/font/LibreCaslonCondensed-MediumItalic.woff2 b/font/LibreCaslonCondensed-MediumItalic.woff2 new file mode 100755 index 0000000..dddc7ff Binary files /dev/null and b/font/LibreCaslonCondensed-MediumItalic.woff2 differ diff --git a/font/LibreCaslonCondensed-Regular.woff2 b/font/LibreCaslonCondensed-Regular.woff2 new file mode 100755 index 0000000..da1778e Binary files /dev/null and b/font/LibreCaslonCondensed-Regular.woff2 differ diff --git a/font/LibreCaslonCondensed-SemiBold.woff2 b/font/LibreCaslonCondensed-SemiBold.woff2 new file mode 100755 index 0000000..99396d6 Binary files /dev/null and b/font/LibreCaslonCondensed-SemiBold.woff2 differ diff --git a/font/LibreCaslonCondensed-SemiBoldItalic.woff2 b/font/LibreCaslonCondensed-SemiBoldItalic.woff2 new file mode 100755 index 0000000..9b8a820 Binary files /dev/null and b/font/LibreCaslonCondensed-SemiBoldItalic.woff2 differ diff --git a/font/LibreCaslonCondensed[wdth,wght].woff2 b/font/LibreCaslonCondensed[wdth,wght].woff2 new file mode 100755 index 0000000..d280f8a Binary files /dev/null and b/font/LibreCaslonCondensed[wdth,wght].woff2 differ diff --git a/font/LibreCaslonCondensed[wght].woff2 b/font/LibreCaslonCondensed[wght].woff2 new file mode 100755 index 0000000..67fff68 Binary files /dev/null and b/font/LibreCaslonCondensed[wght].woff2 differ diff --git a/font/Ronzino-Bold.woff2 b/font/Ronzino-Bold.woff2 new file mode 100644 index 0000000..440957c Binary files /dev/null and b/font/Ronzino-Bold.woff2 differ diff --git a/font/Ronzino-BoldOblique.woff2 b/font/Ronzino-BoldOblique.woff2 new file mode 100644 index 0000000..29038fa Binary files /dev/null and b/font/Ronzino-BoldOblique.woff2 differ diff --git a/font/Ronzino-Medium.woff2 b/font/Ronzino-Medium.woff2 new file mode 100644 index 0000000..6161f9c Binary files /dev/null and b/font/Ronzino-Medium.woff2 differ diff --git a/font/Ronzino-MediumOblique.woff2 b/font/Ronzino-MediumOblique.woff2 new file mode 100644 index 0000000..0879928 Binary files /dev/null and b/font/Ronzino-MediumOblique.woff2 differ diff --git a/font/Ronzino-Oblique.woff2 b/font/Ronzino-Oblique.woff2 new file mode 100644 index 0000000..0b4e1ac Binary files /dev/null and b/font/Ronzino-Oblique.woff2 differ diff --git a/font/Ronzino-Regular.woff2 b/font/Ronzino-Regular.woff2 new file mode 100644 index 0000000..b8763ad Binary files /dev/null and b/font/Ronzino-Regular.woff2 differ diff --git a/humans.txt b/humans.txt new file mode 100644 index 0000000..b2bdf36 --- /dev/null +++ b/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/index.html b/index.html new file mode 100644 index 0000000..d29245d --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + Rubén Beltrán del Río — Holistic Tech Services + + + + + + + + + + + +
+

+ + Rubén Beltrán del Río +

+

✷ Hollistic + tech + services ✷

+
+
+
+
+

I can help you build.

+
    +
  • Websites that are fast, accessible and search engine optimized.
    • +
  • Observable APIs and services with clear documentation that can be run at scale.
    • +
  • Native macOS, iOS or ipadOS applications.
    • +
+
+
+

Optimize and improve.

+
    +
  • Analyze and reduce risk in your supply chain across different ecosystems like Javascript, Swift, Rust, or Python.
    • +
  • Automate code quality and deployment.
    • +
  • Reduce your overall cloud cost.
    • +
+
+
+

Or help your team go fast.

+
    +
  • Bring product and engineering closer together.
    • +
  • Professionalize or streamline your processes.
    • +
+
+
+
+

Aint that right!

+
+
+ + + + diff --git a/js/animation.js b/js/animation.js new file mode 100644 index 0000000..d78ac8f --- /dev/null +++ b/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) -- cgit