Contact
●Status: Active // Ready
View_ID: INDEX_H01_PRO_COMPREHENSIVE
Timestamp: --
SEC_01 // INDEX

SEC_01 // INDEX

Web Developer — Karlsruhe, DE

COMPOSE_

Samuel Ratzel // Web Developer

Samuel Ratzel

Karlsruhe, DE // Available

Get in touch LinkedInGitHub
SEC_02 // ABOUT

SEC_02 // ABOUT

THE ARCHITECTURAL APPROACH

Certified IT specialist in application development (Fachinformatiker AE), now Web Developer at EchoSpaces GmbH. I build interfaces that are clean, playful and actually enjoyable to use. Three years of shipping real products with Vue, Nuxt, TypeScript and CSS.

// Location

Karlsruhe, DE [49.015° N, 8.405° E]

// Availability

Web Developer @ EchoSpaces GmbH

SEC_HOT // FRESH_FROM_THE_LAB

SEC_HOT // FRESH_FROM_THE_LAB

HOT_RIGHT_NOW

hand-picked // straight from the lab

LAB_08 NEW

SLEEP WELL.

A cozy 3D beach that follows your clock and your weather: sunsets, storms with real breakers, lanterns at night, cicadas, lofi and a fullscreen zen mode to fall asleep to.

ENTER [→]

LAB_01 NEW

LIQUID GLASS.

Five liquid glass experiments on one CSS layer stack: a lens that follows your cursor, glass over real scrolling text, and the chromatic variant that was too expensive to ship.

ENTER [→]
 ALL 8 EXPERIMENTS [→]
SEC_04 // PROJECTS

SEC_04 // PROJECTS

SELECTED_WORK

7 projects
PROJECT_02

Stream_Deck_Plugin

VIEW ON GITHUB [→]

Elgato Stream Deck plugin for controlling ULC and LVC emergency lighting systems in FiveM. Real-time sync, color-coded stage buttons, dynamic siren tone labels. Built with TypeScript and the Stream Deck SDK.

#TypeScript#StreamDeck#FiveM#NodeJS
PROJECT_01

CV_Generator

VIEW PROJECT [→]

A free, privacy-first resume and cover letter builder that runs entirely in the browser. Five templates, live editor, PDF export. No signup, no cloud, no tracking.

#Nuxt4#Vue3#TypeScript#PDF-Export#LocalFirst
PROJECT_03

DLRG_Dashboard

VIEW PROJECT [→]

Full-stack operations dashboard for DLRG Nordhardt. Fleet management, material inventory, digital logbooks, weather integration, admin panel. Closed-source.

#Nuxt4#Vue3#TypeScript#Capacitor#Socket.IO
PROJECT_04

Dialect_UI

VIEW PROJECT [→]

A design system and component library exploring regional dialect-inspired UI patterns. Experimental interface concepts rooted in cultural expression.

#Vue3#DesignSystem#UI#Experimental
PROJECT_06

Vox_Inanis

VIEW PROJECT [→]

Robust audio steganography framework. Uses adversarial ML to inject inaudible digital signatures into audio. Unmistakable to AI, survives YouTube transcoding. Security research where deep learning meets audio engineering.

#Python#PyTorch#Whisper#AdversarialML#FastAPI#AudioSteganography
PROJECT_07

Liquid_Glass

VIEW PROJECT [→]

A real CSS refraction effect built from SVG displacement maps and a backdrop-filter layer stack. Interactive playground with draggable glass, live filter controls and a macOS-style dock. No WebGL, no libraries.

#CSS#SVG#backdrop-filter#feDisplacementMap
PROJECT_05

AI_Diary

PRIVATE PROJECT

A local-first AI diary that collects context like weather, mood, habits and queries to profile you over time and offer genuinely useful reflection. No cloud, no tracking, fully yours.

#AI#LocalFirst#Vue3#PrivateProject
GAME_01

Number_Match

PLAY NOW [→]

A number-puzzle game built into this portfolio. Match equal numbers or pairs that sum to 10. Three difficulty modes, local highscores, particle FX. No install, no account — just play.

#Vue3#Game#Canvas#Nuxt
SEC_LAB // EXPERIMENTS

SEC_LAB // EXPERIMENTS

THE_LAB

8 live experiments

Things that are too much fun to bury inside a project page. Everything runs live in your browser: liquid glass built from a CSS layer stack, eleven design systems morphing into each other, and volumetric light rays straight from a WebGL shader. The glass panel below is already one of the exhibits.

SEC_03 // TECH

SEC_03 // TECH

TECHNICAL_STACK

16 capabilities
01 / FRAMEWORK

VUE / NUXT

02 / FRAMEWORK

REACT

03 / FRAMEWORK

ANGULAR

04 / CORE

JAVASCRIPT

05 / CORE

TYPESCRIPT

06 / CORE

HTML / CSS

07 / STYLING

SCSS

08 / TOOLING

VITE

09 / RUNTIME

NODE.JS

10 / BACKEND

JAVA

11 / BACKEND

SPRING BOOT

12 / BACKEND

SQL

13 / INFRA

DOCKER

14 / INFRA

NGINX

15 / INFRA

GITLAB CI/CD

16 / DESIGN

FIGMA

SEC_07 // TOOLS

SEC_07 // TOOLS

STACK & INSTRUMENTATION

21 tools
WebStorm
VS Code
Figma
Git
GitLab
Docker
Postman
Ubuntu
macOS
Windows
Jira
Confluence
Teams
MS365
Scrum
Android Studio
GitHub Copilot
Claude
ChatGPT
Gemini
ComfyUI
SEC_05 // CAREER

SEC_05 // CAREER

WORK_HISTORY

3 positions
Current
Juli 2026 — Present
Karlsruhe, DE

EchoSpaces GmbH

Web Developer

EchoSpaces turns product presentations into auratic, interactive 3D worlds where real business happens. I build the web side of it: the company website and shared component library in an Angular monorepo, localized in six languages.

AngularTypeScriptSCSSi18nFrontend
Previous
Sept. 2023 — Juli 2026
Karlsruhe, DE

United Internet AG

IT Apprentice (Fachinformatiker AE)

Frontend-first, but not frontend-only. Built and shipped real features in Vue, Nuxt and React: component architecture, API integration, frontend and backend testing. Used Vite and Node.js throughout. On the backend, worked with Java, Spring Boot and SQL. Spun up Docker containers, configured Nginx, set up mail servers, handled SSL certificates and pushed it all through GitLab CI/CD pipelines. Worked in agile teams with standups, sprint planning and retrospectives.

Vue / NuxtReactTypeScriptNode.jsViteJavaSpring BootSQLDockerNginxGitLab CI/CDAgile
Previous
Mai 2023 — Aug. 2023
Karlsruhe, DE

Bäderbetriebe Karlsruhe

Lifeguard

Seasonal lifeguard at Europabad Karlsruhe. Responsible for pool safety, emergency response and guest guidance. Insight into professional aquatic facility operations.

SafetyEmergency ResponseTeam Work
SEC_06 // EDU

SEC_06 // EDU

ACADEMIC_RECORD

Degree_ProgramInstitutionTimeline
Fachinformatiker AnwendungsentwicklungUnited Internet AG2023 — 2026
Fachhoschulreife (Schulischer Teil)Albert-Einstein-Schule Ettlingen2020 — 2022
RealschulabschlussRealschule Neureut2017 — 2020
2023 — 2026

Fachinformatiker Anwendungsentwicklung

United Internet AG

2020 — 2022

Fachhoschulreife (Schulischer Teil)

Albert-Einstein-Schule Ettlingen

2017 — 2020

Realschulabschluss

Realschule Neureut

SEC_07 // SERVICE

SEC_07 // SERVICE

DLRG NORDHARDT E.V. // EINSATZTEAM

ACTIVE_SERVICE

Water Rescue · First Response · Emergency Medical

UNIT_STATUSOPERATIONAL
LOCATIONEgg-Leo // KA
SINCE2022

UNIT // 01

DLRG Lifesaver

ACTIVE
UNIT_DATA
PERIODNov. 2024 — Present
BASEegg-leo // KA

Active member of the water rescue unit, certified as Lifesaver by the DLRG (German Life Saving Association), equivalent to the ILSF Lifesaver qualification of the International Life Saving Federation. Trained in aquatic rescue, victim extraction and coordination with emergency services, including on-water and flood scenarios.

// Water Rescue// Flood Operations// Emergency Response
VIEW_PRESS_RELEASE

UNIT // 02

Emergency Medical Responder

ACTIVE
UNIT_DATA
PERIOD2024 — Present
BASEegg-leo // KA

Certified First Aider and Emergency Medical Responder providing pre-ambulance medical care in town. Trained in patient assessment, vital monitoring, basic life support and rescue equipment.

// First Aid// EMR

UNIT // 03

Swimming Instructor

ONGOING
UNIT_DATA
PERIODJuly 2022 — Present
BASEegg-leo // KA

Teaching children water safety and swimming skills. Running regular training sessions focused on technique, confidence in the water and basic self-rescue awareness.

// Kids// Water Safety// Teaching
ALL ROLES VOLUNTARY SANITÄTSDIENST A + B CERTIFIEDWASSERRETTER CERTIFIED
SEC_09 // AI

SEC_09 // AI

ASSISTED_NOT_REPLACED

HUMAN_IN_THE_LOOP

I use AI the same way I use any other tool: deliberately. It handles the repetitive parts so I can focus on what actually needs judgment. Architecture decisions, interaction quality, whether something feels right. The output still has to pass my bar. Most of it doesn't on the first try.

// AI handles

  • Boilerplate & repetition
  • First-draft copy
  • Refactoring suggestions
  • Reference imagery
  • Spelling

// I handle

  • Architecture decisions
  • Whether it feels right
  • Design judgment
  • Quality bar & review
  • The taste
T_01CODE

GITHUB_COPILOT

Inline autocomplete while writing. Fast, context-aware, saves the boring keystrokes.

T_02REASONING

CLAUDE

Architecture decisions, debugging partner, copy review. A second opinion I can argue with.

T_03REASONING

CHATGPT

Quick lookups, alternative perspectives, rubber duck with a better vocabulary.

T_04REASONING

GEMINI

Cross-referencing and research. Useful when I want a different angle on the same problem.

T_05DESIGN

STITCH

Google AI design tool that exports directly to Figma. Fast way to get rough layout ideas out of my head without burning an hour in Figma first.

T_06LOCAL

COMFYUI

Local image and video generation. Full control, no cloud, no data leaving the machine.

T_07LOCAL

CUSTOM_STACK

Self-hosted tools for TTS, local LLMs and more. Built and maintained myself, because owning your toolchain matters.

SEC_08 // CONNECT

SEC_08 // CONNECT

LET'S BUILD

Send_Message