src/pages/about/about.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>About Me | {{ blog.title }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="shortcut icon" href="{{ '/resources/favicon.ico' | url }}" />
        <meta
            name="description"
            content="{{ blog.aboutPageMetaDescription }}"
        />
    </head>

    <body
        class="bg-gray-100 dark:bg-gray-900 dark:text-white bg-cover"
        style="background-image: url('https://source.unsplash.com/1L71sPT5XKc')"
    >
        <header>
            <page-header public-path="{{'/' | url }}"></page-header>
        </header>
        <div class="mx-auto pt-12 max-w-4xl h-auto">
            <profile-card
                full-name="John Doe"
                headshot-url="https://source.unsplash.com/MP0IUfwrn0A"
                designation="Some role at Some Company"
                location="Everywhere"
                bio="Here is a very short description about me."
                public-path="{{'/' | url }}"
            ></profile-card>
        </div>
        <footer>
            <page-footer public-path="{{'/' | url }}"></page-footer>
        </footer>
    </body>
</html>