Home
Blog
@@ -38,9 +38,10 @@ import Logo from './Logo.astro';
margin: 0;
padding: 0 1em;
}
+
h2 {
margin-bottom: 0.5em;
- font-size: 1em;
+ font-size: 1.5em;
}
h2 a,
diff --git a/src/content.config.ts b/src/content.config.ts
index 27bd394..28561fb 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -1,18 +1,27 @@
-import { glob } from 'astro/loaders';
-import { defineCollection, z } from 'astro:content';
+import { glob } from "astro/loaders";
+import { defineCollection, z } from "astro:content";
const blog = defineCollection({
- // Load Markdown and MDX files in the `src/content/blog/` directory.
- loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
- // Type-check frontmatter using a schema
- schema: ({ image }) => z.object({
- title: z.string(),
- description: z.string(),
- // Transform string to Date object
- pubDate: z.coerce.date(),
- updatedDate: z.coerce.date().optional(),
- heroImage: image().optional(),
- }),
+ // Load Markdown and MDX files in the `src/content/blog/` directory.
+ loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
+ // Type-check frontmatter using a schema
+ schema: ({ image }) =>
+ z.object({
+ title: z.string(),
+ description: z.string(),
+ // Transform string to Date object
+ pubDate: z.coerce.date(),
+ updatedDate: z.coerce.date().optional(),
+ heroImage: image().optional(),
+ }),
});
-export const collections = { blog };
+const page = defineCollection({
+ loader: glob({ base: "./src/content/page", pattern: "**/*.{md,mdx}" }),
+ schema: ({ image }) =>
+ z.object({
+ title: z.string(),
+ }),
+});
+
+export const collections = { blog, page };
diff --git a/src/content/page/about.md b/src/content/page/about.md
new file mode 100644
index 0000000..34caa0b
--- /dev/null
+++ b/src/content/page/about.md
@@ -0,0 +1,9 @@
+---
+title: About
+---
+
+Hi! I'm Drew, but I also go by `Periodic` in most online spaces. I am a human being who exists both in meatspace and cyberspace.
+
+I do full stack web-development: A little front-end, a little back-end, database optimization, infrastructure automation, the whole deal.
+
+I have been a software developer from a young age and have spent two decades in the tech industry. I've done freelance, start-ups (Asana, Fossa) and some big corps (Google, Visa).
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 43aa6a5..fe11d74 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,60 +1,20 @@
---
import RootLayout from '../layouts/RootLayout.astro';
import NotchedBox from '../components/NotchedBox.astro';
+import { getEntry, render } from 'astro:content';
+
+const about = await getEntry('page', 'about');
+
+if (!about) {
+ throw new Error('Page not found');
+}
+
+const { Content } = await render(about);
---
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
- viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
- adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
- et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
- vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
- sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
-
-
-
- Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
- tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
- blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
- porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
- massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
- Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
- bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
- massa massa ultricies mi.
-
-
-
- Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
- suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
- nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
- turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
- dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
- semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
- vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
- facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
- vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
- urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
-
-
-
- Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
- viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
- scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
- gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
- pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
- blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
- cursus metus aliquam eleifend mi.
-
-
-
- Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
- nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
- tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
- ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
- proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
-
+
+ {about.data.title}
+
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3c5b680..4f6feee 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -43,19 +43,20 @@ const posts = (await getCollection('blog')).sort(
posts.map((post) => (
-
-
- {post.data.heroImage && (
-
- )}
-
{post.data.title}
-
-
-
- { post.data.description &&
-
- {post.data.description}
-
}
+ {post.data.heroImage && (
+
+ )}
+
{post.data.title}
+
+
+
+ { post.data.description &&
+
+ {post.data.description}
+
}
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 138f5cb..f0c0554 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,26 @@
---
import NotchedBox from '../components/NotchedBox.astro';
+import Blazestar from '../components/Blazestar.astro';
import RootLayout from '../layouts/RootLayout.astro';
---
-
- Test content
+
+ Welcome to
+
+ This is the personal homepage for Periodic, a human who spends a lot of time with technology. I believe that our virtual lives are as valuable as our physical ones and that the two are inextricably linked.
+
+
+ Topics that may be covered (in no particular order):
+
+ - Programming
+ - Software Engineering
+ - Start-ups
+ - Cooperative Economies
+ - Sustainability
+ - Astronomy
+ - Nature
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 87f14c2..82bb35e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,13 +7,14 @@
:root {
--color-gold: #e99c1a;
--color-space-blue: #1c2329;
+ --color-space-blue-light: #2a3138;
--color-gray: #7f8c8d;
--color-light-text: #dcdcc6;
--color-red: #d75422;
--color-accent: var(--color-red);
--background: var(--color-space-blue);
- --background-light: lighten(var(--color-space-blue));
+ --background-light: var(--color-space-blue-light);
--font-size-sm: calc(var(--font-size-md) / 1.2);
--font-size-md: 20px;
@@ -168,9 +169,9 @@ img {
border-radius: 8px;
}
code {
- padding: 2px 5px;
- background-color: rgb(var(--background-light));
- border-radius: 2px;
+ font-family: "Fira Code", monospace;
+ background-color: var(--background-light);
+ padding: 0.1em 0.2em;
}
pre {
padding: 1.5em;