You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
6.2 KiB
80 lines
6.2 KiB
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
|
|
|
|
p You can also change the theme using the little-known <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets" target="_blank">alternate stylesheets</a> feature by going to View > Page Style in your browser.
|
|
|
|
h4 The Stars
|
|
p The homepage of this site features a constellation of 6 translucent stars which appears at the top of the page.
|
|
p The positions of the stars are randomly generated based on the dimensions of the page. To discourage clustered/skewed constellations, the following criteria are used:
|
|
ol
|
|
li Standard deviation of the x-axis offset
|
|
li Standard deviation of the y-axis offset
|
|
li Standard deviation of the centroid distance
|
|
p Because it's interesting, you can view the # of generation attempts, as well as the aforementioned criteria in the footer of the homepage.
|
|
|
|
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
|