feat: add Roj experiment section

index.html

@@ -26,6 +26,7 @@
             </button>
             <div class="nav-links">
                 <a href="#portfolio" data-en="Featured Projects" data-de="Projekte">Featured Projects</a>
+                <a href="#experiments" data-en="Experiments" data-de="Experimente">Experiments</a>
                 <a href="#expertise" data-en="Technical Expertise" data-de="Fachkenntnisse">Technical Expertise</a>
                 <a href="#contact" data-en="Let's Connect" data-de="Kontakt">Let's Connect</a>
                 <a href="/blog" data-en="Blog" data-de="Blog">Blog</a>
@@ -104,6 +105,10 @@
 - **KjeSiTaksi** — Co-founded and developed KjeSiTaksi from September 2011 to June 2012. Planned and built iOS and Android ride-hailing apps, improving urban mobility and transportation services in Slovenia.
   - Technologies: iOS, Android, Location Services
 
+## Experiments
+- **Roj** — A place for useful background agent work and agent-native collaboration.
+  - URL: https://roj.world
+
 ## Technical Expertise
 - iOS Development: Swift, Objective-C, SwiftUI, UIKit, TestFlight, App Store Connect
 - Android Development: Kotlin, Java, Jetpack Compose, Material Design, Play Console
@@ -131,6 +136,10 @@
 - **KjeSiTaksi** — Mitbegründer und Entwickler von KjeSiTaksi von September 2011 bis Juni 2012. Plante und entwickelte iOS- und Android-Taxi-Apps zur Verbesserung der städtischen Mobilität und Transportdienste in Slowenien.
   - Technologien: iOS, Android, Standortdienste
 
+## Experimente
+- **Roj** — Ein Ort für nützliche Hintergrundarbeit durch Agenten und agent-native Zusammenarbeit.
+  - URL: https://roj.world
+
 ## Technische Expertise
 - iOS-Entwicklung: Swift, Objective-C, SwiftUI, UIKit, TestFlight, App Store Connect
 - Android-Entwicklung: Kotlin, Java, Jetpack Compose, Material Design, Play Console
@@ -182,6 +191,18 @@ <h3>KjeSiTaksi</h3>
         </div>
     </section>
 
+    <section id="experiments">
+        <h2 class="scroll-animation" data-en="Experiments" data-de="Experimente">Experiments</h2>
+        <div class="portfolio-grid experiments-grid">
+            <div class="portfolio-item experiment-item scroll-animation">
+                <p class="eyebrow" data-en="Agent-native collaboration" data-de="Agent-native Zusammenarbeit">Agent-native collaboration</p>
+                <h3>Roj</h3>
+                <p data-en="A place for useful background agent work: public tasks, capability checks, and small swarms that help humans get things done." data-de="Ein Ort für nützliche Hintergrundarbeit durch Agenten: öffentliche Aufgaben, Fähigkeitsprüfungen und kleine Schwarme, die Menschen beim Erledigen von Dingen helfen.">A place for useful background agent work: public tasks, capability checks, and small swarms that help humans get things done.</p>
+                <a class="experiment-link" href="https://roj.world" target="_blank" rel="noopener noreferrer" data-en="Visit roj.world" data-de="roj.world besuchen">Visit roj.world</a>
+            </div>
+        </div>
+    </section>
+
     <section id="expertise" class="scroll-animation">
         <h2 class="scroll-animation" data-en="Technical Expertise" data-de="Technische Expertise">Technical Expertise</h2>
         <div class="portfolio-grid">

styles.css

@@ -148,6 +148,42 @@ section {
     letter-spacing: 0.01em;
 }
 
+.experiments-grid {
+    grid-template-columns: minmax(280px, 1fr);
+}
+
+.experiment-item {
+    max-width: 760px;
+}
+
+.eyebrow {
+    color: var(--accent-color);
+    font-size: 0.85rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.experiment-link {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 1rem;
+    color: var(--accent-color);
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.experiment-link:hover {
+    color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.experiment-link::after {
+    content: '↗';
+    margin-left: 0.4rem;
+}
+
 .contact-links {
     display: flex;
     justify-content: center;