Add image

1 files changed, 52 insertions, 18 deletions

diff --git a/index.html b/index.html
index d29245d..6f2382f 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <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="preload" href="/font/Ronzino-Bold.woff2" as="font" type="font/woff2" crossorigin>
     
     <link rel="stylesheet" type="text/css" href="/css/style.css">
     <link rel="author" href="humans.txt">
@@ -31,43 +32,76 @@
                  services ✷</p>
     </header>
     <main>
-      <section class="topic services">
+      <section id="introduction">
+        <section class="window cutoff-corners">
+          <header class="titlebar">
+            <span class="label">Welcome.</span>
+          </header>
+          <div class="content">
+            <img src="/img/selfie.png" alt="A pixel-art portrait of Rubén doing a peace sign and sticking his tongue out" />
+            <p>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!</p>
+          </div>
+        </section>
+      </section>
+      <section id="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>
+            <li><strong>Websites</strong> that are fast, accessible and search engine optimized.</li>
+            <li><strong>Native apps</strong> for iOS, iPadOS or macOS.</li>
+            <li><strong>Backend Services</strong> with great observability, clear documentation, and made to scale.</li>
+            <li><strong>Data Pipelines</strong> from tracking planning, to data warehouse extract-load-transform pipelines that give you accurate and actionable information.</li>
+            <li><strong>Infrastructure</strong> that can tie all your services, documented as code.</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>Supply chain analysis</strong> to reduce risk from dependencies across different packaging ecosystems.</li>
             <li><strong>Automate</strong> code quality and deployment.</li>
-            <li>Reduce your overall cloud cost.</li>
+            <li><strong>Reduce cloud cost</strong> by optimizing your resource usage, plans and overall architecture.</li>
+            <li><strong>Optimize Large-Language-Model</strong> usage by creating custom tooling and Model Context Protocol (MCP) servers.</li>
           </ul>
         </section>
         <section>
           <h2>Or help your team go fast.</h2>
           <ul>
+            <li>Bring your team up to speed with new technologies, architecture patterns or processes.</li>
             <li>Bring product and engineering closer together.</li>
-            <li>Professionalize or streamline your processes.</li>
+            <li><strong>Experimentation mindset</strong>, help your team learn how to design, execute, and interpret experiments.</li>
+            <li>Professionalize or streamline your processes by finding chokepoints and waste.</li>
           </ul>
         </section>
       </section>
-      <section class="topic skills">
-        <h2>Aint that right!</h2>
+      <section id="skills">
+        <section class="textured">
+        <h2>Ain't that right!</h2>
+        <p>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:</p>
+        <ul>
+          <li><strong>Languages:</strong> JavaScript, Rust, Ruby, Python, PHP, Swift, Objective-C.</li>
+          <li><strong>Cloud Providers:</strong> AWS, Scaleway, Cloudflare, Google Cloud, Azure.</li>
+          <li><strong>CI Systems:</strong> GitHub, Gitlab, CircleCI, TravisCI, Jenkins, Bitrise.</li>
+          <li><strong>Database Systems:</strong> PostgreSQL, MySQL/Aurora, Redis, MongoDB, Apache Cassandra, Snowflake.</li>
+          <li><strong>Analytics Software:</strong> Google Analytics, Amplitude, PostHog, .</li>
+        </ul>
+        </section>
+        <section class="window cutoff-corners pinned">
+          <header class="titlebar">
+            <span class="label">Get in touch.</span>
+          </header>
+          <div class="content">
+            <p>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!</p>
+            <button><label>Book a call.</label></button>
+            <a role="button" href="mailto:hello@ruben.bdr.sh?subject=Howdy%2C%20I%27d%20like%20to%20work%20with%20you%21&body=Hi%20Rub%C3%A9n%2C%0D%0A%0D%0AI%20saw%20the%20contact%20form%20on%20your%20website%20and%20would%20like%20to%20see%20if%20we%20can%20work%20together%20on%20my%20project%3A%0D%0A%0D%0A%3CTell%20me%20a%20bit%20about%20your%20project%20here%3E%0D%0A%0D%0ABest%2C%0D%0A%3CYour%20Name%3E"><label>Send an e-mail.</label></a>
+          </div>
+        </section>
+      </section>
+      <section id="testimonials">
+        <section class="textured">
+          <h2>But don't take my word for it.</h2>
+          <p>Here's what some lovely people have to say about me.</p>
+        </section>
       </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>
-