diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 5e14597..42c8451 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -13,64 +13,67 @@ const { title, description, pubDate, updatedDate, heroImage, readingTime } = --- -
-
- {heroImage && } -
-
-
-
- +
+ { + heroImage && ( +
+ +
+ ) + } + +
+
+
+ + { updatedDate && ( -
+
Last updated on
) }
-

{title}

-

{readingTime}

-
+ +

+ {title} +

+ +
+ + + + + {readingTime} min read + +
+ +
+
+ +
+
-
- - diff --git a/src/pages/index.astro b/src/pages/index.astro index f09fd02..22a1a6f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,55 +4,54 @@ import BaseLayout from "../layouts/BaseLayout.astro"; --- -

Hi, my name is Alex!

-

- I am a software engineer, Linux enthusiast and a friend of lightweight, - resilient systems. -

-

- My journey in the tech world has been a dynamic one. I've immersed - myself in countless projects spanning various video games and, for the - past few years, have been maintaining a small homelab, which ignited my - passion for DevOps / SRE. I am a privacy enthusiast and advocate for - non-invasive software. Occasionally, I channel my creativity into - building sleek web applications that prioritize efficiency and adhere to - web standards and best practices. -

-

- I currently work as a software engineer at TV1 GmbH, a company that provides innovative live streaming and communication - solutions. In my free time, I am pursuing my Master's degree in computer - science at TUM, where I - contribute to various research papers. -

+

Hi, my name is Alex!

+

+ I am a software engineer, Linux enthusiast and a friend of lightweight, + resilient systems. +

+

+ My journey in the tech world has been a dynamic one. I've immersed myself in + countless projects spanning various video games and, for the past few years, + have been maintaining a small homelab, which ignited a passion for + automating infrastructure. I am a privacy enthusiast and advocate for + non-invasive software. Occasionally, I channel my creativity into building + sleek web applications that prioritize efficiency and adhere to web + standards and best practices. +

+

+ I currently work as a software engineer at TV1 GmbH, a company that provides innovative live streaming and communication + solutions. Soon, I will have finished a Master's degree in computer science + at TUM, where I contribute to + various research papers. +

-

Skills

- -
-
- Core stack:
- Typescript/Node.js, Python, Rust, SQL, vanilla HTML/css -
- -
- Frontend:
- NextJS, SvelteKit, Astro, Tailwind -
- -
- Ops:
- Prometheus, Docker, Kubernetes, AWS, Github/lab actions -
- -
- Misc:
- git, agile, REST, GraphQL, web performance, Linux sysadmin, Vitest -
- -
- Languages:
- German (native), English -
+

Skills

+
+
+ Core stack:
+ Typescript/Node.js, Python, Rust, SQL, vanilla HTML/css
+ +
+ Frontend:
+ NextJS, SvelteKit, Astro, Tailwind +
+ +
+ Ops:
+ Prometheus, Docker, Kubernetes, AWS, Github/lab actions +
+ +
+ Misc:
+ git, agile, REST, GraphQL, web performance, Linux sysadmin, Vitest +
+ +
+ Languages:
+ German (native), English +
+
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/global.css b/src/styles/global.css index 1cac0c9..c6fe349 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,3 +1,40 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-h1-mobile md:text-h1; + } + h2 { + @apply text-h2-mobile md:text-h2; + } + h3 { + @apply text-h3-mobile md:text-h3; + } + h4 { + @apply text-h4-mobile md:text-h4; + } + h5 { + @apply text-h5-mobile md:text-h5; + } + h6 { + @apply text-h6-mobile md:text-h6; + } + h1, + h2, + h3, + h4, + h5, + h6 { + @apply mb-4; + } + + body { + @apply text-lg md:text-xl; + } +} + /* The CSS in this style tag is based off of Bear Blog's default CSS. https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css @@ -12,34 +49,9 @@ body { background-size: 100% 600px; word-wrap: break-word; overflow-wrap: break-word; - font-size: 20px; line-height: 1.7; } -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0.5rem 0 0.5rem 0; - line-height: 1.2; -} -h1 { - font-size: 3.052em; -} -h2 { - font-size: 2.441em; -} -h3 { - font-size: 1.953em; -} -h4 { - font-size: 1.563em; -} -h5 { - font-size: 1.25em; -} strong, b { font-weight: 700; diff --git a/tailwind.config.mjs b/tailwind.config.mjs index af714ba..8a5a3fc 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -4,6 +4,23 @@ export default { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: { + fontSize: { + // Mobile sizes + "h1-mobile": ["2rem", { lineHeight: "1.2" }], // 32px + "h2-mobile": ["1.75rem", { lineHeight: "1.2" }], // 28px + "h3-mobile": ["1.5rem", { lineHeight: "1.2" }], // 24px + "h4-mobile": ["1.25rem", { lineHeight: "1.2" }], // 20px + "h5-mobile": ["1.1rem", { lineHeight: "1.2" }], // 17.6px + "h6-mobile": ["1rem", { lineHeight: "1.2" }], // 16px + + // Desktop sizes + h1: ["3rem", { lineHeight: "1.2" }], + h2: ["2.7rem", { lineHeight: "1.2" }], + h3: ["2.25rem", { lineHeight: "1.2" }], + h4: ["2rem", { lineHeight: "1.2" }], + h5: ["1.75rem", { lineHeight: "1.2" }], + h6: ["1.5rem", { lineHeight: "1.2" }], + }, colors: { mytheme: { 50: "#ecfcfb",