polishing pass

.github/workflows/release-image.yml

@@ -2,10 +2,8 @@ name: release-image
 
 on:
   push:
-    branches:
-      - main
     tags:        
-      - 6.*
+      - 0.*
 
 env:
   REGISTRY: ghcr.io

.gitignore

@@ -22,3 +22,6 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# vscode workspace
+site-profile.code-workspace

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20.16.0-alpine3.20 AS base
 
-LABEL version="0.1.2"
+LABEL version="0.2.0"
 LABEL description="Astro based website to use as a profile"
 
 ENV PNPM_HOME="/pnpm"

astro.config.mjs

@@ -2,9 +2,8 @@ import { defineConfig } from 'astro/config';
 
 import node from "@astrojs/node";
 
-// https://astro.build/config
 export default defineConfig({
-  output: "server",
+  output: "hybrid",
   adapter: node({
     mode: "standalone"
   })

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "",
+  "name": "site-profile",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.3",
     "@astrojs/node": "^8.3.3",
+    "@directus/sdk": "^17.0.0",
     "astro": "^4.14.2",
     "typescript": "^5.5.4"
   }

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@astrojs/node':
         specifier: ^8.3.3
         version: 8.3.3(astro@4.14.2(rollup@4.21.0)(typescript@5.5.4))
+      '@directus/sdk':
+        specifier: ^17.0.0
+        version: 17.0.0
       astro:
         specifier: ^4.14.2
         version: 4.14.2(rollup@4.21.0)(typescript@5.5.4)
@@ -161,6 +164,10 @@ packages:
     resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
     engines: {node: '>=6.9.0'}
 
+  '@directus/sdk@17.0.0':
+    resolution: {integrity: sha512-ADKoFrLjWPVVsYNK0EffVFstl/ZHVaQbiUp4NCueKfvFaOSLQ16xSVNj5O//rP5+rU8t1HkjwC6JDh02rao7ZQ==}
+    engines: {node: '>=18.0.0'}
+
   '@emmetio/abbreviation@2.3.3':
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
 
@@ -2226,6 +2233,8 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@directus/sdk@17.0.0': {}
+
   '@emmetio/abbreviation@2.3.3':
     dependencies:
       '@emmetio/scanner': 1.0.4

src/components/CallToAction.astro

@@ -32,7 +32,6 @@ const { href } = Astro.props;
 		}
 	}
 
-	/* Overlay for hover effects. */
 	a::after {
 		content: '';
 		position: absolute;

src/components/ContactCTA.astro

@@ -5,7 +5,7 @@ import Icon from './Icon.astro';
 
 <aside>
 	<h2>Interested in working together?</h2>
-	<CallToAction href="mailto:me@example.com">
+	<CallToAction href="mailto:alexander.lebens@gmail.com">
 		Send Me a Message
 		<Icon icon="paper-plane-tilt" size="1.2em" />
 	</CallToAction>

src/components/Footer.astro

@@ -6,17 +6,17 @@ const currentYear = new Date().getFullYear();
 <footer>
 	<div class="group">
 		<p>
-			Designed & Developed in Portland with <a href="https://astro.build/">Astro</a>
+			Designed & Developed in Minnesota with <a href="https://astro.build/">Astro</a>
 			<Icon icon="rocket-launch" size="1.2em" />
 		</p>
-		<p>&copy; {currentYear} Jeanine White</p>
+		<p>&copy; {currentYear} Alex Lebens</p>
 	</div>
 	<p class="socials">
-		<a href="https://twitter.com/me"> Twitter</a>
-		<a href="https://github.com/me"> GitHub</a>
-		<a href="https://codepen.io/me"> CodePen</a>
+		<a href="https://github.com/alexlebens"> GitHub</a>
+		<a href="https://www.linkedin.com/in/alexanderlebens"> LinkedIn</a>
 	</p>
 </footer>
+
 <style>
 	footer {
 		display: flex;

src/components/Grid.astro

@@ -24,7 +24,6 @@ const { variant } = Astro.props;
 		gap: 1.5rem;
 	}
 
-	/* If last row contains only one item, make it span both columns. */
 	.grid.small > :global(:last-child:nth-child(odd)) {
 		grid-column: 1 / 3;
 	}
@@ -40,12 +39,10 @@ const { variant } = Astro.props;
 			padding-bottom: var(--row-offset);
 		}
 
-		/* Shift first item in each row vertically to create staggered effect. */
 		.grid.offset > :global(:nth-child(odd)) {
 			transform: translateY(var(--row-offset));
 		}
 
-		/* If last row contains only one item, display it in the second column. */
 		.grid.offset > :global(:last-child:nth-child(odd)) {
 			grid-column: 2 / 3;
 			transform: none;

src/components/MainHead.astro

@@ -7,8 +7,8 @@ interface Props {
 }
 
 const {
-	title = 'Jeanine White: Personal Site',
-	description = 'The personal site of Jeanine White',
+	title = 'Alex Lebens',
+	description = 'The personal site of Alex Lebens',
 } = Astro.props;
 ---
 
@@ -26,7 +26,6 @@ const {
 	rel="stylesheet"
 />
 <script is:inline>
-	// This code is inlined in the head to make dark mode instant & blocking.
 	const getThemePreference = () => {
 		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
 			return localStorage.getItem('theme');
@@ -37,7 +36,6 @@ const {
 	document.documentElement.classList[isDark ? 'add' : 'remove']('theme-dark');
 
 	if (typeof localStorage !== 'undefined') {
-		// Watch the document element and persist user preference when it changes.
 		const observer = new MutationObserver(() => {
 			const isDark = document.documentElement.classList.contains('theme-dark');
 			localStorage.setItem('theme', isDark ? 'dark' : 'light');

src/components/Nav.astro

@@ -3,21 +3,15 @@ import Icon from './Icon.astro';
 import ThemeToggle from './ThemeToggle.astro';
 import type { iconPaths } from './IconPaths';
 
-/** Main menu items */
 const textLinks: { label: string; href: string }[] = [
 	{ label: 'Home', href: '/' },
 	{ label: 'Work', href: '/work/' },
 	{ label: 'About', href: '/about/' },
 ];
 
-/** Icon links to social media — edit these with links to your profiles! */
 const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[] = [
-	{ label: 'Twitter', href: 'https://twitter.com/me', icon: 'twitter-logo' },
-	{ label: 'Twitch', href: 'https://twitch.tv/me', icon: 'twitch-logo' },
-	{ label: 'GitHub', href: 'https://github.com/me', icon: 'github-logo' },
-	{ label: 'CodePen', href: 'https://codepen.io/me', icon: 'codepen-logo' },
-	{ label: 'dribbble', href: 'https://dribbble.com/me', icon: 'dribbble-logo' },
-	{ label: 'YouTube', href: 'https://www.youtube.com/@me/', icon: 'youtube-logo' },
+	{ label: 'GitHub', href: 'https://github.com/alexlebens', icon: 'github-logo' },
+	{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/alexanderlebens', icon: 'linkedin-logo' },
 ];
 ---
 
@@ -25,7 +19,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 	<div class="menu-header">
 		<a href="/" class="site-title">
 			<Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient />
-			Jeanine White
+			Alex Lebens
 		</a>
 		<menu-button>
 			<template>
@@ -121,26 +115,20 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 		constructor() {
 			super();
 
-			// Inject menu toggle button when JS runs.
 			this.appendChild(this.querySelector('template')!.content.cloneNode(true));
 			const btn = this.querySelector('button')!;
 
-			// Hide menu (shown by default to support no-JS browsers).
 			const menu = document.getElementById('menu-content')!;
 			menu.hidden = true;
-			// Add "menu-content" class in JS to avoid covering content in non-JS browsers.
 			menu.classList.add('menu-content');
 
-			/** Set whether the menu is currently expanded or collapsed. */
 			const setExpanded = (expand: boolean) => {
 				btn.setAttribute('aria-expanded', expand ? 'true' : 'false');
 				menu.hidden = !expand;
 			};
 
-			// Toggle menu visibility when the menu button is clicked.
 			btn.addEventListener('click', () => setExpanded(menu.hidden));
 
-			// Hide menu button for large screens.
 			const handleViewports = (e: MediaQueryList | MediaQueryListEvent) => {
 				setExpanded(e.matches);
 				btn.hidden = e.matches;

src/components/ThemeToggle.astro

@@ -74,16 +74,13 @@ import Icon from './Icon.astro';
 
 			const button = this.querySelector('button')!;
 
-			/** Set the theme to dark/light mode. */
 			const setTheme = (dark: boolean) => {
 				document.documentElement.classList[dark ? 'add' : 'remove']('theme-dark');
 				button.setAttribute('aria-pressed', String(dark));
 			};
 
-			// Toggle the theme when a user clicks the button.
 			button.addEventListener('click', () => setTheme(!this.isDark()));
 
-			// Initialize button state to reflect current theme.
 			setTheme(this.isDark());
 		}
 

src/layouts/BaseLayout.astro

@@ -1,8 +1,4 @@
 ---
-// Learn about using Astro layouts:
-// https://docs.astro.build/en/core-concepts/layouts/
-
-// Component Imports
 import MainHead from '../components/MainHead.astro';
 import Nav from '../components/Nav.astro';
 import Footer from '../components/Footer.astro';
@@ -27,7 +23,6 @@ const { title, description } = Astro.props;
 		</div>
 
 		<script>
-			// Add “loaded” class once the document has completely loaded.
 			addEventListener('load', () => document.documentElement.classList.add('loaded'));
 		</script>
 
@@ -54,13 +49,12 @@ const { title, description } = Astro.props;
 				--bg-blend-mode: lighten;
 			}
 
-			/* These backgrounds are displayed below the fold, so we lazy load them
-			   once the `.loaded` class has been set.  */
 			:root.loaded {
 				--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-light-800w.jpg');
 				--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-800w.jpg');
 				--bg-image-footer: url('/assets/backgrounds/bg-footer-light-800w.jpg');
 			}
+
 			:root.loaded.theme-dark {
 				--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-800w.jpg');
 				--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-800w.jpg');
@@ -72,6 +66,7 @@ const { title, description } = Astro.props;
 					--bg-scale: 1;
 					--bg-image-main: url('/assets/backgrounds/bg-main-light-1440w.jpg');
 				}
+
 				:root.theme-dark {
 					--bg-image-main: url('/assets/backgrounds/bg-main-dark-1440w.jpg');
 				}
@@ -81,6 +76,7 @@ const { title, description } = Astro.props;
 					--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-1440w.jpg');
 					--bg-image-footer: url('/assets/backgrounds/bg-footer-light-1440w.jpg');
 				}
+
 				:root.loaded.theme-dark {
 					--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-1440w.jpg');
 					--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-1440w.jpg');
@@ -92,21 +88,20 @@ const { title, description } = Astro.props;
 				min-height: 100%;
 				isolation: isolate;
 				background:
-					/*noise*/
 					url('/assets/backgrounds/noise.png') top center/220px repeat,
-					/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
-					/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
-					/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
-					/*base*/ var(--gray-999);
-				background-blend-mode: /*noise*/
+					var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
+					var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
+					var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
+					var(--gray-999);
+				background-blend-mode:
 					overlay,
-					/*footer*/ var(--bg-blend-mode),
-					/*header1*/ var(--bg-svg-blend-mode),
-					/*header2*/ normal,
-					/*base*/ normal;
+					var(--bg-blend-mode),
+					var(--bg-svg-blend-mode),
+					normal,
+					normal;
 			}
+
 			@media (forced-colors: active) {
-				/* Deactivate custom backgrounds for high contrast users. */
 				.backgrounds {
 					background: none;
 					background-blend-mode: none;

src/pages/about.astro

@@ -5,7 +5,7 @@ import ContactCTA from '../components/ContactCTA.astro';
 import Hero from '../components/Hero.astro';
 ---
 
-<BaseLayout title="About | Jeanine White" description="About Jeanine White Lorem Ipsum">
+<BaseLayout title="About | Alex Lebens" description="About Alex Lebens">
 	<div class="stack gap-20">
 		<main class="wrapper about">
 			<Hero
@@ -15,8 +15,8 @@ import Hero from '../components/Hero.astro';
 				<img
 					width="1553"
 					height="873"
-					src="/assets/at-work.jpg"
-					alt="Jeanine White at work with a colleague"
+					src="/assets/hiking.jpg"
+					alt="Alex Lebens hiking in Texas"
 				/>
 			</Hero>
 

src/pages/index.astro

@@ -1,10 +1,8 @@
 ---
 import { getCollection } from 'astro:content';
 
-// Layout import — provides basic page elements: <head>, <nav>, <footer> etc.
 import BaseLayout from '../layouts/BaseLayout.astro';
 
-// Component Imports
 import CallToAction from '../components/CallToAction.astro';
 import Grid from '../components/Grid.astro';
 import Hero from '../components/Hero.astro';
@@ -12,17 +10,12 @@ import Icon from '../components/Icon.astro';
 import Pill from '../components/Pill.astro';
 import PortfolioPreview from '../components/PortfolioPreview.astro';
 
-// Page section components
 import ContactCTA from '../components/ContactCTA.astro';
 import Skills from '../components/Skills.astro';
 
-// Content Fetching: List four most recent work projects
 const projects = (await getCollection('work'))
 	.sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
 	.slice(0, 4);
-
-// Full Astro Component Syntax:
-// https://docs.astro.build/basics/astro-components/
 ---
 
 <BaseLayout>
@@ -30,8 +23,8 @@ const projects = (await getCollection('work'))
 		<div class="wrapper stack gap-8 lg:gap-20">
 			<header class="hero">
 				<Hero
-					title="Hello, my name is Jeanine White"
-					tagline="I am a Creative Developer who is currently based in Portland, Oregon."
+					title="Hello, my name is Alex Lebens"
+					tagline="I am a Cloud Engineer who is currently based in St. Paul, Minnesota."
 					align="start"
 				>
 					<div class="roles">
@@ -42,7 +35,7 @@ const projects = (await getCollection('work'))
 				</Hero>
 
 				<img
-					alt="Jeanine White smiling in a red plaid shirt and tortoise shell glasses"
+					alt="Alex Lebens in Antarctica"
 					width="480"
 					height="620"
 					src="/assets/portrait.jpg"
@@ -56,7 +49,7 @@ const projects = (await getCollection('work'))
 			<section class="section with-background with-cta">
 				<header class="section-header stack gap-2 lg:gap-4">
 					<h3>Selected Work</h3>
-					<p>Take a look below at some of my featured work for clients from the past few years.</p>
+					<p>Take a look below at some of my featured work from the past few years.</p>
 				</header>
 
 				<div class="gallery">
@@ -147,8 +140,6 @@ const projects = (await getCollection('work'))
 		}
 	}
 
-	/* ====================================================== */
-
 	.section {
 		display: grid;
 		gap: 2rem;
@@ -228,8 +219,6 @@ const projects = (await getCollection('work'))
 		}
 	}
 
-	/* ====================================================== */
-
 	.mention-card {
 		display: flex;
 		height: 7rem;

src/pages/work.astro

@@ -14,8 +14,8 @@ const projects = (await getCollection('work')).sort(
 ---
 
 <BaseLayout
-	title="My Work | Jeanine White"
-	description="Learn about Jeanine White's most recent projects"
+	title="My Work | Alex Lebens"
+	description="Learn about Alex Lebens's most recent projects"
 >
 	<div class="stack gap-20">
 		<main class="wrapper stack gap-8">

src/pages/work/[...slug].astro

@@ -12,9 +12,6 @@ interface Props {
 	entry: CollectionEntry<'work'>;
 }
 
-// This is a dynamic route that generates a page for every Markdown file in src/content/
-// Read more about dynamic routes and this `getStaticPaths` function in the Astro docs:
-// https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
 export async function getStaticPaths() {
 	const work = await getCollection('work');
 	return work.map((entry) => ({

src/styles/global.css

@@ -1,6 +1,4 @@
-/* Global variables */
 :root {
-	/* Colors */
 	--gray-0: #090b11;
 	--gray-50: #141925;
 	--gray-100: #283044;
@@ -25,7 +23,6 @@
 
 	--link-color: var(--accent-regular);
 
-	/* Gradients */
 	--gradient-stop-1: var(--accent-light);
 	--gradient-stop-2: var(--accent-regular);
 	--gradient-stop-3: var(--accent-dark);
@@ -44,7 +41,6 @@
 	);
 	--gradient-stroke: linear-gradient(180deg, var(--gray-900), var(--gray-700));
 
-	/* Shadows */
 	--shadow-sm: 0px 6px 3px rgba(9, 11, 17, 0.01), 0px 4px 2px rgba(9, 11, 17, 0.01),
 		0px 2px 2px rgba(9, 11, 17, 0.02), 0px 0px 1px rgba(9, 11, 17, 0.03);
 	--shadow-md: 0px 28px 11px rgba(9, 11, 17, 0.01), 0px 16px 10px rgba(9, 11, 17, 0.03),
@@ -52,7 +48,6 @@
 	--shadow-lg: 0px 62px 25px rgba(9, 11, 17, 0.01), 0px 35px 21px rgba(9, 11, 17, 0.05),
 		0px 16px 16px rgba(9, 11, 17, 0.1), 0px 4px 9px rgba(9, 11, 17, 0.12);
 
-	/* Text Sizes */
 	--text-sm: 0.875rem;
 	--text-base: 1rem;
 	--text-md: 1.125rem;
@@ -63,13 +58,11 @@
 	--text-4xl: 3.5rem;
 	--text-5xl: 4.5rem;
 
-	/* Fonts */
 	--font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	--font-body: 'Public Sans', var(--font-system);
 	--font-brand: Rubik, var(--font-system);
 
-	/* Transitions */
 	--theme-transition: 0.2s ease-in-out;
 }
 
@@ -176,8 +169,6 @@ h5 {
 	font-size: var(--text-xl);
 }
 
-/* Utilities */
-
 .sr-only {
 	position: absolute;
 	width: 1px;