zepp
/
emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: zepp:7b27c4abfef624bf327265eb24243165e6ad8611
Branches Tags
zepp:main
...
compare: zepp:a81f1e8c8433090c5365c8e92a951cbf1101d0d5
Branches Tags
zepp:main

17 Commits
7b27c4abfe ... a81f1e8c84

Author SHA1 Message Date
emma a81f1e8c84 update colors. update changelog 2025-01-10 23:06:31 -05:00
emma 7adead255f update changelog 2025-01-10 22:39:50 -05:00
emma aa7daa0b06 add footer.php that was missing initially 2025-01-10 22:34:36 -05:00
emma 3a4c4cc872 update content in nav.php 2025-01-10 22:21:42 -05:00
emma cd6741cd0a update paths for life pages. add partials for back to category pages 2025-01-10 21:14:34 -05:00
emma b47edb6023 add partial for category. update pages with partial and top of page link 2025-01-10 20:09:11 -05:00
emma 1db308aa8c update content in interests.php 2025-01-10 19:56:02 -05:00
emma bbcbdcb19c correct paths in technology.php 2025-01-10 19:55:17 -05:00
emma ec45e66ebb adjust positioning of layout via grid and element height 2025-01-10 19:44:13 -05:00
emma 47e47f4355 adjust nav and main padding 2025-01-10 19:38:54 -05:00
emma 0e86ad5da5 adjust nav and main widths 2025-01-10 19:36:24 -05:00
emma 6d9c72e315 adjust nav link names 2025-01-10 19:32:35 -05:00
emma e80288639b add favicon for category pages. use absolute links for stylesheet 2025-01-09 05:53:31 -05:00
emma 7acbd7d79a use absolute links instead of relative 2025-01-09 05:41:38 -05:00
emma b04d962a7f use absolute instead of relative paths 2025-01-09 05:28:21 -05:00
emma 38cb176e0e edit nav.php for category pages 2025-01-08 23:40:22 -05:00
emma 937a34831a creation of category pages. pages moved into respective categories 2025-01-08 23:37:05 -05:00
18 changed files with 289 additions and 154 deletions
Show Stats Expand all files Collapse all files

2
includes/header.php
View File

@ -1,6 +1,6 @@
<header>
<span class="logo">
emma's place <img src="../img/site/assets/red_heart_flat.svg" alt="a red heart meant to symbolize love" height="16px" width="16px">
emma's place <img src="/img/site/assets/red_heart_flat.svg" alt="a red heart meant to symbolize love" height="16px" width="16px">
</span>
<span class="motto">
a celebration of self-expression through the personal web

1
includes/interest-category.php Normal file
View File

@ -0,0 +1 @@
<p>back to <a href="/life/interests.php">emma's interests - category</a></p>

28
includes/nav.php
View File

@ -1,23 +1,17 @@
<nav>
<h3> life of emma</h3>
<h3>life of emma - categories</h3>
<ul>
<li><a href="../life/music.php" target="_blank">music</a></li>
<li><a href="../life/pets.php" target="_blank">pets</a></li>
<li><a href="../life/photography.php" target="_blank">photography</a></li>
<li><a href="../life/technology.php" target="_blank">technology</a></li>
<li><a href="../life/picrew.php" target="_blank">emma's picrews</a></li>
<li><a href="../life/postroll.php" target="_blank">emma's postroll</a></li>
<li><a href="../life/todo.php" target="_blank">emma's things to do</a></li>
<li><a href="../life/goals.php" target="_blank">emma's goals</a></li>
<li><a href="/life/self.php" target="_blank">emma's self - category</a></li>
<li><a href="/life/interests.php" target="_blank">emma's interests - category</a></li>
</ul>
<h3> site information</h3>
<h3>site information</h3>
<ul>
<li><a href="../index.php">home</a></li>
<li><a href="../site/about.php" target="_blank">about</a></li>
<li><a href="../site/why.php" target="_blank">why</a></li>
<li><a href="../site/who.php" target="_blank">who</a></li>
<li><a href="../site/other.php" target="_blank">other emma things</a></li>
<li><a href="../guestbook/index.php" target="_blank">contact</a></li>
<li><a href="../site/changelog.php" target="_blank">changelog</a></li>
<li><a href="/index.php">home</a></li>
<li><a href="/site/about.php" target="_blank">about</a></li>
<li><a href="/site/why.php" target="_blank">why</a></li>
<li><a href="/site/who.php" target="_blank">who</a></li>
<li><a href="/site/other.php" target="_blank">other emma things</a></li>
<li><a href="/guestbook/index.php" target="_blank">contact</a></li>
<li><a href="/site/changelog.php" target="_blank">changelog</a></li>
</ul>
</nav>

1
includes/self-category.php Normal file
View File

@ -0,0 +1 @@
<p>back to <a href="/life/self.php">emma's self - category</a></p>

19
life/music.php → life/emmas-interests/music.php
View File

@ -4,18 +4,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>musically emma</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<main>
<section>
<h1>musically emma</h1>
<h1 id="top">musically emma</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/interest-category.php'); ?>
<p>
music is a love language of mine, through life i've gone through many eras of music i've loved, all of them with a story, a reason, or a person behind them. music tells just as much a story of my life as i could tell my own story. so let's go through it together, okay?
</p>
@ -44,8 +45,10 @@
<p>
in my teenage years i would become interested in playing guitar. i was rather obsessed with the electric guitar of music i was hearing at the time and wanted a guitar of my own. nobody tells you that you are horrible at guitar, for like a long time. i think it took me around a year of consistent practice to get both my hands to cooperate. over the years i'd keep playing. when i got into my 20s and started working more i would buy a new guitar. i'd also begin exploring recording my music and the cool sounds that guitar effects pedals could produce. i'd explore fun sounds like the shoegaze albums i was listening to by pouring reverb all over my guitar signal, and adding a fair amount of delay. then i'd revisit sounds i was loving from indie rock bands by using a simple fuzz pedal, the guitar, and the amp. it was a lot of fun overall. if you asked me why i quit, i'd tell you it was because i was no longer pushing myself to get better or learn new things. the honest reason though i think is that much like <a href="./photography.php" target="_blank">photography</a> i was still undiagnosed with ADHD at the time, and after years of obsession, just dropped the interest with no goal of continuing or revisiting it. recently though, i'm hoping that will change. i picked up my acoustic guitar again, and i'd like to begin practicing more with the hopes of learning how to play again
</p>
<p>back to the <a href="#top">top of the page</a></p>
</section>
</main>
<?php include "../includes/footer.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

30
life/photography.php → life/emmas-interests/photography.php
View File

@ -4,16 +4,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>photographically emma</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<main>
<section>
<h1>photographically emma</h1>
<h1 id="top">photographically emma</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/interest-category.php'); ?>
<p>
i was quite into taking pictures for awhile. there was a period in the early 2000s where digital SLR (signle lens reflex) cameras were quite expensive. while film ones were often cheap second hand. film was also relatviely easy to get developed at a pharmacy or at a camera store as these were still a thing and did a nice job at developing photos. during this period of time i would begin learning how to take photographs with a 35mm film SLR.
</p>
@ -27,18 +29,18 @@
<h3 class="photo-gallery-header">photo gallery</h3>
<?php include "../includes/enlarge-image.php" ?>
<figure class="photography-gallery">
<img class="enlarge" src="../img/life/photography/flower.jpg" alt="a pink rose captured on a digital slr. the color is vibrant, the flower is the star of the portrait" height="300" width="500">
<img class="enlarge" src="/img/life/photography/flower.jpg" alt="a pink rose captured on a digital slr. the color is vibrant, the flower is the star of the portrait" height="300" width="500">
<img class="enlarge" src="../img/life/photography/flower-two.jpg" alt="a beautiful white flower is the center of the photograph. it shows of beautiful parts of itself that are essential for polinators such as bees and butterflies" height="300" width="500">
<img class="enlarge" src="/img/life/photography/flower-two.jpg" alt="a beautiful white flower is the center of the photograph. it shows of beautiful parts of itself that are essential for polinators such as bees and butterflies" height="300" width="500">
<img class="enlarge" src="../img/life/photography/pink-flower.jpg" alt="a vibrant mix of deep and bright pink make up this photo of multiple small flowers. special attention has been made to focus on them by blurring their background, making them front and center for this
<img class="enlarge" src="/img/life/photography/pink-flower.jpg" alt="a vibrant mix of deep and bright pink make up this photo of multiple small flowers. special attention has been made to focus on them by blurring their background, making them front and center for this
picture" height="300" width="500">
<img class="enlarge" src="../img/life/photography/orange-flower.jpg" alt="a flower orange like a warm sunset is captured on a 35mm film print. the flower has a deep inner center with pedals extending up and outwards. in the deep center part, stems extend that help polinators do their job and collect pollen" height="300" width="500">
<img class="enlarge" src="/img/life/photography/orange-flower.jpg" alt="a flower orange like a warm sunset is captured on a 35mm film print. the flower has a deep inner center with pedals extending up and outwards. in the deep center part, stems extend that help polinators do their job and collect pollen" height="300" width="500">
<img class="enlarge" src="../img/life/photography/parakeet-bw.jpg" alt="a photo of a yellow parakeet caputre on black and white film. the bird is in an enclosure, and the crooked tilt of the head and beak suggest she may be curious about the camera that is taking a picture of her" height="300" width="500">
<img class="enlarge" src="/img/life/photography/parakeet-bw.jpg" alt="a photo of a yellow parakeet caputre on black and white film. the bird is in an enclosure, and the crooked tilt of the head and beak suggest she may be curious about the camera that is taking a picture of her" height="300" width="500">
<img class="enlarge" src="../img/life/photography/whiskers-bw-three.jpg" alt="a photo of a white dwarf rabbit captured on black and white film. the rabbit is sitting under a chair, and surveys his surroundings, as he is outside and is taking in much about the world around him" height="300" width="500">
<img class="enlarge" src="/img/life/photography/whiskers-bw-three.jpg" alt="a photo of a white dwarf rabbit captured on black and white film. the rabbit is sitting under a chair, and surveys his surroundings, as he is outside and is taking in much about the world around him" height="300" width="500">
<figcaption>
various photos captured on digital and 35mm film. the photos captured on 35mm film no longer have their negative with them and are photos of the print. this leaves an odd effect on the photos as the camera captures the glossieness of the print. i like it enough that i will put these here for you to enjoy. i will look into properly scanning the prints in the future
@ -49,9 +51,11 @@
<p>
i had a few 35mm SLR cameras. I used my moom's Pentax K1000, buti would eventually buy myself a second hand Nikon F2A camera. this was a very professional camera at the time. it had things like interchangle viewfinders and focusing screens. my main 35mm SLR that i would use was a nikon N80 that my mom got me for christmas one year. it was more modern and offered automatic film advance and autofocus, but could be turned to all manual if you wanted that. i would eventually get a digital SLR when the prices came down, and took a fair amount of photos with it. unknown to me however was that i was undiagnosed with ADHD, and like many fixations in my life, i would drop photography like a rock with suddenly no interest after a few years of heavy interest and needing to know everything about it
</p>
<p>back to the <a href="#top">top of the page</a></p>
</section>
</main>
<script src="../script/image-enlarger.js" defer></script>
<?php include "../includes/footer.php" ?>
<script src="/script/image-enlarger.js" defer></script>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

21
life/technology.php → life/emmas-interests/technology.php
View File

@ -4,17 +4,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>technically emma</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<main>
<section>
<h1>technically emma</h1>
<?php include "../includes/enlarge-image.php" ?>
<h1 id="top">technically emma</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/interest-category.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/enlarge-image.php'); ?>
<h3>early life and the spark</h3>
<p>
technology, electronics in particular, was probably one of my first loves. as a child i was quite fond of taking apart anything i could, not yet knowing it would be smart to put it back together. as i entered gradeschool, a teacher would become quite important in my life. due to being legally blind, he would visit the school once per week, and make sure i was doing okay in school. he would do small assesments and we'd play games that would test common skills a child would have at that age. the thing i was obsessed with every time though, was the laptop he would bring. i would learn that it was an IBM ThinkPad T23. to say i was fascinated by this black square is an understatment. i was hooked by the idea of the computer, it was the device for someone that possesed curiousity like i did. this teacher caught on pretty quickly, and eventually would allow me some time each meeting to just look around on the computer, or make images in paint. trusting a little kid with your work pc is pretty impressive, but i think it really speaks to who this man was and what he meant to me as a whole
@ -35,7 +36,7 @@
<figure>
<div class="gallery">
<img class="enlarge" src="../img/life/technology/powerbook.jpg" alt="an early example of an apple powerbook. the model is a 165c. it features a color screen, and had an operating system that supported color. the powerbook sits atop a desk with a floppy disk icon on the screen. a question mark appears and disappears within this floppy disk, suggesting no operating system can be found to boot from" height="300" width="300">
<img class="enlarge" src="/img/life/technology/powerbook.jpg" alt="an early example of an apple powerbook. the model is a 165c. it features a color screen, and had an operating system that supported color. the powerbook sits atop a desk with a floppy disk icon on the screen. a question mark appears and disappears within this floppy disk, suggesting no operating system can be found to boot from" height="300" width="300">
</div>
<figcaption class="gallery-text-left">
a powerbook 165c that i hung onto after purchasing on a whim off of eBay. i'm not particularly interest in retro computing, but the relatively untouched nature of this laptop combined with the price made me curious enough to purchase it. it will need a copy of mac os 7.1 installed. but all components function as they should
@ -45,9 +46,11 @@
<p>
for the very double edged sword tech has been in my life, it is still a love of mine. i find it both a blend of art and science. circuit boards resemble well laid out cities. the beautiful websites you browse express themselves though code. there's always another question you can ask, and you can dive as deep as you want to find the answer. i think because of that, part of me will always love tech, both professionally and personally
</p>
<p>back to the <a href="#top">top of the page</a></p>
</section>
</main>
<script src="../script/image-enlarger.js" defer></script>
<?php include "../includes/footer.php" ?>
<script src="/script/image-enlarger.js" defer></script>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

16
life/goals.php → life/emmas-self/goals.php
View File

@ -4,15 +4,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>emma's goals</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<main>
<section>
<h1> emma's goals</h1>
<h1 id="top"> emma's goals</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/self-category.php'); ?>
<p>
this is a collection of goals that are personal to me. i list them here because i want to show that i am a work in progress, much like anyone else. that i have things i wish to accomplish over no particular timeframe. for most of them i will give them a timeframe of "sooner rather than later"
</p>
@ -64,8 +66,10 @@
<p>
this page was last updated on - 12-23-2024
</p>
<p>back to the <a href="#top">top of the page</a></p>
</section>
</main>
<?php include "../includes/footer.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

31
life/pets.php → life/emmas-self/pets.php
View File

@ -4,18 +4,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>emma loves pets</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<main>
<section>
<h1>emma loves pets</h1>
<?php include "../includes/enlarge-image.php" ?>
<h1 id="top">emma loves pets</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/self-category.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/enlarge-image.php'); ?>
<h3>as a child</h3>
<p>
growing up i look fondly on how we always had animals in the house. as a baby my mom had two cats that were close friends. i was born towards their senior years but i do have some memories of them. they liked to stand up and place their front paws on each other's front paws, kind of like a cat tower. it was very cute. they were both very friendly to me even though i was a baby. i think this is where my love of cats started as these two were kind of welcoming me into their home in a way. this would also be my first experience with loss as both would pass away from old age rather closely together. i was too young to understand the significance of loss at the time, though i do remember the process of them getting older and passing away. my mom always speaks fondly of these two cats and has told me she's had many cats throughout her life. though she has a wonderful dog now, i think me and my mom love animals in general. she really helped me foster that love as a child
@ -28,10 +29,10 @@
<figure
<div class="gallery">
<img class="enlarge" src="../img/life/pets/whiskers.jpg" alt="a photo of a white dwarf rabbit on a table in front of computer equipment" height="300" width="300">
<img class="enlarge" src="/img/life/pets/whiskers.jpg" alt="a photo of a white dwarf rabbit on a table in front of computer equipment" height="300" width="300">
<img class="enlarge" src="../img/life/pets/whiskers-bw-one.jpg" alt="a black and white photo of a white dwarf rabbit looking off of a front porch towards the world around him" height="300" width="500">
<img class="enlarge" src="/img/life/pets/whiskers-bw-one.jpg" alt="a black and white photo of a white dwarf rabbit looking off of a front porch towards the world around him" height="300" width="500">
</div>
<figcaption class="gallery-text">
pictures of whiskers, my pet rabbit
@ -45,7 +46,7 @@
<figure>
<div class="gallery">
<img class="enlarge" src="../img/life/pets/parakeet.jpg" alt="a yellow parakeet hangs on the side of her cage, the position of her beak suggests she is aware of the camera pointed towards her" height="300" width="500">
<img class="enlarge" src="/img/life/pets/parakeet.jpg" alt="a yellow parakeet hangs on the side of her cage, the position of her beak suggests she is aware of the camera pointed towards her" height="300" width="500">
</div>
<figcaption class="gallery-text">
a picture of one of my parakeets, fred
@ -63,9 +64,9 @@
<figure>
<div class="gallery">
<img class="enlarge" src="../img/life/pets/pupper.jpg" alt="a west highland white terrier looks at the camera. his face is covered in the green of freshly cut grass, as he loved rolling and rubbing his face in the grass after it was cut. the terrier has a face that can only described as pure happiness, so joyful and proud of himself he is" height="300" width="300">
<img class="enlarge" src="/img/life/pets/pupper.jpg" alt="a west highland white terrier looks at the camera. his face is covered in the green of freshly cut grass, as he loved rolling and rubbing his face in the grass after it was cut. the terrier has a face that can only described as pure happiness, so joyful and proud of himself he is" height="300" width="300">
<img class="enlarge" src="../img/life/pets/pupper-two.jpg" alt="a white west highlang white terrier relaxes on a cool wooden floor in the summer. the sunlight gives her just the right amount of warmth as she looks contently at the camera" height="300" width="350">
<img class="enlarge" src="/img/life/pets/pupper-two.jpg" alt="a white west highlang white terrier relaxes on a cool wooden floor in the summer. the sunlight gives her just the right amount of warmth as she looks contently at the camera" height="300" width="350">
</div>
<figcaption class="gallery-text">
a picture of my mom's two terriers, rambo (right) and montana (left)
@ -78,15 +79,17 @@
</p>
<figure>
<div class="gallery">
<img class="enlarge" src="../img/life/pets/baxter-looking.jpg" alt="a grey and white cat face with black markings looking directly into the camera. the pupils are slit as it is bright" height="350" width="300">
<img class="enlarge" src="/img/life/pets/baxter-looking.jpg" alt="a grey and white cat face with black markings looking directly into the camera. the pupils are slit as it is bright" height="350" width="300">
</div>
<figcaption class="gallery-text">
one of my favorite photos of my cat, baxter
</figcaption>
</figure>
<p>back to the <a href="#top">top of the page</a></p>
</section>
</main>
<script src="../script/image-enlarger.js" defer></script>
<?php include "../includes/footer.php" ?>
<script src="/script/image-enlarger.js" defer></script>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

56
life/emmas-self/picrew.php Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>a gallery of emma</title>
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<main>
<section>
<h1 id="top">a gallery of emma</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/self-category.php'); ?>
<p>
picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrews allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it acccessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makeers that capture so many wonderful parts of myself, and humanity in general
</p>
<h3 class="picrew-gallery-header">gallery</h3>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/enlarge-image.php'); ?>
<div class="picrew-gallery">
<figure>
<img class="enlarge" src="/img/life/picrews/self-one.jpg" alt="an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/94097">picrew image maker</a> by sangled
</figcaption>
</figure>
<figure>
<img class="enlarge" src="/img/life/picrews/self-two.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores charactersitcs such as hair styles and clothing that emma sees herself wearing and expressing" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/2446448"> picrew image maker</a> by seyimOn
</figcaption>
</figure>
<figure>
<img class="enlarge" src="/img/life/picrews/self-three.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/644129">picrew image maker</a> by makowka
</figcaption>
</figure>
<figure>
<img class="enlarge" src="/img/life/picrews/self-four.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/426722"> picrew image maker</a> by grgikau
</figcaption>
</figure>
</div>
<p>back to the <a href="#top">top of the page</a></p>
</section>
<script src="/script/image-enlarger.js" defer></script>
</main>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

14
life/postroll.php → life/emmas-self/postroll.php
View File

@ -4,17 +4,18 @@
<meta name="viewport" content="width=device-width intial-scale=1.0">
<meta charset="utf-8">
<title>emma's postroll</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<main>
<section>
<h1>emma's postroll</h1>
<h1 id="top">emma's postroll</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/self-category.php'); ?>
<p>
these are posts from other folks on the web that mean a lot to me. they may have inspired me, changed the way i think or look at something, or they were simply a good read. for one or more of those reasons, they are linked here for you to check out. possibly this gives you a better idea of what i find important and helps you understand me better. maybe in the end it just gives you a nice collection of posts to read. as time moves on i'll add more posts as i quite enjoying reading blogs
</p>
@ -91,8 +92,9 @@
</a>
</li>
</ul>
<p>back to the <a href="#top">top of the page</a></p>
<section>
</main>
<?php include "../includes/footer.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

15
life/todo.php → life/emmas-self/todo.php
View File

@ -4,15 +4,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"
<title>emma's things to do</title>
<link rel="stylesheet" href="../style/style.css">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'); ?>
<main>
<h1>emma's things to do</h1>
<h1 id="top">emma's things to do</h1>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/self-category.php'); ?>
<section>
<p>
this page is a little less specific than <a href="./goals.php" target="_blank">emma's goals</a> they are things that i'd like to accomplish, but are not truly personal to me. they are things you could look through as well if you are looking for something new to try out or a skill to pick up. sometimes i'll try to include a resource i've found for eventually pursuing a topic if i have researched it far enough to do so. i will mark resources that are paid and resources that are free
@ -48,9 +49,11 @@
<p>
i think that's all i have for now that i want to do soon. when i get more things i'll add them to the list! &lt;3
</p>
<p>back to the <a href="#top">top of the page</a></p>
</section>
</main>
<?php include "../includes/footer.php" ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
</body>
</html>

38
life/interests.php Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<title>category of emma's life</title>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<main>
<h1>category of emma's interests</h1>
<section>
<p>
links in this category are pages descibing emma's past and present interests, and the role they've had in shaping her life. you may find new songs in the music page, interesting photos in the photogrpahy page, and the often common story of tech burnout and ving after experiencing it in the technology page
</p>
<ul>
<li>
<a href="./emmas-interests/music.php">emma's music</a> emma discusses the role of music throughout her life, and shares a few favorites from each era of her life
</li>
<li>
<a href="./emmas-interests/photography.php">emma's photography</a> emma talks about a past interest in photography, and shares some photos she's taken in the past
</li>
<li>
<a href="./emmas-interests/technology.php">emma and technology</a> emma talks about her life long interest in technology. as well as working in and eventually leaving the field due to health reasons
</li>
</ul>
</section>
</main>
<?php include "../includes/footer.php" ?>
</body>
</html>

55
life/picrew.php
View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>a gallery of emma</title>
<link rel="icon" type="image/x-icon" href="../img/site/assets/favicon.ico">
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<main>
<section>
<h1>a gallery of emma</h1>
<p>
picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrews allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it acccessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makeers that capture so many wonderful parts of myself, and humanity in general
</p>
<h3 class="picrew-gallery-header">gallery</h3>
<?php include "../includes/enlarge-image.php" ?>
<div class="picrew-gallery">
<figure>
<img class="enlarge" src="../img/life/picrews/self-one.jpg" alt="an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/94097">picrew image maker</a> by sangled
</figcaption>
</figure>
<figure>
<img class="enlarge" src="../img/life/picrews/self-two.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores charactersitcs such as hair styles and clothing that emma sees herself wearing and expressing" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/2446448"> picrew image maker</a> by seyimOn
</figcaption>
</figure>
<figure>
<img class="enlarge" src="../img/life/picrews/self-three.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/644129">picrew image maker</a> by makowka
</figcaption>
</figure>
<figure>
<img class="enlarge" src="../img/life/picrews/self-four.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles" height="300" width="300">
<figcaption>
<a href="https://picrew.me/en/image_maker/426722"> picrew image maker</a> by grgikau
</figcaption>
</figure>
</div>
</section>
<script src="../script/image-enlarger.js" defer></script>
</main>
<?php include "../includes/footer.php" ?>
</body>
</html>

47
life/self.php Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="/img/site/assets/favicon.ico">
<title>category of emma's life</title>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?>
<main>
<h1>emma's self - category</h1>
<section>
<p>
this category page contains pages related to emma and what being her means in general. pages here are considered to be core to emma and her identity and sense of self. to understand emma better, one would want to read these pages
</p>
<ul>
<li>
<a href="./emmas-self/pets.php">emma's pets</a> - pets are core to emma, as they show the same love and understanding hat she would show to anyone in her life
</li>
<li>
<a href="./emmas-self/picrew.php">emma's picrews</a> - emma's picrew page has allowerd her to explore her identity through the online image creator picrew. the picrews provided represent how emma sees herself one day, each with qualities she may already have, or ones she may want to explore as part of her expression of gender
</li>
<li>
<a href="./emmas-self/goals.php">emma's goals</a> - a list of goals that are very important to emma. all with a timeframe of sooner rather than later. they range from learning skills to exploring gender identity, and all are a part of how emma would like to one day see herself
</li>
<li>
<a href="./emmas-self/todo.php">emma's things to do</a> - unlike emma's personal goals. this todo list is meant to serve as a resource list for things any one may have an interest in doing, and might like a link or a resoure to use to get started with. most of them are based around the topic of web development at the moment
</li>
<li>
<a href="./emmas-self/postroll.php">emma's postroll</a> - this postroll contains a list of posts that emma considers quite important to her. each post was either a good read, changed the way she thought about something, or left her better understand the person who had written the post
</li>
</ul>
<p>
this category will grow with time, much as emma will herself
</p>
</section>
</main>
<?php include "../includes/footer.php" ?>
</body>
</html>

28
site/changelog.php
View File

@ -136,6 +136,34 @@
</li>
</ul>
</details>
<details>
<summary>January 2025 - changelog</summary>
<ul>
<li>
01-10-2025
<ul class="nested-list">
<li>
adjusted nav and main widths
</li>
<li>
adjusted footer height
</li>
<li>
used grid properties for page layout rather than relying on height properties of nav and main elements
</li>
<li>
implmented category in anticipation of future pages related to these categories
</li>
<li>
changes nonbinary pride border to trans pride border due to further progress and understanding of my gender identity
</li>
<li>
i'm entering my pink era, and parts of the site have been updated to reflect that &lt;3
</li>
</ul>
</li>
</ul>
</details>
</section>
</main>
<?php include "../includes/footer.php" ?>

37
style/style.css
View File

@ -9,10 +9,10 @@
}
:root {
--background-color: #e0ffcd;
--body-background-color: #ffebbb;
--scroll-gutter: #65eeb788;
--scroll-bar: #588c7388;
--background-color: #ffe9e3;
--body-background-color: #ffcccc;
--scroll-gutter: #eb76ff88;
--scroll-bar: #ffa8ec88;
}
@ -32,9 +32,11 @@ body {
background-color: var(--body-background-color);
background-image: url("../img/site/assets/sakura.webp");
display: grid;
grid-template-columns: 14vw 60vw;
grid-template-rows: 6vh 88vh 5vh;
grid-template-columns: 20vw 60vw;
grid-template-rows: 6vh 85vh 6vh;
justify-content: center;
align-items: end;
align-content: center;
overflow: hidden;
}
@ -43,7 +45,6 @@ h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
}
main, nav {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-family: system-ui;
letter-spacing: 0.05rem;
@ -51,7 +52,7 @@ main, nav {
main {
background-color: var(--background-color);
height: 87vh;
height: 85vh;
width: 60vw;
padding-left: 2.5rem;
overflow: auto;
@ -60,6 +61,7 @@ main {
grid-column: 2/3;
grid-row: 2/3;
align-self: end;
padding-top: 0.5rem;
}
header {
@ -67,13 +69,13 @@ header {
grid-row: 1/2;
grid-column: 1/3;
height: 6vh;
width: 74vw;
width: 80vw;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to right, #D60270, #9B4F96, #0038A8);
border-image-source: linear-gradient(to right, #D60270 0 33%, #9B4F96 33% 66%, #0038A8 66%);
font-size: 1.4rem;
margin-top: 0.43rem;
}
@ -82,14 +84,14 @@ footer {
background-color: var(--background-color);
grid-row: 3/4;
grid-column: 1/3;
height: 5vh;
width: 74vw;
height: 6vh;
width: 80vw;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to right, #595959 0 35%, #CF7280 41%, #EEDE77 47%, #E8E8E8 53%, #7BC2E0 59%, #3BB07D 65%, #595959 71%);
border-image-source: linear-gradient(to right, #595959 0 35%, #CF7280 35% 41%, #EEDE77 41% 47%, #E8E8E8 47% 53%, #7BC2E0 53% 59%, #3BB07D 59% 65%, #595959 65% 71%);
font-family: system-ui;
font-size: 1.3rem;
letter-spacing: 0.05rem;
@ -109,13 +111,14 @@ nav {
grid-column: 1/2;
justify-self: end;
align-self: end;
width: 14vw;
height: 87vh;
padding-left: 0.75rem;
width: 20vw;
height: 85vh;
padding-top: 0.75rem;
padding-left: 1.5rem;
border-right: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to bottom, #FCF434, #FFFFFF, #9C59D1, #2C2C2C);
border-image-source: linear-gradient(to bottom, #5BCEFA 0 20%, #F5A9B8 20% 40%, #FFFFFF 40% 60%, #F5A9B8 60% 80%, #5BCEFA 80%);
}
section {