+
Found {results().length} results for {`'${query()}'`}
{results().map(result => (
-
-
+
))}
diff --git a/src/components/StackCard.astro b/src/components/StackCard.astro
index b49950f..185874f 100644
--- a/src/components/StackCard.astro
+++ b/src/components/StackCard.astro
@@ -1,18 +1,26 @@
---
+import { Icon } from "astro-icon/components";
+
type Props = {
- text: string
- icon: string
- href: string
-}
+ text: string;
+ icon: string;
+ href: string;
+};
-const { text, icon, href } = Astro.props
+const { text, icon, href } = Astro.props;
---
-
-
-
- {text}
-
-
\ No newline at end of file
+
+
+
+
+
+ {text}
+
+
diff --git a/src/components/TwinklingStars.astro b/src/components/TwinklingStars.astro
deleted file mode 100644
index d8ada99..0000000
--- a/src/components/TwinklingStars.astro
+++ /dev/null
@@ -1,90 +0,0 @@
----
-/**
- * TwinkleStars.astro
- * This component creates twinkling stars that are appended to the galaxy on interval.
- * Twinkle stars are removed from the document after the animation is completed.
- * The svg below is just a template for the script to clone and append to the galaxy.
- */
----
-
-
-
-
diff --git a/src/consts.ts b/src/consts.ts
index b9c87ee..ae03fea 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,8 +1,8 @@
-import type { Site, Page, Links, Socials } from "@types";
+import type { Site, Page, Links, Socials } from "@/types";
// Global
export const SITE: Site = {
- TITLE: "Portfolio Moritz Hölting",
+ TITLE: "Portfolio",
DESCRIPTION: "Welcome to my portfolio website.",
AUTHOR: "Moritz Hölting",
};
@@ -55,26 +55,20 @@ export const LINKS: Links = [
export const SOCIALS: Socials = [
{
NAME: "Email",
- ICON: "email",
+ ICON: "pixelarticons:at-sign",
TEXT: "moritz@hoelting.dev",
HREF: "mailto:moritz@hoelting.dev",
},
{
NAME: "Github",
- ICON: "github",
+ ICON: "pixel:github",
TEXT: "moritz-hoelting",
HREF: "https://github.com/moritz-hoelting",
},
{
NAME: "LinkedIn",
- ICON: "linkedin",
+ ICON: "pixel:linkedin",
TEXT: "moritz-hölting",
HREF: "https://www.linkedin.com/in/moritz-h%C3%B6lting/",
},
- {
- NAME: "Twitter",
- ICON: "twitter-x",
- TEXT: "moritz_hoelting",
- HREF: "https://twitter.com/moritz_hoelting",
- },
];
diff --git a/src/content/config.ts b/src/content.config.ts
similarity index 69%
rename from src/content/config.ts
rename to src/content.config.ts
index e100e3a..9a3c519 100644
--- a/src/content/config.ts
+++ b/src/content.config.ts
@@ -1,7 +1,9 @@
-import { defineCollection, z } from "astro:content";
+import { defineCollection } from "astro:content";
+import { z } from "astro/zod";
+import { glob } from "astro/loaders";
const work = defineCollection({
- type: "content",
+ loader: glob({ base: "./src/content/work", pattern: "**/*.{md,mdx}" }),
schema: z.object({
company: z.string(),
role: z.string(),
@@ -11,7 +13,7 @@ const work = defineCollection({
});
const blog = defineCollection({
- type: "content",
+ loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
schema: z.object({
title: z.string(),
summary: z.string(),
@@ -22,7 +24,7 @@ const blog = defineCollection({
});
const projects = defineCollection({
- type: "content",
+ loader: glob({ base: "./src/content/projects", pattern: "**/*.{md,mdx}" }),
schema: z.object({
title: z.string(),
summary: z.string(),
diff --git a/src/integrations/matomo/index.ts b/src/integrations/matomo/index.ts
index 4cd185d..0ec81a4 100644
--- a/src/integrations/matomo/index.ts
+++ b/src/integrations/matomo/index.ts
@@ -21,7 +21,7 @@ export type MatomoOptions = {
};
export default function matomoIntegration(
- options: MatomoOptions
+ options: MatomoOptions,
): AstroIntegration {
if (!options?.url.endsWith("/")) {
options.url += "/";
@@ -30,8 +30,8 @@ export default function matomoIntegration(
let script: string;
if (options?.enabled) {
- script = `import { initMatomo, preconnectMatomo } from "@integrations/matomo/matomo"; initMatomo(${JSON.stringify(
- options
+ script = `import { initMatomo, preconnectMatomo } from "@/integrations/matomo/matomo"; initMatomo(${JSON.stringify(
+ options,
)});`;
if (options?.preconnect) {
@@ -44,7 +44,7 @@ export default function matomoIntegration(
"\x1b[0m",
"\x1b[34m",
"Is disabled.",
- "\x1b[0m"
+ "\x1b[0m",
);
script = "";
@@ -62,7 +62,7 @@ export default function matomoIntegration(
"\x1b[0m",
"\x1b[34m",
"was integrated successfully.",
- "\x1b[0m"
+ "\x1b[0m",
);
}
},
diff --git a/src/layouts/ArticleBottomLayout.astro b/src/layouts/ArticleBottomLayout.astro
index e7bb521..495d6bb 100644
--- a/src/layouts/ArticleBottomLayout.astro
+++ b/src/layouts/ArticleBottomLayout.astro
@@ -1,5 +1,6 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
+import { Icon } from "astro-icon/components";
type Props = {
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
@@ -8,95 +9,73 @@ type Props = {
// Get the requested entry
const { entry } = Astro.props;
const { collection } = entry;
-const { Content } = await entry.render();
// Get the next and prev entries (modulo to wrap index)
const items = (await getCollection(collection))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
-const index = items.findIndex((x) => x.slug === entry.slug);
+const index = items.findIndex((x) => x.id === entry.id);
const prev = items[(index + 1) % items.length];
const next = items[(index - 1 + items.length) % items.length];
---
diff --git a/src/layouts/ArticleTopLayout.astro b/src/layouts/ArticleTopLayout.astro
index 9b004a4..1c170d0 100644
--- a/src/layouts/ArticleTopLayout.astro
+++ b/src/layouts/ArticleTopLayout.astro
@@ -1,6 +1,7 @@
---
import type { CollectionEntry } from "astro:content";
-import { formatDate, readingTime } from "@lib/utils";
+import { Icon } from "astro-icon/components";
+import { formatDate, readingTime } from "@/lib/utils";
type Props = {
entry: CollectionEntry<"projects"> | CollectionEntry<"blog">;
@@ -19,50 +20,41 @@ const repoUrl = collection === "projects" ? data.repoUrl : null;
href={`/${collection}/`}
class="group w-fit p-1.5 gap-1.5 text-sm flex items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
>
-
+
+
+
+
Back to {collection}
-
+
-
+
{formatDate(date)}
-
- {readingTime(body)}
+
+ {readingTime(body ?? "")}
-
+
{title}
@@ -77,13 +69,8 @@ const repoUrl = collection === "projects" ? data.repoUrl : null;
target="_blank"
class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
>
-
-
+
+
See Demo
@@ -94,13 +81,8 @@ const repoUrl = collection === "projects" ? data.repoUrl : null;
target="_blank"
class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
>
-
-
+
+
See Repository
diff --git a/src/layouts/BottomLayout.astro b/src/layouts/BottomLayout.astro
index 6fac611..3ee2ddb 100644
--- a/src/layouts/BottomLayout.astro
+++ b/src/layouts/BottomLayout.astro
@@ -1,5 +1,5 @@
---
-import Container from "@components/Container.astro";
+import Container from "@/components/Container.astro";
---
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 5b96493..620d23a 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -1,10 +1,10 @@
---
-import "@styles/global.css";
-import BaseHead from "@components/BaseHead.astro";
-import Header from "@components/Header.astro";
-import Footer from "@components/Footer.astro";
-import Drawer from "@components/Drawer.astro";
-import { SITE } from "@consts";
+import "@/styles/global.css";
+import BaseHead from "@/components/BaseHead.astro";
+import Header from "@/components/Header.astro";
+import Footer from "@/components/Footer.astro";
+import Drawer from "@/components/Drawer.astro";
+import { SITE } from "@/consts";
export interface Props {
title: string;
@@ -19,7 +19,7 @@ const { title, description, image } = Astro.props;
diff --git a/src/layouts/TopLayout.astro b/src/layouts/TopLayout.astro
index dac06a2..bb6a696 100644
--- a/src/layouts/TopLayout.astro
+++ b/src/layouts/TopLayout.astro
@@ -1,5 +1,5 @@
---
-import Container from "@components/Container.astro";
+import Container from "@/components/Container.astro";
---
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index c43b85d..9306970 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,10 +1,11 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import TopLayout from "@layouts/TopLayout.astro";
-import BottomLayout from "@layouts/BottomLayout.astro";
-import ArticleTopLayout from "@layouts/ArticleTopLayout.astro";
-import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
+import ArticleTopLayout from "@/layouts/ArticleTopLayout.astro";
+import ArticleBottomLayout from "@/layouts/ArticleBottomLayout.astro";
+import ArticleContent from "@/components/ArticleContent.astro";
// Create the static blog pages
export async function getStaticPaths() {
@@ -12,7 +13,7 @@ export async function getStaticPaths() {
return posts
.filter((post) => !post.data.draft)
.map((post) => ({
- params: { slug: post.slug },
+ params: { slug: post.id },
props: post,
}));
}
@@ -26,13 +27,14 @@ const { title, summary } = post.data;
+
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index ea78f1f..556c0ca 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,23 +1,23 @@
---
import { getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import TopLayout from "@layouts/TopLayout.astro";
-import BottomLayout from "@layouts/BottomLayout.astro";
-import Blog from "@components/Blog";
-import { BLOG } from "@consts";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
+import { BLOG } from "@/consts";
+import Blog from "@/components/Blog";
const posts = (await getCollection("blog"))
.filter((post) => !post.data.draft)
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const tags = [...new Set(posts.flatMap((post) => post.data.tags))].sort(
- (a, b) => a.localeCompare(b)
+ (a, b) => a.localeCompare(b),
);
---
-
+
{BLOG.TITLE}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ffd8290..3e6f440 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,9 @@
---
import { getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import ArrowCard from "@components/ArrowCard";
-import StackCard from "@components/StackCard.astro";
-import { SITE, SOCIALS } from "@consts";
-import TwinklingStars from "@components/TwinklingStars.astro";
-import MeteorShower from "@components/MeteorShower.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
+import ArrowCard from "@/components/ArrowCard";
+import StackCard from "@/components/StackCard.astro";
+import { SITE, SOCIALS } from "@/consts";
const posts = (await getCollection("blog"))
.filter((post) => !post.data.draft)
@@ -20,65 +18,41 @@ const projects = (await getCollection("projects"))
const stack = [
{
text: "Astro",
- icon: "astro",
+ icon: "material-icon-theme:astro",
href: "https://astro.build",
},
{
text: "Javascript",
- icon: "javascript",
+ icon: "devicon:javascript",
href: "https://www.javascript.com",
},
{
text: "Typescript",
- icon: "typescript",
+ icon: "devicon:typescript",
href: "https://www.typescriptlang.org",
},
{
text: "Tailwind",
- icon: "tailwind",
+ icon: "devicon:tailwindcss",
href: "https://tailwindcss.com",
},
];
---
-
-
-
-
-
-
-
-
-
-
-
-
+
Computer Science Student
@@ -116,13 +90,13 @@ const stack = [
>
Read my blog
View my work
@@ -132,7 +106,7 @@ const stack = [
-
+
@@ -142,16 +116,22 @@ const stack = [
a cli-tool. I am motivated by challenging projects where
I have to research and learn new concepts.
- Now
+ Now
- I currently study computer science at
+ I am currently pursuing a Master's degree in Computer
+ Science at
Paderborn University
- with economics as my minor subject, while also getting a
- peek at electrical engineering & maths in my regular subject.
+ rel="noopener noreferrer"
+ class="font-departure">Paderborn University. During my bachelor's program, I gained insight into
+ electrical engineering and mathematics. Through
+ extracurricular studies, I have learned about economics.
+ In the master's program, I can take a broader variety of
+ courses, including quantum computation, security,
+ machine learning, and lesser-known fields such as
+ knowledge representation.
@@ -160,7 +140,9 @@ const stack = [
-
-
-
-
- Website build with
-
-
- {
- stack.map((item) => (
-
- ))
- }
-
-
-
diff --git a/src/pages/open-graph/[...route].ts b/src/pages/open-graph/[...route].ts
index b14ceaa..e94cc38 100644
--- a/src/pages/open-graph/[...route].ts
+++ b/src/pages/open-graph/[...route].ts
@@ -6,26 +6,26 @@ const projects = Object.fromEntries(
(await getCollection("projects"))
.filter((project) => !project.data.draft)
.map((project) => [
- "projects/" + project.slug,
+ "projects/" + project.id,
{
title: project.data.title,
description: project.data.summary,
},
- ])
+ ]),
);
const blogs = Object.fromEntries(
(await getCollection("blog"))
.filter((blog) => !blog.data.draft)
.map((blog) => [
- "blog/" + blog.slug,
+ "blog/" + blog.id,
{
title: blog.data.title,
description: blog.data.summary,
},
- ])
+ ]),
);
-export const { getStaticPaths, GET } = OGImageRoute({
+export const { getStaticPaths, GET } = await OGImageRoute({
param: "route",
// A collection of pages to generate images for.
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index dc0eaea..8c534dd 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -1,10 +1,11 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import TopLayout from "@layouts/TopLayout.astro";
-import BottomLayout from "@layouts/BottomLayout.astro";
-import ArticleTopLayout from "@layouts/ArticleTopLayout.astro";
-import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
+import ArticleTopLayout from "@/layouts/ArticleTopLayout.astro";
+import ArticleBottomLayout from "@/layouts/ArticleBottomLayout.astro";
+import ArticleContent from "@/components/ArticleContent.astro";
// Create the static projects pages
export async function getStaticPaths() {
@@ -12,7 +13,7 @@ export async function getStaticPaths() {
return projects
.filter((project) => !project.data.draft)
.map((project) => ({
- params: { slug: project.slug },
+ params: { slug: project.id },
props: project,
}));
}
@@ -26,13 +27,14 @@ const { title, summary } = project.data;
+
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 445e169..2cdd067 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -1,10 +1,10 @@
---
import { getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import TopLayout from "@layouts/TopLayout.astro";
-import BottomLayout from "@layouts/BottomLayout.astro";
-import Projects from "@components/Projects";
-import { PROJECTS } from "@consts";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
+import Projects from "@/components/Projects";
+import { PROJECTS } from "@/consts";
const projects = (await getCollection("projects"))
.filter((project) => !project.data.draft)
@@ -17,7 +17,7 @@ const tags = [
-
+
{PROJECTS.TITLE}
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
index 67e86a7..933d206 100644
--- a/src/pages/rss.xml.ts
+++ b/src/pages/rss.xml.ts
@@ -1,6 +1,6 @@
import rss from "@astrojs/rss";
import { getCollection } from "astro:content";
-import { SITE } from "@consts";
+import { SITE } from "@/consts";
type Context = {
site: string;
@@ -17,24 +17,27 @@ export async function GET(context: Context) {
}));
const items = [...posts, ...projects].filter(
- ({ item }) => !item.data.draft
+ ({ item }) => !item.data.draft,
);
items.sort(
(a, b) =>
new Date(b.item.data.date).getTime() -
- new Date(a.item.data.date).getTime()
+ new Date(a.item.data.date).getTime(),
);
return rss({
- title: SITE.TITLE,
+ title: `${SITE.TITLE} - ${SITE.AUTHOR}`,
description: SITE.DESCRIPTION,
site: context.site,
+ stylesheet: "/rss-style.xsl",
items: items.map(({ item, pre }) => ({
title: item.data.title,
description: item.data.summary,
+ author: SITE.AUTHOR,
pubDate: item.data.date,
- link: `/${pre}/${item.slug}/`,
+ link: `/${item.collection}/${item.id}/`,
+ customData: `
${item.collection}`,
})),
});
}
diff --git a/src/pages/search/index.astro b/src/pages/search/index.astro
index 136d0e1..33a0d71 100644
--- a/src/pages/search/index.astro
+++ b/src/pages/search/index.astro
@@ -1,15 +1,15 @@
---
import { type CollectionEntry, getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import TopLayout from "@layouts/TopLayout.astro";
-import BottomLayout from "@layouts/BottomLayout.astro";
-import Search from "@components/Search";
-import { SEARCH } from "@consts";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
+import Search from "@/components/Search";
+import { SEARCH } from "@/consts";
const posts = (await getCollection("blog")).filter((post) => !post.data.draft);
const projects = (await getCollection("projects")).filter(
- (post) => !post.data.draft
+ (post) => !post.data.draft,
);
const data = [...posts, ...projects] as CollectionEntry<"blog">[];
@@ -17,7 +17,7 @@ const data = [...posts, ...projects] as CollectionEntry<"blog">[];
-
+
{SEARCH.TITLE}
diff --git a/src/pages/work/index.astro b/src/pages/work/index.astro
index f6d6705..1a9109f 100644
--- a/src/pages/work/index.astro
+++ b/src/pages/work/index.astro
@@ -1,23 +1,23 @@
---
-import { getCollection } from "astro:content";
-import PageLayout from "@layouts/PageLayout.astro";
-import TopLayout from "@layouts/TopLayout.astro";
-import BottomLayout from "@layouts/BottomLayout.astro";
-import { WORK } from "@consts";
+import { getCollection, render } from "astro:content";
+import PageLayout from "@/layouts/PageLayout.astro";
+import TopLayout from "@/layouts/TopLayout.astro";
+import BottomLayout from "@/layouts/BottomLayout.astro";
+import { WORK } from "@/consts";
const collection = await getCollection("work");
collection.sort(
(a, b) =>
new Date(b.data.dateStart).getTime() -
- new Date(a.data.dateStart).getTime()
+ new Date(a.data.dateStart).getTime(),
);
const work = await Promise.all(
collection.map(async (item) => {
- const { Content } = await item.render();
+ const { Content } = await render(item);
return { ...item, Content };
- })
+ }),
);
function formatWorkDate(input: Date | string) {
@@ -43,14 +43,14 @@ function formatWorkDate(input: Date | string) {
{
work.map((entry) => (
-
+
{formatWorkDate(entry.data.dateStart)} -{" "}
{formatWorkDate(entry.data.dateEnd)}
-
+
{entry.data.company}
-
+
{entry.data.role}
diff --git a/src/styles/global.css b/src/styles/global.css
index 8baa589..2237427 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,148 +1,101 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@config "../../tailwind.config.js";
@layer base {
@font-face {
- font-family: "Atkinson";
- src: url("/fonts/atkinson-regular.woff") format("woff");
+ font-family: "DepartureMono";
+ src: url("/fonts/DepartureMono-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
- font-family: "Atkinson";
- src: url("/fonts/atkinson-bold.woff") format("woff");
+ font-family: "FiraCode";
+ src: url("/fonts/FiraCode-Regular.woff") format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ @font-face {
+ font-family: "FiraCode";
+ src: url("/fonts/FiraCode-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
-}
-html {
- overflow-y: scroll;
- color-scheme: light;
- background-color: white;
- font-family: "Atkinson", sans-serif;
-}
-
-html.dark {
- color-scheme: dark;
- background-color: black;
-}
-
-html,
-body {
- @apply h-full w-full antialiased;
- @apply bg-white dark:bg-black;
- @apply text-black/75 dark:text-white/75;
-}
-
-body {
- @apply relative flex flex-col;
-}
-
-main {
- @apply flex flex-col flex-1 bg-white dark:bg-black;
-}
-
-header {
- @apply border-b;
- @apply transition-all duration-300 ease-in-out;
-}
-
-header:not(.scrolled) {
- @apply bg-transparent border-transparent;
-}
-
-header.scrolled {
- @apply bg-white/75 dark:bg-black/50;
- @apply border-black/10 dark:border-white/25;
- @apply backdrop-blur-sm saturate-200;
-}
-
-article {
- @apply prose dark:prose-invert max-w-full pb-12;
-}
-
-.page-heading {
- @apply font-semibold text-black dark:text-white;
-}
-
-.blend {
- @apply transition-all duration-300 ease-in-out;
-}
-
-/** Light theme particles on home page */
-@keyframes animateParticle {
- from {
- transform: translateY(0px);
+ html {
+ overflow-y: scroll;
+ color-scheme: light;
+ background-color: oklch(87.1% 0.006 286.286);
+ font-family: "FiraCode", monospace;
}
- to {
- transform: translateY(-2000px);
+
+ html.dark {
+ color-scheme: dark;
+ background-color: oklch(21% 0.006 285.885);
}
-}
-/** styles for public /animation.js */
-.animate {
- opacity: 0;
- transform: translateY(50px);
- transition: opacity 1s ease, transform 1s ease;
-}
+ html,
+ body {
+ @apply h-full w-full antialiased;
+ @apply bg-white dark:bg-zinc-900;
+ @apply text-black/75 dark:text-white/75;
+ }
-.animate.show {
- opacity: 1;
- transform: translateY(0);
-}
+ body {
+ @apply relative flex flex-col;
+ }
-article img {
- padding-top: 20px;
- padding-bottom: 20px;
- display: block;
- margin: 0 auto;
-}
+ main {
+ @apply flex flex-col flex-1 bg-zinc-300 dark:bg-zinc-900;
+ }
-/**
- * TWINKLE STARS
- */
+ header {
+ @apply border-b;
+ @apply transition-all duration-300 ease-in-out;
+ }
-#twinkle-star.template {
- @apply absolute -left-full; /* hide offscreen */
-}
+ header:not(.scrolled) {
+ @apply bg-transparent border-transparent;
+ }
-#twinkle-star.twinkle {
- @apply animate-twinkle; /* defined in tailwind.config */
-}
+ header.scrolled {
+ @apply bg-zinc-200/75 dark:bg-zinc-950/50;
+ @apply border-black/10 dark:border-white/25;
+ @apply backdrop-blur-sm saturate-200;
+ }
-/**
- * Meteors
- */
+ article {
+ @apply prose dark:prose-invert max-w-full pb-12;
+ }
-#meteors .shower {
- @apply absolute inset-0 top-0;
- @apply left-1/2 -translate-x-1/2;
- @apply w-screen aspect-square;
-}
+ .page-heading {
+ @apply font-semibold text-black dark:text-white;
+ }
-#meteors .meteor {
- @apply animate-meteor; /* defined in tailwind.config */
- @apply absolute top-1/2 left-1/2 w-px h-[75vh];
- @apply bg-gradient-to-b from-white to-transparent;
-}
+ .blend {
+ @apply transition-all duration-300 ease-in-out;
+ }
-#meteors .shower.ur {
- @apply rotate-45;
-}
+ .animate {
+ opacity: 0;
+ transform: translateY(5px);
+ transition: opacity 1s ease, transform 1s ease;
+ }
-#meteors .shower.dr {
- @apply rotate-135;
-}
+ .animate.show {
+ opacity: 1;
+ transform: translateY(0);
+ }
-#meteors .shower.dl {
- @apply rotate-225;
-}
-
-#meteors .shower.ul {
- @apply rotate-315;
-}
+ article img {
+ padding-top: 20px;
+ padding-bottom: 20px;
+ display: block;
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..4e48828
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,33 @@
+import defaultTheme from "tailwindcss/defaultTheme";
+import typography from "@tailwindcss/typography";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ darkMode: ["class"],
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+ safelist: [
+ "font-departure"
+ ],
+ theme: {
+ extend: {
+ fontFamily: {
+ mono: ['"FiraCode"', ...defaultTheme.fontFamily.mono],
+ departure: ['"DepartureMono"', ...defaultTheme.fontFamily.mono],
+ },
+ typography: {
+ DEFAULT: {
+ css: {
+ maxWidth: "full",
+ },
+ },
+ },
+ rotate: {
+ 45: "45deg",
+ 135: "135deg",
+ 225: "225deg",
+ 315: "315deg",
+ },
+ },
+ },
+ plugins: [typography],
+};
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
deleted file mode 100644
index 3ecca04..0000000
--- a/tailwind.config.mjs
+++ /dev/null
@@ -1,62 +0,0 @@
-import defaultTheme from "tailwindcss/defaultTheme";
-import typography from "@tailwindcss/typography";
-
-/** @type {import('tailwindcss').Config} */
-export default {
- darkMode: ["class"],
- content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
- theme: {
- extend: {
- fontFamily: {
- sans: ["Atkinson", ...defaultTheme.fontFamily.sans],
- },
- typography: {
- DEFAULT: {
- css: {
- maxWidth: "full",
- },
- },
- },
- rotate: {
- 45: "45deg",
- 135: "135deg",
- 225: "225deg",
- 315: "315deg",
- },
- animation: {
- twinkle: "twinkle 2s ease-in-out forwards",
- meteor: "meteor 3s ease-in-out forwards",
- },
- keyframes: {
- twinkle: {
- "0%": {
- opacity: 0,
- transform: "rotate(0deg)",
- },
- "50%": {
- opacity: 1,
- transform: "rotate(180deg)",
- },
- "100%": {
- opacity: 0,
- transform: "rotate(360deg)",
- },
- },
- meteor: {
- "0%": {
- opacity: 0,
- transform: "translateY(200%)",
- },
- "50%": {
- opacity: 1,
- },
- "100%": {
- opacity: 0,
- transform: "translateY(0)",
- },
- },
- },
- },
- },
- plugins: [typography],
-};
diff --git a/tsconfig.json b/tsconfig.json
index 09d8843..431f871 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"strictNullChecks": true,
"baseUrl": ".",
"paths": {
- "@*": ["src/*"]
+ "@/*": ["src/*"]
},
"jsx": "preserve",
"jsxImportSource": "solid-js"