index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" >
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <meta name="robots" content="noindex" >
        <meta name="googlebot" content="noindex" >
        <title>{{#resume.basics}}{{name}}{{/resume.basics}} - Résumé</title>
        <link rel="stylesheet" href="/assets/style.css" type="text/css" >
        <script type="module" src="/src/main.tsx"></script>
        <script src="https://cdn.usefathom.com/script.js" data-spa="auto" data-site="UUUYFLMH" defer></script>
        <script>
            if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
        </script>
    </head>
    <body class="body-font font-noto-sans antialiased w-full dark:text-white dark:bg-zinc-900 scroll-smooth" itemscope itemtype="http://schema.org/Person">
        <div class="container mx-auto max-w-screen-xl">
            <div class="flex flex-col lg:flex-row mt-5 md:mt-12">
                <nav class="w-full md:max-w-sm mb-5 pl-5">
                    {{#resume.basics}}
                    <div>
                        <div>
                            <h3 class="font-semibold text-2xl" itemprop="name">{{name}}</h3>
                            <div class="text-md text-zinc-500" itemprop="jobTitle">{{label}}</div>
                        </div>
                        {{#if email}}
                        <div class="mt-3">
                            <a
                                href="mailto:{{email}}"
                                class="font-normal border-b border-dashed border-zinc-400"
                                itemprop="email"
                                target="_blank"
                                title="{{email}}"
                                >{{email}}</a
                            >
                        </div>
                        {{/if}} {{#if phone}}
                        <div class="mt-3">
                            <a
                                href="tel://{{phone}}"
                                class="font-normal border-b border-dashed border-zinc-400"
                                itemprop="telephone"
                                target="_blank"
                                title="{{phone}}"
                            >
                                {{phone}}
                            </a>
                        </div>
                        {{/if}} {{#if location}}
                        <div class="mt-3">
                            {{#location}}
                            <span class="text-md"> {{city}}, {{region}}, {{countryCode}} </span>
                            {{/location}}
                        </div>
                        {{/if}}
                    </div>

                    <div class="flex mt-4 space-x-6">
                        {{#profiles}}
                        <a href="{{url}}" target="_blank" class="text-gray-500 hover:text-gray-900 dark:hover:text-white" title="{{network}}: {{username}}">
                            {{{toSocialIcon network}}}
                        </a>
                        {{/profiles}}
                    </div>

                    {{/resume.basics}}
                    <div class="flex print:hidden fixed bottom-0 mb-2.5 -ml-2.5">
                        <button id="theme-toggle" type="button" title="Theme Switcher" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2">
                            <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                            </svg>
                            <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
                            </svg>
                        </button>
                    </div>
                </nav>

                <main class="w-full">
                    <section>
                        <div class="relative">
                            <a href="#about" class="section-headline" title="About"><h4 id="about">About</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <div class="pl-5 py-5" itemprop="description">{{breaklines resume.basics.summary}}</div>
                    </section>

                    <section id="work-projects-group">
                        {{#if resume.projects}}
                        <div class="relative">
                            <a href="#projects" class="section-headline" title="Projects"><h4 id="projects">Projects</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="grid md:grid-cols-2 py-5">
                            {{#each resume.projects}}
                            <li class="pl-5 py-5 {{domClasses}}">
                                <div>
                                    <div class="flex space-x-2" itemprop="award">
                                        <strong>{{displayName}}</strong>&nbsp; {{#if githubUrl}}
                                        <a href="{{githubUrl}}" class="text-gray-500 hover:text-gray-900 dark:hover:text-white" target="_blank" title="GitHub">
                                            {{{toSocialIcon 'github'}}}
                                        </a>
                                        {{/if}} {{#if website}}
                                        <a
                                            href="{{website}}"
                                            class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
                                            target="_blank"
                                            title="{{website}}"
                                        >
                                            {{{toSocialIcon 'link'}}}
                                        </a>
                                        {{/if}}
                                    </div>
                                    <p>
                                        <small>{{summary}}</small>
                                    </p>
                                    {{#if githubUrl}}
                                    <p class="flex space-x-2">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 576 512"
                                            role="img"
                                            class="w-3 h-3 mt-1.5"
                                            aria-hidden="true"
                                            fill="currentColor"
                                        >
                                            <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                                            <path
                                                d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"
                                            />
                                        </svg>
                                        <span data-gh-api="{{getGithubApi githubUrl}}">{{stars}}</span>
                                    </p>
                                    {{/if}}
                                </div>
                            </li>
                            {{/each}} {{#if resume.basics.projects_url}}
                            <li class="pl-5 py-5">
                                <a
                                    href="{{resume.basics.projects_url}}"
                                    target="_blank"
                                    class="text-ms text-md text-zinc-500 border-b border-dashed border-zinc-400"
                                    >More Projects...</a
                                >
                            </li>
                            {{/if}}
                        </ul>
                        {{/if}}

                        <div class="relative">
                            <a href="#work-experience" class="section-headline" title="Work Experience"><h4 id="work-experience">Work Experience</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none">
                            {{#each resume.work}}
                            <li class="pl-5 py-5">
                                <p>
                                    <strong
                                        >{{#if url}}<a href="{{url}}" target="_blank" class="border-b border-dashed border-zinc-400" title="{{name}}"
                                            >{{name}}</a
                                        >{{else}}{{name}}{{/if}}</strong
                                    >
                                    <span class="text-md text-zinc-500" style="margin-left: 0.3em">{{position}}</span>
                                </p>
                                <p class="mb-2 text-md text-zinc-500">
                                    <small>{{startDate}} - {{#if endDate}}{{endDate}}{{else}}Present{{/if}}{{#if location}} | {{location}}{{/if}}</small>
                                </p>
                                <p>{{summary}}</p>
                                {{#if highlights}}
                                <ul class="list-disc ml-10 mt-2">
                                    {{#each highlights}}
                                    <li>{{.}}</li>
                                    {{/each}}
                                </ul>
                                {{/if}}
                            </li>
                            {{/each}}
                        </ul>
                    </section>

                    <section>
                        <div class="relative">
                            <a href="#stacks" class="section-headline" title="Stacks"><h4 id="stacks">Stacks</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <div class="pl-5 py-5" itemprop="description">
                            <div class="grid gap-1.5" style="grid-template-columns: max-content auto">
                                {{#each resume.skills}}
                                <div class="font-bold text-right">{{name}}</div>
                                <div>{{join keywords}}</div>
                                {{/each}}
                            </div>
                        </div>
                    </section>

                    <section>
                        <div class="relative">
                            <a href="#education" class="section-headline" title="Education"><h4 id="education">Education</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5">
                            {{#each resume.education}}
                            <li class="my-5">
                                <p>
                                    {{#if studyType}}<strong class="pr-2">{{#if area}} {{area}}, {{/if}}{{studyType}},</strong>{{/if}}<span
                                        class="text-md text-zinc-500"
                                        >{{institution}}</span
                                    >
                                </p>
                                <p class="mb-2 text-md text-zinc-500">
                                    <small>{{startDate}} - {{#if endDate}} {{endDate}} {{else}} Currently Pursuing {{/if}}</small>
                                </p>
                                <div>{{description}}</div>
                                <i>{{gpa}}</i>
                                <div class="">{{#courses}} <span class="">{{.}}</span> {{/courses}}</div>
                            </li>
                            {{/each}}
                        </ul>
                    </section>

                    {{#if resume.publications}}
                    <section>
                        <div class="relative">
                            <a href="#publications" class="section-headline" title="Talks"><h4 id="publications">Talks</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5">
                            {{#each resume.publications}}
                            <li class="my-5">
                                <p>
                                    <strong
                                        >{{#if website}}<a href="{{website}}" target="_blank" class="border-b border-dashed border-zinc-400" title="{{name}}"
                                            >{{name}}</a
                                        >{{else}}{{name}}{{/if}}</strong
                                    >,<span class="text-md text-zinc-500">&nbsp; {{publisher}}</span>
                                </p>
                                <p class="mb-2 text-md text-zinc-500">
                                    <small>{{releaseDate}} {{dateNote}}</small>
                                    <small>{{#if slides}},&nbsp;<a href="{{slides}}" target="_blank" title="Slides">Slides</a>{{/if}}</small>
                                </p>
                                <p>{{summary}}</p>
                            </li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}} {{#if resume.awards}}
                    <section>
                        <div class="relative">
                            <a href="#awards" class="section-headline" title="Awards"><h4 id="awards">Awards</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5">
                            {{#each resume.awards}}
                            <li class="my-5">
                                <div>
                                    <p itemprop="award"><strong>{{title}}</strong>,<span class="text-md text-zinc-500">&nbsp; {{awarder}}</span></p>
                                    <p class="mb-2 text-md text-zinc-500"><small>{{date}}</small></p>
                                    {{#if summary}}
                                    <p>{{summary}}</p>
                                    {{/if}}
                                </div>
                            </li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}} {{#if resume.volunteer}}
                    <section>
                        <div class="relative">
                            <a href="#volunteer-work" class="section-headline" title="Volunteer Work"><h4 id="volunteer-work">Volunteer Work</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5">
                            {{#each resume.volunteer}}
                            <li class="my-5">
                                <div>
                                    <p><strong>{{position}}</strong>,<span class="text-md text-zinc-500">&nbsp; {{organization}}</span></p>
                                    <p class="mb-2 text-md text-zinc-500">
                                        <small>{{startDate}} - {{#if endDate}} {{endDate}} {{else}} Present {{/if}}</small>
                                    </p>
                                    <p>{{summary}}</p>
                                    <ul>
                                        {{#each highlights}}
                                        <li>{{.}}</li>
                                        {{/each}}
                                    </ul>
                                </div>
                            </li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}} {{#if resume.interests}}
                    <section>
                        <div class="relative">
                            <a href="#interests" class="section-headline" title="Interests"><h4 id="interests">Interests</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5">
                            {{#each resume.interests}}
                            <li class="my-5">
                                <p>
                                    <strong>{{name}}</strong>
                                </p>

                                {{#keywords}}
                                <span class="">{{.}}</span>
                                {{/keywords}}
                            </li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}} {{#if resume.references}}
                    <section>
                        <div class="relative">
                            <a href="#references" class="section-headline" title="References"><h4 id="references">References</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5">
                            {{#each resume.references}}
                            <li class="my-5">
                                <p>
                                    <strong>{{name}}</strong>
                                </p>
                                <blockquote class="">
                                    <p>{{reference}}</p>
                                </blockquote>
                            </li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}} {{#if resume.languages}}
                    <section>
                        <div class="relative">
                            <a href="#languages" class="section-headline" title="Languages"><h4 id="languages">Languages</h4></a>
                            {{{toSocialIcon 'hash' 'w-5 h-5 external-link'}}}
                        </div>
                        <ul class="list-none pl-5 py-5">
                            {{#each resume.languages}}
                            <li><strong>{{language}}</strong> ({{fluency}})</li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}}

                    <div class="my-5 px-2">
                        <ul role="list" class="border border-zinc-200 rounded-md divide-y divide-gray-200 print:hidden mb-5">
                            <li class="pl-3 pr-4 py-5 flex items-center justify-between text-sm">
                                <div class="w-0 flex-1 flex items-center">
                                    <!-- Heroicon name: solid/paper-clip -->
                                    <svg
                                        class="flex-shrink-0 h-5 w-5 text-gray-400"
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20"
                                        fill="currentColor"
                                        aria-hidden="true"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
                                            clip-rule="evenodd"
                                        />
                                    </svg>
                                    <span class="ml-2 flex-1 w-0 truncate">resume.pdf</span>
                                </div>
                                <div class="ml-4 flex-shrink-0">
                                    <a href="./resume.pdf" class="font-medium text-indigo-600 hover:text-indigo-500" title="Download" download>Download</a>
                                </div>
                            </li>
                        </ul>

                        <div class="text-center text-md my-5 print:hidden"><a href="https://danielbannert.com/impress" class="text-center my-5" title="Impress" target="_blank" rel="noopener noreferrer">Impress</a></div>

                        <div class="text-center mb-5 text-md text-zinc-500 text-xs print:hidden">Last updated at {{getBuildDate ''}}</div>
                    </div>
                </main>
            </div>
        </div>

        <script>
            async function updateStars() {
                await Promise.all(
                    [...document.querySelectorAll("[data-gh-api]")].map(async (e) => {
                        const api = e.dataset.ghApi;
                        const r = await fetch(api);
                        const json = await r.json();
                        if (json.stargazers_count) e.innerText = json.stargazers_count;
                        console.info(`${api} - ${json.stargazers_count}`);
                    }),
                );
            }
            window.addEventListener("load", updateStars);
        </script>
    </body>
</html>