about page

This commit is contained in:
Rachel Lambda Samuelsson 2024-07-18 21:38:45 +02:00
parent bc1712196b
commit 2ebd398b08
6 changed files with 162 additions and 71 deletions

View File

@ -1,10 +1,12 @@
<script setup lang="ts">
export interface Props {
rows?: number
columns?: number
}
const props = withDefaults(defineProps<Props>(), {
rows: 1
rows: 1,
columns: 1
})
</script>
@ -21,5 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
background-color: #e5d9c7;
padding: 1em;
grid-row-end: span v-bind(props.rows);
grid-column-end: span v-bind(props.columns);
}
</style>

View File

@ -0,0 +1,27 @@
<script setup lang="ts">
const props = defineProps<{
templateColumns: string
templateColumnsMobile: string
}>()
</script>
<template>
<div class="section">
<slot></slot>
</div>
</template>
<style scoped>
.section {
display: grid;
grid-template-columns: v-bind(props.templateColumns);
gap: 1em;
grid-auto-flow: row dense;
}
@media only screen and (max-width : 850px) {
.section {
grid-template-columns: v-bind(props.templateColumnsMobile);
}
}
</style>

View File

@ -1,4 +1,5 @@
<template>
<hr>
<div class="badges">
<img src="/img/church.gif" alt="church of alonzo">
<img src="/img/gender.gif" alt="abolish gender">
@ -7,13 +8,16 @@
</template>
<style scoped>
hr {
margin-top: 2em;
margin-bottom: 2em;
}
.badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
row-gap: 1em;
margin-top: 2em;
margin-bottom: 2em;
}

View File

@ -2,9 +2,8 @@
import Link from '../components/Link.vue'
const blog = { title: "blog", path: "/", url: "/" }
const pics = { title: "pics", path: "/pics", url: "/pics.html" }
const gallery = { title: "gallery", path: "/gallery", url: "/gallery.html" }
const about = { title: "about", path: "/about", url: "/about.html" }
const cv = { title: "cv", path: "/cv", url: "/cv.html" }
</script>
<template>
@ -18,9 +17,8 @@ const cv = { title: "cv", path: "/cv", url: "/cv.html" }
<hr>
<nav><ul>
<li><Link :to="blog"/></li>
<li><Link :to="pics"/></li>
<li><Link :to="gallery"/></li>
<li><Link :to="about"/></li>
<li><Link :to="cv"/></li>
</ul></nav>
<hr>
</template>

View File

@ -1,50 +1,139 @@
<script setup lang="ts">
import TheBox from '../components/TheBox.vue'
import TheBoxGrid from '../components/TheBoxGrid.vue'
</script>
<template>
<article>
<div>
<h2>me</h2>
<p>My name is Rachel Lambda Samuelsson, my pronouns are she/her. I'm an undergrad at Chalmers University of Technology, studying computer science and engineering. My interests include type theory, univalent mathematics, category theory, logic, and functional programming. If I write code it is probably in Agda, Idris, or Haskell.</p>
<h2>this site</h2>
<p>This site hosts my blog, a gallery of photos I've taken, and a quick informal CV.</p>
<h2>contact</h2>
<ul>
<h1>about</h1>
<hr>
<h2>this site</h2>
<hr>
<TheBoxGrid templateColumns="1fr 1fr" templateColumnsMobile="1fr">
<TheBox :rows="2">
<h3>where am i?</h3>
<p>You've arrived at my personal website!</p>
<p>This site hosts my blog which covers topics such as functional programming, math, logic, system administration, or whatever else happens to capture my interest.</p>
<p>It additionally hosts a gallery of photos which I have taken. I currently take photos with a SONY RX100 and a Polaroid 660 AF.</p>
<p>This page also serves as a short CV listing my personal projects, previous work, and areas of expertise.</p>
</TheBox>
<TheBox>
<h3>implementation</h3>
<p>This website is written in typescript using vue, and compiled statically using vite-ssg. The sourcecode can be found <a href="https://githug.xyz/rachel/blog-vue">here</a>.</p>
</TheBox>
<TheBox>
<h3>hosting</h3>
<p>This website is selfhosted by me on my homeserver, which is running a setup based on declarative NixOS containers utilizing ZFS for storage. The sourcecode can be found <a href="TODO">TODO here</a>, and a blog post explaining it can be found <a href="TODO">TODO here</a>.</p>
</TheBox>
</TheBoxGrid>
<h2>me</h2>
<hr>
<TheBoxGrid templateColumns="1fr 1fr" templateColumnsMobile="1fr">
<TheBox :rows="4">
<h3>picture</h3>
<figure>
<img src="/img/me.jpg" alt="a picture of me">
<figcaption>rachel in the flesh</figcaption>
</figure>
</TheBox>
<TheBox>
<h3>who am i?</h3>
<p>My name is Rachel Lambda Samuelsson, my pronouns are she/her.</p>
<p>I'm an undergrad at Chalmers University of Technology, studying computer science.</p>
</TheBox>
<TheBox>
<h3>interests</h3>
<p>I am interested in programming, type theory, logic, system administration, and reproducible builds.</p>
<p>Outside of academia I enjoy casual photography, nature, video games, and music circuitry.</p>
</TheBox>
<TheBox>
<h3>programming languages</h3>
<div class="listing">
<span>Haskell</span>
<span>OCaml</span>
<span>Rust</span>
<span>TypeScript</span>
<span>Vue</span>
<span>Agda</span>
<span>Idris</span>
<span>Shell</span>
<span>C</span>
</div>
</TheBox>
<TheBox>
<h3>technologies</h3>
<div class="listing">
<span>Linux</span>
<span>Git</span>
<span>Docker</span>
<span>Nomad</span>
<span>Nix</span>
<span>OpenBSD</span>
<span>nginx</span>
<span>TODO ZFS</span>
</div>
</TheBox>
<TheBox>
<h3>previous work</h3>
<ul>
<li>
Teaching Assistant Work
<ul>
<li><a href="https://www.student.chalmers.se/sp/course?course_id=33251">Introduction To Functional Programming</a></li>
<li><a href="https://www.student.chalmers.se/sp/course?course_id=36133">Introduction To Functional Programming</a></li>
<li><a href="https://www.student.chalmers.se/sp/course?course_id=36211">Domain Specific Languages of Mathematics</a></li>
</ul>
</li>
</ul>
</TheBox>
<TheBox>
<h3>links</h3>
<div class="links">
<ul>
<li>email: <a href="mailto:depsterr@protonmail.com">depsterr@protonmail.com</a></li>
<li>fedi: <a href="https://types.pl/@rachelrosen">@rachelrosen@types.pl</a></li>
</ul>
<li>gitea: <a href="https://githug.xyz/rachel">githug.xyz/rachel</a></li>
<li>github: <a href="https://github.com/rachelmbda">github.com/rachelambda</a></li>
</ul>
</div>
<figure>
<h2>picture</h2>
<img src="/img/me.jpg" alt="a picture of me">
<figcaption>rachel in the flesh</figcaption>
</figure>
</article>
</TheBox>
</TheBoxGrid>
</template>
<style scoped>
article {
display: flex;
flex-direction: row;
align-items: top;
justify-content: center;
h3, figcaption {
text-align: center;
}
@media only screen and (max-width : 850px) {
article {
display: flex;
flex-direction: column;
align-items: center;
justify-content: top;
}
figure {
margin: 0;
padding: 0;
}
figure {
margin: 1em 0 0 0;
width: 70%;
max-width: 70%;
}
h3 {
margin-top: 0em;
margin-bottom: 1em;
}
img {
border-radius: 5px;
}
.listing {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 0.3em;
column-gap: 2em;
}
.links {
display: flex;
flex-direction: column;
justify-content: center;
}
li ul {
padding-left: 1em;
}
</style>

View File

@ -1,30 +0,0 @@
<script setup lang="ts">
import TheBox from '../components/TheBox.vue'
</script>
<template>
<article>
<TheBox :rows="2">
mjau mjau mjau
mjau mjau mjau
</TheBox>
<TheBox>
mjau mjau mjau
</TheBox>
<TheBox>
mjau mjau mjau
</TheBox>
<TheBox>
mjau mjau mjau
</TheBox>
</article>
</template>
<style scoped>
article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
grid-auto-flow: row dense;
}
</style>