From 13aafa5f5dcb0203eeb8966c79dacd301c73b0fb Mon Sep 17 00:00:00 2001 From: Ruben Beltran del Rio Date: Mon, 1 Sep 2025 17:45:58 +0200 Subject: Add image --- css/style.css | 183 +++++++++++++++++++++++++++++++++++++++++++-------------- img/selfie.png | Bin 0 -> 1413 bytes index.html | 70 ++++++++++++++++------ 3 files changed, 190 insertions(+), 63 deletions(-) create mode 100644 img/selfie.png diff --git a/css/style.css b/css/style.css index 92f6de0..1bb8de0 100644 --- a/css/style.css +++ b/css/style.css @@ -24,11 +24,20 @@ font-display: swap; } +@font-face { + font-family: 'Ronzino'; + src: url('/font/Ronzino-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + /* Theme */ :root { --primary-color: #0000f5; --background: #fff; - --foreground: #191919; + --foreground: #000019; + --foreground-emphasis: #191919; --selection-color: #ccc; --font-libre-caslon: 'Libre Caslon', 'Times New Roman', 'Georgia', serif; --font-ronzino: 'Ronzino', 'Arial', 'Helvetica', sans-serif; @@ -41,6 +50,7 @@ ::selection { background-color: var(--selection-color); + -webkit-text-stroke: 0; color: var(--primary-color); } @@ -48,7 +58,54 @@ * {margin: 0; padding: 0; box-sizing: border-box} html { scroll-behavior: smooth } -/* Body and base elements */ +/* Base Elements */ +h1,h2,h3,h4 { font-weight: 300 } +li,p { + hyphens: auto; + text-align: justify; + transform: translateY(5px); +} +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-ronzino); + 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-ronzino); color: var(--foreground); @@ -59,6 +116,7 @@ body { flex-direction: column; align-items: stretch; height: 100vh; + /* Header */ @@ -139,8 +197,6 @@ body { } } } -h1,h2,h3,h4 { font-weight: 300 } -li,p { text-align: justify; } /* The Main Body */ main { @@ -158,9 +214,41 @@ main { font-weight: 500; transform: translateY(-8px); } + + ul { + list-style: none; + margin-left: 0; + } + 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: calc(1 * 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 { +#services { column-gap: calc(2 * var(--base-grid)); row-gap: calc(3 * var(--base-grid)); padding: calc(2 * var(--base-grid)); @@ -181,29 +269,52 @@ main { } } - ul { - list-style: none; - margin-left: 0; +} + +#skills { + background-image: url('data:image/svg+xml;utf8,'); + 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); } - 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; + + section { + flex: 1; + min-width: calc(17 * var(--base-grid)); + + @media (max-width: 360px) { + min-width: calc(100vw - 3 * var(--base-grid)); } } } -.skills { - background-image: url('data:image/svg+xml;utf8,'); - padding: var(--base-grid); - width: 100vw; +#testimonials { + background-image: url('data:image/svg+xml;utf8,'); + 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)); + } + } } /* The Floating Window */ @@ -214,13 +325,13 @@ main { } .window { + .titlebar { border-bottom: var(--border-width) solid #000; - padding: calc(4 * var(--border-width)) calc(8 * var(--border-width)); + padding: calc(3 * 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; + font-weight: 700; background: repeating-linear-gradient( 0deg, black, @@ -245,26 +356,8 @@ main { } } - &.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; + padding: var(--base-grid); } hr.divider { diff --git a/img/selfie.png b/img/selfie.png new file mode 100644 index 0000000..5abfd3d Binary files /dev/null and b/img/selfie.png differ diff --git a/index.html b/index.html index d29245d..6f2382f 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@ + @@ -31,43 +32,76 @@ services ✷

-
+
+
+
+ Welcome. +
+
+ A pixel-art portrait of Rubén doing a peace sign and sticking his tongue out +

Howdy! I'm Rubén, a freelance full-stack software engineer based in Berlin. Looking for some help with your project? I might be able to help!

+
+
+
+

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.
    • +
  • Websites that are fast, accessible and search engine optimized.
    • +
  • Native apps for iOS, iPadOS or macOS.
    • +
  • Backend Services with great observability, clear documentation, and made to scale.
    • +
  • Data Pipelines from tracking planning, to data warehouse extract-load-transform pipelines that give you accurate and actionable information.
    • +
  • Infrastructure that can tie all your services, documented as code.

Optimize and improve.

    -
  • Analyze and reduce risk in your supply chain across different ecosystems like Javascript, Swift, Rust, or Python.
    • +
  • Supply chain analysis to reduce risk from dependencies across different packaging ecosystems.
  • Automate code quality and deployment.
    • -
  • Reduce your overall cloud cost.
    • +
  • Reduce cloud cost by optimizing your resource usage, plans and overall architecture.
    • +
  • Optimize Large-Language-Model usage by creating custom tooling and Model Context Protocol (MCP) servers.

Or help your team go fast.

    +
  • Bring your team up to speed with new technologies, architecture patterns or processes.
  • Bring product and engineering closer together.
    • -
  • Professionalize or streamline your processes.
    • +
  • Experimentation mindset, help your team learn how to design, execute, and interpret experiments.
    • +
  • Professionalize or streamline your processes by finding chokepoints and waste.
-
-

Aint that right!

+
+
+

Ain't that right!

+

With over 25 years of experience, I've worked with big and small teams, ad-supported and sales-driven products, bootstrapped startups looking to launch, and established companies looking to scale up. I've worked with all sorts of stacks:

+
    +
  • Languages: JavaScript, Rust, Ruby, Python, PHP, Swift, Objective-C.
    • +
  • Cloud Providers: AWS, Scaleway, Cloudflare, Google Cloud, Azure.
    • +
  • CI Systems: GitHub, Gitlab, CircleCI, TravisCI, Jenkins, Bitrise.
    • +
  • Database Systems: PostgreSQL, MySQL/Aurora, Redis, MongoDB, Apache Cassandra, Snowflake.
    • +
  • Analytics Software: Google Analytics, Amplitude, PostHog, .
    • +
+
+
+
+ Get in touch. +
+
+

You can book a call to tell me about your project face to face. Or you if you prefer text, you can send me an e-mail!

+ + +
+
+
+
+
+

But don't take my word for it.

+

Here's what some lovely people have to say about me.

+
- - -- cgit