update about page

makefile

@@ -34,6 +34,7 @@ PNG_TARGETS		= $(IMG_DIR)/%.png=$(OUT_DIR)/%.png
 
 site: $(HTML_TARGETS) $(CSS_TARGETS)
 	cp $(IMG_DIR)/*.png $(OUT_DIR)/
+	cp $(IMG_DIR)/*.jpg $(OUT_DIR)/
 
 run: site
 

src/inc_css/about.css

@@ -0,0 +1,24 @@
+.pfp {
+    position: relative;
+    top: 3em;
+    left: 50%;
+    width: 20em;
+    height: 20em;
+    text-align: center;
+    overflow: hidden;
+    border-color: var(--background-alt);
+    border-style: solid;
+    border-width: 3px;
+    border-radius: 50%;
+    transform: translate(-50%, 0);
+    margin-bottom: 4em;
+}
+
+.pfp img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 100%;
+    width: auto;
+    transform: translate(-50%, -50%);
+}

src/root/about.html

@@ -17,26 +17,50 @@
 
 <div class="page">
 
+<div class="pfp">
+<img src="pfp.jpg"></img>
+</div>
+
 <h1>Hi, I'm Cat</h1>
 
 <div class="text-panel">
 
 <p>
-<!--
+I am an engineer and artist at the intersection of humans and technology.
-by day i work with hardware, software and people finding useful things to do with immersive technology. for professional inquiries, please find me on <a href="https://www.linkedin.com/in/cat-flynn-08751611b/">linkedin</a>.
--->
-
-By day I work with hardware, software and people finding useful things to do with immersive technology.
-For professional inquiries, please find me on <a href="https://www.linkedin.com/in/cat-flynn-08751611b/">LinkedIn</a>.
 </p>
 
 <div class="separator"></div>
 
 <p>
-<!--
+In my day job I find novel uses for interactive, immersive and games technology for training and simulation.
-by night, i create. often it's <a href="https://ktyl.itch.io/">games</a> or <a href="https://github.com/ktyldev/">code</a>, but i am also interested in photography, writing, drawing, and making music. this website is to share those things. i'm working on building it out at the moment, so for now please just enjoy some things i've made in the <a href="gallery.html">gallery</a>!
+I am passionate about free and open source software, and the importance of developing technologies that serve everyone.
--->
+</p>
 
+<p>
+I tinker for fun and make things when I can, inspired by physics, the universe and boundaries. I am currently most enamoured by optics, orbital mechanics and relativity.
+</p>
+
+<p>
+Besides computing, I like caring for my plants, photography, and studying language, culture and philosophy. I take an interest in fashion, makeup and self-presentation, and regularly go to see live music. 
+</p>
+
+<div class="separator"></div>
+
+<p>
+For inquiries, professional or otherwise, please <a href="mailto:me@ktyl.dev">send me an email</a>!
+</p>
+
+<!--
+<p>
+By day I work with hardware, software and people finding useful things to do with immersive technology.
+For professional inquiries, please find me on <a href="https://www.linkedin.com/in/cat-flynn-08751611b/">LinkedIn</a>.
+
+
+</p>
+
+<div class="separator"></div>
+
+<p>
 By night, I create.
 Often it's <a href="https://ktyl.itch.io/">games</a> or <a href="https://github.com/ktyldev/">code</a>, but I am also interested in photography, writing, drawing, and making music.
 This website is to share those things.
@@ -44,7 +68,7 @@ I'm working on building it out at the moment, so for now please just enjoy some
 
 
 </p>
-
+-->
 </div>
 </div>
 

src/root/styles.css

@@ -17,6 +17,7 @@ body {
 #include page.css
 #include landing.css
 #include blog.css
+#include about.css
 
 li {
     display:inline;