<!doctype html>
<html lang="en" class="bg-gray-800 text-white antialiased">
<head>
    <title>Sven Finger</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Product Designer with more than 15 years of professional experience. Currently working remotely from Hamburg and creating an employee app changing desk-less work.">
        
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://svenfinger.digital">
    <meta property="og:title" content="Sven Finger">
    <meta property="og:description" content="Product Designer with more than 15 years of professional experience. Currently working remotely from Hamburg and creating an employee app changing desk-less work.">
    <meta property="og:image" content="https://svenfinger.digital/assets/img/share.png">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://svenfinger.digital">
    <meta property="twitter:title" content="Sven Finger">
    <meta property="twitter:description" content="Product Designer with more than 15 years of professional experience. Currently working remotely from Hamburg and creating an employee app changing desk-less work.">
    <meta property="twitter:image" content="https://svenfinger.digital/assets/img/share.png">

    <link rel="preload" as="style" href="https://svenfinger.digital/build/assets/app-816446ca.css" /><link rel="modulepreload" href="https://svenfinger.digital/build/assets/app-d54a75f7.js" /><link rel="stylesheet" href="https://svenfinger.digital/build/assets/app-816446ca.css" /><script type="module" src="https://svenfinger.digital/build/assets/app-d54a75f7.js"></script>    <link rel="preload" as="style" href="https://svenfinger.digital/build/assets/app-17a580c3.css" /><link rel="stylesheet" href="https://svenfinger.digital/build/assets/app-17a580c3.css" />
    <link rel="icon" href="https://svenfinger.digital/favicon.ico" sizes="any">
    <link rel="icon" href="https://svenfinger.digital/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="https://svenfinger.digital/apple-touch-icon.png">
    <link rel="manifest" href="https://svenfinger.digital/manifest.webmanifest" crossorigin="use-credentials">

    <script src="https://cdn.usefathom.com/script.js" data-site="WUIOMJDW" defer></script>
</head>
<body>
    <div class="bg-black max-w-screen-3xl min-h-screen m-auto">

        
        <div x-data="{ open: false }">
            <div class="border-b border-white/10 flex justify-between lg:justify-normal">
                <a class="block px-6 sm:px-12 py-6 shrink-0 opacity-100" href="/">
                    <img src="https://svenfinger.digital/assets/img/logo.svg" width="60" height="24" alt="Sven Finger Logo">
                </a>
                <div class="grow items-center hidden lg:flex">
                    <div class="flex grow">
                        <a href="/" class="py-6 px-4 text-white">Intro</a>
                        <a href="https://svenfinger.digital/projects" class="py-6 px-4 text-white/60 hover:text-white/80">Projects</a>
                        <a href="https://svenfinger.digital/about" class="py-6 px-4 text-white/60 hover:text-white/80">About</a>
                        <a href="https://svenfinger.digital/contact" class="py-6 px-4 text-white/60 hover:text-white/80">Contact</a>
                    </div>
                    <div class="text-white/60" x-data="clock()" x-init="init()">
                        Hamburg <span x-text="getTime()">23:05</span>
                    </div>
                    <div class="px-12">
                        <a class="inline-flex items-center justify-center text-center rounded focus:outline outline-1 outline-offset-2 outline-blue-500 bg-gradient-to-b from-blue-600 to-blue-800 hover:from-blue-500 hover:to-blue-700 shadow-outline shadow-white/10 py-2 px-6" href="https://svenfinger.digital/contact">
    Let’s talk
</a>
                    </div>
                </div>
                <div class="py-5 px-4 sm:px-10 lg:hidden flex items-center cursor-pointer" x-on:click="open = ! open">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
                    </svg>
                </div>
            </div>

            
            <div class="flex-col px-4 sm:px-10 pb-6 border-b border-white/10" x-cloak :class="open ? 'flex' : 'hidden'">
                <div class="flex">
                    <a href="/" class="py-6 px-2 text-white">Intro</a>
                    <a href="https://svenfinger.digital/about" class="py-6 px-2 text-white/60 hover:text-white/80">About</a>
                    <a href="https://svenfinger.digital/projects" class="py-6 px-2 text-white/60 hover:text-white/80">Projects</a>
                    <a href="https://svenfinger.digital/contact" class="py-6 px-2 text-white/60 hover:text-white/80">Contact</a>
                </div>
                <div class="flex px-2 gap-6 items-center">
                    <a class="inline-flex items-center justify-center text-center rounded focus:outline outline-1 outline-offset-2 outline-blue-500 bg-gradient-to-b from-blue-600 to-blue-800 hover:from-blue-500 hover:to-blue-700 shadow-outline shadow-white/10 py-2 px-6" href="https://svenfinger.digital/contact">
    Let’s talk
</a>
                    <div class="text-white/60" x-data="clock()" x-init="init()">
                        Hamburg <span x-text="getTime()">23:05</span>
                    </div>
                </div>
            </div>
        </div>

        
            <div class="pt-16 sm:pt-72 pb-24 px-6 sm:px-12 grid sm:grid-cols-2 gap-12">
    <h1 class="text-5xl md:text-6xl leading-tight md:leading-tight font-serif">
            Designer &amp; Developer
        </h1>
            <div class="prose prose-invert prose-2xl prose-p:leading-normal prose-a:decoration-white/50 hover:prose-a:decoration-white prose-a:decoration-1 prose-a:underline-offset-2 prose-a:font-normal prose-strong:font-semibold pt-3"><p>I create products from end-to-end. I’m a strong team player with a good sense for what matters (aka getting things done). I collaborate with all stakeholders to create great products for real users.</p></div>
</div>
<div class="px-6 pb-36 sm:px-12 sm:pb-72">
    <div class="grid gap-6 sm:grid-cols-2 sm:gap-12 mb-12">
                    <a class="group flex flex-col gap-3 pt-6 decoration-1 underline-offset-2" href="https://svenfinger.digital/projects/shopfloor-app">
                <img src="https://svenfinger.digital/img/97469c59-4c74-455a-8dac-31adcfdfe388/zaikio-shopfloor-app-cover.jpg?fm=jpg&amp;q=80&amp;fit=max&amp;crop=1920%2C1920%2C0%2C0" alt="Zaikio Shopfloor App Cover" class="opacity-90 group-hover:opacity-100 w-full" width="1208" height="680">
                <div>
                    <div class="text-2xl leading-normal font-semibold opacity-80 group-hover:opacity-100">
                        Shopfloor App
                                                                    </div>
                    <div class="text-2xl leading-normal opacity-60 group-hover:opacity-80">Zaikio</div>
                </div>
            </a>
                    <a class="group flex flex-col gap-3 pt-6 decoration-1 underline-offset-2" href="https://svenfinger.digital/projects/keyline">
                <img src="https://svenfinger.digital/img/c6016e60-ba38-418e-ad21-3b6c8dbc7139/keyline-cover.jpg?fm=jpg&amp;q=80&amp;fit=max&amp;crop=1920%2C1920%2C0%2C0" alt="Keyline Cover" class="opacity-90 group-hover:opacity-100 w-full" width="1208" height="680">
                <div>
                    <div class="text-2xl leading-normal font-semibold opacity-80 group-hover:opacity-100">
                        Keyline
                                                                    </div>
                    <div class="text-2xl leading-normal opacity-60 group-hover:opacity-80">Zaikio</div>
                </div>
            </a>
            </div>
    <a class="inline-flex items-center justify-center text-center rounded focus:outline outline-1 outline-offset-2 outline-blue-500 bg-gradient-to-b from-blue-600 to-blue-800 hover:from-blue-500 hover:to-blue-700 shadow-outline shadow-white/10 py-3 px-8 text-lg" href="https://svenfinger.digital/projects">
    More projects
</a>
</div>
<div class="px-6 pb-16 sm:px-12 sm:pb-32">
    <div class="grid sm:grid-cols-2 gap-12">
                    <div class="border-t border-white/10 pt-12">
                <h2 class="text-4xl md:text-5xl leading-tight md:leading-tight font-serif  mb-4">
            About
        </h2>
                        <div class="prose prose-invert prose-xl prose-p:leading-normal prose-a:decoration-white/50 hover:prose-a:decoration-white prose-a:decoration-1 prose-a:underline-offset-2 prose-a:font-normal prose-strong:font-semibold mb-12"><p>I’m currently working remotely from Hamburg (Germany) as a product designer. I didn’t start my career as a designer, but as a developer. Today I focus on design. I’m interested in music, art and playing video games.</p></div>
                <a class="inline-flex items-center justify-center text-center rounded focus:outline outline-1 outline-offset-2 outline-blue-500 bg-gradient-to-b from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-800 shadow-outline shadow-white/5 py-2 px-6" href="about">
    More about me
</a>
            </div>
                    <div class="border-t border-white/10 pt-12">
                <h2 class="text-4xl md:text-5xl leading-tight md:leading-tight font-serif  mb-4">
            Contact
        </h2>
                        <div class="prose prose-invert prose-xl prose-p:leading-normal prose-a:decoration-white/50 hover:prose-a:decoration-white prose-a:decoration-1 prose-a:underline-offset-2 prose-a:font-normal prose-strong:font-semibold mb-12"><p>Get in touch with me for a coffee chat, an exchange about interesting projects, or anything else that you want to talk about. I’m really down for any type of chat!</p></div>
                <a class="inline-flex items-center justify-center text-center rounded focus:outline outline-1 outline-offset-2 outline-blue-500 bg-gradient-to-b from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-800 shadow-outline shadow-white/5 py-2 px-6" href="contact">
    Let’s talk
</a>
            </div>
            </div>
</div>


    
            <div class="px-6 py-6 sm:px-12 sm:py-12 border-t border-white/10">
        <a href="https://svenfinger.digital/projects" class="group">
            <div class="text-lg leading-normal opacity-50 mb-2 group-hover:opacity-80">Next page</div>
            <h2 class="text-4xl md:text-5xl leading-tight md:leading-tight font-serif  opacity-80 group-hover:opacity-100">
            Projects
        </h2>
                </a>
    </div>
    
        
        <div class="px-6 sm:px-12 py-24 border-t border-white/10 flex flex-col gap-24 items-start">
            <div class="grid gap-12 sm:grid-cols-2 w-full">
                <div class="grid gap-12 grid-cols-2 md:grid-cols-3 text-lg">
                    <div class="flex flex-col items-start">
                        <a href="/" class="text-white">Intro</a>
                        <a href="https://svenfinger.digital/projects" class="text-white/60 hover:text-white/80">Projects</a>
                        <a href="https://svenfinger.digital/projects" class="text-white/60 hover:text-white/80">About</a>
                        <a href="https://svenfinger.digital/contact" class="text-white/60 hover:text-white/80">Contact</a>
                        <a href="https://svenfinger.digital/privacy" class="text-white/60 hover:text-white/80">Privacy</a>
                        <a href="https://svenfinger.digital/imprint" class="text-white/60 hover:text-white/80">Imprint</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <a href="https://www.linkedin.com/in/svenfinger/" target="_blank" class="text-white/60 hover:text-white/80">LinkedIn</a>
                        <a href="https://dribbble.com/svenfinger" target="_blank" class="text-white/60 hover:text-white/80">Dribbble</a>
                        <a href="https://github.com/svenfinger" target="_blank" class="text-white/60 hover:text-white/80">GitHub</a>
                        <a href="https://www.instagram.com/svenfinger.digital/" target="_blank" class="text-white/60 hover:text-white/80">Instagram</a>
                        <a href="https://x.com/svenfinger" target="_blank" class="text-white/60 hover:text-white/80 min-w-[48px]">X</a>
                    </div>
                </div>
                <div>
                    <div class="prose prose-invert prose-lg prose-p:leading-normal prose-a:decoration-white/50 hover:prose-a:decoration-white prose-a:decoration-1 prose-a:underline-offset-2 prose-a:font-normal prose-strong:font-semibold"><p>Let’s talk! Email me at <a href="mailto:hi@svenfinger.digital">hi@svenfinger.digital</a> or send me a <a href="https://x.com/svenfinger" target="_blank">direct message on X</a>.</p>

                        <p><a href="https://github.com/svenfinger" target="_blank">View source code on GitHub</a></p>

                        <p>© 2023-2024 Sven Finger. All rights reserved.</p></div>
                </div>
            </div>
            <a href="/" class="opacity-90 hover:opacity-100">
                <img src="https://svenfinger.digital/assets/img/logo.svg" width="60" height="24" alt="Sven Finger Logo">
            </a>
        </div>
    </div>
</body>
</html>
