alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Projects Activity

convert to use directus

Browse Source
This commit is contained in:
Alex Lebens
2024-08-24 01:23:12 -05:00
parent fd85557d6b
commit 0f5fc27371
21 changed files with 187 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/about.astro
View File

@@ -3,9 +3,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import ContactCTA from '../components/ContactCTA.astro';
import Hero from '../components/Hero.astro';
import directus, { directus_url } from "../../lib/directus"
import { readSingleton } from "@directus/sdk";
const global = await directus.request(readSingleton("global"));
const about = await directus.request(readSingleton("about"));
---
<BaseLayout title="About | Alex Lebens" description="About Alex Lebens">
<BaseLayout title=`About | ${global.name}` description=`About ${global.name}`>
<div class="stack gap-20">
<main class="wrapper about">
<Hero
@@ -15,51 +21,38 @@ import Hero from '../components/Hero.astro';
<img
width="1553"
height="873"
src="/assets/hiking.jpg"
alt="Alex Lebens hiking in Texas"
src=`${directus_url}/assets/${global.about}`
alt=`${global.name} hiking in Texas`
/>
</Hero>
<section>
<h2 class="section-title">Background</h2>
<div class="content">
<p>
Grew up exploring the outdoors just north of the Twin Cities. Now, my passions include tinkering with my homelab,
camping adventures in my Jeep, and hitting the slopes or trails for skiing and hiking. I've also been fortunate
enough to travel extensively, visiting nearly every continent, including Antarctica!
</p>
</div>
<div
class="content"
set:html={about.background}
/>
</section>
<section>
<h2 class="section-title">Expierence</h2>
<div class="content">
<p>
Proudly served 6 years in the US Air Force, gaining valuable experience in Cyber Operations and Reconnaissance
while stationed in Japan, Korea, and Texas.
</p>
<p>
Gained valuable experience working in the heart of Washington, D.C. for several years, including time at AWS.
Relocated to Denver in late 2020 to enjoy the outdoor opportunities Colorado has to offer.
</p>
<p>
Recently returned to my roots in Minnesota and eager to embrace new opportunities and challenges in my home state.
</p>
</div>
</section>
<h2 class="section-title">Experience</h2>
<div
class="content"
set:html={about.experience}
/>
</section>
<section>
<h2 class="section-title">Education</h2>
<div class="content">
<p>Currently completing my B.S. in Cloud Computing at Western Governors University. Excited to graduate in 2025!</p>
</div>
<div
class="content"
set:html={about.education}
/>
</section>
<section>
<h2 class="section-title">Certifications</h2>
<div class="content">
<p>AWS DevOps Engineer</p>
<p>Certified Kubernetes Administrator</p>
<p>Certified Kubernetes Application Developer</p>
<p>CompTIA Cloud+</p>
</div>
<div
class="content"
set:html={about.certifications}
/>
</section>
</main>

42
src/pages/index.astro
View File

@@ -1,6 +1,4 @@
---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import CallToAction from '../components/CallToAction.astro';
@@ -13,35 +11,43 @@ import PortfolioPreview from '../components/PortfolioPreview.astro';
import ContactCTA from '../components/ContactCTA.astro';
import Skills from '../components/Skills.astro';
const projects = (await getCollection('projects'))
.sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
.slice(0, 4);
import directus, { directus_url } from "../../lib/directus"
import { readItems,readSingleton } from "@directus/sdk";
const global = await directus.request(readSingleton("global"));
const posts = await directus.request(
readItems("posts", {
fields: ['*', { author: ['*'] }],
sort: ["-published_date"],
})
);
---
<BaseLayout
title="Home | Alex Lebens"
title=`Home | ${global.name}`
description=""
>
<div class="stack gap-20 lg:gap-48">
<div class="wrapper stack gap-8 lg:gap-20">
<header class="hero">
<Hero
title="Hello, my name is Alex Lebens"
tagline="I am a Cloud Engineer who is currently based in St. Paul, Minnesota."
title=`Hello, my name is ${global.name}`
tagline={global.tagline}
align="start"
>
<div class="roles">
<Pill><Icon icon="hard-drives" size="1.33em" /> Engineer</Pill>
<Pill><Icon icon="hard-drives" size="1.33em" /> Engineer</Pill>
<Pill><Icon icon="code" size="1.33em" /> Developer</Pill>
<Pill><Icon icon="pencil-line" size="1.33em" /> Writer</Pill>
</div>
</Hero>
<img
alt="Alex Lebens in Antarctica"
alt=`${global.name} in Antarctica`
width="480"
height="620"
src="/assets/portrait.jpg"
src=`${directus_url}/assets/${global.portrait}`
/>
</header>
@@ -57,13 +63,13 @@ const projects = (await getCollection('projects'))
<div class="gallery">
<Grid variant="offset">
{
projects.map((project) => (
<li>
<PortfolioPreview project={project} />
</li>
))
}
{
posts.map((post) => (
<li>
<PortfolioPreview posts={post} />
</li>
))
}
</Grid>
</div>

32
src/pages/projects.astro
View File

@@ -1,6 +1,4 @@
---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import ContactCTA from '../components/ContactCTA.astro';
@@ -8,14 +6,22 @@ import PortfolioPreview from '../components/PortfolioPreview.astro';
import Hero from '../components/Hero.astro';
import Grid from '../components/Grid.astro';
const projects = (await getCollection('projects')).sort(
(a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf(),
import directus from "../../lib/directus"
import { readItems,readSingleton } from "@directus/sdk";
const global = await directus.request(readSingleton("global"));
const posts = await directus.request(
readItems("posts", {
fields: ['*', { author: ['*'] }],
sort: ["-published_date"],
})
);
---
<BaseLayout
title="My Projects | Alex Lebens"
description="Learn about Alex Lebens's most recent projects"
title=`My Projects | ${global.name}`
description=`Learn about ${global.name}'s most recent projects`
>
<div class="stack gap-20">
<main class="wrapper stack gap-8">
@@ -25,13 +31,13 @@ const projects = (await getCollection('projects')).sort(
align="start"
/>
<Grid variant="offset">
{
projects.map((project) => (
<li>
<PortfolioPreview project={project} />
</li>
))
}
{
posts.map((post) => (
<li>
<PortfolioPreview posts={post} />
</li>
))
}
</Grid>
</main>
<ContactCTA />

35
src/pages/projects/[...slug].astro → src/pages/projects/[slug].astro
View File

@@ -1,6 +1,4 @@
---
import { type CollectionEntry, getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import ContactCTA from '../../components/ContactCTA.astro';
@@ -8,43 +6,44 @@ import Hero from '../../components/Hero.astro';
import Icon from '../../components/Icon.astro';
import Pill from '../../components/Pill.astro';
interface Props {
entry: CollectionEntry<'projects'>;
}
import directus, { directus_url } from "../../../lib/directus";
import { readItems } from "@directus/sdk";
export async function getStaticPaths() {
const projects = await getCollection('projects');
return projects.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
const posts = await directus.request(readItems("posts", {
fields: ['*', { author: ['*'] }],
}));
return posts.map((post) => ({ params: { slug: post.slug }, props: post }));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
const post = Astro.props;
const published_date: string = new Date(post.published_date).toLocaleDateString();
---
<BaseLayout title={entry.data.title} description={entry.data.description}>
<BaseLayout title={post.title}>
<div class="stack gap-20">
<div class="stack gap-15">
<header>
<div class="wrapper stack gap-2">
<a class="back-link" href="/projects/"><Icon icon="arrow-left" /> Projects</a>
<Hero title={entry.data.title} align="start">
<Hero
title={post.title}
tagline=`Published by ${post.author.name} on ${published_date}`
align="start"
>
<div class="details">
<div class="tags">
{entry.data.tags.map((t) => <Pill>{t}</Pill>)}
{post.tags.map((t) => <Pill>{t}</Pill>)}
</div>
<p class="description">{entry.data.description}</p>
</div>
</Hero>
</div>
</header>
<main class="wrapper">
<div class="stack gap-10 content">
{entry.data.img && <img src={entry.data.img} alt={entry.data.img_alt || ''} />}
{post.image && <img src={`${directus_url}/assets/${post.image}?width=500`} alt={post.image_alt || ''} />}
<div class="content">
<Content />
<div set:html={post.content} />
</div>
</div>
</main>