extends template_70s

block content
    .container#top
        .inner
            .hero
                .hero-box
                    h1 Garrett Mills
            section#technical
                h2(style="font-size: 48pt") technical details for nerds
                .fira-p
                    p This page contains a smattering of technical information that I think some people might find interesting, but not enough people for it to be included on the main page.

                    h3 Website Theme
                    p I was going for a retro/70s aesthetic for this site. The CSS theme is fully-parameterized over a set of color variables.
                    p The first time you visit the homepage, the server randomly selects a theme for your browser to use across the site.
                    p I'm using a combination of <a href="https://creativemarket.com/storytypefont/6695985-The-Wobliy-Retro-Serif-Font" target="_blank">The Wobliy</a> as a display font and <a href="http://cyreal.org/fonts/lora" target="_blank">Lora</a> as a body font.
                    p For the curious, you can change the theme using the buttons below:

                    ul.theme-buttons
                        each key in themeKeys
                            li
                                a.button(href=`../technical?theme=${key}`) #{config(`app.colors.${key}.displayName`)}#{key === themeName ? ' (current)' : ''}
                    br
                    br

                    h3 Source Code & Licensing
                    a(href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target='_blank' style='margin-top: 15px')
                        img(src=asset('cc-by-nc-sa.png'))
                    p This website, its source code, and its contents are licensed under the terms of the Creative Commons BY-NC-SA 4.0 license. Learn more <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">here</a>.
                    p The source code for this site is available openly under the terms of the aforementioned license. You can view it <a href="https://code.garrettmills.dev/garrettmills/www" target="_blank">here</a>.

                    h3 Framework
                    p This site is built with Extollo, my free & libre application framework. You can learn more about Extollo <a href="https://extollo.garrettmills.dev" target="_blank">here</a>.

                    if false
                        h3 The Background Animation
                        p The cascading code animation you see on some pages of this site is generated using real code pulled from my personal repositories.
                        p When you access a page, the backend for this site calls an API endpoint on my <a href="https://code.garrettmills.dev/garrettmills" target="_blank">Gitea server</a> to load a code snippet from a random file.
                        p Then, that snippet is converted to a double-layer SVG. The animation comes from automatically generating a series of CSS animation steps using <code>nth-child(...)</code> CSS calls on the various text-stroke lines.
                        p (Try "view page source" on the main page to see an example.)

                    h3 Analytics
                    p This site, and some of the others in my <code>*.garrettmills.dev</code> platform record pseudo-anonymous page-view information. In particular, it stores:
                    ul
                        li Remote hostname
                        li Incoming IP address(es)
                        li Request method
                        li Original request URL
                        li Whether or not the request was XHR
                        li Timestamp of access
                    p Collecting the above information helps me gauge the rate-of-access of various pages on my platform over time.
                    p My analytics system is home-grown, intentionally, to record <em>just</em> the information I wanted to use. So, I avoid collecting any additional information than is necessary for my purposes.

                    h4 Opting-Out
                    p <small>Status: !{isOptOut ? 'You have opted-out of page view recording' : 'Will record page views'}</small>
                    p Even though my analytics-system is geared towards individual privacy and minimal obtrusiveness, you can still opt-out to avoid having your page views recorded for <code>*.garrettmills.dev</code> sites.
                    p To do so, click <a href="#{named('opt-out-prompt')}">here</a>.

                    h4 Collection Methods
                    p It's not super relevant to the privacy aspect, but for those who are curious, I record page-views two different ways:
                    ul
                        li On first-party <code>garrettmills.dev</code> pages, the page-views are recorded on the back-end when the page is served.
                        li For other <code>*.garrettmills.dev</code> pages (like my static host, CoreID, and Noded), a short script makes a request to a CORS-enabled endpoint to record the view.
                    p When you opt-out of page-view recording, this site sets a CORS-compatible cookie <code>analytics.optout</code> in your browser. If the analytics endpoints detect this cookie, the page view will not be recorded.

            section#login
                a(href=named('@auth:coreid:login')) Login