Update about page copy and styles

Author: mcecode

src/components/about/hero.astro

@@ -5,9 +5,13 @@ import avatarPng from "@/assets/avatar.png";
 ---
 
 <section>
-	<Picture resize="down" alt="mcecode's avatar" {...avatarPng} />
+	<Picture
+		resize="down"
+		alt="An avatar with a man bun, a beard, and a mustache, wearing eyeglasses and a black and gray shirt."
+		{...avatarPng}
+	/>
 	<h1>Hi, I'm Matthew</h1>
-	<p>I code to turn ideas into reality</p>
+	<p>This is my tech-focused digital garden.</p>
 </section>
 
 <style lang="scss">
@@ -24,22 +28,27 @@ import avatarPng from "@/assets/avatar.png";
 	}
 	h1 {
 		grid-area: title;
-		margin-bottom: 0;
 	}
 	p {
 		grid-area: subtitle;
 		font-size: v-size(7);
+		word-break: keep-all;
 	}
 
 	@include m-large {
 		section {
 			grid-template-areas: "avatar title" "avatar subtitle";
-			column-gap: v-size(10);
+			grid-template-columns: 2fr 3fr;
+			column-gap: v-size(5);
 			margin-bottom: v-const("section_spacing.large");
 			text-align: left;
 		}
+		picture {
+			justify-self: end;
+		}
 		h1 {
 			align-self: end;
+			margin: 0;
 		}
 	}
 </style>

src/components/about/section.astro

@@ -1,33 +1,30 @@
 ---
-type Props = { title: string; description: string };
-const { title, description } = Astro.props;
+type Props = { title: string };
+const { title } = Astro.props;
 ---
 
 <section>
 	<h2>{title}</h2>
-	<p>{description}</p>
+	<slot />
 </section>
 
 <style lang="scss">
 	section {
 		margin-bottom: v-const("section_spacing.medium");
 	}
+	h2::after {
+		content: "...";
+	}
 
 	@include m-large {
 		section {
-			display: flex;
+			display: grid;
+			grid-template-columns: 2fr 3fr;
 			gap: v-size(5);
 			margin-bottom: v-const("section_spacing.large");
 		}
 		h2 {
-			flex: 1 0 40%;
 			text-align: right;
 		}
 	}
-
-	@include m-xlarge {
-		h2 {
-			flex-basis: 30%;
-		}
-	}
 </style>

src/pages/index.astro

@@ -6,16 +6,23 @@ import Page from "@/layout/page.astro";
 
 <Page title="About">
 	<Hero />
-	<Section
-		title="Psychometrician"
-		description="In college, I took a degree in BS Psychology because I just found the human psyche fascinating. I wanted to learn it. I wanted to study it. Once I graduated, I pursued a career in psychometrics and became a psychometrician."
-	/>
-	<Section
-		title="Turned"
-		description="As I progressed as a psychometrician, I realized that I really needed to up my skills in statistics. Due to this, one of the things that I decided to learn was coding, so that I could delve deeper on data analysis and statistical tests, among others. However, the more I learned how to code, the more I realized how much I really liked it, all the more when I discovered web development. This reached the point where I started to consider actually changing careers."
-	/>
-	<Section
-		title="Software Engineer"
-		description="After some deliberation, I decided to take the plunge. A few freelance projects, open-source contributions, and applications later, I have now fully shifted careers and work as a software engineer with full-stack skills."
-	/>
+	<Section title="Here, you can find my">
+		<ul>
+			<li>shortish <a href="/notes">notes</a>,</li>
+			<li>longer form <a href="/writings">writings</a>,</li>
+			<li>
+				and (outdated) list of <a href="/projects">projects</a> (that I should definitely
+				update).
+			</li>
+		</ul>
+	</Section>
+	<Section title="Right now">
+		<div>
+			<p>
+				it's pretty plain and sparse, but I try to add new things and improve on
+				what's already here when I get the time.
+			</p>
+			<p>Hope you enjoy your stay.</p>
+		</div>
+	</Section>
 </Page>