commit 0a8897b8dc1b9ded19bc52cc2f8a1b6ecf901536 · katproto.girlonthemoon.xyz/girlonthemoon

+88

site/about/index.php

···

       1
       +
       <?php

     

       2
       +
       

     

       3
       +
       include "../httpheaders.php";

     

       4
       +
       

     

       5
       +
       ?>

     

       6
       +
       

     

       7
       +
       <!DOCTYPE html>

     

       8
       +
       <html lang="en">

     

       9
       +
       

     

       10
       +
       <?php include "../head.php" ?>

     

       11
       +
       

     

       12
       +
       <body>

     

       13
       +
       

     

       14
       +
       <main>

     

       15
       +
       	<header>

     

       16
       +
       		<h1 class="highlight" id="about">about</h1>

     

       17
       +
       	</header>

     

       18
       +
       

     

       19
       +
       	<?php include "../nav_main.php" ?>

     

       20
       +
       

     

       21
       +
       	<link rel="stylesheet" href="/assets/styles/polaroid.css">

     

       22
       +
       

     

       23
       +
       	<h2 id="about-kat" class="highlight">about kat</h2>

     

       24
       +
       

     

       25
       +
       	<div class="about-wrapper">

     

       26
       +
       		<figure class="about-icon tape">	

     

       27
       +
       			<img src="/assets/images/hcard.png" loading="lazy" alt="selfie of me holding up my camcorder and covering half my face with it as i look into the view finder. the image is black and white, dithered, and covered in spotted half tones">

     

       28
       +
       

     

       29
       +
       			<figcaption>me with my camcorder <span aria-label="hashtag my camcorder">#mycamcorder</span> (2025)</figcaption>

     

       30
       +
       		</figure>

     

       31
       +
       		

     

       32
       +
       		<p>i think i covered the introduction bases on the <a href="/">home page</a>, so there's not much to put here, i feel. however, i will try my best!</p>

     

       33
       +
       

     

       34
       +
       		<p>i'm <span class="highlight">kat</span>, and i am <?php echo $age_fmt; ?> old. i use <a href="https://pronouns.within.lgbt/she/her/her/hers/herself">she/her</a> pronouns, but i don't really mind <a href="https://pronouns.within.lgbt/they/them/their/theirs/themself">they/them</a> either. the former is best though.</p>

     

       35
       +
       

     

       36
       +
       		<p>i like a normal amount of things, but here's a list anyway:</p>

     

       37
       +
       

     

       38
       +
       		<ul>

     

       39
       +
       			<li>self-hosting <span class="li-parenthesis">(i hope you can tell just how insane i am about this)</span></li>

     

       40
       +
       			<li>programming <span class="li-parenthesis">(i may suck at it but that will never stop me)</span></li>

     

       41
       +
       			<li>comic books <span class="li-parenthesis">(mainly a DC reader, but i obsessively follow indie authors like <a href="https://www.instagram.com/luanavecchio_/">luana vecchio</a> & <a href="https://www.instagram.com/m_llovet/">maria llovet</a>)</span></li>

     

       42
       +
       			<li>idols <span class="li-parenthesis">(mainly japanese; <a href="https://www.instagram.com/ruru_dambara.official/">dambara ruru</a> is my all time favorite idol! but i also enjoy k-pop girl groups)</span></li>

     

       43
       +
       			<li>music <span class="li-parenthesis">(i'll listen to <a href="https://www.last.fm/user/springpool">basically anything</a>, but my preference skews towards pop, folk, angsty stuff, dance [house, trance, etc], and feminine vocals.)</span></li>

     

       44
       +
       			<li>tokusatsu <span class="li-parenthesis">(i grew up on <i>power rangers</i>, and that turned into a life-long obsession with toku. these days, i'm more into <i>kamen rider</i>, but i do watch a bit of sentai, and whatever i find that seems interesting.</span>)</li>

     

       45
       +
       		</ul>

     

       46
       +
       

     

       47
       +
       		<p>as of writing, i am not in school or employed full-time. i do, however, work as a contract sysadmin for <a href="https://fujocoded.com/about#kat">FujoCoded LLC</a>, which has been very enriching!</p>

     

       48
       +
       

     

       49
       +
       		<p>until i go back to school, which i hope to do, i try my best to work on myself while also working towards the future. <span aria-label="heart">&lt;3</span></p>

     

       50
       +
       		

     

       51
       +
       	</div>

     

       52
       +
       

     

       53
       +
       	<h2 id="about-site" class="highlight">about site</h2>

     

       54
       +
       

     

       55
       +
       	<h3 id="namesake" class="highlight">namesake</h3>

     

       56
       +
       

     

       57
       +
       	<p>the name <i>girl on the moon</i> is a misheard lyric.</p>

     

       58
       +
       

     

       59
       +
       	<p>i first heard <a href="https://www.youtube.com/watch?v=7_Bav4c7UGM">on the moon</a> by the late and great <a href="https://www.allkpop.com/article/2024/10/remembering-sulli-5-years-since-her-passing-fans-continue-to-mourn">sulli</a> when it came out in 2019, and, just like the other two songs on the single, i adored it for its glitchy, lo-fi nature. for years, i heard the opening lyric, <q>go up on the moon,</q> as <q>girl on the moon.</q></p>

     

       60
       +
       

     

       61
       +
       	<p>i've held onto this false lyric since then. it just kind of... stayed with me, especially after sulli's passing.</p>

     

       62
       +
       

     

       63
       +
       	<p>in the time since, i've adopted it as my online name. or maybe more like a "brand" name? in any case... thank you, sulli. <span aria-label="heart">&lt;3</span></p>

     

       64
       +
       

     

       65
       +
       	<h3 id="tech" class="highlight">tech</h3>

     

       66
       +
       

     

       67
       +
       	<p>rather than using a <dfn>static site generator</dfn> (SSG) like i do elsewhere, this site is actually (mostly) raw HTML and CSS, but with a catch: PHP!</p>

     

       68
       +
       

     

       69
       +
       	<p>this site was <em>originally</em> raw HTML/CSS, but when i wanted to expand it from a single-page intro to more, i also didn't want to go through the effort of rebuilding it with an SSG.</p>

     

       70
       +
       

     

       71
       +
       	<p>additionally, i wanted to try some things that a static site wouldn't afford me, such as <a href="https://sakura.girlonthemoon.xyz/tech/x-clacks-overhead">dynamic HTTP headers</a>. so PHP on a server it was!</p>

     

       72
       +
       

     

       73
       +
       	<p>this site mainly leverages PHP for its includes, and the occasional dynamic feature, like the HTTP headers thing. but hopefully i'll find more fun and cute things to do with the power of PHP.</p>

     

       74
       +
       

     

       75
       +
       	<h3 id="source" class="highlight">source</h3>

     

       76
       +
       

     

       77
       +
       	<p>the source code for this site can be found on my forgejo instance, bytes (1), or tangled (2):</p>

     

       78
       +
       

     

       79
       +
       	<ol>

     

       80
       +
       		<li><a href="https://bytes.4-walls.net/kat/girlonthemoon">bytes</a></li>

     

       81
       +
       		<li><a href="https://tangled.org/@katproto.girlonthemoon.xyz/girlonthemoon">tangled</a></li>

     

       82
       +
       	</ol>

     

       83
       +
       	

     

       84
       +
       </main>

     

       85
       +
       

     

       86
       +
       </body>

     

       87
       +
       

     

       88
       +
       </html>

+6 -10

site/assets/styles/main.css

···

       4
        
           width: 90vw !important;

     

       5
        
           min-height: 130vw !important;

     

       6
        
           word-wrap: break-word !important;

     

       7
       -
           /* position: absolute; */

     

       8
       -
           /* top: 50%; */

     

       9
       -
           /* left: 50%; */

     

       10
       -
           /* transform: translateX(-50%) translateY(-50%); */

     

       11
        
         }

     

       12
        
       

     

       13
        
         main video {

     
···

       21
        
           width: 90vw !important;

     

       22
        
           min-height: 130vw !important;

     

       23
        
           word-wrap: break-word !important;

     

       24
       -
           /* position: absolute; */

     

       25
       -
           /* top: 50%; */

     

       26
       -
           /* left: 50%; */

     

       27
       -
           /* transform: translateX(-50%) translateY(-50%); */

     

       28
        
         }

     

       29
        
        

     

       30
        
         main video {

     
···

       91
        
       	margin: .5em 0 .5em 0;

     

       92
        
       }

     

       93
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       94
        
       

     

       95
        
       ::selection {

     

       96
        
       	color: var(--text-color-white);

     
···

       102
        
       	color: #fff;

     

       103
        
       }

     

       104
        
       

     

       105
       -
       h2.highlight {

     

       106
        
       	width: fit-content;

     

       107
        
       	padding: 0 2rem 0 2rem;

     

       108
        
       	margin: 1rem 0 1rem 0;

     
···

       121
        
       }

     

       122
        
       

     

       123
        
       a:hover {

     

       124
       -
       	text-decoration: none;

     

       125
        
       }

     

       126
        
       

     

       127
        
       a:link.highlight, a:link:active.highlight, a:visited.highlight, a:visited:active.highlight {

     
···

       261
        
       	height: 2ch;

     

       262
        
       	padding-left: 2px;

     

       263
        
       	padding-right: 4px;

     

       0
        
       
     

       264
        
       }

···

       4
        
           width: 90vw !important;

     

       5
        
           min-height: 130vw !important;

     

       6
        
           word-wrap: break-word !important;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       7
        
         }

     

       8
        
       

     

       9
        
         main video {

     
···

       17
        
           width: 90vw !important;

     

       18
        
           min-height: 130vw !important;

     

       19
        
           word-wrap: break-word !important;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       20
        
         }

     

       21
        
        

     

       22
        
         main video {

     
···

       83
        
       	margin: .5em 0 .5em 0;

     

       84
        
       }

     

       85
        
       

     

       86
       +
       .li-parenthesis {

     

       87
       +
       	color: color-mix(in srgb, var(--accent-color-darker), transparent 2%);

     

       88
       +
       }

     

       89
        
       

     

       90
        
       ::selection {

     

       91
        
       	color: var(--text-color-white);

     
···

       97
        
       	color: #fff;

     

       98
        
       }

     

       99
        
       

     

       100
       +
       h2.highlight, h3.highlight {

     

       101
        
       	width: fit-content;

     

       102
        
       	padding: 0 2rem 0 2rem;

     

       103
        
       	margin: 1rem 0 1rem 0;

     
···

       116
        
       }

     

       117
        
       

     

       118
        
       a:hover {

     

       119
       +
       	text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);

     

       120
        
       }

     

       121
        
       

     

       122
        
       a:link.highlight, a:link:active.highlight, a:visited.highlight, a:visited:active.highlight {

     
···

       256
        
       	height: 2ch;

     

       257
        
       	padding-left: 2px;

     

       258
        
       	padding-right: 4px;

     

       259
       +
       	opacity: 0.8;

     

       260
        
       }

+40

site/assets/styles/polaroid.css

···

       1
       +
       .about-wrapper {

     

       2
       +
       	margin-top: 1.5em;

     

       3
       +
       }

     

       4
       +
       

     

       5
       +
       .about-icon {

     

       6
       +
       	background: var(--accent-color);

     

       7
       +
       	width: fit-content;

     

       8
       +
       	padding: .2rem 1rem 2rem 1rem;

     

       9
       +
       	margin: 1rem auto;

     

       10
       +
       	display: block;

     

       11
       +
       }

     

       12
       +
       

     

       13
       +
       figure.about-icon {

     

       14
       +
       	inline-size: fit-content;

     

       15
       +
       	margin-inline: auto;

     

       16
       +
       }

     

       17
       +
       

     

       18
       +
       figure.about-icon img {

     

       19
       +
       	display: block;

     

       20
       +
       	margin: 1rem auto;

     

       21
       +
       	width: 200px;

     

       22
       +
       }

     

       23
       +
       

     

       24
       +
       figure.about-icon figcaption {

     

       25
       +
       	color: white;

     

       26
       +
       	contain: inline-size;

     

       27
       +
       }

     

       28
       +
       

     

       29
       +
       .tape::before {

     

       30
       +
       	content: "";

     

       31
       +
       	display: block;

     

       32
       +
       	height: 30px;

     

       33
       +
       	margin: -1em auto .5rem auto;

     

       34
       +
       	width: 200px;

     

       35
       +
       	background-color: color-mix(in srgb, lightblue, transparent 10%);

     

       36
       +
       	border-right: 1px dotted #86c5da;

     

       37
       +
       	border-left: 1px dotted #86c5da;

     

       38
       +
       	opacity: 0.5;

     

       39
       +
       	box-shadow: 0.5px 0.5px 1px rgb(0,0,0,0.2);

     

       40
       +
       }

site/config.php

···

       2
        
       

     

       3
        
       define("BASE_URL", "https://girlonthemoon.xyz/");

     

       4
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       5
        
       ?>

···

       2
        
       

     

       3
        
       define("BASE_URL", "https://girlonthemoon.xyz/");

     

       4
        
       

     

       5
       +
       $bday = new DateTime("2004-10-13");

     

       6
       +
       $interval = new DateTime("now");

     

       7
       +
       $age = date_diff($bday, $interval);

     

       8
       +
       $age_fmt = $age->format("%Y years")

     

       9
       +
       

     

       10
        
       ?>

+1 -1

site/index.php

···

       15
        
       	

     

       16
        
       	<?php include "nav_main.php" ?>

     

       17
        
       

     

       18
       -
       	<p><span class="highlight">kat, 20, she/her</span>. i like computers and music and other irrelevant stuff. i have several servers at home and i never shut up about them. my server related hobbies include spinning up random docker containers, hosting sites no one will use, and breaking my home internet router, among other things.</p>

     

       19
        
       

     

       20
        
       	<p>some of my work:</p>

     

       21

···

       15
        
       	

     

       16
        
       	<?php include "nav_main.php" ?>

     

       17
        
       

     

       18
       +
       	<p><span class="highlight">kat, <?php echo $age_fmt ?>, she/her</span>. i like computers and music and other irrelevant stuff. i have several servers at home and i never shut up about them. my server related hobbies include spinning up random docker containers, hosting sites no one will use, and breaking my home internet router, among other things.</p>

     

       19
        
       

     

       20
        
       	<p>some of my work:</p>

     

       21