diff options
22 files changed, 409 insertions, 0 deletions
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,<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: 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 Binary files differnew file mode 100755 index 0000000..4a4a681 --- /dev/null +++ b/font/LibreCaslonCondensed-Bold.woff2 diff --git a/font/LibreCaslonCondensed-BoldItalic.woff2 b/font/LibreCaslonCondensed-BoldItalic.woff2 Binary files differnew file mode 100755 index 0000000..944988e --- /dev/null +++ b/font/LibreCaslonCondensed-BoldItalic.woff2 diff --git a/font/LibreCaslonCondensed-Italic.woff2 b/font/LibreCaslonCondensed-Italic.woff2 Binary files differnew file mode 100755 index 0000000..6b37d8a --- /dev/null +++ b/font/LibreCaslonCondensed-Italic.woff2 diff --git a/font/LibreCaslonCondensed-Italic[wght].woff2 b/font/LibreCaslonCondensed-Italic[wght].woff2 Binary files differnew file mode 100755 index 0000000..0431f04 --- /dev/null +++ b/font/LibreCaslonCondensed-Italic[wght].woff2 diff --git a/font/LibreCaslonCondensed-Medium.woff2 b/font/LibreCaslonCondensed-Medium.woff2 Binary files differnew file mode 100755 index 0000000..22bc644 --- /dev/null +++ b/font/LibreCaslonCondensed-Medium.woff2 diff --git a/font/LibreCaslonCondensed-MediumItalic.woff2 b/font/LibreCaslonCondensed-MediumItalic.woff2 Binary files differnew file mode 100755 index 0000000..dddc7ff --- /dev/null +++ b/font/LibreCaslonCondensed-MediumItalic.woff2 diff --git a/font/LibreCaslonCondensed-Regular.woff2 b/font/LibreCaslonCondensed-Regular.woff2 Binary files differnew file mode 100755 index 0000000..da1778e --- /dev/null +++ b/font/LibreCaslonCondensed-Regular.woff2 diff --git a/font/LibreCaslonCondensed-SemiBold.woff2 b/font/LibreCaslonCondensed-SemiBold.woff2 Binary files differnew file mode 100755 index 0000000..99396d6 --- /dev/null +++ b/font/LibreCaslonCondensed-SemiBold.woff2 diff --git a/font/LibreCaslonCondensed-SemiBoldItalic.woff2 b/font/LibreCaslonCondensed-SemiBoldItalic.woff2 Binary files differnew file mode 100755 index 0000000..9b8a820 --- /dev/null +++ b/font/LibreCaslonCondensed-SemiBoldItalic.woff2 diff --git a/font/LibreCaslonCondensed[wdth,wght].woff2 b/font/LibreCaslonCondensed[wdth,wght].woff2 Binary files differnew file mode 100755 index 0000000..d280f8a --- /dev/null +++ b/font/LibreCaslonCondensed[wdth,wght].woff2 diff --git a/font/LibreCaslonCondensed[wght].woff2 b/font/LibreCaslonCondensed[wght].woff2 Binary files differnew file mode 100755 index 0000000..67fff68 --- /dev/null +++ b/font/LibreCaslonCondensed[wght].woff2 diff --git a/font/Ronzino-Bold.woff2 b/font/Ronzino-Bold.woff2 Binary files differnew file mode 100644 index 0000000..440957c --- /dev/null +++ b/font/Ronzino-Bold.woff2 diff --git a/font/Ronzino-BoldOblique.woff2 b/font/Ronzino-BoldOblique.woff2 Binary files differnew file mode 100644 index 0000000..29038fa --- /dev/null +++ b/font/Ronzino-BoldOblique.woff2 diff --git a/font/Ronzino-Medium.woff2 b/font/Ronzino-Medium.woff2 Binary files differnew file mode 100644 index 0000000..6161f9c --- /dev/null +++ b/font/Ronzino-Medium.woff2 diff --git a/font/Ronzino-MediumOblique.woff2 b/font/Ronzino-MediumOblique.woff2 Binary files differnew file mode 100644 index 0000000..0879928 --- /dev/null +++ b/font/Ronzino-MediumOblique.woff2 diff --git a/font/Ronzino-Oblique.woff2 b/font/Ronzino-Oblique.woff2 Binary files differnew file mode 100644 index 0000000..0b4e1ac --- /dev/null +++ b/font/Ronzino-Oblique.woff2 diff --git a/font/Ronzino-Regular.woff2 b/font/Ronzino-Regular.woff2 Binary files differnew file mode 100644 index 0000000..b8763ad --- /dev/null +++ b/font/Ronzino-Regular.woff2 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 @@ +<!DOCTYPE HTML> + +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="author" content="Rubén Beltrán del Río"> + <meta name="description" content="Rubén Beltrán del Río is a freelance software engineer that offers a wide-range of services, including native iOS and macOS development, web development, backend services, infrastructure, as well as organizational and leadership consulting for tech teams."> + <meta name="theme-color" content="#0000f5"> + <meta name="fediverse:creator" content="@ruben@friendship.quest" /> + + <title>Rubén Beltrán del Río — Holistic Tech Services</title> + + <link rel="preload" href="/font/LibreCaslonCondensed[wdth,wght].woff2" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="/font/LibreCaslonCondensed-Italic[wght].woff2" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="/font/Ronzino-Medium.woff2" as="font" type="font/woff2" crossorigin> + + <link rel="stylesheet" type="text/css" href="/css/style.css"> + <link rel="author" href="humans.txt"> + + <script type="module" src="/js/animation.js"></script> + </head> + <body> + <header> + <h1> + <canvas width="60" height="60" aria-hidden="true"></canvas> + <a href="/">Rubén Beltrán del Río</a> + </h1> + <p>✷ Hollistic + tech + services ✷</p> + </header> + <main> + <section class="topic services"> + <section> + <h2>I can help you build.</h2> + <ul> + <li>Websites that are <strong>fast</strong>, <strong>accessible</strong> and <strong>search engine optimized</strong>.</li> + <li>Observable APIs and services with clear documentation that can be run at scale.</li> + <li>Native macOS, iOS or ipadOS applications.</li> + </ul> + </section> + <section> + <h2>Optimize and improve.</h2> + <ul> + <li>Analyze and reduce risk in your <strong>supply chain</strong> across different ecosystems like Javascript, Swift, Rust, or Python.</li> + <li><strong>Automate</strong> code quality and deployment.</li> + <li>Reduce your overall cloud cost.</li> + </ul> + </section> + <section> + <h2>Or help your team go fast.</h2> + <ul> + <li>Bring product and engineering closer together.</li> + <li>Professionalize or streamline your processes.</li> + </ul> + </section> + </section> + <section class="topic skills"> + <h2>Aint that right!</h2> + </section> + </main> + <aside> + <details class="window cutoff-corners pinned"> + <summary class="titlebar"> + <span class="label">Get in touch.</span> + </summary> + <div class="content">Hello.</div> + </details> + </aside> + </body> +</html> + 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) |