about page
This commit is contained in:
parent
bc1712196b
commit
2ebd398b08
|
|
@ -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>
|
||||
|
|
|
|||
27
src/components/TheBoxGrid.vue
Normal file
27
src/components/TheBoxGrid.vue
Normal 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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h2>picture</h2>
|
||||
<img src="/img/me.jpg" alt="a picture of me">
|
||||
<figcaption>rachel in the flesh</figcaption>
|
||||
</figure>
|
||||
</article>
|
||||
</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>
|
||||
<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>
|
||||
</TheBox>
|
||||
</TheBoxGrid>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
article {
|
||||
h3, figcaption {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.listing {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
row-gap: 0.3em;
|
||||
column-gap: 2em;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 850px) {
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: top;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 0 0 0;
|
||||
width: 70%;
|
||||
max-width: 70%;
|
||||
}
|
||||
li ul {
|
||||
padding-left: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user