Add portfolio content and design spec for Otis

content/about.md

@@ -0,0 +1,24 @@
+# About
+
+## Short Bio
+Automation engineer based in Berlin. I build internal tools, workflow automations, and AI-powered systems that replace manual busywork for small and medium businesses.
+
+## Longer Version
+I specialize in turning repetitive operational tasks into automated pipelines. I've built tools for HR processes, scheduling, document generation, and internal communications — systems that run smoothly without constant manual intervention.
+
+I work across the full stack: from n8n workflows connecting Google Workspace, email, and chat systems, to custom web apps in Next.js, to AI agents that handle scheduling and document drafting through natural language.
+
+If your team spends hours on tasks that follow predictable patterns, I can probably automate most of it.
+
+## What I Work With
+- **Automation:** n8n, custom Node.js pipelines, REST APIs, webhooks
+- **AI/LLM:** OpenAI, Anthropic, DeepSeek — tool-calling agents, not just chatbots
+- **Document Processing:** PDF manipulation, Word template generation
+- **Web Apps:** Next.js, React, TypeScript, Tailwind CSS
+- **Infrastructure:** Docker, Linux, self-hosted deployments
+- **Integrations:** Google Workspace, Telegram, email, ntfy, any system with an API
+
+## Languages
+- English (fluent)
+- German (professional)
+- Spanish (native)

content/design-spec.md

@@ -0,0 +1,57 @@
+# Portfolio — Design Spec
+
+## Visual Direction
+Modern SaaS landing page style. Inspired by n8n.io, openclaw.ai, claude.ai, openai.com.
+
+## Theme
+- **Dark mode primary** (deep gray/near-black background, light text)
+- Light mode optional (can add later)
+
+## Typography
+- **Font:** Inter or Geist Sans (clean, modern sans-serif)
+- **Headings:** Bold, large, high contrast
+- **Body:** Regular weight, comfortable reading size (16-18px base)
+
+## Colors
+- **Background:** `#0a0a0a` to `#111111` range
+- **Text:** White/off-white (`#fafafa` / `#e5e5e5`)
+- **Muted text:** `#888888` to `#a1a1a1`
+- **Accent:** Single strong color — TBD (suggest warm orange, electric blue, or green)
+- **Cards:** Subtle borders (`#222`) or glass/frosted effect with slight transparency
+- **Hover states:** Accent color glow or brightness shift
+
+## Layout
+1. **Navbar** — Logo/name left, 3-4 section links right, language switcher, CTA button
+2. **Hero** — Big bold headline, one-line subtitle, CTA button. Centered or left-aligned.
+3. **Services** — 4 cards in a 2x2 grid (stack on mobile)
+4. **Projects** — Card grid with title, short description, tech stack tags
+5. **About** — Short bio, tech stack icon grid, languages
+6. **Contact** — Email + links (LinkedIn, GitHub/Gitea)
+7. **Footer** — Minimal, copyright + links
+
+## Components
+- **Cards:** Rounded corners (8-12px), subtle border or glass effect
+- **Tags/badges:** For tech stack items (small, rounded, muted background)
+- **Buttons:** Rounded, accent color, clear hover state
+- **Dividers:** Subtle gradient lines or just whitespace
+
+## Animations
+- Fade-in on scroll (subtle, 200-300ms)
+- Nothing else — no parallax, no particle effects, no hero animations
+
+## Responsive
+- Mobile-first
+- Cards stack to single column on mobile
+- Navbar collapses to hamburger
+- Large tap targets for mobile
+
+## i18n
+- Language switcher in navbar (EN / DE / ES)
+- URL structure: `/en/`, `/de/`, `/es/`
+- Default locale: `en`
+
+## Reference Sites
+- https://n8n.io — dark, cards, clean sections
+- https://openclaw.ai — bold hero, testimonials, dark
+- https://openai.com — minimal, monochrome, typography-focused
+- https://claude.ai — warm tones, generous whitespace

content/projects.md

@@ -0,0 +1,55 @@
+# Projects
+
+## AI Schedule Planner
+**Type:** AI-powered workflow automation  
+**Stack:** n8n, DeepSeek (LLM), Google Calendar, Gmail  
+
+An AI agent that handles schedule planning through natural language. Managers describe what they need in plain text — the agent checks calendar availability, generates a plan, and drafts emails with proper formatting. Supports multilingual interaction.
+
+**Highlights:**
+- Natural language input → structured schedule assignments
+- Calendar integration for conflict detection
+- Auto-generated email drafts ready to send
+- Multilingual support (German/English)
+
+---
+
+## PDF Manager
+**Type:** Document processing API  
+**Stack:** Node.js, Express, pdf-lib, Multer  
+
+A REST API service for PDF manipulation. Upload documents, split them by page ranges, and rename output files based on extracted metadata. Built for integration into larger document processing pipelines.
+
+**Highlights:**
+- Split PDFs by page range or content markers
+- Automatic file naming from document metadata
+- Batch processing support
+- Dockerized for easy deployment
+
+---
+
+## DocxTemplater Server
+**Type:** Document generation API  
+**Stack:** Node.js, Express, docxtemplater, PizZip  
+
+A template-based Word document generation service. Upload a .docx template with placeholder variables, send data via API, get a finished document back. Used for contracts, letters, HR forms — anything with a repeating structure.
+
+**Highlights:**
+- Variable substitution in Word templates
+- Supports tables, loops, and conditional sections
+- REST API — integrates with any system
+- Dockerized for easy deployment
+
+---
+
+## Approval Workflow Engine
+**Type:** Workflow automation  
+**Stack:** n8n, Gmail, ntfy  
+
+A scheduled workflow that handles recurring procurement with a human-in-the-loop approval step. Runs on a configurable schedule, sends an approval request to the relevant team, and on approval automatically emails the supplier. Confirmation sent via push notification.
+
+**Highlights:**
+- Configurable scheduled triggers
+- Email-based approval workflow
+- Auto-generated supplier/vendor emails
+- Push notification confirmations

content/services.md

@@ -0,0 +1,48 @@
+# Services
+
+## Workflow Automation
+I build automated pipelines that replace repetitive manual work. From form submissions to multi-step approval flows, I connect your existing tools (Google Workspace, email, chat, notifications) into workflows that run themselves.
+
+**What this looks like:**
+- Multi-step approval workflows with email and push notifications
+- Scheduled reports and notifications across multiple channels
+- Data sync between internal systems
+- Form-based intake that triggers automated processing
+
+**Tools:** n8n, Node.js, REST APIs, Google Workspace APIs, Webhooks
+
+---
+
+## AI-Powered Internal Tools
+I integrate LLMs into practical business tools — not chatbots, but agents that do real work. Natural language interfaces for scheduling, document drafting, and data processing.
+
+**What this looks like:**
+- AI agent that reads calendars, drafts emails, and plans schedules from plain-text requests
+- Document classification and routing
+- Smart data extraction from unstructured inputs
+
+**Tools:** OpenAI, Anthropic, DeepSeek, LangChain, tool-calling agents
+
+---
+
+## Document Processing
+I build services that handle PDF and Word document manipulation at scale. Template-based generation, splitting, merging, metadata extraction — exposed as APIs your other systems can call.
+
+**What this looks like:**
+- DOCX generation from templates (contracts, letters, forms)
+- PDF splitting and renaming based on content
+- Batch document processing pipelines
+
+**Tools:** Node.js, pdf-lib, docxtemplater, Express, REST APIs
+
+---
+
+## Custom Web Applications
+I build focused web apps that solve specific operational problems. Clean UI, fast, deployed and ready to use.
+
+**What this looks like:**
+- Employee-facing internal tools
+- Data validation and reporting dashboards
+- Absence and scheduling systems
+
+**Tools:** Next.js, React, TypeScript, Tailwind CSS